Membuat Tentang Penulis Dibawah Posting
Membuat Tentang Penulis Dibawah Posting - Sudahkah anda melihat Tentang Penulis dibawah Postingan di Zokufo Tutorial ini? Sudah? Mau tahukah caranya? Sebenarnya banyak cara membuat box itu, tapi dari beberapa cara yang saya coba ada 1 cara ini yang berhasil. Oke mari kita mulai.
Cara Membuat Kotak Admin Di Blogspot :
Cara Membuat Kotak Admin Di Blogspot :
- Login ke akun blogger anda.
- Pilih Rancangan >> Edit HTML, centang Expand template widget.
- Cari kode <div class='post-footer'> pada template.
- Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.
<!-- Kotak Admin --> <b:if cond='data:blog.pageType == "item"'> <div class='admin-tulisan'> <h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4> <div class='kontainer'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjEQSvUi0JJqGtrP_kmgxIYhl0ZCXeX9DUMa0bz-o3hyL-KkO_4EI0LCB-HezxBEVF-QYqp4vcvHYbt_jrfIaOQvIG1SJcI43G5ko2JBvY0pVVhcCwNd8Gvf1JujwjLsvBLlyc1rF-mQ/s220/AVATAR+KU-128.jpg'/> Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://zokufo.blogspot.com/2012/04/membuat-tentang-penulis-dibawah-posting.html' target='_blank'>:: Get this widget ! ::</a></span></p> <div style='clear:both;'/> </div> </div> </b:if> <!-- Kotak Admin --> |
- Kemudian cari kode ]]></b:skin> pada template anda.
- Copy kode dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode tadi tepat dibawah kode <data:post.body/>.
.admin-tulisan{ display:block; width:auto; background:#CFE2E0; border:2px solid #fff; box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial, Sans-Serif; color:#222; } .admin-tulisan .kontainer{padding:5px;} .admin-tulisan h4{ background:#8A9C04; border:none; border-bottom:1px solid #699019; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block; } .admin-tulisan h4 a{color:#FEEA83;} .admin-tulisan img{ width:70px; height:70px; margin:0 10px 0 0; float:left; border:1px solid #954B02; padding:2px; background:#C36702; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; } |
- Ganti Kode yang berwarna merah dengan milik anda.
- Deskripsi Blog Anda = Sesuaikan
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjEQSvUi0JJqGtrP_kmgxIYhl0ZCXeX9DUMa0bz-o3hyL-KkO_4EI0LCB-HezxBEVF-QYqp4vcvHYbt_jrfIaOQvIG1SJcI43G5ko2JBvY0pVVhcCwNd8Gvf1JujwjLsvBLlyc1rF-mQ/s220/AVATAR+KU-128.jpg = Ganti dengan Kode Gambar anda.
- Selesai Simpan.
- Jadi Deh!
wahhh,fhotonya bisa diganti gak sob.?
ReplyDeleteBisa kok link ini "http://4.bp.blogspot.com/-aJGLVA8QmCA/TkFsqEXMgKI/AAAAAAAAAPg/naQPOENy01E/s220/AVATAR%2BKU-128.jpg" dalam kode diatas adalah link gambar, jadi bisa diganti.
DeleteTrimak kasih broo...sudah saya coba and berhacil...hehehhe
ReplyDelete