Social Slide Down Widget On Sidebar
Sebenarnya widget ini ialah tanggapan untuk sahabat Kompi yang beberapa waktu yang kemudian untuk menciptakan widget sosial dalam tab dan terbuka dikala tab-nya diklik. Jadilah sebuah widget yang aku beri nama Social Slide Down Widget on Sidebar.
Dan aku berharap widget ini ialah tanggapan yang benar untuk undangan yang sahabat maksud pada postingan widget social slide full color yang sanggup 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 sanggup lebih mengirit kawasan di sidebar blog Anda. Penampakan widget ini menyerupai pada gambar dan link demo di bawah ini.
Karen widget ini berjalan dengan Jquery, silahkan Anda tambahkan Jquery di bawah ini (abaikan ini kalau 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 arahan CSS di bawah ini di atas arahan ]]></b:skin> atau arahan </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 arahan 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 == "") {this.value = "Enter your email....";}' onfocus='if (this.value == "Enter your email....") {this.value = "";}' 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 arahan javascript di bawah ini di atas arahan </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 supaya 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 menciptakan atau menambahkan widget lainnya, silahkan ikuti susunannya pada arahan HTML di atas. Dan widget ini sudah aku cek yang tentunya sudah valid HTML5 dan CSS3. Selamat mencoba...
Sumber https://www.kompiajaib.com/
0 Response to "Social Slide Down Widget On Sidebar"
Posting Komentar