Cara Memasang Author Box Keren di Blogger
Cara Memasang Author Box Keren di Blogger - Pada umumnya para blogger menggunakan fasilitas bawaan blogger untuk menampilkan badge profil mereka, nah pada kesempatan kali ini saya akan memberikan tutorial Bagaimana Cara Memasang Author Box Keren di Blogger. Author Box ini mirip dengan tampilan Badge Google plus, namun author box ini ada beberapa penambahan fitur, seperti tombol profil sosial media, tombol ikuti blog ini dan tombol lainnya yang bisa anda ganti sesuai kebutuhan.
Untuk memasang Author Box ini di blog sobat caranya cukup mudah, kenapa begitu? Karena hanya dengan menambahkan sedikit kode CSS dan JavaScript, maka anda akan melihat tampilan author box keren ini di blog sobat.
Cara Memasang Author Box Keren di Blogger
Pertama, pastikan sudah terpasang font awesome di blog anda. Jika belum silahkan salin kode di bawah ini dan letakkan setelah kode <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>Kedua, Salin dan simpan kode CSS berikut diatas/sebelum 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwaXxi5JFmv1T1ejToP4wdVEi9WR11baTXFGvifejHbjnww7TtO_3ROqXnnTj0IFU2isB9y3dndUCWTrCAtGs7Bl97etHI1WlcafjM8U7W7RjgWI23-Ru5eTV1jO9u55ZKzKIZT4cJf94/s300-fcrop64=1/,00001ad4fffff235) 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>Ganti URL gambar yang di tandai di atas dengan URL gambar background G+ profil Anda
Ketiga, Tambahkan 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="https://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 mengganti photo yang saya tandai di atas dengan photo G+ profil Anda, silahkan Anda masuk ke 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. Silahkan sesuaikan untuk nama profil dan url profil G+ serta URL profil sosial media lainnya.
Langkah berikutnya salin dan letakkan javascript berikut sebelum kode </body>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>
Join the conversation