Cara Memasang Author Box Keren Di Blogger
Cara Memasang Author Box Keren di Blogger - Pada umumnya para blogger memakai kemudahan bawaan blogger untuk menampilkan badge profil mereka, nah pada kesempatan kali ini aku akan memperlihatkan tutorial Bagaimana Cara Memasang Author Box Keren di Blogger. Author Box ini ibarat dengan tampilan Badge Google plus, namun author box ini ada beberapa penambahan fitur, ibarat tombol profil sosial media, tombol ikuti blog ini dan tombol lainnya yang dapat anda ganti sesuai kebutuhan.
Untuk memasang Author Box ini di blog sahabat caranya cukup mudah, kenapa begitu? Karena hanya dengan menambahkan sedikit arahan CSS dan JavaScript, maka anda akan melihat tampilan author box keren ini di blog sobat.
Kedua, Salin dan simpan arahan CSS berikut diatas/sebelum arahan </head>
Ketiga, Tambahkan arahan HTML di bawah ini di gadget sidebar HTML/JavaScript di Tata Letak.
Langkah berikutnya salin dan letakkan javascript berikut sebelum arahan
Langkah terakhir Simpan dan lihat hasilnya.
Source : http://goo.gl/CyxNrP
Untuk memasang Author Box ini di blog sahabat caranya cukup mudah, kenapa begitu? Karena hanya dengan menambahkan sedikit arahan 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 arahan di bawah ini dan letakkan sesudah arahan <head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
Kedua, Salin dan simpan arahan CSS berikut diatas/sebelum arahan </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/AVvXsEj5LY51d-3GvQ3sby0EVzuSMV9VbkHzj-H3Pd21N9H15z_Jr14cIpcg4lgy1-MRCkZNeqmxaY2lh55ob4B9j2BTfRSleDE4v3MzMtb66yna4QBhHwk4elwG15Aurwoe9JS0-eyER8NIRtg/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 arahan HTML di bawah ini di gadget sidebar HTML/JavaScript di Tata Letak.
<div class="authorbox">
<h2 class="author-title">
Author
</h2>
<img alt="Cara Memasang Author Box Keren di Blogger Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger">Nama Profil G+ Anda</a>
<a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Cara Memasang Author Box Keren di Blogger">google.com/+ProfilUnikAnda</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/Username" target="_blank" title="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger" 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="Cara Memasang Author Box Keren di Blogger">Follow This Blog</a>
<a class="button-author" href="URL FEEDBURNER BLOG ANDA" rel="nofollow" target="_blank" title="Cara Memasang Author Box Keren di Blogger">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
</div>
</div>
Untuk mengganti photo yang aku tandai di atas dengan photo G+ profil Anda, silahkan Anda masuk ke halaman G+ Profil Anda kemudian klik kanan pada photo G+ profil dan Copy image address kemudian ganti URL photo yang aku 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 arahan
</body>Kode ini untuk men-defer photo profil, jikalau di blog Anda sudah ada arahan ini maka arahan 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>
Langkah terakhir Simpan dan lihat hasilnya.
Source : http://goo.gl/CyxNrP
0 Response to "Cara Memasang Author Box Keren Di Blogger"
Post a Comment