Ini Screenshotnya
Langkah-langkah:
1. Login Dashbor Blogger
2. Pilih Template
3. Edit Template
4. Cari kode ]]></b:skin>
Letakkan kode dibawah ini diatas ]]></b:skin>
#MODchat{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:left;background:#232222;padding-left:15px;width:170px;height:70px;margin-left: 800px;margin-top:-15px;border-top:5px solid #0c0c0c; border-radius:5px 5px 30px 30px; position: absolute;}
#MODjoin{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:right;background:#232222;padding-left:0px;width:180px;height:70px;margin-left: 800px;margin-top:135px;border-top:5px solid #0c0c0c; border-radius:30px 30px 5px 5px; position: absolute;}
#MODbanner2{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:right;background:#232222;padding-left:0px;width:180px;height:auto;margin-left: 180px;margin-top:35px; border-radius:10px; position: absolute;}
#MODrangka1{ margin-top:20;margin-left: 0px ;margin-bottom:50px ;border:5px solid #0c0c0c;border-radius:10px 10px 10px 10px ;width:1090px;height:200px; background: #232222; position:relative;}
#MODbox1{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;border-bottom:5px #232222;float:left;background:#171717; padding-top:30px;width:300px;height:340px;margin-left: 400px;margin-top:-240px; border-radius:20px 20px 10px 10px; position: absolute;}
#MODbox2{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:left;background:#171717;padding:5px;width:auto;height:auto;margin-left: 10px;margin-top:35px; border-radius:10px 10px 10px 10px; position: absolute;}
#MODlike{margin-left:790px;width:180px;margin-top:-80px;background:#0c0c0c;border: 7px dashed #171717;border-radius:30px;padding:10px;padding-left:35px}
#MODmusic{margin-left:20px;width:320px;margin-top:-10px;background:#0c0c0c;border: 7px dashed #171717;border-radius:30px;padding:10px;}
5. Lalu sekarang kita aktifkan kode CSS-nya yaitu dengan kode HTML
6. Cari kode <div id='content-wrapper'>
Letakkan kode dibawah ini diatas <div id='content-wrapper'>
<div id='MODrangka1'>
<b:section id='MODbox2' maxwidgets='5' showaddelement='yes'>
<b:widget id='HTML8' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='MODchat'>
<a href='http://monster-shared.blogspot.com'><img alt='cbox' src='http://didil-cyber.googlecode.com/files/Guest-Book-Ichigo.png' title='Click here to open Guest Book'/></a>
</div>
<div id='MODjoin'>
<a href='http://www.Blogger.com/follow-blog.g?blogID=2038011248359714008' onclick='window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join This Site / Follow This Site'><img alt='Join This Site' src='http://didil-cyber.googlecode.com/files/Join-This-Site-Ichigo.png' style='vertical-align:center;border:0px;cursor:pointer;'/></a>
</div>
<div id='MODbanner2'><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a></div>
</div>
<b:section id='MODbox1' maxwidgets='5' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
7. gue kasi bonus nih nuat kalian, tambahan extra kan! gak enak kalau setengah-setengah xD
8. letakkan kode dibawah ini diatas <div id='content-wrapper'>
<div id='MODmusic'><embed allowscriptaccess='never' flashvars='autostart=true' height='0' src='http://www.4shared.com/embed/3432989025/6e5815ae' style='width:320px;height:25px;border:0px;display:block;margin:5px auto;' type='application/x-shockwave-flash' width='0'/></div>
<div id='MODlike'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
9. Pratinjau dulu kalau udah mantep
10. Simpan template
SUMBER : MONSTER-SHARED
Backlinks Please Thanks
URL |
Code For Forum |
HTML Code |
Anda Sekarang Sedang Baca Artikel Tentang Cara buat box dibawah HEADER , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Cara buat box dibawah HEADER ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Cara buat box dibawah HEADER Sumbernya. Thank's
nah ini yang aku tunggu" gan ,thanks yaaa
BalasHapuskomeng back http://mizda-xp.blogspot.com
Blogwalking :D
BalasHapushttp://anonymous-evolution.blogspot.com/
Thanks sob !!
BalasHapusComentback http://gha-azahari.blogspot.com