Cara Memasang Author Box Keren di Blog

Cara Memasang Author Box Keren di Blog

~ Halo sobat setia pembaca blog ini atau AS yang terutama kalian para Blogger ya , alhamdulilah kembali lagi dengan saya tentunya Aldi Andreansyah yang pada kesempatan kali ini saya masih di beri Nya kesempatan oleh Allah swt ini untuk berbagi ilmu mengenai dunia Blogger yang berjudul Cara Memasang Author Box Keren di Blog .

Sebelumnya author box ini dapat di letakkan di bagian mana saja sesuai keinginan kalian, tapi jika menurut saya widget author box ini lebih cantik bila di pandang yaitu kalian meletakkan nya tepat di bawah kolom posting blog atau biasa di sebut sesudah bagian posting an blog , dalam mode di bawah posting ini biasa nya script nya yang biasa di pasang yaitu <data:post.body> atau <div='post-footer'/> atau script yang sejenis nya yang intinya script tersebut terletak pada kolom bawah posting tersebut.
Membuat Blog tampil cantik memang adalah hal keinginan kita terutama para Blogger yang bertujuan memancing para pengunjung atau pembaca tertarik dengan widget widget yang kita pasang maupun pada bagian header,sidebar,footer maupun bagian lainnya .

Blog tampil cantik di mata pengunjung bukan hanya sekedar untuk agar pengunjung tertarik dengan widget yang kita pasang tersebut melainkan para pengunjung pun dapat merasakan kepuasan dan tidak jauh nya para pengunjung itu akan setia mengunjungi blog kalian karena dengan adanya widget yang kalian pasang tersebut. Terutama widget yang salah satu yang mempercantik tampilan blog kalian yaitu adanya Author Box Keren ini , author box atau kotak pengurus yang berarti kotak / box ini memudahkan para pengunjung mengetahui lebih detail , detail disini maksudnya terperinci atau dalam mengenai profil kalian maupun dari nama julukan dan kata kata kalian sendiri, dengan adanya author box ini maka bisa di katakan blog kalian cantik bila di pandang hehe.

Sebelum kita ke langkah langkah penerapan author box ini ada kala nya kita mengetahui kelebihan dan kekurangan terdahulu di bawah ini :

*. Kelebihan

-Seperti sudah di katakan diatas author box ini akan mempercantik tampilan blog kalian dengan adanya box mengenai profil kalian yang membuat para pengunjung lebih mengerti profil detail kalian dengan ada nya kata kata yang ingin kalian isi sesuai keinginan pada kolom box tersebut

-Terdapat Gambar/thumbnail yang dapat kalian masukkan sesuai keinginan, ya terpenting itu thumbnail yang sering kalian gunakan ya hehe

- Terdapat URL khusus yang bisa kalian isi maupun itu URL akun Google+ , facebook , twitter dan lain lain dan kalian bisa membuat URL tersebut menjadi teks tersebut sesuai keinginan kalian - Terdapat Warna baik itu warna latarbelakang , border (garis tebal) , solid (garis tipis), tombol , tombol klik (a hover) ,yang dapat kalian sesuai kan warna tersebut sesuai keinginan kalian pada di mode CSS tersebut  

Oke mungkin cukup sekian mengenai kelebihan dari author box keren ini .

Maka langsung saja kita membahas mengenai sedikit kekurangan nya box ini bila di pasang pada bawah ini:

- Dapat dikatakan loading blog akan sedikit menambah ukuran nya, karena dengan ada nya CSS dan widget author box ini bila di pasang

- Author Box ini tidak terdapat kolom akun sosial media kita melainkan kita hanya dapat mengetahui satu profil kita sendiri bukan banyak sosmed lainnya hehe Oke mungkin cukup sekian saja mengenai kekurangan author box ini yang saya ketahui.

Maka langsung saja ke tujuan dari artikel mengenai Cara Memasang Author Box Keren di Blog di bawah ini, cekidot :

Langkah awal :

