» » Cara Membuat Author Box Keren Plus Tombol Media Sosial

Cara Membuat Author Box Keren Plus Tombol Media Sosial

Cara Membuat Author Box Keren Plus Tombol Media Sosial - Sudah lama Anas Blogging Tips tidak memberikan tutorial widget. Maka pada artikel kali ini saya akan memberikan tutorial membuat widget Author Box yang sangat keren dan responsive ditambah dengan tombol media sosial yang tidak kalah keren juga. Penasaran dengan cara membat Author Box plus tombol Media Sosial keren? Lanjut baca artikel nya sobat.
Author box merupakan salah satu widget yang wajib sobat gunakan dibawah setiap artikel karena widget yang satu ini bisa dengan baik memberikan dampak positif bagi reputasi blog sobat. Widget Author Box seperti ini akan meningktkan kredibilitas dari blog sobat dan tentunya akan meningkatkn kepercayaan para visitor sobat dan mereka bisa mengetahui serta mengenal lebih dekat siapa orang dibalik artikel hebat yang mereka baca tersebut.

Mungkin sobat sering mengunjungi blog-blog hebat dan menemukan adanya widget Author Box di akhir dari setiap post nya, maka sobat juga bisa seperti itu. Dari sekian banyak jenis Author Box sudah saya pilih 1 Widget Author Box Plus Tombol Media Sosial yang paling responsive dan keren. Saya tidak bisa menampilkan demonya tapi dibawah ini saya cantumkan screenshot contohnya

Cara Membuat Author Box Keren Plus Tombol Media Sosial by Anas Blogging Tips
Baiklah tanpa basa basi lagi berikut Tutorial Cara Membuat Widget Author Box Keren Dengan Tombol Media Sosial

Cara Buat Widget Autho Box (CSS)
1. Masuk ke blog yang akan ditambahkan widget Author Box
2. Pergi ke menu template >> Edit HTML
3. Cari kode ]]></b:skin> dengan menggunakan tombol CTRL + F
4. Setelah itu, paste kode dibawah tepat di atas kode ]]></b:skin> tadi

/*-------- Author Box CSS Code by TwistBlogger.com -------*/
#Author-box-outer {
background: #FFFFFF;                  /*----- background color code -----*/
border-top: 10px solid #05A0FF;  /*----- top border -----*/
padding: 16px 10px 16px 10px;
overflow: hidden;
margin: 20px 0px 15px;
box-shadow: 0px 7px 14px -12px #000;
}
.author-box {
float: left;
overflow: hidden;
padding: 0px 15px 5px 0px;
font-weight: 100;
width: 54%;
display: block;
border-right: 1px solid #ddd;
}
.author-box img {            /*----- Author Image Style ------*/
background: #05A0FF;
float: left;
margin: 5px 10px 0px 0px;
border-radius: 50px;
padding: 2px;
}
.author-box p {             /*---- Author Name Style ----*/
margin: 0;
padding: 0px 0px 0px 0px;
color: #3F3F3F;
font-size: 15px;
text-shadow: none;
}
.author-box span {
border-bottom: 2px solid #F9FF00;  /*--- border below author name ---*/
}
.author-box-social {
float: right;
text-align: left;
width: 40%;
overflow: hidden;
padding: 0px;
}
.intro-style {          /*---- Author bio text Style -----*/
text-align: left;
font-family: sans-serif;
color: #333;
font-size: 13px !important;
margin-top: 5px;
margin-left: 0px;
}

Note :  Sobat bisa mengganti warna text, fonts serta pengaturan lain  nya dengan hanya mengganti kode yang ingin sobat ganti, saya yakin sobat-sobat blogger pasti bisa menggantinya sendiri.

