Cara Kreatif Membuat Author Box Di Bawah Postingan Blog

Cara Kreatif Membuat and Memasanng Author Box Di Bagian Bawah Postingan Blogger - Apa sih itu author box dan bagaimana cara memasang Author Box yang keren dibawah postingan blog ? author box merupakan sebuah widget yang mendekripsikan riwayat diri seorang admin blog atau biasanya disebut dengan kotak admin ,  untuk cara pemasangan author box sendiri sangat mudah , paling tidak anda harus sedikit menguasai html .

  Apa sih fungsi dari memasang author box di blogger , khususnya dibagian bawah postingan ? fungsinya adalah kita dapat memperkenalkan tentang diri kita terhadap pengunjung , sehingga nama anda akan menjadi familiar di dunia maya ini , hhehhehe , nah begitulah fungsi authir box menurut saya sendiri , ok back to topic how to make author box ki piye ?. oh iya untuk demo aurthor box dibawah postingan , nanti demonya kurang lebih akan seperti ini :

Berikut Cara kreatif Membuat Author Box Di Bawah Postingan Blog

1. Pertama , langsung aja sobat masuk bagian Edit HTML
2. Kemudian Carilah kode ]]></b:skin> atau </style>
3. Lalu Salin dan Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> tadi

   /*BOX AUTHOR*/
   .boxauthor{position:relative;border:1px solid #000;background:#eee;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
   .boxtitle h3{color:#000;font:bold 14px Electrolize;background:#eee;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
   .boxtitle h3:before{content:'';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
   .boxtitle h3:after{content:'';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
   .boxauthor_photo{float:right;background:#eee;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
   .boxauthor_photo:before{content:'';position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
   .boxauthor_photo:after{content:'';position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
   .boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
   .boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
   .boxsocial{background:#eee;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
   .boxsocial :before{content:'';position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
   .boxsocial :after{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
   .boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
   .boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
   .boxsocial div{float:left;margin-right:6px;width:88px}
   .boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}

4.  Untuk memanggil kode css diatas supaya berfungsi silahkan pasang kode dibawah ini , sebelum kode <data:post.body/>

   <div class='boxauthor'>
   <div class='boxauthor_photo'>
   <img alt='Mas Yadi' src='https://lh6.googleusercontent.com/-5KuwPTR39qI/AAAAAAAAAAI/AAAAAAAAA3k/jdTIAylw8IA/photo.jpg' title='Mas Yadi Ganteng Banget'/>
   </div>
   <div class='boxtitle'>
   <h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Masyadi'><data:post.author/></a></h3></div>
   <div class='boxcontent'>
   Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/+MasyadiBlog?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/Masyadi' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/Masyadi' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
   </div>
   <div class='boxsocial'>
   <div class='boxsocialtitle'>
   Share Artikel
   </div>
   <div class='boxfb'>
   <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
   </div>
   <div class='boxtwit'>
   <a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
   </div>
   <div class='boxgplus'>
   <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
   </div>
   <div class='boxltsme'>
   <script>
   //<![CDATA[
   var uri = window.location.href;
   var ttle = document.title;
   document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
   //]]>
   </script>
   </div>
   </div>
   </div>

   NOTE:
   - Ganti kode Masyadi dengan Nama Anda.
   - Ganti kode Masyadi dengan ID Anda (Facebook, Google, Twitter dll).
5. Jika sudah anda sesuaikan kode diatas dengan identitas diri sobat , kini silahkan save dan lihat hasilnya

Nah itulah Cara Mudah Membuat sekaligus Author Box [ Kotak Admin ] Di Bawah Postingan Blog . Jika sobat jago dalam mendesign , silahkan redesign author box diatas menjadi lebih keren lagi . ok silahkan mencoba , jika ada kesulitan silahkan bertanya  :)

Ditulis oleh Ahmad Suyadi pada tanggal

Tweet