Cara Membuat Widget Author Box di Bawah Postingan Blog

Posted on 2 views

Memasang dan membuat author box admin di bawah artikel/postingan blog adalah salah satu cara untuk membuat pengunjung mengetahui siapa admin dari blog tersebut. Widget author box ini juga memberi sedikit informasi ulasan secara singkat mengenai admin sebagai pemilik blog. Pada widget kotak admin ini juga bisa anda tambahkan beberapa kata-kata yang tepat untuk diselipkan ke widget tersebut.

Cara Membuat Widget Author Box di Bawah Postingan Blog

Selain kata-kata ulasan informasi tentang admin, widget author box yang akan saya berikan tutorialnya juga memiliki fitur sosial media, yang dimana letak sosial media ini akan berada dibawah kalimat informasi mengenai admin dari blog yang dikelola. Banyak sosial media yang bisa kita tambahkan pada widget author box ini, mulai dari menambahkan widget faceboo, google plus, twitter dan instagram.

Apabila anda sebagai seorang blogger suka mendesain blog dan membuat tampilan blog agar terlihat menarik widget kotak admin ini sangat cocok ditambahkan di bawah postingan blog anda untuk menambah daya tarik dan motivasi ngeblog sesuai keinginan anda. Lalu bagaimana cara memasang widget author box di blogspot? simak langkah-langkahnya pada beirkut ini.


Cara memasang Widget Author Box di Bawah Postingan Blog

1. Silahkan login dan masuk ke dashboard blog anda. Kemudian masuk ke menu Template > edit html.
2. Tambahkan kode di bawah ini tepat diatas kode </style> atau ]]></b:skin>.
/* CSS Multi Author Box */
.authorboxwrap{background:#333;color:#fff;margin:20px auto 0 auto;padding:20px;overflow:hidden;}
.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.2)}
.avatar-container img{width:90px;height:auto;max-width:100%!important;transition:all .3s}
.author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#fff}
.author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{color:#fff;font-size:12px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:24px;height:24px;line-height:24px;border-radius:100%}
.social-links li:nth-child(1):hover a{background:#516ca4;}
.social-links li:nth-child(2):hover a{background:#00c3f3;}
.social-links li:nth-child(3):hover a{background:#f20000;}
.social-links li a:hover{color:#fff}

3. Setelah anda berhasil menambahkan kode diatas, maka tambahkan juga kode html di bawah ini tepat diatas kode </article> agar dapat tampil di bawah postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
</div>
</div>

4. Simpan Template, dan lihat hasilnya.

Demikianlah bagaimana cara membuat widget kotak admin di bawah postingan, semoga bermanfaat.


Leave a Reply

Your email address will not be published.