Cara Membuat Pita dengan CSS di Setiap Artikel Blog

Cara membuat pita dengan CSS di setiap artikel blog - Pita didalam artikel 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 dalam blog, tepatnya pada akhir postingan. Pengen tahu bagaimana tampilan pita dengan CSS? 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 blog sobat yang hobby mempercantik tampilan blog. Ingin tahu caranya ? Silahkan ikuti panduannya dibawah ini. 

Cara Membuat Pita dengan CSS di Setiap Artikel Blog

#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.

Mas Galih

• Share
• Share

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense