Social Slide Down Widget On Sidebar

Social Slide Down Widget On Sidebar

Bola Hero Gawai

Social Slide Down Widget On Sidebar

Social Slide Down Widget
Sebenarnya widget ini adalah jawaban untuk sobat Kompi yang beberapa waktu yang lalu untuk membuat widget sosial dalam tab dan terbuka ketika tab-nya diklik. Jadilah sebuah widget yang saya beri nama Social Slide Down Widget on Sidebar.

Dan saya berharap widget ini adalah jawaban yang benar untuk permintaan yang sobat maksud pada postingan widget social slide full color yang bisa Anda baca lagi pada link di bawah ini.


Widget ini berisi Facebook Like Box, Google+ Followers, dan Subscribe, namun ini masih memungkinkan untuk Anda tambahkan widget lainnya sehingga bisa lebih mengirit tempat di sidebar blog Anda. Penampakan widget ini seperti pada gambar dan link demo di bawah ini.

Screenshot Social Slide Down Widget


Karen widget ini berjalan dengan Jquery, silahkan Anda tambahkan Jquery di bawah ini (abaikan ini jika di blog Anda sudah terdapat Jquery versi berapa pun)


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js' type='text/javascript'/>

Kemudian silahkan simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau kode </style>

Kode CSS


#socialdown,
#socialdown ul,
#socialdown li,
#socialdown a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
#socialdown a {
  line-height: 1.7;
  padding: 6px 15px;
}
#socialdown {
  width: 300px;
}
#socialdown > ul > li > a {
  font-size: 18px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background:  #499bea;
  background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
#socialdown > ul > li > a:hover {
  text-decoration: none;
}
#socialdown > ul > li.active {
  border-bottom: none;
}
#socialdown > ul > li.active > a {
  background: #b3dced;
  background:linear-gradient(to bottom, #b3dced 0%, #2fc4fa 100%);
  color: #555;
  text-shadow: 0 1px 1px #b3dced;
}
#socialdown > ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  top: 15px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#socialdown > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 17px;
  border: 5px solid transparent;
  border-top: 5px solid #555;
}
#socialdown ul ul {
  padding: 0;
  display: none;
}
#socialdown ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
#socialdown ul ul li {
  background: #efefef;
  border-bottom: 1px solid #c9c9c9;
}
#socialdown ul ul li:last-child {
  border: none;
}
.submitbutton {
    background: #FF8000;
    border: 1px solid #F66303;    
    font: bold 12px Arial, sans-serif;
    color: #fff;height: 25px;    
    padding: 0 8px;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: 162px;
    margin: 0px;  
}
.enteryouremail:focus{
    outline:none
}

Kemudian simpan kode HTML ini pada gadget HTML/Javascript di sidebar blog Anda.

Kode HTML


<div id='socialdown'>
<ul>
   <li class='has-sub'><a href='#' title='We Are On Facebook'><span>We Are On Facebook</span></a>
      <ul>
         <li>
<span class="fb-like-box" data-href="https://www.facebook.com/kompiajaib" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></span></li>
 </ul>
   </li>
   <li class='has-sub'><a href='#' title='Google+ Followers'><span>Google+ Followers</span></a>
      <ul>
         <li style="padding-top:10px;padding-left:22px"><span class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/+AdhySuryadi" data-source="blogger:blog:followers" data-width="300">  </span>
</li>
      </ul>
   </li>
   <li class='has-sub'><a href='#' title='Subscribe This Blog'><span>Subscribe This Blog</span></a>
       <ul>
         <li style="padding:15px;font-size:11px;text-align:left;line-height:1.4em;"><span>Enter your email address to get the latest update from Kompi Ajaib on box below</span>
<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>
</li>
      </ul>
       </li>
</ul>
</div>

Kode Javascript

Silahkan simpan kode javascript di bawah ini di atas kode </body>

$('#socialdown > ul > li > a').click(function() {
  $('#socialdown li').removeClass('active');
  $(this).closest('li').addClass('active');
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#socialdown ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;
  }
});

