Membuat Widget Sidebar Social Slide Vertical Colorful

Membuat Widget Sidebar Social Slide Vertical Colorful

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

72 Comments Add Comment

saya ijin save dulu kang, maklum masih belum ada waktu edit mengedit atau melanjutkan project template buatan sendiri.
Thanks udah berbagi kang adhy ;)

Balas

Waw.. blognya jadi cantik, kayak anak perawan.. :D

Balas

met sore kang,nyimak dlu kang lain kali di coba

Balas

izin bm dulu kang hehe lg bnyk trouble ma blog saya :-D

Balas

Salam Kang Adhy Commnts dulu yah Kang tar abis comment baca artikel
yang bermanfaat tentang membuat Widget side Bar, dari akang pasti`
lebih edun dan top markotop pastinya. :) :sip

Balas

Kreatif :D hasilnya keren banget mas :D lebih menghemat ruang di sidebar :D

Balas

Iya yang nomor satu tetep kuliah dulu mas :D hehehehe

Balas

Heheheh rame ya...warna-warni :D

Balas

Iya silahkan di coba dan dkembangkan lagi mas :D

Balas

Silahkan mas, semoga troublenya cepat selesai :)

Balas

Makasih mas Febri :D

Balas

Hanya mengubah dan menyesuaikan script yang ada kang :D

Balas

Color ful abissss kang .. kereeennn

Balas

Iya mas, biar menghemat sidebar :D

Balas

Hehehehe...balonku ada 5 meledak semuanya heheheh :D

Balas

Mantep bener artikel ini Kang, sangat simple mudah dimengerti
Namun sangat bermanfaat, jadi satu widgetnya yah Kang Adhy
Kang cara membuat halaman DEMO seperti demo di artikel ini
Bagai man cara nya Kang? :)

Balas

Itu di jsfiddle.net kang, silahkan daftar di sana. Buat demo di sana kemudian share. :)

Balas

ditambah bisa juga membuat blog kita lebih awesome :D

Balas

Ajibb gilee kerenn kang.. satu kata "salut" euy :-d

Balas

kereeeen, biar terus terbuka setelah dihover bisa ga? walaupun pointer tidak diatas objek.

Balas

hehehe.......oke dah Kang, aduh jadi malu nih ketahuan masih sekolah

Balas

Mayan hehehe :D

Balas

Iya mas ada juga yang dibuka pakai onclick tetap terbuka, kalau ini hanya pakai hover. Nanti kalau ada saya share juga :D

Balas

Alhamdulillah mas Hasby bisa kuliah, saya malah tidak pernah merasakan bangku kuliah :D

Balas

selamat malam Sob..hm kapan kapan ini bisa saya praktekkan yaa Sob. Tapi Kode CSS nya tidak berat kan Sob ?

Balas

CSS nya rame banget mas

Balas

iy Kang, tp bukan bermaksud tidak bersyukur. Semua ilmu bisa didapat dr mana saja, dan kesuksesan pun tergantung keuletan dr pelakunya. Sama kayak Kang Adhy ini lah, top ;)

Balas

Ada yang dijejerin ke bawah jadi kelihatan banyak hehehehe :D

Balas

Tidak juga sih mas (menurut saya hehehe ) :D

Balas

Silahkan mas Rahmat :D

Balas

luncur juga nih widget yang keren ini hehehe :)

Balas

kalau onclick kan pake js mas. kalau pake css aja gimana?

Balas

gk bisa kang gk ngerti kode maklum pengguna hp doank

Balas

Hmm keren nih mas :) pengunjung akan lebih suka nih hihihi

Balas

bagus, warna warni bikin fresh :)

Balas

Iya sis lumayan hhehehee :D

Balas

Heheheehe penuh warna ya :D

Balas

Iya mbak biar kaya pelangi penuh warna :D

Balas

seperti biasa mas. saya ijin simpan dulu kodenya.. soalnya ribet banget kalau edit html pake hp.. kapan kapan pas main tempat temen minjem kompi, baru deh akan saya coba... hehehe terimakasih ya mas....

Balas

kalau kode CSS saya langsung angkat tangan,,,tapi kalo kode HTML saya akan mencoba mempraktekkannya :-)

Balas

color full, Rainbow Social Widget hehe :D

Balas

Watt kolor pedot he...
Ajaib kang Widgetna, Mantap pisan pokona mah :)

Balas

Beuh ... Keren banget Mas ... :D

Balas

Iya mas Nady silahkan dicoba lain waktu :D

Balas

Iya mas Hari silahkan :D

Balas

Iya kang pelangi-pelangi alangkah indahnya, merah kuning hijau .... hehehe :D

Balas

Hehehehe kade kang sing tarik nalian kolorna hehehe :D

Balas

Makasih mas Nazar :D

Balas

Benar benar penuh warna kang, kereeeeeenn...

Balas

hehe tapi kuliah itu pusing mas adhy kebanyakan tugas .. :D
dan sering stress ..untung saya punya hobby ngblog jadi sedikit terobati ..

Balas

Makin keren aja nih tutorial mas adi :D

Balas

Iya makanya saya kasih judul colorful hehehehe bukan kolor ijo :D

Balas

Mayan lah mas Minato :D

Balas

wahh keren gan emm ijin untuk otak atik kode.nya ya gan ?sambil belajr nih buat nambah ilmu

Balas

mas adhy.. di widged ini kan ada 5 jenis sidebar.
(1.facebook fp. 2. google+ 3. subscribe. 4. daftar isi 5. page)
kalau misalnya kita ingin menghilangkan salah satu nya gmna..misalnya saya ingin memasang (facebook, g+,subscribe dan page) Namun untuk daftar isi sya tidak ingin memasangnya, dan tampilannya agak terlalu dekat coba mas liat di blog saya" Http//update-film-movies.blogspot.com " yg ingin saya tanyakan code apa saja yg hrus di hapus pada pada css dan js untuk wdged ini, bingung saya maklum masih pemula. tolong di respon ya mas.. makasih.

Balas

Pakai kode ini
kode CSS :
#slide-vertical{text-align:left; width:98%;}

.slideHolder {height:370px; width:100%; margin:0;padding:2px;
font-family:georgia, serif; border:1px solid #888; float:left;}

.slideOuter {height:370px; width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;
height:370px; 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.p3 {height:150px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:280px;}
.slideOuter .slide.current li.p3 {height:150px;}

.slideOuter .slide li.p1{background:#3173d1;}
.slideOuter .slide li.p2{background:#ef7f67;}
.slideOuter .slide li.p3{background:#83ce69;}

.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3 {height:43px;}

.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p2:hover {height:280px}
.slideOuter .slide:hover li.p3:hover {height:280px}

.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 {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;}

Balas

Dan kode HTML-nya:
<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>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKompi-Ajaib%2F395526477133955&amp;width=300&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowTransparency="true"></iframe>
</div>
</li>

<li class="p2 current">
<div>
<span>Google+ Followers</span>
<p>Follow Kompi Ajaib On Google+</p>
<div class="content">
<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/+AdhySuryadi" data-source="blogger:blog:followers" data-width="300"> </div>
</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>
</ul>
</div>
</div>

</div>

Balas

Kode iframe facebooknya jangan dipakai itu hanya contoh aja, pakai kode facebook yang disarankan pada postingan di atas.

Balas

Ini hasil jadinya http://jsfiddle.net/kompiajaib/spHE4/show/

Balas

ok mas saya coba dulu...
dan terima kasih banyak atas jawaban yang sangat rinci..
salut sama mas..
sekali lagi makasih ya mas

Balas

Pada kode ini
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:20px;font-weight:700;line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
Coba ganti font-size nya jadi 20px biar tidak terlalu besar tulisannya.

Balas

ok mas makasih atas bantuannya..
sangat membantu..
sukses terus KA

Balas

Dan pada kode
.slideOuter .slide.current li.current {height:280px;}
Rubah height-nya jadi 270px, saya lihat iru tab Subcribe-nya kepotong. Jika masih kurang kurangi lagi sedikit-sedikit misalnya 268px.

Balas

dah mantap masss.. dah diedit semuanya sesuai petunjuk...
dan tampilan nya keren bgt..
thanks atas bantuan dan ilmunya...
:)

Balas

Sama-sama senang bisa membantu sesama :D
Satu lagi ada yang masih kurang tuh, coba jika kita arahkan mouse ke Google+ maka tingginya jadi nambah dan tab subscribe jadi ngelelep ke bawah, coba pada kode
.slideOuter .slide:hover li.p2:hover {height:280px}
Samakan height-nya dengan yang kode di atas tadi yang dijadiin 270px

Balas

oya mas cara buat widged blog follow (join blog) yang keren dan rada2 berkedip seperti di kompi ajaib itu gmna mas..
hehehehehe
adakah artikel tutorial di blog ini yg membahas tentang itu..

Balas

Ada di sini http://www.kompiajaib.com/2012/07/mengganti-followers-blog-widget-blogger-dengan-link.html
Dan untuk gambarnya tinggal Save Image As aja gambar yang kedip-kedip di atas kemudian upload ulang gambarnya di blognya dan masukan ke linknya sesuai dengan tutorialnya.

Balas

yosss
thanks kang adhy, sya baca2 dlu..
dan thanks bangett untuk semuanya..

Balas

Kunjungan pagi Kang :) wah dapet tips baru nih dari MASTER :) :) izin share ya Kang :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×