Cara Pasang Widget Sidebar Social Slide Vertical Colorfull

Kode Iklan Di Sini
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>

Untuk kode script Facebook Like Box silahkan ganti dengan kode script
Facebook Like Box Anda. Agar scriptnya valid HTML5 dan SEO Friendly
silahkan baca lagi postingannya di link di bawah ini. Tentukan tinggi
widgetnya 258px dan lebarnya 300px. Untuk option Subsribe, silahkan ganti tulisan KompiAjaib dengan akun FeedBurner blog Anda. Dan untuk menu Daftar Isi dan Pages silahkan ganti tanda # dengan URL tujuan.

selamat mencoba !!

sumber:
http://www.kompiajaib.com/2013/11/membuat-widget-sidebar-social-slide.html


You Might Also Like:

Disqus Comments