Join this site

» » Cara Buat Box Dibawah Header

Cara Buat Box Dibawah Header

Diposting oleh Unknown -
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 != &quot;&quot;'>
<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, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);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 != &quot;&quot;'>
<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

Selanjutnya atur sendiri kode CSS nya.... bye dulu kuota sudah mau habis nih
sampai ketemu post berikutnya :^

SUMBER : MONSTER-SHARED
Label:

Posting Komentar - Back to Content

[D-S] COMMENTS RULE :

-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

 
▲Back ToTop▲
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna