Seputar Teknologi Komputer Jaringan

Konbawa Minna-san ^^ , Kali ini Mimin Membagikan Tutorial Cara membuat Ucapan Selamat Datang Langsung Aja mimin :v Langsung aja deh cek demonya dibawah :v

DEMO

Langsung saja, ikuti caranya dibawah

Pertama Silahkan Letakkan Kode CSS di </style>/</bskin>

/* Cucuk CSS */
.cucuk {padding: 15px;line-height: 18px;text-align: center;background: #FFFFD4;color: #494949;border: 1px solid #EBEDEE;margin: 5px 0px;}
.cucuk a{color: #111;
font-family: &#39;Roboto Condensed&#39; sans-serif;
font-size: 13px;
}
.dl-box{margin:10px 0;}
.item-dl{float: left;
background: #39d;
padding: 3px 5px;
width: 75px;
text-align: center;
border-bottom: 2px solid #fff;
font-weight: 700;
font-size: 12px;
color: #fff;
}
/* Penuntup CSS */

TARUH DI ATAS POST ATAU HTML 
<div id='main-wrap'>
<div class='cucuk'><a>Selamat Datang Member,Selamat Membaca!</a></div>
<div class='clear'/>
<div class=''>
<h2/>

Jangan Lupa Tinggalkan Komentar kalian yah ! :D

Dan Jangan Lupa Like Fanpages kami yah ! :D

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/AVvXsEjzDp7lBhx52_OhtxDBIA0Ap2bBAGCLEs5tQtTZ3oSnZnHPFX8k6rouCjNpxQCR_zbcejIWgkepBx2QoWUp3J7BvcEUr9z9V_RzhHcoOnReaEI2msy95sum9OYl1Ko6M7bXyal6eBw6V38/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/AVvXsEjzDp7lBhx52_OhtxDBIA0Ap2bBAGCLEs5tQtTZ3oSnZnHPFX8k6rouCjNpxQCR_zbcejIWgkepBx2QoWUp3J7BvcEUr9z9V_RzhHcoOnReaEI2msy95sum9OYl1Ko6M7bXyal6eBw6V38/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/AVvXsEi0WaIs9VGvETfcSkx_Dtj0nj87oLpzc1iyeJoIYHIX-hvNzPDKSOMllS-UcfNxmLnN8NQwHSVvcntFDdS5cnRWD454llX0Gw39mL3QcPfEsTc9ZnsCBrhLiDA2SU_8NwkXZmXpByAVaXc/s1600/asdfg.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WaIs9VGvETfcSkx_Dtj0nj87oLpzc1iyeJoIYHIX-hvNzPDKSOMllS-UcfNxmLnN8NQwHSVvcntFDdS5cnRWD454llX0Gw39mL3QcPfEsTc9ZnsCBrhLiDA2SU_8NwkXZmXpByAVaXc/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/AVvXsEgEIaykjNooEGlBH34J3zjqpn1B55towQ-Yz73hfJ92AJMuuJalNmSaMXTFNhwBhNLKLArBMhIbet5C99b5tHbL15HxLOS9pbRuv_wGGlmpjlJQiKS2WM4n1Ou0xyyGVlJtD8B_jeWkZWU/s1600/Untitled-1.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEIaykjNooEGlBH34J3zjqpn1B55towQ-Yz73hfJ92AJMuuJalNmSaMXTFNhwBhNLKLArBMhIbet5C99b5tHbL15HxLOS9pbRuv_wGGlmpjlJQiKS2WM4n1Ou0xyyGVlJtD8B_jeWkZWU/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] -->