Untuk Facebook Like Box silahkan ganti URL-nya dengan URL Profil Facebook Anda. Untuk pastinya silahkan baca lagi tutorial pemasangan plugin Facebook agar valid HTML5 dan SEO Friendly di link di bwah ini.


Begitu pun dengan Google+ Followers, silahkan ganti URL-nya dengan URL Profil Google+ Anda. Namun pastikan blog Anda sudah terpasang javascript untuk plugin Google+. Dan untuk widget Subscribe silahkan ganti "KompiAjaib" dengan user name Feed Burner blog Anda.

Untuk membuat atau menambahkan widget lainnya, silahkan ikuti susunannya pada kode HTML di atas. Dan widget ini sudah saya cek yang tentunya sudah valid HTML5 dan CSS3. Selamat mencoba...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

88 Comments Add Comment

tidak mengerti yang beginian mas, tapi bisa belajar dah :)

Balas

wah accordion ya mas? :D

Balas

Keren Kang moal ampar amapran di lacian mah....
Langsung praktek, kaleresan nj edit template

Balas

Kalau mau belajar nanti juga pasti ngerti mas =D

Balas

keren mas, bisa mengirit tempat disidebar hehehe ^_^

Balas

Kang pami hoyong subscibe na wungul kmaha Kang?

Balas

Iya mas accordion :D

Balas

Ambil code CSS sareng HTML subscribe we kang...

Balas

Iya sis buat yang lagi ngirit tempat di sidebar =D

Balas

jadi ngirit tempat :-d

Balas

Kapan2 saya coba kang Adhy :D

Balas

Mohon maaf mas, mau tanya kalo pas cek valid 5 kok ada yg eror di javascript itu gmn mas cara benahinya, erornya seperti ini
http://s9.postimg.org/vhn9djm0u/valid5.jpg
Terima Kasih mohon solusinya.. :)

Balas

Muhun kang ngirit tempat :D

Balas

Silahkan mas Emil =D

Balas

Kalau dari template Maskolis, coba hapus kode ini
<b:if cond='data:top.showDummy'>
<script expr:src='data:top.dummyUrl'/>
</b:if>

Balas

Side bar saya masih lebar sebenarnya Kang tapi boleh juga
Ini sebagi meminimalis tampilan blog yah Kang terima kasih :-d

Balas

Alahmdulillah, sekarang statusnya sdh Passed, tpi kok msh ada 1 warning mas? apakah memang begitu? suwun.. :)

Balas

Kalau buat template responsive saya kode di atas bisa gak
Kang Adhy soalnya sama apa yang dikatakan Mas Mendrow :)

Balas

waaah cocok untuk template ku nih ;) ijin make mas ..

Balas

Iya mas, warning yang itu memang begitu =D ga apa-apa :D

Balas

Jika errornya sama coba aja cori kode itu, jika ada hapus kodenya :D

Balas

Sebenarnya scriptnya bisa dimodif lagi Kang, bisa jadi menu vertikal misalnya... tinggal kreatifnya :D

Balas

Silahkan sista... dicoba aja... ^_^

Balas

cakep kang.. apa lagi pilihan warnanya bikin betah.. :D

Balas

Kang jika widget Subscribe nya di ganti dengan widget artikel terbaru
Atau Recent posts. gimana ganti kode CSS juga kode Html dan kode
Javascriptnya yang valid html5 soalnya yang ada di saya gak valid Kang :)

Balas

Yang ada di template saya seperti di bawah ini Kang :
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>


Apakah ini penyebab error juga? dan perlu hapus saja Kang

Balas

Iya kang ganti kode CSS untuk subscribe-nya begitu juga untuk HTMLnya. Atau tambahkan saja di bawahnya (jika menginginkan subscribe tetap ada) seperti menambahkan susunan pada menu kang :D tinggal cntoh susunan di atasnya.

Balas

Iya mas kalau yang cakep suka bikin betah hehehehe =D

Balas

