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: 'Bookman Old Style', serif !important;
font-size: 16px !important;}
#vslider_options .cs-title {
background: #323232;
color: #FFFFFF !important;
font-family: 'Bookman Old Style', 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('http://i.hizliresim.com/6l7EN7.png') no-repeat;background-position:top;
text-indent: -1000px;
outline: none !important;
}
#vslider_optionscontainer .cs-buttons a:hover { background: url('http://i.hizliresim.com/oYPaVk.png') no-repeat;background-position: bottom;top:15px;outline: none !important;}
#vslider_optionscontainer a.cs-active { background: url('http://i.hizliresim.com/6l7EaP.png') 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: "Courier New", 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
<div id='main-wrap'>
\><b:if cond='data:blog.pageType == "index"'>
<!-- 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/AVvXsEi7jU_q7Pxc_WP7udBqPbic-XZrY4Ynr3OnDVTP4UOurvCmxJISKNSsQCFIVMcu-i_Q55AKWJ9RCmmSC9voa8pjOYgdrh0W1ejraTLC8q8wXIk8nEopyoPH8PhfqDhKQZDqzH0Q2VNtHdI/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/AVvXsEi7jU_q7Pxc_WP7udBqPbic-XZrY4Ynr3OnDVTP4UOurvCmxJISKNSsQCFIVMcu-i_Q55AKWJ9RCmmSC9voa8pjOYgdrh0W1ejraTLC8q8wXIk8nEopyoPH8PhfqDhKQZDqzH0Q2VNtHdI/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/AVvXsEicWuk51Bz4DhhI-kDCEpypDqYXR7K01JFsDqFCAtbrH11Q3MarfWE2ArWh22ynlp7vncbC9sJ-vyJo63_Rsj58OXNDguSv5gUAkunvo8VHC10CN13dDEcoKSqGDicXDQq-UHO2Sfh4tyM/s1600/asdfg.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWuk51Bz4DhhI-kDCEpypDqYXR7K01JFsDqFCAtbrH11Q3MarfWE2ArWh22ynlp7vncbC9sJ-vyJo63_Rsj58OXNDguSv5gUAkunvo8VHC10CN13dDEcoKSqGDicXDQq-UHO2Sfh4tyM/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/AVvXsEhUPI48hAVVa6M0XGGyBGouL6p6QuDA2lNRGovKHfFRVdj6sstksP46vxQDW9u0MX4Ln1_rIRdbqwxiKuEyV-Z8760yS8GD8VXbdXcguRAboEMQL9B5DkXjrFQlsVrso3LLXSEQoNq3Yg0/s1600/Untitled-1.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPI48hAVVa6M0XGGyBGouL6p6QuDA2lNRGovKHfFRVdj6sstksP46vxQDW9u0MX4Ln1_rIRdbqwxiKuEyV-Z8760yS8GD8VXbdXcguRAboEMQL9B5DkXjrFQlsVrso3LLXSEQoNq3Yg0/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;'><</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;'>></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] -->
Nah lalu Liat Hasilnya :D
Jika ada masalah silahkan Komentar dibawahnya :D
Cara Setting Pasti kalian sudah tau dong :v
Jangan Lupa Tinggalkan Komentar kalian dibawahnya :D
Dan Jangan Lupa Like Fanpages kami juga yah ! :D
No comments