Setelah memasang pengaturan CSS di atas kode ]]></b:skin> tadi sekarang saatnya memasang kode pemanggil agar widget nya bekerja, kita biasa menyebutnya HTML. Silahkan ikuti tutorial selanjutnya.
Cara Pasang Author Box (HTML)
Sang pembuat widget sekaligus script ini sudah melakukan kerja kerasnya secara maksimal dan membuat sobat tidak usah repot-repot untuk mengunjungi Facebook Developer Page, Google+ Developer Page dan Twitter Developer Page. Sobat hanay cukup tinggal mengganti segala link dan URL halaman sesuai yang sobat punya dibawah ini.

1. Cari kode tag penutup </head> dengan menggunakan CTRL + F
2. Lalu, paste kode dibawah ini tepat di atas kode tag penutup tadi 

<script async='defer' src='https://apis.google.com/js/platform.js'/>

3. Setelah itu, cari kode ini <div class='post-footer-line post-footer-line-3'> gunanya untuk menempatkan author box nya tepat dibawah setiap post blog sobat.
4. Paste kode berikut di atas kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Author-box-outer'>
<div class='author-box'>
<b:if cond='data:post.author == &quot;Satbir Patial&quot;'>
  <img alt='' class='avatar avatar-78 photo' height='78' src='http://lh5.googleusercontent.com/-av0YwQXWnHo/AAAAAAAAAAI/AAAAAAAAAs8/E1ch3IOBo1E/s100/photo.jpg' width='78'/><p><span>Article By: Satbir Patial</span></p>
<div class='intro-style'>
I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!
</div>
</b:if>
</div>
<div class='author-box-social'>
<div style='padding-bottom:0px !important; font-size: 11px !important;'><a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/twistblogger' rel='nofollow'>
Follow @TwistBlogger
</a></div>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));</script>
<br/>
<div style='padding-bottom:0px !important;'>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/pages/Twistbloggercom/740638259280667' data-layout='button_count' data-share='false' data-show-faces='false' rel='nofollow'>
</div>
</div>
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<br/>
<div style='padding-bottom:0px !important;'>
<!-- Place this tag where you want the widget to render. -->
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/u/0/101011957743985467270' data-rel='author'/>
</div>
</div>
</div>
</b:if>

Saya sudah menandai setiap kode yang harus diganti sesuai dengan warna-warna di atas. Berikut keterangan nya :
Warna kuning :
1. Nama Sobat
2. Link Gambar Avatar Sobat
3. Nama Sobat
4. Biography Sobat

Warna biru muda :
1. Link twitter
2. @User_twitter sobat

Warna biru tua :
1. Link Facebook sobat

Warna merah :
1. Link akun Google+ sobat

Script Responsive Khusus (CSS)
Agar membuat widget Author Box sobat menjadi responsive dan bisa di test di segala ukuran browser maupun perangkat, sobat silahkan menambahkan CSS3 @mediaquery di bawah ini tepat di atas kode tag ]]></b:skin>

@media only screen and (min-width:980px) and (max-width:1089px) {
.intro-style {
 margin-left: 92px;
}
}
@media only screen and (min-width:768px) and (max-width:979px) {
.author-box {
padding: 0px 0px 0px 0px;
width: 52%;
}
.author-box img {
margin: 5px 5px 0px 0px;
padding: 2px;
}
.intro-style {
margin-left: 0px;
}
.author-box-social {
width: 47%;
padding: 0px;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.author-box {
padding: 0px 0px 10px 0px;
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
border-right: 0px;
}
.author-box-social {
width: 79%;
padding: 0px;
}
}
@media only screen and (max-width:479px){
.author-box {
padding: 0px 0px 10px 0px;
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
border-right: 0px;
}
.author-box-social {
width: 100%;
padding: 0px;
}
}

Baiklah, nah itulah tutorial Lengkap bagaimana caranya membuat Widget Author Box keren dengan tombol media sosial yang sangat responsive dan bisa sobat ganti sesuai dengan selera sobat.


Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.

Terima kasih sobat telah membaca artikel "Cara Membuat Author Box Keren Plus Tombol Media Sosial". Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala dan keseluruhan konten Anas Blogging Tips

0 Response to "Cara Membuat Author Box Keren Plus Tombol Media Sosial"

Post a Comment

Subscribe to: Post Comments (Atom)