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...

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