Cara Pasang Widget Sidebar Social Slide Vertical Colorfull

Cara Pasang Widget Sidebar Social Slide Vertical Colorfull,Anaktimor17 Blog - Widget ini sangat simpel dan tentunya memiliki tampilan yang bagus pula. Widget ini merupakan hasil kreasi Kompi Ajaib
, dimana script ini aslinya untuk membuat menu vertikal tapi di modifikasi oleh Kang Adhy Suryadi menjadi widget sosial di sidebar blog. Isinya Like Box Facebook, Google+ Followers, Subscribe, dan menu tambahan lainnya.


Berikut ini cara pemasangan Widget Sidebar Social Slide Vertical Colorfull 

1. Masuk ke Edit HTML >> Copy kode CSS di bawah ini dan paste-kan tepat di atas kode ]]></b:skin> atau kode </style>

 

#slide-vertical{text-align:left; width:98%;}
.slideHolder {height:460px; width:100%; margin:0;padding:2px;font-family:georgia, serif; border:1px solid #888; float:left;}
.slideOuter {height:460px; width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;height:800px; width:100%; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:98px;border-bottom:2px solid #fff; width:100%; overflow:hidden;transition: 0.75s;}
.slideOuter .slide li.p5 {height:318px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:280px;}
.slideOuter .slide.current li.p5 {height:318px;}
.slideOuter .slide li.p1{background:#3173d1;}
.slideOuter .slide li.p2{background:#ef7f67;}
.slideOuter .slide li.p3{background:#83ce69;}
.slideOuter .slide li.p4{background:#20c1ea;}
.slideOuter .slide li.p5{background:#b724fb;}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
.slideOuter .slide:hover li.p4 {height:43px;}
.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p4:hover {height:280px;}
.slideOuter .slide:hover li.p2:hover {height:280px}
.slideOuter .slide:hover li.p3:hover {height:150px}
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:24px;font-weight:700;line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 span,
.slideOuter .slide li.p3 span,
.slideOuter .slide li.p4 span,
.slideOuter .slide li.p5 span {color:#fff;}
.slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6)}
.slideOuter .slide li a {display:block; color:#fff; padding:0 15px;margin:0; font-size:14px; line-height:25px; width:100%;font-weight:bold; text-decoration:none; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6)}
.slideOuter .slide li a:hover {color:red}
.slideOuter .slide li.p2 .content {padding:0 15px;margin:0;width:100%;}
.submitbutton {background: #FF8000;border: 1px solid #F66303;font: bold 12px Arial, sans-serif;color: #fff;height: 25px;padding: 0 12px;margin: 0 0 0 5px;cursor: pointer;}
.enteryouremail {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 8px 0px 8px;color: #a19999;font-size: 12px;height: 25px;width: 165px;margin: 0px;}
.enteryouremail:focus{outline:none}
.clear {clear:left;}

2. Save Template Anda !!
3. Masuk Ke Tata Letak >> Tambah Gadget>> HTML/JavaScript
4. Copy kode HTML di bawah ini dan paste-kan di kolom gadget...

 

<div id="slide-vertical">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<span>Facebook</span>
<p>Temukan kami di Facebook Page</p>
KODE SCRIPT FACEBOOK LIKE BOX</div>
</li>
<li class="p2 current">
<div>
<span>Google+ Followers</span>
<p>Follow Kompi Ajaib On Google+</p>
<div class="content">
KODE SCRIPT GOOGLE+ FOLLOWER CUSTOM</div>
</div>
</li>
<li class="p3">
<div>
<span>Subscribe</span>
<p>Enter your email address to get the latest update from Kompi Ajaib on box below</p>
<div class="content">
<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="enteryouremail" name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input type="hidden" value="KompiAjaib" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submitbutton" type="submit" value="Subscribe" /></form>
</div>
</div>
</li>
<li class="p4">
<div>
<span>Daftar Isi</span>
<p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<a href="#" title="Duis nec diam">Duis nec diam</a>
<a href="#" title="Ut sagittis">Ut sagittis</a>
<a href="#" title="Sed a lorem">Sed a lorem</a>
<a href="#" title="Mauris id mi">Mauris id mi</a>
<a href="#" title="Donec sit amet">Donec sit amet</a>
<a href="#" title="Aliquam placerat">Aliquam placerat</a>
</div>
</li>
<li class="p5">
<div>
<span>Pages</span>
<p>Aenean quis lacus id eros lobortis dapibus sed non nisi.</p>
<a href="#" title="Donec fringilla">Donec fringilla</a>
<a href="#" title="Quisque vel">Quisque vel</a>
<a href="#" title="Duis at magna">Duis at magna</a>
<a href="#" title="Maecenas rutrum">Maecenas rutrum</a>
<a href="#" title="Ut iaculis tristique">Ut iaculis tristique</a>
<a href="#" title="Suspendisse">Suspendisse</a>
</div>
</li>
</ul>
</div>
</div>
</div>