Setelah beberapa hari lalu Plugin Random Post Slider, Mp3 Player, Share Button untuk wordpress di-release, kini widget serupa juga tersedia untuk blogger. Dari segi fungsi dan kegunaan tidaklah berbeda yaitu dengan mengusung widget multi fungsi dengan tampilan minimalis tapi stylish juga dengan fitur yang cukup menarik. Namun dari segi pemasangan dan setting, widget untuk blogger ini nampaknya harus dilakukan manual. Tidak seperti plugin wordpress yang terdapat menu panel opsi dan bisa dimanage dari sana.
Tapi tidak perlu kuatir juga sih sebenarnya, sebab cara pakai widget ini gampang banget, hanya butuh satu langkah saja. Yep, that’s true! Sobat cuma perlu copy script widget Random Post Scroller, Mp3 Player, AddThis Button Untuk Blogger ini dan simpan pada template bloggermu. Klik Template » Edit HTML » Proceed lalu tambahkan script widget ini di mana saja sebelum kode </body><html>. Untuk mempermudah dan memastikan script widget ini diparse dengan benar, sobat bisa DAPATKAN SCRIPTNYA DI SINI. Biar lebih gampang editnya save aja sebagai text biasa (txt). Anyway, here’s the script:
<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>
<a class='addthis_button_google_plusone' g:plusone:size='small'/></a>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'style='margin-left:-21px'></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://2.bp.blogspot.com/-e_HzeXVLv_4/UGqcskTE1WI/AAAAAAAAATA/kLZ1LZVg-Zk/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://2.bp.blogspot.com/-oi3LD5j6pGk/UGqc1NccdwI/AAAAAAAAATQ/SIMs-s1l2z8/s1600/rightgree.png' width='13' height='17' style='padding-top:3px' /></a>
<div id='gscroll'>
<div id='gsub'>
<script type='text/javascript'> eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c–)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 3=y z();2 l=0;2 5;2 7=H;L v(c){2 f=B(c.o.F$G.$t,K);6(i=0;i<7;){5=0;3.g=7;l=m.A(m.M()*f);6(j u 3){8(l==3[j]){5=1}}8(5==0&&l!=0){3[i++]=l}}9.b(\'<h w="x">\');6(n u 3){2 p=3[n];2 4=c.o.4[p-1];6(k=0;k<4.d.g;k++){8(4.d[k].D==\'E\'){2 q="<r><s I=\'J\'>"+"<a e="+4.d[k].e+">"+4.C.$t+"</a> </s></r>";9.b(q)}}}9.b(\'</h>\')}',49,49,'||var|randarray|entry|flag|for|numofpost|if|document||write|json|link|href|total|length|ul|||||Math||feed||item|li|div||in|nooprandomposts|id|holder1|new|Array|floor|parseInt|title|rel|alternate|openSearch|totalResults|7|class|slidercontent|10|function|random'.split('|'),0,{}))
</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='https://rawcdn.githack.com/dvs11/jsdelivr/bd21c6ebe146155916a3fd4c9cf68a61e99118b1/scrollercontroll.js'></script>
</div>
<div class='dvs_mp3_player'>
<object type='application/x-shockwave-flash' data='http://dl.dropbox.com/u/54221966/DVS-Mp3Player.swf?soundFile=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3|http://n1.vmuzike.net/a/take_that/The_Flood|http://a.tumblr.com/tumblr_m0lvrmyikC1qaouiwo1.mp3' width='233' height='27' id='DVS-Mp3Player' style='margin-top:-1px; margin-left:-3px'><param name='wmode' value='transparent' /><param name='movie' value='DVS-Mp3Player.swf?v1.2' /></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://3.bp.blogspot.com/-7_9D_V7014Y/UGqclZMobpI/AAAAAAAAASw/PCuPnsb2D7c/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://3.bp.blogspot.com/-N7i8gEJ5Qs0/UGqcpdG64OI/AAAAAAAAAS4/fVdhEBvALFM/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://2.bp.blogspot.com/-AnQklY2_PHo/UGqc7zaW2GI/AAAAAAAAATY/fFrMg41C9vw/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>
<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>
</body>
</html>
Catatan kecil, pada script di atas ada kode while(c– harap diganti menjadi while(c–- (jadi double dash), entah kenapa kode itu susah untuk di-parse, hufth… Biar lebih gampang dan kodenya yakin sudah benar, download saja kodenya pada link yang sudah disediakan di atas. Jika pemakaian script sudah benar, maka tampilan widget akan seperti screenshot di bawah atau LIHAT DEMO:
Widget Random Post Scroller, MP3 Player untuk Blogger
Tweak 3 in 1 Widget Kreasi DVS
Secara default tampilah widget akan nampak persis seperti gambar di atas, tapi sobat tentunya bisa membuat beberapa penyesuaian agar tampilan bisa disesuaikan dengan selera sobat.
Mengganti Warna Background
Untuk merubah warna latar dari widget ini cari kode berikut:
#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue…
Ubah kode warna blue dengan warna favoritmu, bisa menggunakan kode populer html seperti red, green, orange dan lain-lain atau bisa juga menggunakan kode warna hex, bisa dilihat pada HTML Color Code and Name.
Merubah Posisi Widget
Hanya ada 2 penempatan (off course) yang memungkinkan, yaitu di bawah atau di atas, cari kode berikut untuk merubahnya:
…/s1600/bg.png) right top;position:fixed;bottom:0px;…
Nah tinggal ubah saja kode bottom dengan top jika widget ingin dipasang di atas. Atau sebaliknya pakai lagi bottom untuk dipasang di bawah, supaya tidak bosan dengan positioningnya.
Mengganti URL MP3/ Merubah Lagu
Secara default URL Mp3 mengarah pada salah satu lagu favorit saya saat ini, yaitu lagu Bombshell Blonde miliknya Owl City. Tapi tentu saja sobat bisa ganti URL ini dengan URL lagu favoritmu, cari kode berikut:
http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3
Ada 2 buah URL yang harus diganti, nah ganti saja dua-duanya dengan URL favoritmu.
Menentukan Jumlah Random Post
Secara default hanya 7 buah saja jumlah random post yang akan ditampilakan, cari kode berikut untuk merubahnya:
alternate|openSearch|totalResults|7|class|
Ganti angka lima (7) dengan jumlah yang diinginkan.
Flash MP3 Player
Catatan penting tentang Flash MP3 Player ini, dalam widget ini saya pakai DVS-Mp3Player yang disimpan di dropbox. Untuk sekedar jaga-jaga jikalau saya ubah atau mungkin hapus dari servernya, maka saya sarankan untuk download flash mp3 player ini dan sobat simpan sendiri di file hosting gratisan. Gunakan link ini http://dl.dropbox.com/u/54221966/DVS-Mp3Player.swf untuk download, terima kasih untuk pengertian dan kerjasamanya.
Aktifkan AddThis Analytic
Banyak manfaat yang dapat kita maksimalkan menggunakan widget ini, salah satunya adalah tombol share AddThis. Selain karena AddThis adalah tombol berbagi dengan jaringan sosial media terbesar dan terlengkap, tombol ini juga menyediakan fitur analytic. Dengan fitur ini kita dapat men-track dan menganalisa berapa banyak jumlah share konten kita. Misalnya, satu orang mengklik LIKE atau share melalui Google+ dan lain-lainnya, jumlah klik ini akan dilaporkan ke email kita secara periodik. Tentunya sobat harus daftar dulu (gratis) dan temukan ID Akun AddThis milik sobat. Jika sudah tinggal pasang ID itu, cari kode ini:
…http://s7.addthis.com/js/300/addthis_widget.js…
lalu tambahkan ID-mu menjadi »
…http://s7.addthis.com/js/300/addthis_widget.js#pubid=idkamu…
Oke deh, rasanya cukup jelas ya? Kalo ada yang ingin ditanyakan silahkan berkomentar saja, jangan lupa untuk LIKE widget ini dan juga LIKE Facebook Fan Page (lihat kanan atas) untuk mendapatkan update informasi terbaru tentang widget ini dan widget unik lainnya. Oh iya, diantara beberapa widget blogger kreasi DVS juga boleh juga deh coba widget-widget ini:
mantap dah artikelnya
Setelah dicob, praktiknya sukses deh mas. Terima kasih.
Wah, sya jg seneng dengernya. Terima kasih juga suka widget saya 😉
Wah, menarik sekali widgetnya. Izin mempelajari dan menerapkannya ya, mas. Terima kasih…
keren neh tutorialnya..
oia, mas punya script tag cloud yang udah di custom gak, biar keliatan rapi gitu, karna kalau tag cloud default blogger menurut saya kurang menarik..hehee..
thanks
Trims, itu kyknya lbih ke css deh. sayang, saya gak punya tuh.
😉
Banyak manfaat yang dapat kita maksimalkan menggunakan widget ini, salah satunya adalah tombol share AddThis. Selain karena AddThis adalah tombol berbagi dengan jaringan sosial media terbesar dan terlengkap, tombol ini juga menyediakan fitur analytic. Dengan fitur ini kita dapat men-track dan menganalisa berapa banyak jumlah share konten kita. Misalnya, satu orang mengklik LIKE atau share melalui Google+ dan lain-lainnya, jumlah klik ini akan dilaporkan ke email kita secara periodik.
Betul sob, itulah kenapa saya pilih share button dari addthis ketimbang yang lain.