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
- Pertama , langsung aja sobat masuk bagian Edit HTML
- Kemudian Carilah kode
]]></b:skin>
atau </style>
- 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}
- 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='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='"https://plus.google.com/share?url=" + 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).
- 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 :)
14 Komen Cara Kreatif Membuat Author Box Di Bawah Postingan Blog
Sebenernya dah lama saya pengen pasang author box ini mas, cuma gak ngerti aja... klo dah liat kode-kode gitu suka mumet duluan saya mah. Pernah dulu coba-coba ngikutin contoh tapi suka gagal melulu, maklum saya kurang paham masalah yang beginian nie :D
tapi kalau udah terbiasa melihat kode css dan html , nanti akan terasa mudah kok mas , :)
Thak you so much...Good article..Very helpfull
ok sama-sama :)
mas kok kode nya da bnyk y??
yg mna nih??
trims banyak informasinya mas yadi,salam kenal ya,salam blogger di tunggu mampir ke blog saya
kok ada banyak pilih yang mana nih
Thanks gan sangat keren
Terimakasih banyak gan, berhasil,,,,,
thank's bro artikelnya, terus apa ini tidak melanggar dlm syarat pemasangan iklan google adsense, mohon pencerahannya dan smoga tetap menjaga kelansungan para blogger supaya tdk memberikan artikel menyesatkan dan jg berlaku jg bagi para blogger yg sudah senior. itu saja
Thanks kwn Masyadi, berhasil terpasang diblog ku.
Thank mas yadi berkat anda blog saya lebih pas tapi author box ini seo friendly gak, nanti ngurangin seo saya jadi malas, ni tengok url blog saya "http://cara-banicyber.blogspot.com"
Makasih bgt mas atas tipsnya. Kebetulan saya lagi perlu bgt
ini yang saya cari thx kang
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish