(Klik gambar diatas untuk memperbesar)
Hampir semua para blogger memiliki mentor/pembimbing, baik pembimbing secara online maupun offline. Penulis pun demikian. Saya mulai tertarik dan serius mengikuti tutorial blogging atau ngeblog saat menemukan salah satu website yaitu Mybloggertricks.com. Author Mybloggertricks adalah salah satu master blogger yang cukup terkenal di kalangan para blogger. Saya mengikuti sedikit demi sedikit tutorial yang diberikan oleh master Blogger tersebut.
Tutorial kali ini saya akan share ke anda Bagaimana cara menambahkan label pita pada postingan terbaru di blog, meskipun diantara para master Blogger tidak asing lagi dengan tutorial yang akan saya sampaikan.
Tutorial kali ini saya akan share ke anda Bagaimana cara menambahkan label pita pada postingan terbaru di blog, meskipun diantara para master Blogger tidak asing lagi dengan tutorial yang akan saya sampaikan.
Prosedur :
- Masuk ke akun blogger anda -> Klik Template -> Edit HTML
- Biasakan membackup template terlebih dahulu
- Kemudian cari kode / tag ]]></b:skin> (untuk memudahkan pencarian tekan CTRL + F )
- Pastekan kode berikut di bawah ini diatas kode ]]></b:skin>
#first-post{background:#DAD6D6}
.wrapper {
margin: 50px auto;
width: auto;
height: auto;
background: transparent;
border-radius: 10px;
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
- Langkah berikutnya cari kode <b:include data='post' name='post'/> kemudian setelah ketemu ganti kode tersebut dengan kode berikut:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div class='wrapper'>
<div class='ribbon-wrapper-green'><div class='ribbon-green'>NEW</div></div>
<div id='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
- Klik Pratinjau terlebih dahulu, kalau semuanya sudah Ok Simpan Template.
Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 13.09
Kereen sekali mas bro.
BalasHapus@mariyanto widodo Terima kasih banyak atas apresiasi dan kunjungan anda mas mariyanto..Salam.
BalasHapuskunjungan perdana mas... lam kenal dari opic blog
BalasHapus'Alaikassalaam, Salam kenal kembali mas taufik karim..
Hapuswach ini juga lebih keren om (h)
Hapusterima kasih mas imron.. :-)
BalasHapusya sama2 om sebegai rasa trimakasih saya sama om krena udah banyak mengajarkan saya di dunia blogging link blognya om yang jalu-pangna ini sudah saya cantumkan rapi di homepage blog saya om...
Hapussilahkan di chek dan saya berterimakasih sama om atas ilmunya om....
Sudah saya chek and rechek mas. Terima kasih mas imron atas penghargaannya. Sebenarnya saya belum pantes mendapatkan reward dari mas imron karena saya bukan master blogger dan belum profesional seperti yang lain..
Hapuskalau masalah profesional mnurut saya tidak penting om yang penting bagaimana kita mau berbagi dengan orang lain percuma kita banyak ilmu kalau tidak mau berbagi bukankah tidak barokah om,,?
Hapusmenurut sebuah buku yang saya baca c begitu om...hehehehehehe
That's right...thanks a lot..terima kasih banyak mas imron.
Hapussama sama om....
Hapus