Membuat Widget Sidebar Social Slide Vertical Colorful

Widget Sidebar Social Slide Colorful
Script ini aslinya adalah untuk menu vertikal di sidebar yang saya gunakan pada tema blog sebelum ini, namun saya modif lagi untuk dijadikan sebagai widget sosial di sidebar yang isinya Like Box Facebook, Google+ Followers, Subscribe, dan menu tambahan lainnya.

Sehingga dengan ini dapat mengurangi ketinggian sidebar, karena ini menggunakan slide close yang terbuka ketika di sorot mouse. Saya tambahkan juga beberapa warna agar widgetnya jadi colorful.



Kode CSS:

Simpan kode CSS di bawah ini 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;}


Kode HTML:

Simpan kode HTML di bawah ini pada gadget HTML/JavaScript di sidebar.


<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 script Google+ Follower Custom silahkan baca lagi postingannya pada link di bawah ini. Tentukan tinggi widgetnya 200px 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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments