Membuat Kotak Keren Di bawah Postingan

Ketemu lagi dengan Ane [./Forbiden-403] ya panggil aja ane Aqbar. Kali ini saya akan Share cara Membuat Kotak Keren Di bawah Postingan seperti gambar di bawah ini nee ..
Buat yang Master, Lewat aja dah , Cekidot ..
1. Login Blog Sobat.
2. Rancangan --> Edit HTML --> jangan Lupa Expand Temlpate Widget Centang dlo.
3. Kalian Cari kode ]]></b:skin> buat mudahin pencarian pencet F3 atau ctrl+f. klo dah ketemu, masukin kode di bawah ini di atas kode tadi

.admin-tulisan{
    display:block;
    width:auto;
    background:#FFFFFF;
    border:2px solid #000000;
    box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
    padding:0;
    margin:30px 0 10px 0;
    font:normal 12px Comic Sans Ms;
    color:#222;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#0000FF;
    border:none;
    border-bottom:2px solid #000000;
    color:#fff;
    text-transform:normal;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
    font:bold 12px Comic Sans Ms;
    padding:5px 10px;
    margin:0 0 0 0;
    display:block;
    }
    .admin-tulisan h4 a{color:#FEEA83;}
    .admin-tulisan img{
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:1px solid #000000;
    padding:2px;
    background:#000000;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }
4. klo udah jangan di Save Dlu, kalian cari dlu kode <div class='post-footer> klo udah ketemu, kalian taruh kode di bawah ini di atas kode tadi

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Posted By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ http://forbiden-403.blogspot.com/</h4>
<div class='kontainer'>
<img src='https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/303179_289883747698234_100000298329635_1149230_562699087_n.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Semoga Artikel <data:post.title/> Bermanfaat .. ^_^
<p><span style='float:right;font:italic 10px Comic Sans Ms;'><a href='http://forbiden-403.blogspot.com' target='_blank'>[./Forbiden-403]</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Kalian Edit sendiri ya, pasti bisa kok, namanya juga belajar, saya pun juga belajar dari blog orang lain, gk cuma Copy terus Paste terus Save, Usaha juga ya ..
5. Save Template
6. udah jadi deh kalian Liat Hasilnya. Ya meskipun Tutorial sederhana, tapi gpp deh buat menambah wawasan dan mempercantik Blog

*eNBe : Hapus Tulisan "Read More : http://forbiden-403.blogspot.com/"

Happy Blogging ..
Insyaallah Artikel Ini bermanfaat

6 ... Skip ke Kotak Komentar

1 Januari 2012 09.57

mantap tutorialnya sobat :D izin sedot dulu kapa2 di praktekin tutorialnya heeh

1 Januari 2012 11.11

monggo sedot terus, Gratis kok .. :D

1 Januari 2012 12.15

try it kk.. :)

1 Januari 2012 12.43

Monggo kak .. :D =))

2 Januari 2012 11.02

keren sob..infonya

2 Januari 2012 14.05

Oke sob, :D
monggo Di nikmati =))

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]