Sepertinya yang itu tidak menyebabkan error kang... :D ga usah dihapus.

Balas

Yakinlah kalau yang desain widgetnya mas adi, pasti keren. Akan saya coba jika ruang di sidebar sudah padat kebawah :D

Balas

Mantab kang , saya mau nerapin di blog saya tapi saya kira kurang pas atau gk cocok , soal'a widget saya dikit kang ;) , izin simak ajah deh buat pengalaman + buat nambah" pengetahuan :-d

Balas

http://prntscr.com/2bbexs
itu kenapa ya mas ? salahnya dmana ya mas ?

Balas

Mantap kang .. ini buat blog yang rada harerin nya kang .. biar tidak pasered-sered gitu hehe |o|

Balas

Maksudnya kaya saya gitu kang wkwkwkwkwk @@,

Balas

Terimakasih Kang Penjelasanya cukup masuk akal
Akan saya coba semoga berhasil terima kasih Kang :-d

Balas

Top tepat kaya Kang Ruly =D Tapi Kang Ruly sperti wideget dong :D

Balas

nah bagus nih buat menghemat tempat di sidebar :D

Balas

tambahkan kode ini mas :)

<script type='text/javascript'>
kode js disini....
</script>

Balas

Oke kang sudah mendarat dengan baik di blog sayah :D

Balas

Kang Adhy maaf nih OOT, Kok blog saya gak keliatan threaded comment hack nya ya. Padahal saya sudah ikuti tutorialnya..
Saya pakai template mas-sugeng.
Tolong pencerahannya ya kang.. :)

Balas

Kalau sudah berhadapan dengan kode" sepertii ini nyerah deecchh..
Cuma bisa nyimak saja

Balas

ketinggalan info nih, susah bgt dpt pertamax disini ya :D
simple mas menunya, saya simpan dl kode nya :) trims

Balas

kang bade naroskeun saputar threadded comment.
Kan biasana mah pami di klik tombol reply teh muncul link http://www.contoh.com/2013/12/contoh.html#r_c5030754266324503975

Tapi naha komentar nu abdi mah teu muncul kang, pami di hover mah aya pas di klik teu muncul dina address link. Kunaon nya ?? @@,

Balas

wuiiih ketinggalan jauh postingannya.. maaf baru bisa berkunjung ke perguruan kompi ajaib :)
pokonya mantaps akur daun nya :D

Balas

wah bisa dicoba nih, kayaknya ringan nih.
oiya mas adhy saya mau tanya cara memberi title link (title tag, kurang paham namanya) kesemua link, termasuk nama orang yang komentar caranya gimana ya screenshot : http://prntscr.com/2bd7cj , sama pertanyaan saya di jawab ya mas dihttp://www.kompiajaib.com/2013/02/membuat-semua-link-external-otomatis-nofollow.html?showComment=1387125652352#c7779361533775184811

Thanks

Balas

Siipp kang jadi tambah keren tuh sidebar atasnya :-d

Balas

Wkwkwkkw kang Ruly kejebak kang Saud :D =D

Balas

Heheheeh iya silahkan kang :D

Balas

Iya betul silahkan utak-atik buat pembelajaran :D

Balas

Betul kata sis Leony, jika masih belum bisa coba pakai seperti ini
<script type='text/javascript'>
//<![CDATA[

JAVASCRIPT DI SINI

//]]>
</script>

Balas

Muhun kang dilacian ameh ngirit tempat hehehehe :D

Balas

Betul mas buat menghemat tempat :D

Balas

wkwkwk tapi widget yg paling dicari ya heuheu

Balas

tah bahasa eta anu lieur teh Akur Daun hahaha

Balas

Mungkin juga ada yang bentro, gini aja coba lagi... ganti semua CSS komentar sebelumnya dengan CSS threaded comment hack sebelumnya begitu pun dengan HTMLnya.

Balas

Silahkan saja sis, siapa tahu nantinya tertarik untuk kotak-katik kode =D

Balas

Silahkan sista =D

Balas

Hehehehe muhun Akun papada Daun =D

