Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger




Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger
Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger
saya akan menjelasakan cara untuk membuat Author Box Di Sidebar Ala G+ Badge, nah biasanya author box ditampilkan di bawah artikel/ postingan, namun pada kali ini kita akan menyimpan author box ini pada sidebar blog karena author box di bawah postingan sudah terlalu mainstream.  Author box ini saya buat mirip-mirip dengan Google+ Badge yang kemudian saya tambahkan dengan tombol profil sosial media yang cantik, yaitu tombol untuk follow Blogger dan tombol berlangganan atau Anda pun bisa menambahkan tombol lainnya pada  Author Box.

Apabila anda memang tertarik untuk mencoba author box ala G+ Badge ini di sidebar blog, Jadi silahkan anda bisa ikuti langkah-langkahnya di bawah ini.

Author Box Di Sidebar Ala G+ Badge Blogger

1. Pertama , pastikan andaudah masuk di dasbhor andasendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Nah karena auhtor box ini menggunakan Font Awesome untuk menampilkan tombol-tombol sosial media, jadi pastikan saran saya anda sudah menambahkan Font Awesome di blog Anda, saya anjurkan untuk menggunakan Font Awesome terbaru.
4. Silahkan simpan kode CSS ini di atas kode </head>
<style type='text/css'>
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(https://c.disquscdn.com/uploads/users/25171/8209/avatar92.jpg?1496631437) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px auto 0;border-radius:100%;display:block}
a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author li{display:inline-block;margin-right:10px}
.sosmed-author li:last-child{margin-right:0}
.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}
.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}
</style>
Bagi anda yang memang ingin mengganti background image yang saya tandai di atas dengan background G+ profil Anda, silahkan Anda masuk ke halaman G+ Profil Anda lalu klik kanan pada background G+ profil dan Copy image address lalu ganti URL gambar yang saya tandai di atas dengan URL gambar  bewarna  merah. background G+ profil yang barusan Anda copy.
5. Silahkan simpan kode HTML di bawah ini di gadget sidebar  HTML/JavaScript di Tata Letak.
<div class="authorbox">
  <h2 class="author-title">
Author
</h2>
  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s120-c/photo.jpg" width="120" height="120" />
  <a class="authorname" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Nama Profil G+ Anda">Nama Profil G+ Anda</a>
  <a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="google.com/+ProfilUnikAnda">google.com/+ProfilUnikAnda</a>
  <div class="sosmed-author">
    <ul>
          <li><a href="https://www.facebook.com/Username" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/Username" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://www.google.com/+Username" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="//www.youtube.com/c/Username" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.linkedin.com/in/Username" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.instagram.com/Username/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
    </ul>
    <div class="clear"></div>

<a class="button-author" href="URL HALAMAN STATIS UNTUK FOLLOWER BLOG" target="_blank" title="Follow This Blog">Follow This Blog</a>

<a class="button-author" href="URL FEEDBURNER BLOG ANDA" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>

  </div>
</div>
Untuk cara mengedit photo yang saya tandai di atas dengan photo G+ profil Anda, jadi silahkan Anda masuk pada halaman G+ Profil Anda lalu klik kanan pada photo G+ profil dan Copy image address lalu ganti URL photo yang saya tandai di atas dengan URL photo G+ profil yang barusan Anda copy.
Sesuaikan untuk nama profil dan url profil G+ serta URL profil sosial media lainnya milik anda.
6. Kemudian silahkan anda simpan javascript di bawah ini di atas kode </body>
7. Kode ini untuk men-defer photo profil, jika di blog Anda sudah ada kode ini maka kode berikut tidak perlu ditambahkan lagi.
<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute("data-src")) {
        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
    }
}
//]]>
</script>
8. Lalu anda klik save, dan lihat hasilnya
Demikian penjelasan di atas selamat mencoba dn sukses. Jika anda kurang jelas bisa di tanyakan klik tombol komentar di bawah ini. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect