Cara Meletakan Pita Ucapan Terima Kasih di Akhir Artikel

Pita Ucapan Terima Kasih menandakan kita berterima kasih terhadap pengunjung karena sudah mengunjungi blog kita,di postingan kali ini saya akan berbagi tentang Caranya meletakan Pita Ucapan Terima Kasih di Blog tepatnya pada akhir postingan kalian

Pengen tahu bagaimana tampilan Pita Terima Kasih ini ? Silahkan lihat gambar dibawah

Ya,gambar diatas merupakan Demo dari tutorial yang akan saya bagikan ini,jika kalian ingin melihatnya secara live kalian dapat lihat di akhir postingan di bawah,akan ada Pita berwarna Ungu dengan ucapan Terima Kasih

Ingin tahu caranya ? Silahkan lihat dibawah

Cara Meletakan Pita Ucapan Terima Kasih di Akhir Artikel

1.Buka Blogger
2.Setelah itu klik Template lalu pilih Edit HTML
3.Kemudian,cari ]]></b:skin> copy kode dibawah ini dan paste tepat diatas ]]></b:skin>

.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
    
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.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; }

4.Selanjutnya cari kode <data:post.body/> , dan letak kode dibawah ini , tepat dibawahnya

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

Setelah itu kalian dapat Save Template dan Cek blog kalian masing masing

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.