Stylish Floating Random Post MP3 Player + Share Button 4 Blogger

Few days ago I've released Floating Random Post MP3 Player Share Button Plugin for Wordpress, and now this widget also available for Blogger user. Basically this widget has a similar functionality with one for wordpress, but the difference is this blogger widget has no option panel so You'll have to hardcode the script manually. But do not worry about it, the installation is easy, even new blogger can do this within seconds.

All you have to do is to copy this widget script and add to your template. Click Template from your blogger dashboard » Edit HTML » Proceed, then append the script anywhere before </body></html>. To make sure the script is parsed correctly I suggest you to DOWNLOAD SCRIPT HERE, it has been tested and fully functional. Just save it as a plain text file (thewidgetname.txt). Or you can also try this script:

&lt;div id=&#39;DVS_scroll_env&#39; align=&#39;center&#39;&gt;
    &lt;div id=&#39;DVS_content&#39;&gt;
    &lt;div class=&#39;social_share_dd&#39;&gt;
    &lt;div class=&#39;addthis_toolbox addthis_default_style&#39;&gt;
    &lt;a class=&#39;addthis_button_compact&#39;&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_counter addthis_bubble_style&#39;&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_button_preferred_3&#39;&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_button_preferred_11&#39;&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_button_preferred_12&#39;&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_button_google_plusone&#39; g:plusone:size=&#39;small&#39;

/&gt;&lt;/a&gt;
    &lt;a class=&#39;addthis_button_facebook_like&#39; fb:like:layout=&#39;button_count&#39;style=&#39;margin-left:-21px&#39;&gt;&lt;/a&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;https://s7.addthis.com/js/300/addthis_widget.js&#39;&gt;&lt;/script&gt;
    &lt;/div&gt;
    &lt;/div&gt;
&lt;div class=&#39;dvs_random_posts&#39;&gt;
    &lt;div class=&#39;randpostscroll&#39; id=&#39;recommend&#39;&gt;
        &lt;div class=&#39;boxBody&#39;&gt;
            &lt;div id=&#39;scrollRow&#39;&gt;
    &lt;a class=&#39;goLeft&#39; id=&#39;slide_left&#39; href=&#39;javascript:void(0);&#39;&gt;
    &lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdGEsG056h-SDSZTt841Xn1o2VFXmcoPRXAYd0joiQECASPotWJ6N3q4SVgDZgfsKSaJCLI_GsOZIeF9Km_Qwsi3EHbRxxygIXAWs_K6oO4VV87QYJvT6iHrENoBR-j0Lotqk34df-6c/s1600/leftgree.png&#39; width=&#39;13&#39; height=&#39;17&#39; style=&#39;padding-top:3px&#39; /&gt;&lt;/a&gt;
    &lt;a class=&#39;goRight&#39; id=&#39;slide_right&#39; href=&#39;javascript:void(0);&#39;&gt;
    &lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_SYhNgs3eeOnHpG6JgijoyLGd1Qf4HvcB7gCHwCri-ZTYg3DLCOLanM7oNy6s35hlKQsRM2veyorIyN-frmPc3XGOM4m2Y-A2gHd99oDnL2XIV4eezKAHGIDAI0wVmrQS6YJ1wnI5yI/s1600/rightgree.png&#39; width=&#39;13&#39; height=&#39;17&#39; style=&#39;padding-top:3px&#39; /&gt;&lt;/a&gt;
                    &lt;div id=&#39;gscroll&#39;&gt;
                        &lt;div id=&#39;gsub&#39;&gt;
