Cara Membuat Fitur Ucapan Terima Kasih Otomatis di Artikel Postingan

Pita ucapan terima kasih menandakan bahwa, kita berterima kasih terhadap pengunjung karena sudah mengunjungi blog kita. Di postingan kali ini aku akan berbagi tentang caranya meletakkan pita ucapan terima kasih di blog sobat, tepatnya pada akhir postingan. Pengen tahu bagaimana tampilan pita terima kasih ini ? Silahkan lihat gambar dibawah ini.

Ya, gambar diatas merupakan demo dari tutorial yang akan aku bagikan kali ini. Tak membuat blog sobat lelet, kode ini sungguh efisien buat sobat yang hobby mempercantik tampilan blog. Ingin tahu caranya ? Silahkan ikuti panduannya dibawah ini. 

Cara Meletakan Pita Ucapan Terima Kasih di Akhir Artikel

#1. Buka blogger.
#2. Pilih menu tema.
#3. Pilih edit html.

#4. Kemudian copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

.ribbon {
font-size: 16px !important;
/* Pita ini didasarkan pada sisi font 16px dan ritme vertikal 24px */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Didasarkan pada ritme vertikal 24px. 48px margin bawah - biasanya 24 tetapi pita 'grafik' mengambil 24px sendiri jadi aku gandakan. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }

#5. Selanjutnya copy dan pastekan kode dibawah ini tepat dibawahnya <data:post.body/>

<div class="non-semantic-protector"> 
<h1 class='ribbon'>
<strong class='ribbon-content'>Terima Kasih</strong>
</h1>
</div>

#6. Pilih simpan template dan lihat hasilnya.
#7. Selesai.  

Baca juga : siapa bilang blog kamu jelek part 2.

Pada kode CSS diatas, sobat masih bisa mengedit warna, panjang dan lebar dari pita ucapan. Nah, begitulah kira-kira mempercantik tampilan artikel postingan di blog. Semoga bisa membantu dan bermanfaat. Terima kasih.

Share this post