Ayo kita bikin widget social media Facebook dan Google+ yang bisa slide down. Facebook like atau Google+ follower terlihat setelah di klik....
Ayo kita bikin widget social media Facebook dan Google+ yang bisa slide down. Facebook like atau Google+ follower terlihat setelah di klik. Jadi widget-nya akan nampak satu saja setelah klik sedangkan yang lainnya tersembunyi. Agar lebih jelas lihat screenshot di bawah ini.
Bagaimana cara membuatnya?
Kita butuh HTML, JavaScript, dan CSS berikut.
Lebih jelas klik tombol lihat demo.
Selamat mencoba :)
Bagaimana cara membuatnya?
Kita butuh HTML, JavaScript, dan CSS berikut.
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/laluabdrahman" 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/+laluabdrahman" data-source="blogger:blog:followers" data-width="300"> </span>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><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 Jelasinblog 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=JelasInBlog', '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="JelasInBlog" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe" />
</form>
</li>
</ul>
</li>
</ul>
</div>
JavaScript
$('#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;
}
});
(function () {
window.___gcfg = {
'lang': 'en'
};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
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
}
Lebih jelas klik tombol lihat demo.
Selamat mencoba :)
COMMENTS