&lt;script type='text/javascript'&gt;   eval(function(p,a,c,k,e,r){e=function(c){return(c&lt;a?'':e(parseInt(c/a)))+((c=c%a)&gt;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&lt;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&amp;&amp;l!=0){3[i++]=l}}9.b(\'&lt;h w=&quot;x&quot;&gt;\');6(n u 3){2 p=3[n];2 4=c.o.4[p-1];6(k=0;k&lt;4.d.g;k++){8(4.d[k].D==\'E\'){2 q=&quot;&lt;r&gt;&lt;s I=\'J\'&gt;&quot;+&quot;&lt;a e=&quot;+4.d[k].e+&quot;&gt;&quot;+4.C.$t+&quot;&lt;/a&gt; &lt;/s&gt;&lt;/r&gt;&quot;;9.b(q)}}}9.b(\'&lt;/h&gt;\')}',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,{}))
    &lt;/script&gt;
&lt;script type=&#39;text/javascript&#39; src=&#39;/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=nooprandomposts&#39;&gt;&lt;/script&gt;
&lt;ul id=&#39;holder2&#39;&gt;&lt;/ul&gt;
                    &lt;/div&gt;       
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
    &lt;div class=&#39;dvs_cret&#39;&gt;&lt;script type=&#39;text/javascript&#39; src=&#39;https://raw.githack.com/dvs11/baseclue/master/scrollercontroll.js&#39;&gt;&lt;/script&gt;
    &lt;/div&gt;
    &lt;div class=&#39;dvs_mp3_player&#39; style=&lt;margin-left:-2px&lt;&gt;
    &lt;object type=&#39;application/x-shockwave-flash&#39; data=&#39;https://ia601508.us.archive.org/0/items/DVSMp3Player/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&#39; width=&#39;233&#39; height=&#39;27&#39; id=&#39;DVS-Mp3Player&#39; style=&#39;margin-top:-1px; margin-left:-3px&#39;&gt;&lt;param name=&#39;wmode&#39; value=&#39;transparent&#39; /&gt;&lt;param name=&#39;flashvars&#39; value=&#39;autoplay=no&amp;loop=yes&amp;volume=100&amp;shuffle=no&#39; /&gt;&lt;/object&gt;
    &lt;/div&gt;
    &lt;div class=&#39;go_up&#39;&gt;
    &lt;a title=&#39;Go to Top&#39; href=&#39;#&#39; onclick=&#39;MGJS.goTop();return false;&#39;&gt;
    &lt;img class=&#39;go_up&#39; border=&#39;0&#39; width=&#39;19&#39; height=&#39;18&#39; src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg16Ilz-JOHNeb2IGnf4_jhya3CnKmpaoBpuvUT36GqwZcGyAHeWKTf-3HffKlvycD24kHDR81_xgP_B_bsv6CUQMwu-eWK_wYQQxPmXhz9ULKA7eXhQFMqaKMh9kvRRkZEYOh1bkNsXU/s1600/up2.png&#39; /&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&#39;tootoop&#39;&gt;
    &lt;a href=&#39;#&#39; onclick=&#39;document.getElementById(&quot;DVS_scroll_env&quot;).style.display=&quot;none&quot;;return false;&#39;title=&#39;Close&#39;&gt;
    &lt;img class=&#39;tootoop&#39; border=&#39;0&#39; width=&#39;13&#39; height=&#39;13&#39; src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSdTtLOxsaY02j8mJp2AGrPtF6xq48KlNmGJbOX8mjuiSn268jkR66QBN6Md2H8_u5kfVCODOSf4MNmV559SiO9eJ6GMyp4H7vMJZfNEBLVAezuqECaL-Z4_YaPwVkSiRbTHRJL11QQI8/s1600/close.png&#39; /&gt;&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
if (screen.width &gt;= 800) {
document.write (&quot;&lt;style type=&#39;text/css&#39; media=&#39;screen&#39;&gt;#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9pCqFugiSWjiF62taD292Gd8oVHAFQStayp3nXHRYYbCBKgRtKusJhyphenhyphenI4sLhZza8_JYdnef8P06wRpesL_Z79JbfYeqncWddh_j8VhFNhl8aEYc7O9NI4-e8Lst7JZqA5empIj-C0NA/s1600/bg.png) right top;position:fixed;bottom:0px;left:0px;z-index:99999;}&lt;/style&gt;&quot;);
}else{document.write (&quot;&lt;style type=&#39;text/css&#39;media=&#39;screen&#39;&gt;#DVS_scroll_env
{visibility:hidden;display:none}&lt;/style&gt;&quot;);}
&lt;/script&gt;
&lt;!-- Floating Random Post Mp3 Player Share Button by https://www.basiclue.com --&gt;
&lt;noscript&gt;&lt;style type=&#39;text/css&#39; media=&#39;screen&#39;&gt;#DVS_scroll_env{visibility:hidden; display:none}&lt;/style&gt;&lt;h5 align=&quot;center&quot;&gt;Your browser does not support JavaScript! &lt;/h5&gt;&lt;/noscript&gt;

If the script has been added correctly, you'll see the widget appears as below picture:

Random Post Scroller, MP3 Player + AddThiss Button for Blogger

If you wish to make some change or modification, here are some reference to apply:

Change Widget Position

You can place the widget at the top or bottom, find this code:

/s1600/bg.png) right top;position:fixed;bottom:0px;...

Use bottom to place widget at the bottom of your page or use top to place it at the top.

Modify the Background Color

By default, you'll see the backround color is blue, find this code to change:

#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue...

Simply replace the "blue" with your desired color. You can use popular color code like red, green, black and so on, oy you may also use hexadecimal code. For your reference click here to find 300+ HTML Color Codes and Names or the basic color with its gradation HTML Color Gradation - Main Color Code

Change the URL of MP3

The MP3 URL can be changed anytime you want, find this code:

http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3

That URL is pointing to one of my favorit music, Bombshell Blonde that belong to Owl City. Replace this URL with your favorit song's URL. Try to use MP3 URL from resume capability server for better Mp3 download.

Define Random Post Number

The default Random Post Number is 7, but sure you can define as you need it. Find this code:

alternate|openSearch|totalResults|7|class|

Replace the "7" with any number up to 21 posts.

Activate AddThis Analytic Option

One of interesting stuff from Random Post MP3 Player + Share Button for Blogger widget is the share button. I like AddThis share button service, it has the share networks over 300 popular sites, and I guess this is the most complete so far. Besides, Addthis share button also comes with analytic option, so you can track how many shares have been made from your contents. Off course you'll have to be registered before you can use this service (It's totally free). If you are registered, find your publisher ID then insert it to this widget. Seek this:

...http://s7.addthis.com/js/300/addthis_widget.js...
insert your ID to »
...http://s7.addthis.com/js/300/addthis_widget.js#pubid=yourID...

Now, your AddThis analytic will give you report periodically to your email.

Note about Flash MP3 Player

Currently, the Flash MP3 Player used here is hosted and stored at dropbox file hosting, it's using DVS-Mp3Player. In case this file is removed or may be not available for public, please host your own. Use this link to download it https://ia601508.us.archive.org/0/items/DVSMp3Player/DVS-Mp3Player.swf. Don't forget to change the player URL to your new address. I'm Thanking you for your cooperation and understanding.

Well, that will be all. Don't forget to like this widget or LIKE Facebook Fan Page to get the latest update about this widget and more cool stuff here. See also Related post thumbnail with bubble tolltips and another cute page navigation with 5 Stylish page navigation style. Hope you guys like it!!!

Share