Cara Membuat Kotak Admin di bawah Postingan
Hai sobat, belajar mempercantik blog yuk.. Kali ini akan di bahas tutorial membuat kotak admin di bawah postingan yang tentunya membuat blog anda tampil cantik.
Cara Membuat Kotak Admin di bawah Postingan berikut kami sampaikan caranya, berhubung males nulis langsung aja deh:
1. Buka blogger
2.
Dashboard >
Template >
edit template
3. Cari kode
]]></b:skin>
4. Copy and Paste kode berikut tepat di atasnya
/* ==== Related Post Widget Start ==== */ <style type='text/css'>
.authorblog{position:relative;margin:15px auto;padding:10px 10px 5px 10px;width:536px;border:2px solid #52e052;background:#e9fbe9}
.fotoadmin{background:#52e052;float:left;height:128px;width:128px;left:-22px;padding:5px 5px 5px 25px;position:relative}
.fotoadmin img{height:125px;width:125px;border:2px solid #000}
.adminblog{background:#52e052;width:400px;left:-22px;margin-bottom:5px;padding:5px 0 5px 20px;position:relative}
.adminblog a{color:#000}
.adminblog:before{content:'';position:absolute;bottom:-114px;left:-160px;width:0;height:0;border-style:solid;border-width:10px 0 0 10px;border-color:#01A451 transparent transparent transparent}
.adminblog:after{content:'';position:absolute;bottom:-10px;right:0;width:0;height:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent transparent transparent #01A451}
.authorblog h4{font:bold 16px Electrolize!important;color:#000;line-height:20px;padding:3px 0;margin:0}
.adminarea{margin-left:160px}
.infoadmin{font:12px Tahoma;line-height:16px;text-align:justify;color:#000}
.infoadmin a{color:#000;text-decoration:none}
.foteradmin{padding:10px 0 3px 0;font:12px Tahoma}
.evolutions-social{background:#52e052;padding:5px;margin-left:-158px;width:546px;overflow:hidden}
.evolutions-social:before{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-style:solid;border-width:0 0 8px 10px;border-color:transparent transparent transparent #01A451}
.evolutions-social a{padding:7px 0;display:block;color:#fff!important;font-weight:600;font-family:"Tahoma",Verdana,Arial;text-decoration:none;border:1px solid #e9fbe9;transition:all 1s ease}
.evolutions-social a:hover{box-shadow:0 0 5px #111;border:1px solid #000}
.evolutions-social div{float:left;margin-right:6px;width:88px}
.evolutions-social .shrttle{padding:7px 22px;font:bold 12px Tahoma;text-align:center;background:#e9fbe9;text-transform:uppercase;display:block;width:107px;color:#000;border:1px solid #01A451}
.evolutions-social .shrfcbk a{text-align:center;background:#3B5999}
.evolutions-social .shrtwtr a{text-align:center;background:#01BBF6}
.evolutions-social .shrgpls a{text-align:center;background:#D54135}
.evolutions-social .shrltsme a{text-align:center;background:#fb8938} </style>
5.
Copykode berikut tepat dibawah postingan atau post footer, silahkan
cari kode
<data:post.body> kemudian taruh di bawahnya
<div class='authorblog'>
<div class='fotoadmin'><img alt='Ahmad Suyadi' src='https://m.ak.fbcdn.net/sphotos-d.ak/hphotos-ak-ash3/994614_328010970678733_913291514_n.jpg' title='Mas Yadi'/>
</div>
<div class='adminarea'>
<div class='adminblog'>
<h4>Author : <a class='tooltip' href='https://plus.google.com/105464368494988152946' rel='publisher' title='Ahmad Suyadi'>Ahmad Suyadi</a></h4></div>
<div class='infoadmin'>
Saya hanya blogger newbie yang tidak pernah berhenti untuk mencoba dan berbagi. Karena kegagalan sudah menjadi hal yang biasa. Kegagalan bukan berarti tidak akan berhasil, namun kegagalan merupakan hal yang akan mengarahkanku kembali. Terimakasih atas kunjungannya brother yang baru saja membaca artikel berjudul <b><a class='tooltip' href='http://namabloganda.blogspot.com' title='ISI DENGAN TITTLE'>Download Template Pageone Khusus Blog Dummy</a></b>.
</div>
<div class='foteradmin'><div class='evolutions-social'>
<div class='shrttle'>
Share Artikel
</div>
<div class='shrfcbk'>
<a class='tooltip' href='http://www.facebook.com/sharer.php?u=http://ahmadsuyadi.blogspot.com/2013/12/download-template-pageone-khusus-blog.html' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='shrtwtr'>
<a class='tooltip' href='http://twittter.com/share?url=http://ahmadsuyadi.blogspot.com/2013/12/download-template-pageone-khusus-blog.html' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='shrgpls'>
<a class='tooltip' href='https://plus.google.com/share?url=http://ahmadsuyadi.blogspot.com/2013/12/download-template-pageone-khusus-blog.html' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='shrltsme'>
<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' class='tooltip' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
</div></div></div></div>
6. Simpan
Demikianlah
Cara Membuat Kotak Admin di bawah Postingan, semoga bermanfaat.. Sebenarnya masih belum di edit, kapan kapan tak edit yah
