Thursday, February 17, 2011

Add Falling Snowflakes / Flowers / Leaves to Your Blog

6 comments

Steps To Follow:
Log in to Blogger, go to Layout, click on Add a Gadget and select it as HTML/JavaScript. And add any of the two code snippets:









Falling Snow flakes: Falling SnowFlakes





<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js">
</script>






And to display falling leaves, use this code:







Falling Leaves: Falling Leaves




<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js">
</script>









And to display falling leaves, use this code:
                                                       Falling Leaves Snow:







<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" />






You can further customize these snowflakes (color, number and twinkle effect) by adding these additional lines of code to it. So to add a customized widget, add this code instead of the previous one:





<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" />
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

Wednesday, February 16, 2011

A Simple Drop-Down Menu Using Jquery

0 comments


STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"Now find this code:


</head>

and immediately BEFORE/ABOVE it, paste this code:




<!--jquery-DD-Menu-Starts--><style type="text/css">/* menu styles */#jsddm{ margin: 0;padding: 0}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}#jsddm li a{ display: block;background: #324143; /*DARK-GREEN*/padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}#jsddm li a:hover{ background: #24313C}#jsddm li ul{ margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}#jsddm li ul li{ float: none;display: inline}#jsddm li ul li a{ width: auto;background: #A9C251; /*LIGHT-GREEN*/color: #24313C}#jsddm li ul li a:hover{ background: #8EA344}</style><!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open);$('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;</script><!--jquery-DD-Menu-Stops-http://bdlab.blogspot.com-->

Now before you save the template, make these changes in the code :


To get the HTML color codes, you can refer to this image:http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png and go to "Layout" -> "Page Elements" and click on "Add a Gadget", select it as "HTML/JavaScript" type and finally paste this code in to the new widget:


<!--BODY-CODE--><ul id="jsddm"><li><a href="#">JavaScript</a><ul><li><a href="#">Drop Down Menu</a></li><li><a href="#">jQuery Plugin</a></li><li><a href="#">Ajax Navigation</a></li></ul></li><li><a href="#">Effect</a><ul><li><a href="#">Slide Effect</a></li><li><a href="#">Fade Effect</a></li><li><a href="#">Opacity Mode</a></li><li><a href="#">Drop Shadow</a></li><li><a href="#">Semitransparent</a></li></ul></li><li><a href="#">Navigation</a></li><li><a href="#">HTML/CSS</a></li><li><a href="http://bdlab.blogspot.com">Blogger Help</a></li></ul>


Now Click Save

How Create 'To The Top Of Page' Link For Blogger

0 comments







STEP #1 Log in to Blogger, go to Layout



page-elements

Add a Gadget of HTML/JavaScript type. 


image
Then add this code in to it:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://www.incontext.indiana.edu/images/to_top_arrow.gif" /></a>
Now click Save

Add Streaming Music or Songs audio mp3 files in your blogger posts

15 comments


This tutorial will show you how to add streaming music or mp3 songs in your blogger post. Its much simple than any other trick found on the net because you just have to add a simple single code to your blogspot post. This will benefit most of the bloggers who runs music blogs. Lets first see what actually we are making, check the bellow player.





1. Embed streaming mp3 audio file with auto start function
As you can see in the above player , the songs autostarts with the loading of the webpage. making your reader listen to the song without clicking on any button. To add this to your blogger post just add the bellow code in the Edit HTML mode of your New Posts.

<center><embed src="http://s391.photobucket.com/albums/oo352/tarunsureja/fun4all/mediaplayer.swf" width="304" height="18" allowfullscreen="false" flashvars="&file=YOUR MP3 FILE LOCATION&height=18&width=305&showeq=false&autostart=true&repeat=false&shuffle=false&volume=100"></embed></center>



2. Embed streaming mp3 songs file without auto start
This may be usefull if you have to add more than one audio file on your single blogger post. This will make your reader click on the play button if he has to listen to the audio file. check bellow player demo

<center><embed src="http://s391.photobucket.com/albums/oo352/tarunsureja/fun4all/mediaplayer.swf" width="304" height="18" allowfullscreen="false" flashvars="&file=YOUR MP3 FILE LOCATION&height=18&width=305&showeq=false&autostart=false&repeat=false&shuffle=false&volume=100"></embed></center>


3. Embed Streaming mp3 audio file with animated image
This will make you an option to add a animated image above the player of your choice . Could be helpfull to show album covers. check the player bellow





<center><table border=0><tr><td align=center><a href="http://bestbloggerwidgets.blogspot.com" target="_blank"><img src="http://s391.photobucket.com/albums/oo352/tarunsureja/fun4all/dance.gif" border="0"></td></tr><tr><td><br><embed src="http://s391.photobucket.com/albums/oo352/tarunsureja/fun4all/mediaplayer.swf" width="304" height="18" allowfullscreen="false" flashvars="&file=YOUR MP3 AUDIO FILE LOCATION&height=18&width=305&showeq=false&autostart=true&repeat=false&shuffle=false&volume=100"></embed></td></tr></table></center>

Total Posts And Comments Widget

0 comments
total posts and comments widget






STEP #1 Log in to Blogger, go to Layout



page-elements

Add a Gadget of HTML/JavaScript type. 


image
Then add this code in to it:

<script style="text/javascript">
function totalPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>
Now click Save

Page navigation with google style for blogger

1 comments
 
STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste this code:
#nav a,#nav a:visited,.blk a{color:#000} #nav a{display:block} #nav .b a,#nav .b a:visited{color:#20c} #nav .i{color:#a90a08;font-weight:bold} .csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block} .ss{background-position:0 -88px;position:absolute;left:0;top:0} .cps{height:18px;overflow:hidden;width:114px} .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px} #nav td{padding:0;text-align:center}


STEP #2:
Now find this code in the template:



</body>
And immediately before it, paste this code:

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml; 
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}



if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url; 

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){



if(thisNum==2){
upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}





if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;'; 
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}


if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}




if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml; 
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}

if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ 
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>



Now Click Save Template

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more