2020/02/20

Cara Membuat Widget Author Box Di Sidebar Keren Dengan Jumlah Postingan


Cara Membuat Widget Author Box Di Sidebar Keren Dengan Jumlah Postingan - Hallo sobat blogger, ketemu lagi dengan admin ANAZ. MY. ID. Pada kesempatan ini saya akan membagikan widget author box yang dilengkapi dengan penghitung jumlah postingan dan Jumlah komentar. Widget ini saya dapat dari salah satu blogger luar guys. Saya sudah lupa namanya. Untuk cara pemasangannya, Sobat bisa mengikuti tutorial dibawah ini.

Cara Memasang Widget Author Box Di Blogger.
Langkah Pertama yaitu sobat Masuk ke halaman blogger, lalu klik "Tema" dan Klik "Edit HTML", lalu cari tag berikut ini ]]></b:skin> didalam template . Jika kesulitan bisa menggunakan CTRL + F dan salin CSS berikut ini di atasnya.

CSS
/* ANAZ. MY. ID*/ section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important} .feau{height:100px;background:url('http://theneodesign.com/wp-content/uploads/2014/04/2014-04-26-06.32.50-pm.jpg');padding:2px0;text-align:center} .feau h1{background:;font-size:25px;color:#fff;text-align:center} .feau p{font-size:15px;color:#fff;text-align:center;margin-bottom:7px!important} .pms-logo-widget img{max-height:80px;border:5px solid #fff;border-radius:100%;margin-top:-40px;margin-left:calc(50% - 40px);background: #4d90fe;} .pms-logo-widget img:hover{-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg); transform: rotateY(180deg);} .info{float:left;width:100%;background:#fff;min-height:30px;margin-top:-35px;padding:5px} .col-widget{float:left;width:48%;text-align:center;height:35px;line-height:35px;font-size:18px;color:#333;} /* Butom Follow */ .pms-follow-wrpicon{display:block;margin:15px auto 5px;position:relative;} .pms-follow-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .pms-follow-icon{display:inline-block;border:0;margin:0;padding:0;width:48.8%} .extender .pms-follow-icon a{background:#fff;display:inline-block;font-weight:400;color:#006e78;line-height:36px;border-radius:3px;font-size:14px;border:1px solid #006e78;width:100%;transition:initial} .extender .pms-follow-icon i{font-family:fontawesome;margin:0 4px 0 0} .pms-follow-icon.blogger a:hover,.pms-follow-icon.ppal a:hover{background:#006e78;border-color:transparent;color:#fff;} .extender .pms-follow-icon:hover a,.extender .pms-follow-icon a:hover{color:#fff;}

2.Lalu Salin kode HTML berikut ini di sidebar blog atau di bawah postingan. Caranya masuk ke Blogger > pilih "Tata Letak" > Tambahkan Widget. Atau sobat bisa meletakan kode HTML dibawah ini tepat setelah kode <data:post.body/>

HTML
<div class="feau"> <h1><i class="fa fa-code"></i> Anas Ikwana</h1> <p>Tips Berbagi Facebook & Blogger</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://1.bp.blogspot.com/-53ndc2q-Mkg/Xk2A5DhpsiI/AAAAAAAAAqw/C0jTrOaTZEEjOOwvaomQK-A7seHSCsSbQCKgBGAsYHg/s1600/IMG-20200121-WA0027.jpg?width=150&height=150" /> </a></div> <div class="info"> <div class="col-widget so-bai"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </div> <div class="col-widget so-comment"> <i class="fa fa-comments-o" aria-hidden="true"></i> <script style="text/javascript"> function numberOfComments(json) { document.write(json.feed.openSearch$totalResults.$t); } </script> <script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> </div></div> <div style="clear:both; margin-top:10px ;"></div> <div class="pms-follow-wrpicon"> <ul class="extender"> <li class="pms-follow-icon blogger"><a href="https://www.blogger.com/follow-blog.g?blogID=6020555554161964193" target="_blank" title="Follow this site">
<i class="fa fa-users"></i> Follow</a></li> <li class="pms-follow-icon ppal"><a href="//www.facebook.com/anaz.arblit17" target="_blank" title="Contact"><i class="fa fa-paper-plane"></i> Contact</a>
</li>
<li class="pms-follow-icon ppal"><a href="//anaz.my.id" title="Patner"><i class="fa fa-handshake-o"></i> Patner</a></li>
<li class="pms-follow-icon ppal"><a href="//anaz.my.id" target="_blank" title="Seo Tips"><i class="fa fa-map"></i> Seo Tips</a></li>
<li class="pms-follow-icon ppal"><a href="//anaz.my.id" title="Blog tips"><i class="fa fa-newspaper-o"></i> Blog tips </a></li>
<li class="pms-follow-icon ppal"><a href="//anaz.my.id" title="fix blog error"><i class="fa fa-gear"></i> Setting </a></li>
<li class="pms-follow-icon ppal"><a href="//anaz.my.id" title="template"><i class="fa fa-barcode"></i> Template </a></li>
</ul></div> <div class='clear'></div>

Dan ganti URL diatas dengn URL yang sobat inginkan. Dan juga sobat ganti Nama Label sesuai keinginan sobat. Terakhir Kemudian klik "Simpan'

Demikian artikel dari saya tentang Cara Membuat Widget Author Box Di Sidebar Keren Dengan Jumlah Postingan. Semoga artikel diatas bermanfaat bagi sobat semua. Terima Kasih dan Selamat mencoba

Tags :

bm
@anaz_arblit

Hanya Seorang Blogger dan Content Writer yang senang mempelajari dan berbagi Informasi, Tutorial dan seputar Dunia Internet. Jika anda ingin bekerjasama dengan kami, Silahkan Hubungi kami melalui Email : Themeblitz@gmail.com.

Post a Comment