Cara Membuat Kotak Slider 2 Kolom Di Bawah Header

 

Nah Kawan2 Saya Kembali Post, Karena Teman Saya Menanyakan Bagaimana Cara Membuat 2 Kotak Slider Di Bawah Header ??? Ok Langsung Saja !!!

1. Masuk Blogger

2. Klik Template

3. Klik Edit HTML

4. Cari Kode ]]><b:skin> Untuk Lebih Mudah Mencari Tekan CTRL + F

Lalu Letakan Kode Berikut Diatas Kode ]]><b:skin> 

#RamnitBanner2:before {content:"";position:absolute;width:150px;height:125px;background:transparent url(http://i.imgur.com/I3cM4IV.png) no-repeat center;margin-left:-120px;margin-top:-5px;}

#slider4 { float:left; width: 468px; height: 60px; margin:0px 0px 0px 60px; overflow: hidden; background-color: rgba(0, 0, 0, 0.50); border: 2px solid #0421FD ;border-top: 2px solid #0421FD; -moz-transition: all 170ms ease-in; -webkit-transition: all 170ms ease-in; -o-transition: all 170ms ease-in; position: relative; right: 6px; box-shadow: 0px 0px 5px #222; } #mask { overflow:hidden; } #slider4:hover #pause { opacity:1; } #slider4:hover #progress { background-color:rgba(255,255,255,0.0); } #slider4:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } #pause { width:468px; height:60px; position:absolute; top:0; opacity:0; pointer-events:none; -moz-transition:all 170ms ease-in; -webkit-transition:all 170ms ease-in; -o-transition:all 170ms ease-in; } #progress { width:1px; height:1px; background-color:#fff; -moz-animation:progress 35s infinite; -webkit-animation:progress 35s infinite; position:relative; top:-1px; -moz-transition:all 170ms ease-in; -webkit-transition:all 170ms ease-in; -o-transition:all 170ms ease-in; } #overlay { width:4680px; height:60px; position:absolute; top:0; pointer-events:none; -moz-transition:all 170ms ease-in; -webkit-transition:all 170ms ease-in; -o-transition:all 170ms ease-in; opacity:0.5; -moz-animation:overlay-fade 35s infinite; -webkit-animation:overlay-fade 35s infinite; } #slider4 ul { width:2400px; list-style:none; padding:0; margin:0; -moz-animation:slide-animation 35s infinite; -webkit-animation:slide-animation 35s infinite; position:relative; left:0px; overflow:hidden; } #slider4 li { display:inline; width:468px; height:60px; margin:0; padding:0; float:left; position:relative; } #slider4 li:last-of-type { background-color:#222; } #slider4 li a { display:block; text-decoration:none; } #slider4 li span { display:block; width:560px; padding:15px 20px; position:absolute; bottom:0; left:0; background-color:rgba(54,44,48,0.6); border-top:1px solid #222; text-shadow:1px 1px 1px #222; pointer-events:none; text-align:left; } @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-468px; opacity:1;} 45% {left:-468px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-936px; opacity:1;} 70% {left:-936px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1404px; opacity:1;} 95% {opacity:1;} 98% {left:-1404px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-936px; opacity:1;} 45% {left:-936px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-936px; opacity:1;} 70% {left:-936px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1404px; opacity:1;} 95% {opacity:1;} 98% {left:-1404px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:468px; opacity:1;} 22.5% {width:468px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:468px; opacity:1;} 47.5% {width:468px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:468px; opacity:1;} 72.5% {width:468px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:468px; opacity:1;} 98% {width:468px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:468px; opacity:1;} 22.5% {width:468px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:468px; opacity:1;} 47.5% {width:468px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:468px; opacity:1;} 72.5% {width:468px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:468px; opacity:1;} 98% {width:468px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } #slider4 ul li span h2 { font-size:24px; line-height:24px; color:#fff; font-weight:normal; font-family:'Communist-Regular'; text-shadow:1px 1px 1px #362c30; }

5. Setelah Di Letakan Cari Kode <div id='content-wrapper'>

Setelah Ketemu Masukan Kode Berikut Di Atas <div id='content-wrapper'>

<div id='slider4'>

<div id='mask'>

<ul>

<li>

<a href='URL Blog' title='Tulisan Mu'>

<img src='URL Gambar'/>

</a>

</li>

<li>

<a href='URL Blog' title='Tulisan Mu'>

<img src='URL Gambar'/>

</a>

</li>

<li>

<a href='#' title='#'>

<img src='#'/>

</a>

</li>

<li>

<a href='#' title='#'>

<img src='#'/>

</a>

</li>

</ul>

</div>

<div id='progress'>

</div><div id='overlay'>

</div><div id='pause'>

</div></div>

<div id='slider4'>

<div id='mask'>

<ul>

<li><a href='#' title='#'>

<img src='#'/>

</a>

</li>

<li><a href='#' title='#'>

<img src='#'/>

</a>

</li>

<li><a href='#' title='#'>

<img src='#'/>

</a>

</li>

<li><a href='#' title='#'>

<img src='#'/>

</a>

</li>

</ul>

</div>

</div>

6. Lalu Simpan

NB : Yang Tanda # Itu Isi Dengan URL BLOG, URL GAMBAR, TULISAN MU

Jika Ingin Copas Tolong Sertakan Link Sumber,,,

Jika Ada Kesalahan Hubungi Saya/Berkomentar !!! Good Luck Semoga Berhasil