Membuat Widget Sidebar Social Slide Vertical Colorful

Script ini aslinya yakni untuk sajian 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 sajian suplemen lainnya.

Sehingga dengan ini sanggup mengurangi ketinggian sidebar, alasannya yakni ini memakai slide close yang terbuka dikala di sorot mouse. Saya tambahkan juga beberapa warna supaya widgetnya jadi colorful.

DEMO

Kode CSS:

Simpan isyarat CSS di bawah ini di atas isyarat ]]></b:skin> atau isyarat </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 isyarat 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="Membuat Widget Sidebar Social Slide Vertical Colorful">Duis nec diam</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Ut sagittis</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Sed a lorem</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Mauris id mi</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Donec sit amet</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">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="Membuat Widget Sidebar Social Slide Vertical Colorful">Donec fringilla</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Quisque vel</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Duis at magna</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Maecenas rutrum</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Ut iaculis tristique</a>
 <a href="#" title="Membuat Widget Sidebar Social Slide Vertical Colorful">Suspendisse</a>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>

Untuk isyarat script Facebook Like Box silahkan ganti dengan isyarat 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

• Baca lagi: Cara Pasang Plugin Facebook Agar Seo Friendly

Untuk script Google+ Follower Custom silahkan baca lagi postingannya pada link di bawah ini. Tentukan tinggi widgetnya 200px dan lebarnya 300px

• Baca lagi: Google+ Followers Custom Widget Untuk Blog

Untuk option Subsribe, silahkan ganti goresan pena KompiAjaib dengan akun FeedBurner blog Anda. Dan untuk sajian Daftar Isi dan Pages silahkan ganti tanda # dengan URL tujuan.

Sumber https://www.kompiajaib.com/

Share this post