Cara Membuat Vslider

Hai Minna-san , Kali ini mimin akan Membagikan Tutorial Terbaru Buat Pengunjung setia iMoe :v

VSLIDER Seprti di TamvaStreaming.v2

Tutorial kali ini hanya bisa dipasang di atas Post , Jadinya jika anda ingin memasang Tutorial ini , Silahkan Perhatikan Caranya dibawah nya :D

DEMO

Silahkan Ikuti Caranya Dibawah ini :D
Pertama Silahkan Letakkan Kode CSS ini diatas </style> / </b:skin>

/* VSLIDER Kyoki */
#vslider_optionscontainer {
    margin: 0 0 10px 0;
    float:none;
    }
#vslider_options { 
    width: 648px; 
    height: 300px;
    overflow: hidden; 
    position: relative; 
    }
    

#vslider_options a, #vslider_options a img {
     border: none !important; 
     text-decoration: none !important; 
     outline: none !important;
     } 
        
#vslider_options h4 {
     color: #FFFFFF !important;
     margin: 0px !important;padding: 0px !important;
     font-family: &#39;Bookman Old Style&#39;, serif !important;
     font-size: 16px !important;}
        
#vslider_options .cs-title {
background: #323232;
color: #FFFFFF !important;
font-family: &#39;Bookman Old Style&#39;, serif !important;
font-size: 12px !important;
letter-spacing: normal !important;
line-height: normal !important;
display: none;
}
        
#vslider_options .cs-title{ position:absolute;
 width: 637px; padding: 10px; }
#cs-buttons-vslider_options { display: none; } 
#vslider_optionscontainer .cs-buttons {clear:both; font-size: 0px; margin: -35px 0 0 280px; float: left; }
#cs-button-vslider_options{ z-index:999;outline:none;}
#vslider_optionscontainer .cs-buttons { font-size: 0px; padding: 10px; float: left; outline: none !important;}
#vslider_optionscontainer .cs-buttons a { margin-left: 5px; height: 15px; width: 15px; float: left; 
background: url(&#39;http://i.hizliresim.com/6l7EN7.png&#39;) no-repeat;background-position:top;
text-indent: -1000px;
outline: none !important;
                             }
#vslider_optionscontainer .cs-buttons a:hover  { background: url(&#39;http://i.hizliresim.com/oYPaVk.png&#39;) no-repeat;background-position: bottom;top:15px;outline: none !important;}
#vslider_optionscontainer  a.cs-active { background: url(&#39;http://i.hizliresim.com/6l7EaP.png&#39;) no-repeat;background-position:bottom;outline: none !important;}          
                                
        
#vslider_options  .cs-prev,#vslider_options  .cs-next { outline:none; }
#vslider_options  .cs-prev,#vslider_options .cs-next {font-weight: bold;background: #323232 !important;font-size: 28px !important;font-family: &quot;Courier New&quot;, Courier, monospace;color: #FFFFFF 
!important;padding: 0px 10px !important;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;}
         
#vslider_options,#vslider_options img {
     border:1px solid #FFF; 
     border-radius:0px;
     -moz-border-radius:0px;
     -webkit-border-radius:0px;
     }


