Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger - mizipediacom mizipediacom: Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Author Box Di Sidebar Ala G+ Badge Blogger

Thursday, 28 September 2017



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. 
Lihat Juga