Seperti biasa pastikan kalian sudah Login akun Google atau Blogger terlebih dahulu jika sudah lalu menuju Template -> Edit HTML -> CTRL+F lalu cari b:skin atau <style>, lalu masukkan CSS di bawah ini tepat di dalam mode b:skin atau <style> yang sudah di cari tadi : 

 /* CSS Author Box edited by aldiandreansyah.blogspot.co.id*/
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#4db2ec;padding:0;margin:1px;margin-bottom:0;border:double #fff;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#222;display:inline-block;}
.authorDetails{overflow:hidden;margin:10px 0 0 0;}
.authorDetails h2{font-size:14px;color:#fff;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#fff;background:#71c5f6;padding:4px 8px;display:inline-block;font-size:14px;margin-left:5px;border:double #4db2ec;}
.authorDetails h2 a:hover{color:#71c5f6;background:#fff;border:double #4db2ec;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#fff;line-height:20px;margin:0 10px;font-size:12px;}
h2.authortitle{position:relative;overflow:hidden;margin:20px 0;font-size:120%;font-weight:700;padding:4px 8px;text-align:center;text-transform:uppercase;transition:all .5s ease-out}
h2.authortitle:before, h2.authortitle:after {position:absolute;top:51%;overflow:hidden;width:50%;height:2px;content:'\a0';background-color:#ccc;}
h2.authortitle:before{margin-left:-50%;text-align:right;}
h2.authortitle span{position:relative;display:inline-block;padding:5px 10px;margin:0 10px;} 

lalu klik simpan template

Langkah kedua :
A . Penerapan Author Box keren ini pada mode Template :

Login -> Template -> Edit HTML -> CTRL+F lalu cari script <data:post.body> atau <div='post-footer'/> atau juga script sejenis nya yang tepat nya pada posisi bawah kolom sesudah posting ya sobat , lalu salin saja langsung script pemanggil atau HTML nya di bawah ini : 

 <!-- kotak profil di bawah postingan -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='authortitle'><span>Penulis</span></h2>
        <div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpE8Nz6UJdHEV2nAKBUXs7bk57e-CQceHggHVxMGXetQFGLG1VFjqlqXsyq1X3v2moSWZDEQfrcDtN1ypSkA7KYvUUq7heRjXd502Ryf_r0G9EThs9SA7ngeFpT3qdtEE8GyPS06ftrNU/s1600/1425552_947192545329368_741774408016981906_n.jpg' width='120'/>
</div>
</div>
<div class='authorDetails'>
  <h2>Tentang <a class='fa fa-user' href='http://aldiandreansyah.blogspot.com' rel='author' title='Dipublikasikan Oleh Admin'>Aldi Andreansyah</a></h2>
</div>
<p>Mulai Aktif Blogger Di Tahun 2016 Dengan Kemauan Sendiri Dan Usaha Sendiri.Saya Menjadikan Blog Sebagai Pekerjaan Luang Saya.Masih Pemula Yang Ingin Terus Belajar dan jika agan/sista ingin tahu mengenal saya lebih dalam ikuti saja via Sosmed saya.Terimakasih</p>
</div>
</div>
<div style='clear:both'/>
</b:if>

B . Penerapan pada mode Tata Letak :

Login -> Tata Letak -> HTML/Javascript -> Tambah Gadget -> lalu salin lagi script HTML nya di bawah ini : 

 <!-- kotak profil di bawah postingan -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='authortitle'><span>Penulis</span></h2>
        <div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpE8Nz6UJdHEV2nAKBUXs7bk57e-CQceHggHVxMGXetQFGLG1VFjqlqXsyq1X3v2moSWZDEQfrcDtN1ypSkA7KYvUUq7heRjXd502Ryf_r0G9EThs9SA7ngeFpT3qdtEE8GyPS06ftrNU/s1600/1425552_947192545329368_741774408016981906_n.jpg' width='120'/>
</div>
</div>
<div class='authorDetails'>
  <h2>Tentang <a class='fa fa-user' href='http://aldiandreansyah.blogspot.com' rel='author' title='Dipublikasikan Oleh Admin'>Aldi Andreansyah</a></h2>
</div>
<p>Mulai Aktif Blogger Di Tahun 2016 Dengan Kemauan Sendiri Dan Usaha Sendiri.Saya Menjadikan Blog Sebagai Pekerjaan Luang Saya.Masih Pemula Yang Ingin Terus Belajar dan jika agan/sista ingin tahu mengenal saya lebih dalam ikuti saja via Sosmed saya.Terimakasih</p>
</div>
</div>
<div style='clear:both'/>
</b:if>

Langkah Terakhir :
silahkan kalian cek blog kalian apakah author box keren ini sudah terpampang di blog kalian atau belum , ya seperti biasa nya sudah terpampang ya , amin.

Oke mungkin cukup sekian artikel mengenai Blogger yang berjudul Cara Memasang Author Box Keren di Blog , Semoga Bermanfaat dan bekerja dengan 100% , Amin

Share this post