.sidebar .widget {margin-bottom: 20px;line-height: 25px;}
.sidebar .widget:last-child{margin:0 !important;}
.sidebar h2 span {border-bottom: 2px solid #0084C7;padding-bottom: 3px;}
.status-msg-wrap {display: none;}

Lalu Setelah diletakkan kode CSSnya, Silahkan Save Template kalian
Lalu Pergi Ke <div id='main-wrap'> Masukan CSS Dibawah di bwah

\><b:if cond='data:blog.pageType == &quot;index&quot;'>

<!-- VSLIDER UNTUK BLOG, [AWAL] -->

<div id='vslider_optionscontainer'>
<div class='coin-slider' id='coin-slider-vslider_options'>

<!-- BATAS PENGEDITAN -->
<!-- SLIDER PERTAMA -->
<div id='vslider_options' style='width: 648px; height: 300px; position: relative; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cjczmncWiaPIlTM-K8A5pkGPwSLJCh6DmyGZWttvB96OsvjrMCNFkWQGKOD9pQifK4XtMcGVobZLWt8HrxAwqk-BRjzKrYXt7UyzAObrCZLF7cKXoeKGsY2pNIHrZLqNiyVTfHKGAlc/s1600/Untitled-1.png); background-position: 0% 0%;'><a href='http://www.nfcinaruto.com/2013/12/daftar-anime.html' style='background:#fff;' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cjczmncWiaPIlTM-K8A5pkGPwSLJCh6DmyGZWttvB96OsvjrMCNFkWQGKOD9pQifK4XtMcGVobZLWt8HrxAwqk-BRjzKrYXt7UyzAObrCZLF7cKXoeKGsY2pNIHrZLqNiyVTfHKGAlc/s1600/Untitled-1.png' style='width: 648px; height: 300px; display: none;'/>
                </a>

<!-- SLIDER KEDUA -->
<a href='https://www.facebook.com/Tokunime.Distro.Surabaya?fref=ts' style='background:#fff;' target='_blank'>
<img alt='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJK6VljMeeWAiaE_9QW1_hs_AKf2UBv8wyU5i0x3YU3Y49OJUEh0Gz6ipdG24_STJpe8QjOPc6COnYAOqkvxBJxT2Z1Ae1fr43X45KWnF9Mqn_bVG26tmF2qVc8FovLlQ_pC-IKTe8ZQ/s1600/asdfg.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJK6VljMeeWAiaE_9QW1_hs_AKf2UBv8wyU5i0x3YU3Y49OJUEh0Gz6ipdG24_STJpe8QjOPc6COnYAOqkvxBJxT2Z1Ae1fr43X45KWnF9Mqn_bVG26tmF2qVc8FovLlQ_pC-IKTe8ZQ/s1600/asdfg.png' style='width: 648px; height: 300px; display: none;'/>
</a>

<!-- SLIDER KETIGA -->
<a href='' style='background:#fff;' target='_blank'>
<img alt='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfuLZPbZhf1VLjZSzLiYGREN_sHVbo8zDJMAXfSQdcjUQjZ8Mt9f9NMjbt2_tFk6vauBCnrhm5bAjUkhNBVc8j2bk12-eYnRvzs24GvAN05NZ-ccBAohMZRkTh-H1EW9jMQmbQTvqz20/s1600/Untitled-1.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfuLZPbZhf1VLjZSzLiYGREN_sHVbo8zDJMAXfSQdcjUQjZ8Mt9f9NMjbt2_tFk6vauBCnrhm5bAjUkhNBVc8j2bk12-eYnRvzs24GvAN05NZ-ccBAohMZRkTh-H1EW9jMQmbQTvqz20/s1600/Untitled-1.png' style='width: 648px; height: 300px; display: none;'/>
</a>
<!-- BATAS PENGEDITAN -->

<!-- EDIT DENGAN LINK FOTO DAN LINK TUJUAN FOTO SAMA DENGAN SLIDER PERTAMA -->
<a class='cs-vslider_options' href='http://www.nfcinaruto.com/2013/10/naruto-episode.html' id='cs-vslider_options11' style='width: 648px; height: 300px; float: left; position: absolute; left: 0px; top: 0px; opacity: 1; background-image: url(#); background-position: 0px 0px;' target='_blank'/>
<!-- BATASSS -->

<div id='cs-navigation-vslider_options' style='display: block;'><a class='cs-prev' href='#' id='cs-prev-vslider_options' style='position: absolute; top: 135px; left: 5px; z-index: 1001; line-height: 40px; opacity: 0.7;'>&lt;</a><a class='cs-next' href='#' id='cs-next-vslider_options' style='position: absolute; top: 135px; right: 5px; z-index: 1001; line-height: 40px; opacity: 0.7;'>&gt;</a></div></div><div class='cs-buttons' id='cs-buttons-vslider_options'><a class='cs-button-vslider_options cs-active' href='#' id='cs-button-vslider_options-1'>1</a><a class='cs-button-vslider_options' href='#' id='cs-button-vslider_options-2'>2</a><a class='cs-button-vslider_options' href='#' id='cs-button-vslider_options-3'>3</a></div></div></div>
<!-- VSLIDER UNTUK BLOG,[AKHIR] -->