Membuat Author Box Untuk Sidebar Blog Ala G+ Badge

Membuat Author Box Untuk Sidebar Blog Ala G+ Badge

Bola Hero Gawai

Membuat Author Box Untuk Sidebar Blog Ala G+ Badge

Membuat Author Box Untuk Sidebar Blog Ala G+ Badge
Biasanya author box ditampilkan di bawah postingan, nah kali-kali kita menyimpan author box ini di sidebar blog karena author box di bawah postingan sudah terlalu mainstream hehehe.... Author box ini saya buat mirip-mirip dengan Google+ Badge yang kemudian saya tambahin dengan tombol profil sosial media, tombol untuk follow Blogger dan tombol berlangganan atau Anda pun bisa menambahkan tombol lainnya.

Jika Anda tertarik untuk mencoba author box ala G+ Badge ini di sidebar blog, silahkan ikuti langkah-langkahnya di bawah ini.


1. Langkah Pertama
Karena auhtor box ini menggunakan Font Awesome untuk menampilkan tombol-tombol sosial media, jadi pastikan Anda sudah menambahkan Font Awesome di blog Anda, saya anjurkan untuk menggunakan Font Awesome terbaru.

2. Langkah Kedua
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://lh3.googleusercontent.com/lUQcK29uPNQzy9gVVKuCuVIso6amDmTXH1rsbIXukGeBp0BOJIYtwCE8BbNTVv_UArIBFg=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>

Untuk 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 background G+ profil yang barusan Anda copy.

3. Langkah Ketiga
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>

Kustomisasi:
  • 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.
4. Langkah Keempat
Silahkan simpan javascript di bawah ini di atas 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>

Selesai... selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

10 Comments Add Comment

keren kang, ini kayaknya masih baru di dunia blogger. kalau ditaruh di page bisa juga mungkin kang

Balas

Bisa saja ditaruh di page juga mas :)

Balas

Nah, ini dia mas...terima kasih massss >_<

Balas

om kok punya ane photonya gak ke defer ya? padahal dah dipasang script di langkah no 4

Balas

Coba javascriptnya ganti dengan ini
function init() {
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'));
} } }
window.onload = init;

Balas

Kemudian untuk background authorbox pada css, pada url imagenya ada kode s630 silahkan rubah menjadi s300

Balas
This comment has been removed by the author.

Thanks om dah bisa (y)

Balas

Malem om kompi... Oot dikit om. Kalo itu javascript nya gimana cara buatnya?? Dan itu buatan om kompi sendiri kan? Lalu kalau boleh tau logika javascript nya gmna tuh om kalau dibaca secara bahasa manusia? Agak berat ya pertanyaannya 😯
Makasih om kompi sebelumnya.

Balas

oya kang, template kompi simple sudah terpasang font awesom belum.. nuwun..

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×