Cara Membuat Widget Author Box Keren Di Bawah Postingan

Kali ini ImamMustofa.Com akan share lagi tutorial tentang blog yaitu tentang widget Author Box. Author Box adalah sebuah widget yang berisi tampilan pemilik / admin blog / web, yang akan tampil dibawah postingan. selain itu widget ini otomatis tersambung dengan Google+ sehingga dilengkapi dengan gambar/foto admin seperti yang tampil diblog saya ini dan bisa ditambahkan dengan kata-kata sendiri sesuai yang anda inginkan. contohnya seperti ini :

Bagi anda yang sangat suka menghias blog biar terlihat keren, dan ini sangat menguntungkan bagi anda yang suka axis foto anda bisa memanfaatkan widget ini.

Tertarik untuk mencoba widget ini ? mari ikuti langkah- langkahnya dibawah ini :


Cara Membuat Widget Author Box :

1. Buka akun blogger.

2. Pilih menu template dan klik edit HTML

3. Silahkan letakan kode dibawah ini tepat diatas kode </style> atau ]]></b:skin>

/* Author Box */ .authorboxwrap{background:#fafafa;padding:15px;overflow:hidden;margin-left:-20px;margin-right:-20px;margin-bottom:-21px;border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6} .avatar-container {float:left;margin-right:10px;} .avatar-container img{background:#eee;width:70px;height:auto} .author_description_container h4{font-weight:600;font-size:16px;display:block;margin-bottom:10px} .author_description_container h4 a{color:#333} .author_description_container h4 a:hover{color:#111;text-decoration:underline} .author_description_container p{margin:0 0 10px;color:#333;line-height:normal;font-size:95%}

4. Selanjutnya letakan kode di bawah ini tepat diatas kode </article> 

<b:if cond='data:blog.pageType == "item"'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a href=''> <img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/> </a> </div> <div class='author_description_container'> <h4> <a href='#' rel='author'><data:post.author/></a></h4> <p> <data:post.authorAboutMe/> </p> </div> </div> </div> <div style='clear:both'/> </b:if>

5. Terakhir save template anda dan lihat hasilnya.

Sekian untuk tutorial tentang Cara Membuat Widget Author Box Keren Di Bawah Postingan Blog semoga bermanfaat. salam sukses

Tweet

Subscribe to receive free email updates: