Share Widget Keren Dengan Tooltip - ini sebenarnya sama dengan share widget lainnya. Bedanya hanya pada tampilannya yang dilengkapi tooltip, sehingga terlihat lebih menarik dan atraktif. Sebelumnya saya ucapkan terima kasih pada helper blogger atas scriptnya. Sekarang mari kita bahas cara membuat share widget keren dengan tooltip. Ikuti langkah berikut.
Langkah-langkahnya :
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88",
"apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"",
"designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
var SHRCB_Globals = {"perfoption":"1"};
</script>
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<script type='text/javascript'>
if (typeof(SHR4P)=="undefined") SHR4P = {};
SHR4P.blogger_addDiv = SHR4P.blogger_addDiv || function(divClass)
{
var post = new RegExp('hentry');
var titleContainer = new RegExp('post-title');
var postContainer = new RegExp('post-footer');
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++)
{
var classes = elements[i].className;
if (post.test(classes))
{
var container = elements[i];
for (var j = 0; j < container.childNodes.length; j++)
{
var item = container.childNodes[j].className;
if (titleContainer.test(item))
{
var link = container.childNodes[j].getElementsByTagName('a');
if (typeof(link[0]) != "undefined")
{
var url = link[0].href;
var title = link[0].innerHTML;
}
else
{
var url = document.url;
var title = container.childNodes[j].innerHTML;
}
if (typeof(url) == "undefined"|| url == 'undefined' ){
url = window.location.href;
}
title=title.replace('"',"%22");
}
if (postContainer.test(item))
{
var footer = container.childNodes[j];
}
}
var d = document.createElement('div');
var code = '<div style="clear:both"></div><div class="' + divClass + ' shareaholic-show-on-load" data-shr_href="' + encodeURI(url) + '" data-shr_title="' + title + '"></div><div style="clear:both"></div>';
d.innerHTML = code;
container.insertBefore(d , footer);
}
}
return true;
};
SHR4P.blogger_addDiv("shr_classic");</script>
</b:if>
Klik Simpan dan letakkan di bawah posting area
Demikian tutorial blogger untuk cara membuat Share Widget Keren dengan Tooltip. Semoga bermanfaat bagi semua
Selamat mencoba dan sukses selalu
Anda baru saja membaca artikel yang berkategori trik blogger
dengan judul Share Widget Keren Dengan Tooltip. Anda bisa bookmark halaman ini dengan URL http://blogberkah.blogspot.com/2012/10/share-widget-keren-dengan-tooltip.html. Terima kasih!
Ditulis oleh:
Unknown - Jumat, 26 Oktober 2012
Belum ada komentar untuk "Share Widget Keren Dengan Tooltip"
Posting Komentar