Balas

Yang jelas berikan title pada semua link di HTML komentar dan photo avatarnya (alt dan title) pada threaded comment hack, jika menggunakan threaded comment default blogger ini tdak berjalan/ tidak muncul title-nya.

Balas

mas, maaf mau tanya nih. gimana caranya mengatasi Missing required field "updated".???
aku udah coba di artikel mas adhi yang:

http://www.kompiajaib.com/2013/12/kini-missing-author-dan-update-bisa.html
http://www.kompiajaib.com/2012/12/mengatasi-missing-reqiured-field-update.html

tapi masih tetep saja muncul..
mohon bantuannya mas.. :(

Balas

Keren mas, hasilnya seperti biasa, bisa mengemat ruang di sidebar :D hehe

Balas

hahhaa.. emuteun keneh kang rully, nuju posting accordion, lieureun dipasihan akur daun teh kang :D

Balas

Keren kang, bisa ngirit tempat nih, saya bukmak dulu ya kang... :D

Balas

Kang Adhy, Blog Kompi pasang threaded comment hack ya??? tutorialnya dimana ya ? =D

Balas

Makasih mas =D

Balas

Makasih mas Firman :D

Balas

Ngeceknya jangan di webmaster, tapi di rich snippets testing tool mas biar kelihatan hasilnya

http://www.google.com/webmasters/tools/richsnippets

Balas

Iya mas buat menghemat sidebar =D

Balas

Silahkan mas =D

Balas

Pakai yang kang Ismet mas :D

Balas

hehehe udah bisa mas adhy :) makasih mas :)
dan makasih juga buat kak LEONY LY :D

Balas

Kok saya pasang threaded comment hack di kang Ismet gak ada prubahan dikomentar blog ku ?? :(

Balas

Siippp udah saya lihat diblognya...kerenn :-d cuman yang subscribe kayak belum dirubah ya? heheheh

Balas

Apakah kode CSS koment yang pertamanya sudah dihapus?

Balas

Saya pake template baru lagi kang,,,terus waktu saya coba hasilnya zoonkk :D

Balas

mas adhy di diposting dong tutorial tentang title tag yang tentang cara pasang title artikel di homepage, kesemua link, polular post, breadcump, termasuk nama orang yang komentar dan gambar, Terimakasih :D

Balas

sangat simple ya mas terus irit tempat lagi, tapi berat ngak...?

Balas

kalau dicek di rich snippets testing tool, sama saja mas.
tetep muncul eror kayak gitu, gimana mas????
mohon bantuannya,,

Balas

Coba pakai kode ini
<div class='postmeta'>
<h3 class='date-header'><span class='author'>Posted by : <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'>
<span class='post-author vcard'>
<span class='fn'><data:post.author/></span>
</span></a> </span>
<span class='clock'> On <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> with <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
</div>

Balas

kunjungan pagi.

betul mas... kalo sdh terbiasa, apapun jd terasa mudah :D

Balas

alhamdulillah, sudah nggak muncul lagi mas..
terima kasih mas. :D

Balas

Keren mas, bisa buat menghemat space di sidebar blog. Kapan - kapan tak cobane, ijin Bookmark dulu ya om :)

Balas

Sebelum praktek "Social Slide Down Widget on Sidebar" karya Mas Adhy ini, Saya komentar dulu ya mas..

Keren, dan Hemat tempat,..
"Mirip dengan Accordion nggak sih Mas Adhy?, bedanya apa?",

Salam Kenal lagi..he..he.. absen lama sekali nih saya mas. Maaf.

Terima kasih sudah berbagi "Social Slide Down Widget on Sidebar" ini. Mas Adhy.

Balas

tapi di blog sya ko ga work ya :( pas mau masukin kode yg terakhir malah gak bisa katanya ada kode && yg dilarang

Balas

Menyimpan javascriptnya seperti di bawah ini
<script type='text/javascript'>
//<![CDATA[
KODE JAVASCRIPT DI SINI
//]]>
</script>

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!

×
×
×