Back to top, Embed Music MP3,
AddThis Buttonbisa di tutup juga! Coba tebak apakah itu? Fasilitas hurray dan meebo toolbar masih ingat dengan itu semua?
Sekarang bagaimana jadinya jika ada seseorang yang sudah membuat toolbar dan isi konten tool-bar tersebut seperti apa yg Koben utarakan di awal paragraf!! @dlooperz owner dari D-Artchitext's Weblog telah merilis sebuah widget phenomenal untuk kita sekalian ;)) Random Post Scroller, Mp3 Player, AddThis Button for Blogger Kunjungi web ambil ramuannya, lihat demo, keterangan jelas tertera karena orang Indonesia, tidak ada acara buat
translate:D
<div id='DVS_scroll_env' align='center'>
<div id='DVS_content'>
<div class='social_share_dd'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_compact'></a>
<a class='addthis_counter addthis_bubble_style'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_11'></a>
<a class='addthis_button_preferred_12'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/300/addthis_widget.js'></script>
</div>
</div>
<div class='dvs_random_posts'>
<div class='randpostscroll' id='recommend'>
<div class='boxBody'>
<div id='scrollRow'>
<a class='goLeft' id='slide_left' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUchAy_eX3dlxrW8_THOHkK8Swg5_Yc0TMgFlq7Rmbc3Eny1_OOc3xQ1X4Q4e-Kx78CVcRZhQWFgaZ7qx06ZkNCjQCkV0uyHDR2cN4UjRbInnYYoid4E7jSaaIKb1oKI9xrYnEmR0Qauw/s1600/leftgree.png' width='13' height='17' style='padding-top:3px' /></a>
<a class='goRight' id='slide_right' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7ENEXXYPDaMRRIZxm1eZhAQGcT1sLMiW76Nq0rjay3ux-xb-kXhga4bUy3BdwbZsE1P-Jq0v-WZxrNFLQ_Ad6X75hyigGemXXxwGAbUwTHbwFP3Gy07KcEyw27MFJVvEE3YyFbQHEs8/s1600/rightgree.png' width='13' height='17' style='padding-top:3px' /></a>
<div id='gscroll'>
<div id='gsub'>
<script type='text/javascript'>
var randarray=new Array();var l=0;var flag;var numofpost=7;function nooprandomposts(json)
{var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost; )
{flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray)
{if(l==randarray[j])
{flag=1}}
if(flag==0&&l!=0)
{randarray[i++]=l}}
document.write('<ul id="holder1">');for(n in randarray)
{var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++)
{if(entry.link[k].rel=='alternate')
{var item="<li><div class='slidercontent'>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a> </div></li>";document.write(item)}}}
document.write('</ul>')}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts'></script>
<ul id='holder2'></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='dvs_cret'><script type='text/javascript' src='http://dvslabs.googlecode.com/files/scrollercontroll.js'></script>
</div>
<div class='dvs_mp3_player'>
<object type='application/x-shockwave-flash' data='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' width='227' height='21' id='dewplayer-vol' style='margin-top:2px; margin-left:-3px'><param name='wmode' value='transparent' /><param name='movie' value='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' /></object>
</div>
<div class='go_up'>
<a title='Go to Top' href='#' onclick='MGJS.goTop();return false;'>
<img class='go_up' border='0' width='19' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdgiOaYCE_qhUpZWSEeLDjUUkFdA3Ur6OI2n9aIQTwRhmURdyft8bfL7ntJMazyd3t4EXVEmE65jjn0Sr45IOLWYZBYllcUsGX4OpJU5J5jdMItkxplsx-08V8YjYZKsTxliO-ks2ptA/s1600/up2.png' /></a>
</div>
<div class='tootoop'>
<a href='#' onclick='document.getElementById("DVS_scroll_env").style.display="none";return false;'title='Close'>
<img class='tootoop' border='0' width='13' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccWNirp-d_7u0cAYyxvAi9oaMLNVtnqxlr1-lrpE_qT0VbJaV49zX8tY9vI0lLbmTfb_6KUM-iaYRKg_nTUXBeGxBbeIT2Uez3gN85Pe_dyggiiwyobq1gSKyyp6m0YV6ZexANrokvIw/s1600/close.png' /></a>
</div>
</div>
</div>
<script type='text/javascript'>
if (screen.width >= 800) {
document.write ("<style type='text/css' media='screen'>#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpzUTzDbbXNHsnp-8CDrDT0kzEiExDsAmU-LpKcb3pZruTWLgqMlN_frB_ZzV6i5IWDZm_GJKbtAO40BsjyglpdKGZo6UB8LFLsaUVhruKZhiDFjzq5KSY1NGezCpgQCdULt1oKzdhT9I/s1600/bg.png) right top;position:fixed;bottom:0px;left:0px;z-index:99999;}</style>");
}else{document.write ("<style type='text/css'media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style>");}
</script>
<!-- Floating Random Post Mp3 Player Share Button by http://www.intert3chmedia.net -->
<noscript><style type='text/css' media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style><h5 align="center">Your browser does not support JavaScript!</h5></noscript>
<div id='DVS_content'>
<div class='social_share_dd'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_compact'></a>
<a class='addthis_counter addthis_bubble_style'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_11'></a>
<a class='addthis_button_preferred_12'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/300/addthis_widget.js'></script>
</div>
</div>
<div class='dvs_random_posts'>
<div class='randpostscroll' id='recommend'>
<div class='boxBody'>
<div id='scrollRow'>
<a class='goLeft' id='slide_left' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUchAy_eX3dlxrW8_THOHkK8Swg5_Yc0TMgFlq7Rmbc3Eny1_OOc3xQ1X4Q4e-Kx78CVcRZhQWFgaZ7qx06ZkNCjQCkV0uyHDR2cN4UjRbInnYYoid4E7jSaaIKb1oKI9xrYnEmR0Qauw/s1600/leftgree.png' width='13' height='17' style='padding-top:3px' /></a>
<a class='goRight' id='slide_right' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7ENEXXYPDaMRRIZxm1eZhAQGcT1sLMiW76Nq0rjay3ux-xb-kXhga4bUy3BdwbZsE1P-Jq0v-WZxrNFLQ_Ad6X75hyigGemXXxwGAbUwTHbwFP3Gy07KcEyw27MFJVvEE3YyFbQHEs8/s1600/rightgree.png' width='13' height='17' style='padding-top:3px' /></a>
<div id='gscroll'>
<div id='gsub'>
<script type='text/javascript'>
var randarray=new Array();var l=0;var flag;var numofpost=7;function nooprandomposts(json)
{var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost; )
{flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray)
{if(l==randarray[j])
{flag=1}}
if(flag==0&&l!=0)
{randarray[i++]=l}}
document.write('<ul id="holder1">');for(n in randarray)
{var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++)
{if(entry.link[k].rel=='alternate')
{var item="<li><div class='slidercontent'>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a> </div></li>";document.write(item)}}}
document.write('</ul>')}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts'></script>
<ul id='holder2'></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='dvs_cret'><script type='text/javascript' src='http://dvslabs.googlecode.com/files/scrollercontroll.js'></script>
</div>
<div class='dvs_mp3_player'>
<object type='application/x-shockwave-flash' data='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' width='227' height='21' id='dewplayer-vol' style='margin-top:2px; margin-left:-3px'><param name='wmode' value='transparent' /><param name='movie' value='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' /></object>
</div>
<div class='go_up'>
<a title='Go to Top' href='#' onclick='MGJS.goTop();return false;'>
<img class='go_up' border='0' width='19' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdgiOaYCE_qhUpZWSEeLDjUUkFdA3Ur6OI2n9aIQTwRhmURdyft8bfL7ntJMazyd3t4EXVEmE65jjn0Sr45IOLWYZBYllcUsGX4OpJU5J5jdMItkxplsx-08V8YjYZKsTxliO-ks2ptA/s1600/up2.png' /></a>
</div>
<div class='tootoop'>
<a href='#' onclick='document.getElementById("DVS_scroll_env").style.display="none";return false;'title='Close'>
<img class='tootoop' border='0' width='13' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccWNirp-d_7u0cAYyxvAi9oaMLNVtnqxlr1-lrpE_qT0VbJaV49zX8tY9vI0lLbmTfb_6KUM-iaYRKg_nTUXBeGxBbeIT2Uez3gN85Pe_dyggiiwyobq1gSKyyp6m0YV6ZexANrokvIw/s1600/close.png' /></a>
</div>
</div>
</div>
<script type='text/javascript'>
if (screen.width >= 800) {
document.write ("<style type='text/css' media='screen'>#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpzUTzDbbXNHsnp-8CDrDT0kzEiExDsAmU-LpKcb3pZruTWLgqMlN_frB_ZzV6i5IWDZm_GJKbtAO40BsjyglpdKGZo6UB8LFLsaUVhruKZhiDFjzq5KSY1NGezCpgQCdULt1oKzdhT9I/s1600/bg.png) right top;position:fixed;bottom:0px;left:0px;z-index:99999;}</style>");
}else{document.write ("<style type='text/css'media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style>");}
</script>
<!-- Floating Random Post Mp3 Player Share Button by http://www.intert3chmedia.net -->
<noscript><style type='text/css' media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style><h5 align="center">Your browser does not support JavaScript!</h5></noscript>
Settingan Button AddThis Client API
Google plus, Facebook, Twitter dan Pinterest merupakan beberapa website jejaring sosial yang dapat mendongkrak popularitas sebuah blog. Oleh karena itu, links² tersebut harus ditampilkan secara full stylish. How to do that?@BlogHocam owner Blog Hocam tell about CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi blogger Turki :D
Kedua tutorial di atas sobat gunakan metode Add a Gadget >> HTML/JavaScript biar tidak ribet :-" Koben tutup postingan kali ini dengan melihat kreasi karya Jaysalvat Make MonaLisa used pure CSS3
Happy blogging \m/
<style>
#tbisose {
list-style:none;
font-size:0.9em;
font-family:trebuchet ms, sans-serif;
}
#tbisose li {
position:relative;
height:38px;
padding: 0 !important;
}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter {
color:#111;
margin:0;
z-index:5;
float:none;
height:38px;
width:210px;
display:block;
text-align: left;
position:relative;
line-height:32px;
text-indent:38px;
border-radius:5px;
text-shadow:#111 0 1px 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSEOSzDWe3R8ANILGEsGkGAwzeMEUC_K-pyvTjT7lorxKjmu1-vCaJK_FoASs6FnZJZX0YO1ac0R-sPN3MxLXryMCzaHGZ84-bgHIy7O8SwgkeH6iI8wR0kEZDLglx9lFi04Z9AoPfSs/s800/sprites.png) no-repeat;
-webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out, background-color .25s ease-in-out;
transition:width .25s ease-in-out, background-color .25s ease-in-out;
}
#tbisose li:after {
position:absolute;
top:0;
left:38px;
z-index:2;
display:block;
height:38px;
color:#141414;
content:attr(data-alt);
line-height:32px;
}
#tbisose .icon {
overflow:hidden;
color:#fafafa;
}
#tbisose .facebook {
width:32px;
height:32px;
background-color:rgba(59, 89, 152, 0.49);
background-position:0 0;
}
#tbisose .twitter {
width:32px;
height:32px;
background-color:rgba(64, 153, 255, 0.49);
background-position:0 -33px;
}
#tbisose .googleplus {
width:32px;
height:32px;
background-color:rgba(228, 69, 36, 0.49);
background-position:-3px -66px;
}
#tbisose .pinterest {
width:32px;
height:32px;
background-color:rgba(174, 45, 39, 0.49);
background-position:0 -95px;
}
#tbisose .rss {
width:32px;
height:32px;
background-color:rgba(255, 102, 0, 0.49);
background-position:-3px -126px;
}
#tbisose li:hover .icon, .touch #tbisose li .icon {
width:210px;
}
.touch #tbisose li .facebook, #tbisose li:hover .facebook {
background-color:#3B5998;
}
.touch #tbisose li .twitter, #tbisose li:hover .twitter {
background-color:#4099FF;
}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus {
background-color:#E44524;
}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest {
background-color:#AE2D27;
}
.touch #tbisose li .rss, #tbisose li:hover .rss {
background-color:#FF6600;
}
</style>
<ul id="tbisose">
<li data-alt="Facebook">
<a class="icon facebook" href="http://facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426 ">Koben on Facebook</a>
</li>
<li data-alt="Twitter">
<a class="icon twitter" href="http://twitter.com/bebenkoben ">Beben on Twitter</a>
</li>
<li data-alt="Google+">
<a class="icon googleplus" href="https://plus.google.com/106979433441667164665/ ">Beben on Google+</a>
</li>
<li data-alt="Pinterest">
<a class="icon pinterest" href="http://pinterest.com/bebenkoben/ ">Beben on Pinterest</a>
</li>
<li data-alt="RSS Feed">
<a class="icon rss" href="http://feeds.feedburner.com/beben-koben ">My RSS Feedburner</a>
</li>
</ul>
Ganti link yg diberi warna dengan link account kalian masing-masing. Kemungkinan tutorial diatas datang dari sini originalnya Pure CSS3 Smooth & Sexy Expand on Hover Social Buttons for Blogger Tapi gak tau juga deng dari mana awalnya [-(Kedua tutorial di atas sobat gunakan metode Add a Gadget >> HTML/JavaScript biar tidak ribet :-" Koben tutup postingan kali ini dengan melihat kreasi karya Jaysalvat Make MonaLisa used pure CSS3
Happy blogging \m/
Tidak ada komentar:
Posting Komentar