Kali ini mahesa.id akan memberikan cara membuat widget author. Widget ini sangat elegan dan dinamis. Widget ini juga sangat membatu bagi pembaca yang ingin tahu tentang informasi penulis.
Cap cus ajalah,, soalnya saya sedang malas menulis banyak banyak..hehe
Cap cus ajalah,, soalnya saya sedang malas menulis banyak banyak..hehe
Cara Membuat Widget Author Keren
1.masuk Dashboard > Template > Edit HTML > Expand Widget Templates.
2.cari kode ]]></b:skin>
3.Copy dan letakkan CSS di bawah ini sebelum kode ]]></b:skin>
.author-box {background: #F7F7F7; margin: 20px 0 20px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; font-family: Georgia,"Nimbus Roman No9 L",serif;font-size: 15px;font-style: italic;line-height:20px;} .author-box img {background: #FFFFFF; float: left; margin: 0 10px 20px 0; padding: 4px; border: 1px solid #E6E6E6; height:75px; width:70px;} .sub-dd{border: 1px solid rgb(204, 204, 204); padding: 3px; text-align: center; font-size:14px; font-style: italic; font-family: Georgia,"Nimbus Roman No9 L",serif; margin:0 0 25px;}3. cari kode <data:post.body/>
ganti kode tersebut dengan HTML di bawah ini.
<b:if cond='data:blog.pageType == "item"'> <div class='author-box'> <img class='' src='https://3.bp.blogspot.com/-iuM1C61QuOY/WYWCC-dcSII/AAAAAAAACbU/NvRnixm1_rQF-MTpuctjAshFZtn9luoDgCLcBGAs/s1600/WP_20141104_002%2B-%2BCopy.jpg'/> <b>About <a href='Author-Profile-URL'><data:post.author/></a></b> <div>Tulis deskripsi anda disini...<br/> <a href='Author-Profile-URL'>View all posts by <data:post.author/>→</a><br/> </div> </div> - Jika terdapat kode <data:post.body/> lebih dari 2 pilih salah satu yang paling tepat
- Kalian juga bisa menempatkan kode di atas di bawah <b:if cond=’data:blog.pageType == "item"’> di area bawah <data:post.body/> paling akhir.
- pilih yang menurut kalian paling tepat penempatan widget tersebut.
- Ganti url warna merah dengan url gambar kalian
Simpan dan lihat hasilnya….
Happy blogging…
Leave a Reply