tag:blogger.com,1999:blog-33388059433537403422024-03-14T11:19:35.102+05:30MyBlogTrickzFind Quality Widgets For Blogger, Free Blogger Gadgets, Magazine Templates, Learn SEO and Blogging tips,Blogging tools,Make Your blog atracttive for freeAnonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-3338805943353740342.post-81974666311959305162011-12-18T12:34:00.000+05:302011-12-18T12:34:08.178+05:30Add Social Sharing Buttons Bellow Post Titles<div dir="ltr" style="text-align: left;" trbidi="on">Hello Friends I am gona to show you how to add social sharing button bellow post title in blogger.<br />
<br />
<div class="royalb">How to Add This Widget.</div><ol><li>Go To Blogger > Design > Edit HTML </li>
<li>Backup your template </li>
<li>Search for <data:post.body/> </li>
<li>and just above it paste the code given below, </li>
</ol><div class="example1"><br />
<b:if cond='data:blog.pageType == "item"'><br />
<br />
<table border='0'><br />
<tr><br />
<td><div style='<b>margin-right:5px;</b>'><br />
<g:plusone expr:href='data:post.url' size='medium'/><br />
</div><br />
</td><br />
<td><div style='padding-top:6px;'><br />
<script type='text/javascript'><br />
tweetmeme_style = &quot;compact&quot;;<br />
</script><br />
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/><br />
</div></td><br />
<br />
<td><div style='<b>margin-right:25px</b>;'><br />
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div><br />
</td><br />
<td><div style='<b>margin-right:25px</b>;'><br />
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/><br />
</div><br />
</td><br />
<td><br />
<br />
<!-- AddThis Button BEGIN --><br />
<div class="addthis_toolbox addthis_default_style "><br />
<a class="addthis_counter addthis_pill_style"></a><br />
</div><br />
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script><br />
<!-- AddThis Button END --><br />
<br />
</td><br />
<br />
<br />
</tr><br />
</table> </b:if><br/></div><br />
5. Next search for </head> <br />
6. and just above it paste the following code,<br />
<br />
<div class="example1"><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script></div><br />
<div class="success"><b>7. Save your template and you are done!</b></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-6890215993940733462011-12-17T12:30:00.000+05:302011-12-17T12:30:27.342+05:30Add Background to Google Adsense<div dir="ltr" style="text-align: left;" trbidi="on">Hello Friends!<br />
Want to add <b>background</b> to your <b>google</b> <b>adsnese</b> ads.This i am posting a very simple trick to add <b>Background</b> to <b>google</b> <b>adsnese</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHVLrxwTj2Z4oMr7t8JMXzskBo23ED-rysmQgwAfRyHafOoKesC_0_E8CyaBwi7hiCh8WPDX1JuPYyWaTpgM3vpRTqfCVoHK-GhW9ArfpHoPB8o3zyjhlg1T_VpjaKnXZ_EF4BjQKl2Q/s1600/add+background+to+adsnese.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHVLrxwTj2Z4oMr7t8JMXzskBo23ED-rysmQgwAfRyHafOoKesC_0_E8CyaBwi7hiCh8WPDX1JuPYyWaTpgM3vpRTqfCVoHK-GhW9ArfpHoPB8o3zyjhlg1T_VpjaKnXZ_EF4BjQKl2Q/s1600/add+background+to+adsnese.png" /></a></div><br />
<div class="notes"><h2>Copy Code From Bellow</h2></div><div class="example1"><table align="center" width="<b><span style="color: #274e13;">your_image_width</span></b>"<br />
height="<b style="color: #274e13;">your_image_height</b>" border="0"<br />
background="<b style="color: #274e13;">your_image_path</b>"><br />
<tr><td width="<b><span style="color: #274e13;">your_image_width</span></b>" height="<b style="color: #274e13;">your_image_height</b>"><br />
<div align="center"><br />
<div style="color: red;"><b>Put_Google_Ads_code_here</b></div></div></td></tr><br />
</table></div><br />
<div class="royalb"><h2>Edit the above code as below</h2></div>Replace <span style="color: red; font-weight: bold;">Put_Google_Ads_code_here</span><span style="color: #006600;"> </span>with your adsense code.<br />
Replace <span style="color: #274e13; font-weight: bold;">your_image_width</span><span style="color: red;"> </span>with the width of your image<br />
Replace <span style="color: #274e13; font-weight: bold;">your_image_height</span> with the height of your image<br />
Replace <span style="color: #274e13; font-weight: bold;">your_image_path</span> with your image file's url<br />
<br />
<br />
After editing put this code in the place between you need your ads to appear(with background image)<br />
<br />
When you choose the background colour and border colour in Adsense for content setup please try to use colours matching with your background image.<br />
<br />
<div class="success"><b>You have done it.Now please share this to your Friends.</b></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-12874488879830149292011-12-15T18:07:00.001+05:302011-12-15T18:09:01.797+05:30Add Reply Button/Link To Blogger Comments<div dir="ltr" style="text-align: left;" trbidi="on">Hello Friends i am gone a to tell you <b>How to add reply button/link to blogger comments form</b>.Mostly this type of comment form can only seen on wordpress blog,now this is the chance for blogger users.I am sure you would love to add it to your blogs too. So let's do it!<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_RsZUGXyAJPHUB572_OJBRJleg2zBYGrAC2cB5p6xnXgHkEII635ilAuOlc83KkqnXZMhy2TPMWwp0P2AKcp-OuCK5PPlyAy6uNwVSk5fwRzb_1zfTwdlVAAHfJ8nQlwHiD9qg5d97E/s1600/Add+rply+link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_RsZUGXyAJPHUB572_OJBRJleg2zBYGrAC2cB5p6xnXgHkEII635ilAuOlc83KkqnXZMhy2TPMWwp0P2AKcp-OuCK5PPlyAy6uNwVSk5fwRzb_1zfTwdlVAAHfJ8nQlwHiD9qg5d97E/s1600/Add+rply+link.png" /> </a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<div class="royalg">How To Add Reply Button/Link ?</div><br />
<ol><li>Go To Blogger > Design > Edit HTML </li>
<li>Backup your template </li>
<li>Click the "<i>Expand widgets Templates</i>" Box </li>
<li>Search For <i>]]></b:skin></i> </li>
<li>and paste the code below just above it, </li>
</ol><br />
<div class="example1"><br />
/*--------------MBT Reply Link --------------*/<br />
<br />
.MBT-replycomments{<br />
background:<b style="color: red;">#ECEAEA</b>;<br />
cursor:pointer;<br />
color:#fff;<br />
margin:5px 0;<br />
float:right;<br />
border:none;<br />
padding:4px;<br />
-moz-border-radius:6px;<br />
-webkit-border-radius:6px;<br />
border-radius:6px;<br />
font:10px sans-serif;<br />
}<br />
.MBT-replycomments:hover{<br />
background:<b style="color: blue;">#E7E7E7</b>;<br />
}</div><br />
Make these changes:<br />
<ul><li>To Change the Link background on active mode edit <b style="color: red;">#ECEAEA</b> </li>
<li>To Change the Link Background color on mouse hover edit<span style="color: #274e13;"> </span><span style="color: green;"><b>#E7E7E7</b></span> </li>
<li>Our <a href="http://myblogtrickz.blogspot.com/2011/12/colour-code-genreator.html" target="_blank">Color Generator</a> tool will be helpful </li>
</ul> 6. Now Search for,<br />
<br />
<div class="example1"><dd class='comment-footer'></div>or just this,<br />
<div class="example1">class='comment-footer'</div>and just above it paste the "Reply Link" Code below,<br />
<div class="example1"><div class='MBT-replycomments'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<b style="color: #cc0000;">*******************</b>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,<br />
height=650&quot;); return false;'><b style="color: #274e13;">Reply..</b></a></div></div><br />
<ul><li>You can replace the text <span style="font-size: x-small;"><b><span style="color: #274e13;">Reply..</span> </b>with anything you like</span> </li>
<li>Replace with your BLOG ID. If your are logged into your blogger account then look at your browser address bar. You can clearly see a 18-19 digit code. Just copy it and paste it in place of <span style="color: #0080ff;"><b>******************* </b></span> </li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0v5hfqJhPEZiMnyCloaonkxtVAHvCFUQxNx-hvjQHs5uwjRwNCVLOGTbFLWNLXWvobAKT-YagH6tfjJ5253d23CD7r65yJbKgYmmN-MgNFj86JcptaHs0snz8orlxF2Jz7GdsEngmj0/s1600/Demo.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0v5hfqJhPEZiMnyCloaonkxtVAHvCFUQxNx-hvjQHs5uwjRwNCVLOGTbFLWNLXWvobAKT-YagH6tfjJ5253d23CD7r65yJbKgYmmN-MgNFj86JcptaHs0snz8orlxF2Jz7GdsEngmj0/s1600/Demo.gif" /></a></div><br />
<div class="success">7. Save your template and view your blog comments.The Look Like Wordpress Comments.Enjoy! :></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-14490890432440027322011-12-15T12:42:00.000+05:302011-12-15T12:42:51.442+05:30Convert Your Images into Rounded Corners<div dir="ltr" style="text-align: left;" trbidi="on">Hi friends today i am publishing a great tool.The widget below automatically turns the square edges of your image into rounded corners. The rounder corner pixel size can easily be adjusted. Once you submit the image, you will be taken to next window where you can set border radius size along with image quality and background colours. You can choose to set a background or keep the background transparent. You can also choose which of the four borders you wish to be curved and which should be left as default. You can either upload the image, photo or picture from your computer or you can enter the Image direct link/URL.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjodgG6RxEozrGFBM-jsUk3Cq6X88fCnpxer__hdYqsYrpy8Q93TBR-GyS6Tjo4SW8cZnVuqY189whZxqXH49OCE8fLMIUZCqdZK8GQ4ZtfgFCi_bVXnPaFJsy92JBL1PQB8d0K-cw_w/s1600/Rounded+corner+genreator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjodgG6RxEozrGFBM-jsUk3Cq6X88fCnpxer__hdYqsYrpy8Q93TBR-GyS6Tjo4SW8cZnVuqY189whZxqXH49OCE8fLMIUZCqdZK8GQ4ZtfgFCi_bVXnPaFJsy92JBL1PQB8d0K-cw_w/s1600/Rounded+corner+genreator.png" /></a></div><br />
<br />
You don't need a Photoshop or any other software or tech knowledge to round your images.If you are creating an object using CSS then better apply the following property to produce rounded corners.<br />
<br />
<div class="example1"><br />
<br />
border-radius:10px;<br />
<br />
-moz-border-radius:10px;<br />
<br />
-webkit-border-radius:10px;</div><br />
<br />
<div class="royalb">Tool for Rounding Your Images</div><br />
<form action="http://www.roundpic.com" enctype="multipart/form-data" method="post"><input name="MAX_FILE_SIZE" type="hidden" /> <br />
<table><tbody>
<tr> <td class="title"><b>Image:</b></td> <td><input name="file" style="border-color: rgb(0, 128, 255); border-style: dotted; border-width: 1px; margin-right: 0px; padding: 4px 2px;" type="file" /></td> </tr>
<tr> <td class="title">or <b>URL:</b></td> <td class="input"><input name="url" /></td> </tr>
<tr> <td class="submit" colspan="2"><button onclick="getLoader();" type="submit">Generate Rounded Image!</button></td> </tr>
</tbody></table></form><i></i><br />
<i></i><br />
<i></i><br />
<i> </i><br />
<hr /><i>This widget is a coutesy of </i><a href="http://roundpic.com/" target="_blank"><i>roundpic</i></a>.<br />
<br />
</div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-45950887537696375742011-12-13T21:45:00.002+05:302011-12-13T21:51:09.196+05:30New Sticky Bar For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">Hi Friends i have founded a new sticky bar for blogger with close message or button.This is a new kind of sticky bar.Many webmaster have search for this.Today i will let you that how to apply it on a blog/website.While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86jBHXleAZTjyVIGB9doujEHNertyD4MXcyPXUra3hSg-PO63_alTMZnCDi59Z0INl7qtdqGlTGcrMQsLtwZIYX2CCekEZ8ABKvkyWKv0ujoCBTEggDKr9tPD08h68Strir05zU_Jyxs/s1600/sticky+bar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86jBHXleAZTjyVIGB9doujEHNertyD4MXcyPXUra3hSg-PO63_alTMZnCDi59Z0INl7qtdqGlTGcrMQsLtwZIYX2CCekEZ8ABKvkyWKv0ujoCBTEggDKr9tPD08h68Strir05zU_Jyxs/s1600/sticky+bar.png" /></a></div><br />
<div class="royalb">Steps To Create Sticky Bar.</div><br />
<div align="justify">Follow these easy steps:</div><ol><li> <div align="left">Go To Blogger > Design > Edit HTML</div></li>
<li> <div align="left">Backup your template</div></li>
<li> <div align="left">Search for this</div></li>
</ol><br />
<div class="example1">]]></b:skin> </div><br />
4. Just above it paste the following CSS code,<br />
<br />
<div class="example1">#mbt_bar{<br />
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIoHDM3XLojZzLETaHvmhLRMQ4xob-Vb_yppzxgWAFKq2KxeS8TmL1gY_ie2L9I7ZHI9Qp3Vc9bYx_JF3dK-dGs3u6xG4kvjWrYuACLGG8ivgWkS7YYRSkIzQmOdDhv0bjAdhnLz5p-U/s400/stickybar.png') repeat-x;<br />
width:100%;<br />
margin:0 auto;<br />
text-align:center;<br />
padding:0px 0;<br />
border-bottom: 1px solid #888888;<br />
-moz-box-shadow: #666666 0px 1px 3px;<br />
-webkit-box-shadow: #666666 0px 1px 3px;<br />
box-shadow: #666666 0px 1px 3px;<br />
z-index: 999;<br />
height: 28px; position:fixed;<br />
line-height: 1.85em;<br />
vertical-align: baseline;<br />
letter-spacing: 1px;<br />
color:#fff;<br />
font-size:13px;<br />
font-weight:bold;<br />
font-family: arial,"Helvetica",sans-serif;<br />
}<br />
#mbt_bar a{<br />
text-decoration:underline;<br />
color:#E2E504;<br />
}<br />
#mbt_bar a:hover{<br />
text-decoration:none;<br />
}<br />
#mbt_bar p {margin:0; list-style:none;}<br />
#mbt_bar img {vertical-align: middle;<br />
margin-right: 6px;}</div><br />
5. Next search for </head> and paste the following Javascript code just above it<br />
<br />
<div class="example1"><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var mbt_arr = new Array();<br />
var mbt_clear = new Array();<br />
function mbtFloat(mbt) {<br />
mbt_arr[mbt_arr.length] = this;<br />
var mbtpointer = eval(mbt_arr.length-1);<br />
this.pagetop = 0;<br />
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;<br />
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);<br />
this.mbtsrc.height = this.mbtsrc.offsetHeight;<br />
this.mbtheight = this.cmode.clientHeight;<br />
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);<br />
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';<br />
mbtbar = mbtbar;<br />
eval(mbtbar);<br />
}<br />
function mbtGetOffsetY(mbt) {<br />
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);<br />
var parentOffset = mbt.mbtsrc.offsetParent;<br />
while ( parentOffset != null ) {<br />
mbtTotOffset += parentOffset.offsetTop;<br />
parentOffset = parentOffset.offsetParent;<br />
}<br />
return mbtTotOffset;<br />
}<br />
function mbtFloatInit(mbt) {<br />
mbt.pagetop = mbt.cmode.scrollTop;<br />
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";<br />
}<br />
function closeTopAds() {<br />
document.getElementById("mbt_bar").style.visibility = "hidden";<br />
}<br />
//]]><br />
</script></div><br />
6. Finally search for <body> and just below it paste the following HTML code<br />
<br />
<div class="example1"><br />
<div id='mbt_bar'> <b><span style="color: #274e13;">WRITE YOUR TEXT HERE</span></b><br />
<span style='padding:0px; float:right'><br />
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='<b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalQ1Mdrpeo5NW5VSrXDKVeGMRCCraZQJ6Gi7W2srAHhhgOAFr2UXCc8es4Dzsn6c0f2rmjvCyO11nfKiRYFYCIVoOaaXmvcQwD8yX7AJQ6vTub6nwGrtm8DVdr9uIEXQWIfKl_baELv8/s400/cancel.png</b>' style='cursor:hand;cursor:pointer;'/></span></div><br />
<br/><br/> </div><br />
To write any updates or anythig, just replace the <b style="color: #274e13;">Green</b> highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link. <br />
7. Save your template<br />
8. You are all done!<br />
<b><br />
</b><br />
<div class="success"><b>Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked! </b></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-87117095870898440642011-12-13T18:06:00.000+05:302011-12-13T18:06:23.991+05:30Html Entities EnCoder<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div style="text-align: center;"><b><a class="button big orange" href="http://www.blogger.com/post-create.g?blogID=3338805943353740342">Html Entities EnCoder</a></b></div><br />
<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<pre id="line56"></pre><div style="text-align: center;"><script type="text/javascript">
//<![CDATA[
function html2entities(){
var re=/[<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "<"
else if (match==">")
return ">"
else if (match=="\"")
return """
else if (match=="'")
return "'"
else if (match=="&")
return "&"
}
//]]>
</script></div><div style="text-align: center;"><script type="text/javascript">
//<![CDATA[
//Character count script
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
//]]>
</script></div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><form><div style="text-align: center;"><span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span></div><div style="text-align: center;"><span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><textarea name="data1" style="background-image: url("html-coder-txt.jpg"); background-repeat: no-repeat; height: 200px; overflow: hidden; padding: 10px; width: 485px;"></textarea><br />
<br />
</span><br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span></div><div align=""><div style="text-align: center;"><div style="text-align: center;"><span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span><br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><input class="button small blue" name="button" onclick="html2entities(this.form.data1)" onmouseout="this.className='button small blue'" onmouseover="this.className='button small blue'" type="button" value="Convert" /> <input class="button small blue" name="Clear" onmouseout="this.className='button small blue'" onmouseover="this.className='button small blue'" type="reset" value=" Clear " /></span><br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span><br />
<br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;">Copyrights © All Rights Reserved by <b>Utsav Chopra</b> @ <a href="http://www.myblogtrickz.blogspot.com/">MyBlogTrickz</a></span><br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span><br />
<span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span></div><span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> </span></div><span style="color: #6b828e; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"> <br />
</span></div></form></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-42188741853924246882011-12-13T13:08:00.000+05:302011-12-13T13:08:13.760+05:30Colour Code Genreator<div dir="ltr" style="text-align: left;" trbidi="on"><embed align="middle" allowscriptaccess="sameDomain" bgcolor="#ffffff" height="480" name="col" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.2createawebsite.com/build/col.swf" type="application/x-shockwave-flash" width="480"></embed><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-83954154398397532412011-12-13T13:02:00.000+05:302011-12-13T21:45:56.640+05:30Add a Fixed Stylish Verticle CSS3 Side Menu in blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSRKe4vht0Bu2_hHj18AjEj6KJMufbt1rBPefd-WjPB6FUPFRJTLzjdsMyPQiVvSXwzx3SSsBSVPUkiMRdvNqNmIWqVBc2cxLYGZbtv3YA5ZSuOyy6vqkoxQKB6l8uZ9yIB8OScHaz05s/s1600/fixed-position-side-menu-for-blogger.PNG" /> Hi Friends.In this post i have a very stylish and colorful menu for you.You can fix to the side of the page on your Blogger blog.The menu will stay in place even when the reader scrolls down yet doesn't interfere with the content.The menu has 5 icons that on hover scroll out to reveal their purpose, so for example the home icon on hover scrolls out the word 'Home'.The 5 icons are for Home, About, Services, Portfolio and Contact Us.While you cant change the icons, you can change the text for each icon for example the portfolio icon could be changed to archive.</div><br />
The menu is made up almost completely of Css3 with just one image and is quick and easy to install.All the credit for the menu goes to the awesome <a href="http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/" target="_blank">Tutorialzine</a>, we have covered many of their tutorials previously.Below you can see a live demo, hover over the icons to see the scroll out effect.<br />
<div class="separator" style="clear: both; text-align: left;"><br />
</div><a class="button blue medium" href="http://mydemoz123.blogspot.com/">Demo</a><br />
<br />
<div class="royalg">How To Add The Fixed Navigation Menu</div><br />
<ul style="text-align: left;"><li><b>Go To Blogger</b>>>>><b>Design</b>>>>><b>Edit HTML</b></li>
</ul><ul style="text-align: left;"><li>CTRL+F To <b>Find</b> <span style="color: red;">]]></b:skin> </span></li>
</ul><ul style="text-align: left;"><li><b>Copy And Paste</b> Below Code Just <b>Before/Above</b> <span style="color: blue;"> <span style="color: red;">]]></b:skin></span></span></li>
</ul><br />
<div class="example1"><b>/* CSS Style for Horizontal Menu - info @ http://www.myblogtrickz.blogspot.com*/ #hor { list-style:none; padding:0; margin:0; } #hor li { float:left; padding:5px; } #hor a { display:block; height: 12px; text-indent:-999em; } #hor a.home { width:46px; background:url(vHome.gif) no-repeat 0 0; } #hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; } #hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; } /* CSS Style for Vertical Menu */ #ver { list-style:none; padding:0; margin:0; } #ver li { padding:2px; } #ver li a { display:block; height:12px; text-indent:-999em; } #ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; } #ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; } #ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; } .clear { clear:both; } *{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-91WShKHwrJqyru1HnCydvlwKP1titV5CEaYgAxXxzoVHdoa1_w0u3uueclKWveBI0SnXWVh8bJdLn7ebuk1-75ky6Wb6yegdFs3-w3rN31cYtGKu2bFMNLoYoO4p4p20pAjA3ZhuBfA/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; } /*End menu css - info @ http://www.myblogtrickz.blogspot.com */</b></div><br />
<ul style="text-align: left;"><li><b>Save your template</b>, that's the Css added now for the html.</li>
</ul><ul style="text-align: left;"><li>Return to your blogs <b>Design</b> or <b>Layout</b> page and click <b>Add A Gadget</b> >>> <b>HTML/Javascript .</b></li>
</ul><ul style="text-align: left;"><li><b>Copy and paste</b> the following code into the<b> HTML/Javascript</b> gadget :</li>
</ul><br />
<div class="example1"><b><div style='position: fixed; top: 40%; left: 0%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="http://www.myblogtrickz.blogspot.com"> <span><span style="color: #274e13;">Home</span></span> </a> </li> <li> <a class="about" href="<span style="color: blue;">http://www.myblogtrickz.blogspot.com</span>"> <span><span style="color: #274e13;">About</span></span> </a> </li> <li> <a class="services" href="<span style="color: blue;">http://www.myblogtrickz.blogspot.com</span>"> <span><span style="color: #274e13;">Services</span></span> </a> </li> <li> <a class="portfolio" href="<span style="color: blue;">http://www.myblogtrickz.blogspot.com</span>"> <span><span style="color: #274e13;">Portfolio</span></span> </a> </li> <li> <a class="contact" href="<span style="color: blue;">http://www.myblogtrickz.blogspot.com</span>"> <span><span style="color: #274e13;">Contact us</span></span> </a> </li> </ul> </div><a href="<span style="color: blue;">http://www.myblogtrickz.blogspot.com</span>" target="_blank"><small>Get The Fixed Menu Gadget</small></a></b></div><br />
<br />
<div class="info"><b><span style="color: #990000; font-size: large;">Note- </span>Change the URLs in <span style="color: blue;">Blue</span> with your links and You can change the scroll out text in <span style="color: #274e13;">Green</span> above.</b></div><br />
<div class="success"><b>Now Save the Gadget.And see your website/blog.</b><br />
<b>Dont Forget to share this.</b></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-87157315220511678432011-12-12T19:11:00.001+05:302011-12-12T19:12:16.464+05:30Add Popup Email Subscription for Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoEGVzpg4Dcdl2sPxCzDmtPyw1_EM_Boy8vVn5x0f4O3g6nUyUKKZmNW55MQzkOt58UUsNSFc7UcLx2t9ipdKRpX-VZEnZuVUDz3lWEWp6Zrs05-L4jDAWM4MwDGTAkyVUUaUVRD7eNIA/s1600/email.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoEGVzpg4Dcdl2sPxCzDmtPyw1_EM_Boy8vVn5x0f4O3g6nUyUKKZmNW55MQzkOt58UUsNSFc7UcLx2t9ipdKRpX-VZEnZuVUDz3lWEWp6Zrs05-L4jDAWM4MwDGTAkyVUUaUVRD7eNIA/s1600/email.jpg" /> </a>So many blogs and websites have implemented a pop up subscription form for their newsletter.I'm sure you have seen it, you can also land it on a site and after a few seconds a form appears asking for your Email to subscribe.While these can annoy some people they have been proven to have a dramatic effect on the numbers of subscribers.In this post i will show you how to add a similar form to your Blogger blog but with a form to subscribe to your blog via Email Rss provided by feedburner.The form is a one time pop up so if someone visits your blog every day it will remember they visited before and not show the form again.</div><br />
This tutorial was originally posted on the excellent <a href="http://simplexdesign.blogspot.com/2011/02/using-jquery-to-make-one-time.html" target="_blank">Simplex Design</a> blog so make sure to check them out.Below you can see a live demo. <br />
<br />
<a class="button green medium" href="http://mydemoz123.blogspot.com/">Live Demo</a><br />
<br />
<div class="notes" style="text-align: center;"><b>How To Add The Pop Up Subscription</b></div><br />
<ul style="text-align: left;"><li><b>Go To Blogger</b>--><b>Design</b>--><b>Edit HTML</b></li>
</ul><ul style="text-align: left;"><li>CTRL+F To Find <b><span style="color: red;">]]></b:skin></span></b></li>
</ul><ul style="text-align: left;"><li><b>Copy And Paste</b> Below Code Just <b>Above/Before</b> <span style="color: blue;"> <b><span style="color: red;">]]></b:skin> </span></b></span></li>
</ul><br />
<div class="example1"><b>/*Subscription Pop Up Css*/</b><br />
<b>#popupContactClose{</b><br />
<b>cursor: pointer;</b><br />
<b>text-decoration:none;</b><br />
<b>}</b><br />
<b>#backgroundPopup{</b><br />
<b>display:none;</b><br />
<b>position:fixed;</b><br />
<b>_position:absolute; /* hack for internet explorer 6*/</b><br />
<b>height:100%;</b><br />
<b>width:100%;</b><br />
<b>top:0;</b><br />
<b>left:0;</b><br />
<b>background:#000000;</b><br />
<b>border:1px solid #cecece;</b><br />
<b>z-index:1;</b><br />
<b>}</b><br />
<b>#popupContact{</b><br />
<b>display:none;</b><br />
<b>position:fixed;</b><br />
<b>_position:absolute; /* hack for internet explorer 6*/</b><br />
<b>height:384px;</b><br />
<b>width:408px;</b><br />
<b>background:#FFFFFF;</b><br />
<b>border:2px solid #cecece;</b><br />
<b>z-index:2;</b><br />
<b>padding:12px;</b><br />
<b>font-size:13px;</b><br />
<b>}</b><br />
<b>#popupContact h1{</b><br />
<b>text-align:left;</b><br />
<b>color:#6FA5FD;</b><br />
<b>font-size:22px;</b><br />
<b>font-weight:700;</b><br />
<b>border-bottom:1px dotted #D3D3D3;</b><br />
<b>padding-bottom:2px;</b><br />
<b>margin-bottom:20px;</b><br />
<b>}</b><br />
<b>#popupContactClose{</b><br />
<b>font-size:14px;</b><br />
<b>line-height:14px;</b><br />
<b>right:6px;</b><br />
<b>top:4px;</b><br />
<b>position:absolute;</b><br />
<b>color:#6fa5fd;</b><br />
<b>font-weight:700;</b><br />
<b>display:block;</b><br />
<b>}</b><br />
<b>/*End Subscription Pop Up Css @ http://www.myblogtrickz.blogspot.com */</b></div><br />
<ul style="text-align: left;"><li><b>CTRL+F</b> To Find <b style="color: red;"></head></b></li>
</ul><ul style="text-align: left;"><li>Now <b>Copy And Paste</b> This Code Directly<b> Above / Before</b> <b style="color: red;"></head></b></li>
</ul><br />
<div class="example1"><b><!--Pop Up Subscription--></b><br />
<b><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/></b><br />
<b><script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/></b><br />
<b><script type='text/javascript'></b><br />
<b>var popupStatus = 0;</b><br />
<b><br />
</b><br />
<b>//loading popup with jQuery magic!</b><br />
<b>function loadPopup(){</b><br />
<b>centerPopup();</b><br />
<b>//loads popup only if it is disabled</b><br />
<b>if(popupStatus==0){</b><br />
<b>$(&quot;#backgroundPopup&quot;).css({</b><br />
<b>&quot;opacity&quot;: &quot;0.7&quot;</b><br />
<b>});</b><br />
<b>$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);</b><br />
<b>$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);</b><br />
<b>popupStatus = 1;</b><br />
<b>}</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>//disabling popup with jQuery magic!</b><br />
<b>function disablePopup(){</b><br />
<b>//disables popup only if it is enabled</b><br />
<b>if(popupStatus==1){</b><br />
<b>$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);</b><br />
<b>$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);</b><br />
<b>popupStatus = 0;</b><br />
<b>}</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>//centering popup</b><br />
<b>function centerPopup(){</b><br />
<b>//request data for centering</b><br />
<b>var windowWidth = document.documentElement.clientWidth;</b><br />
<b>var windowHeight = document.documentElement.clientHeight;</b><br />
<b>var windowscrolltop = document.documentElement.scrollTop;</b><br />
<b>var windowscrollleft = document.documentElement.scrollLeft;</b><br />
<b>var popupHeight = $(&quot;#popupContact&quot;).height();</b><br />
<b>var popupWidth = $(&quot;#popupContact&quot;).width();</b><br />
<b>var toppos = windowHeight/2-popupHeight/2+windowscrolltop;</b><br />
<b>var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;</b><br />
<b>//centering</b><br />
<b>$(&quot;#popupContact&quot;).css({</b><br />
<b>&quot;position&quot;: &quot;absolute&quot;,</b><br />
<b>&quot;top&quot;: toppos,</b><br />
<b>&quot;left&quot;: leftpos</b><br />
<b>});</b><br />
<b>//only need force for IE6</b><br />
<b><br />
</b><br />
<b>$(&quot;#backgroundPopup&quot;).css({</b><br />
<b>&quot;height&quot;: windowHeight</b><br />
<b>});</b><br />
<b><br />
</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b><br />
</b><br />
<b>//CONTROLLING EVENTS IN jQuery</b><br />
<b>$(document).ready(function(){</b><br />
<b>if ($.cookie(&quot;anewsletter&quot;) != 1) {</b><br />
<b><br />
</b><br />
<b>//load popup</b><br />
<b>setTimeout(&quot;loadPopup()&quot;,5000);</b><br />
<b>}</b><br />
<b>//CLOSING POPUP</b><br />
<b>//Click the x event!</b><br />
<b>$(&quot;#popupContactClose&quot;).click(function(){</b><br />
<b>disablePopup();</b><br />
<b>$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</b><br />
<b>});</b><br />
<b>//Click out event!</b><br />
<b>$(&quot;#backgroundPopup&quot;).click(function(){</b><br />
<b>disablePopup();</b><br />
<b>$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</b><br />
<b>});</b><br />
<b>//Press Escape event!</b><br />
<b>$(document).keypress(function(e){</b><br />
<b>if(e.keyCode==27 &amp;&amp; popupStatus==1){</b><br />
<b>disablePopup();</b><br />
<b>$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</b><br />
<b>}</b><br />
<b>});</b><br />
<b><br />
</b><br />
<b>});</b><br />
<b></script></b><br />
<b><!--End Pop Up Subscription @ http://myblogtrickz.blogspot.com --></b></div><br />
<ul style="text-align: left;"><li><b>CTRL+F</b> To Find <b style="color: red;"></body></b></li>
</ul><ul style="text-align: left;"><li><b>Copy and Paste</b> the following code Directly <b>Above / Before</b> <b style="color: red;"></body></b></li>
</ul><br />
<div class="example1"><b><div id='popupContact'></b><br />
<b><a id='popupContactClose'>x</a></b><br />
<b><h1>Get Our Latest Posts Via Email - It&#39;s Free</h1></b><br />
<b><p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&,"gl";apos;http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">Myblogtrickz</span>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='<span style="color: red;">Myblogtrickz</span>'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p></b><br />
<b></div></b><br />
<b><div id='backgroundPopup'/></b></div><br />
<div class="warning"><b><span style="color: #990000;">Remember</span>-You need to change our feedburner username with yours.The username for your feed can be found at the end of your feed URL.For example the our feedburner URL is http://feeds.feedburner.com/MakingDiffrent , with Myblogtrickz being the username.</b></div><br />
That's it all thanks go to <a href="http://simplexdesign.blogspot.com/2011/02/using-jquery-to-make-one-time.html" target="_blank">Simplex Design</a>.<br />
<b><br />
</b><br />
<div class="success"><b>That's all You have done it.</b><br />
<b>Drop your comments and questions below. :)</b></div><br />
</div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-73740309798888829812011-12-10T18:13:00.000+05:302011-12-10T18:13:59.077+05:30How to add Snow Falling For your Blogger Blog<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrvyGDA67ZGw5MMaZOUZhSYlAws11dUALw5Czr19WMsvodAlwppbDq-gSBlvE_K0y_D3JCTK_oM7gxR64EKznJ_Jf7bjY4taum0gXtgsn42SlKDk82VcEScSVvkNDq0A2lxhEILOIRhk/s1600/snow+fall.jpg" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrvyGDA67ZGw5MMaZOUZhSYlAws11dUALw5Czr19WMsvodAlwppbDq-gSBlvE_K0y_D3JCTK_oM7gxR64EKznJ_Jf7bjY4taum0gXtgsn42SlKDk82VcEScSVvkNDq0A2lxhEILOIRhk/s1600/snow+fall.jpg" width="320" /> </a></div><div class="separator" style="clear: both; text-align: left;">Welcome Your Visitors with new <b>Snow falling.This </b>is a simple script which can add your Blog/Website an attractive look.</div><div class="separator" style="clear: both; text-align: left;"><b> </b></div><div class="separator" style="clear: both; text-align: left;"><b> </b></div><div class="separator" style="clear: both; text-align: left;"><b> </b></div><br />
<div class="notes" style="text-align: center;"><b>How To Add Colorful Snow </b><b>Falling</b><b> in Blogger</b></div><br />
<ul><li>Go To Blogger > <b>Design</b></li>
<li> Choose <b>HTML/Javascript</b> gadget</li>
<li> <b>Copy n Paste</b> Below Code Into It </li>
</ul><br />
<br />
<div class="example1"><script type="text/javascript"><br />
<br />
<br />
//Configure below to change URL path to the snow image<br />
var snowsrc="<b style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpswxEoy92_hdZOr7SqSgxpIWVSqmTs2VhCyFnfNXQi97hOsVLylUyr4hI4pIjwTTtjeTiJY9vOujgy26PqXYYx9eWDFguryxhmttEvyZFzV4IAYQ-yPo2uVizNH_NcRzH-V_Q9Jv_4BR/s1600/snow.gif</b>"<br />
// Configure below to change number of snow to render<br />
var no = <span style="background-color: blue; color: white;">15</span>;<br />
// Configure whether snow should <span style="background-color: red;"></span>disappear after x seconds (0=never):<br />
var hidesnowtime = 0;<br />
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")<br />
var snowdistance = "pageheight";<br />
<br />
///////////Stop Config//////////////////////////////////<br />
<br />
var ie4up = (document.all) ? 1 : 0;<br />
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;<br />
<br />
function iecompattest(){<br />
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body<br />
}<br />
<br />
var dx, xp, yp; // coordinate and position variables<br />
var am, stx, sty; // amplitude and step variables<br />
var i, doc_width = 800, doc_height = 600;<br />
<br />
if (ns6up) {<br />
doc_width = self.innerWidth;<br />
doc_height = self.innerHeight;<br />
} else if (ie4up) {<br />
doc_width = iecompattest().clientWidth;<br />
doc_height = iecompattest().clientHeight;<br />
}<br />
<br />
dx = new Array();<br />
xp = new Array();<br />
yp = new Array();<br />
am = new Array();<br />
stx = new Array();<br />
sty = new Array();<br />
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "<b style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpswxEoy92_hdZOr7SqSgxpIWVSqmTs2VhCyFnfNXQi97hOsVLylUyr4hI4pIjwTTtjeTiJY9vOujgy26PqXYYx9eWDFguryxhmttEvyZFzV4IAYQ-yPo2uVizNH_NcRzH-V_Q9Jv_4BR/s1600/snow.gif</b>" : snowsrc<br />
for (i = 0; i < no; ++ i) { <br />
dx[i] = 0; // set coordinate variables<br />
xp[i] = Math.random()*(doc_width-50); // set position variables<br />
yp[i] = Math.random()*doc_height;<br />
am[i] = Math.random()*20; // set amplitude variables<br />
stx[i] = 0.02 + Math.random()/10; // set step variables<br />
sty[i] = 0.7 + Math.random(); // set step variables<br />
if (ie4up||ns6up) {<br />
if (i == 0) {<br />
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");<br />
} else {<br />
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");<br />
}<br />
}<br />
}<br />
<br />
function snowIE_NS6() { // IE and NS6 main animation function<br />
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;<br />
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;<br />
for (i = 0; i < no; ++ i) { // iterate for every dot<br />
yp[i] += sty[i];<br />
if (yp[i] > doc_height-50) {<br />
xp[i] = Math.random()*(doc_width-am[i]-30);<br />
yp[i] = 0;<br />
stx[i] = 0.02 + Math.random()/10;<br />
sty[i] = 0.7 + Math.random();<br />
}<br />
dx[i] += stx[i];<br />
document.getElementById("dot"+i).style.top=yp[i]+"px";<br />
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; <br />
}<br />
snowtimer=setTimeout("snowIE_NS6()", 10);<br />
}<br />
<br />
function hidesnow(){<br />
if (window.snowtimer) clearTimeout(snowtimer)<br />
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"<br />
}<br />
<br />
<br />
if (ie4up||ns6up){<br />
snowIE_NS6();<br />
if (hidesnowtime>0)<br />
setTimeout("hidesnow()", hidesnowtime*1000)<br />
}<br />
<br />
</script></div><br />
<br />
<b>Make these changes:</b><br />
<br />
<br />
<ul style="text-align: left;"><li>To set the number of snow balls edit the number <span style="background-color: blue; color: white;">15</span></li>
</ul><ul style="text-align: left;"><li>To change the snow image replace the <span style="color: blue;">Blue</span> link with yours</li>
</ul> If you want use white soft snow rather than snow flakes then use this link:<br />
<br />
<br />
<div class="example1" style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdclspFhVFuvYRgY2NuEIkbW-7btFqxKTiY-XC_QWWIYytTkO423z54bnfIGi29kPyoxvx7dHqqQZx97KYW1d9CuaVo_Y4EwB6S-7Wo9Aa1LHA6cPJR8URR_kLC6koIKv-D0fUpPaDurGj/s1600/falling-snow.png</div><br />
Why not some red colorful snow?<br />
<br />
<br />
<div class="example1" style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtpHn51kp8fuzXWgXMA7tMqmYGgpp-kZ6rjgyDYQyHdFg9mJcbvFsGwHYtefVeg3RDpFOXyWY_qEr0iqDWBBugWJK58h34oCsF9JbqOpUmZeeTbFVIIPmg8DqjLA0QMPf57v_fwKE5MXE/s1600/red-snow.png</div><br />
You can replace the image with anything you wish. You can also display falling autumn leaves, falling new year message,falling diamonds or even falling hearts! Just play with the code and keep changing the styles.<br />
<br />
<br />
<ul style="text-align: left;"><li>Save your widget and drag it to the top most position possible near header as shown below. </li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAT8TP46N3Ek8NpBJYkkp_6LREK3qn35tfSujyrurhy57HbyMEEhyphenhypheng3DViGKVY6Qx1qx_TaKosrRM4GokOtzj9JHRs8QQGWyfxh_4qwIzDPd4dX9jOYlzhc8Bq1-mLDeP0nfkBiXIC0Xg/s1600/save.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAT8TP46N3Ek8NpBJYkkp_6LREK3qn35tfSujyrurhy57HbyMEEhyphenhypheng3DViGKVY6Qx1qx_TaKosrRM4GokOtzj9JHRs8QQGWyfxh_4qwIzDPd4dX9jOYlzhc8Bq1-mLDeP0nfkBiXIC0Xg/s1600/save.png" /></a></div><br />
5. Click the orange save button on your page elements and you are all done!<br />
<br />
<br />
<img alt="Save button" border="0" height="44" src="http://lh5.ggpht.com/-QLAvyUuvEOo/Tt-8JZmkILI/AAAAAAAAFjg/fBQILlCYRDQ/s512/image%25255B47%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Save button" width="301" /><br />
<br />
<div class="success"><b>Visit your blogs to see beautiful snow falling on your blog giving a Christmas touch of winter. Have fun!</b></div><br />
</div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-12124769092368471192011-12-10T13:44:00.000+05:302011-12-10T13:44:57.514+05:30Show Slides of Related Post on Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><b>Now You can Set Wordpress style Slides of Related Post on Blogger</b>.The Widget will slide at the bottom of right corner of your page and will recommend related posts from your site to the visitor.Almost Every Wordpress popular sites will using this widgets.Now its your turn to use it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcn9yaCYsdcW72zJa1e_fym7_myL7YfAUT1ics4RLLi9EkVaa5OrsQlSAJhnwpSwOlL5gEIjPxFRc2ZUNiZ0DoviHYGBMXQfDUCif8FX76sz_FMWUAjr0NPd1WnOscPt9fz9j4hzC8G_0/s1600/widget1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcn9yaCYsdcW72zJa1e_fym7_myL7YfAUT1ics4RLLi9EkVaa5OrsQlSAJhnwpSwOlL5gEIjPxFRc2ZUNiZ0DoviHYGBMXQfDUCif8FX76sz_FMWUAjr0NPd1WnOscPt9fz9j4hzC8G_0/s1600/widget1.JPG" /></a></div><div style="text-align: center;"><br />
</div><br />
<div class="notes" style="text-align: center;">How To Add This Widget In Blogger ?</div><br />
<ul style="text-align: left;"><li> Go and Sign up for an account at <a href="http://simplereach.com/?login=true" target="_blank">Simple Reach</a>. During Sign up, give the URL of your blog where you want this widget appear.</li>
</ul><ul style="text-align: left;"><li> Next Visit your Inbox to activate your account</li>
</ul><ul style="text-align: left;"><li> One your account page fill the easy instructions given there.</li>
</ul><ul style="text-align: left;"><li> They will give you a pictorial representation on what to do next. They will ask you to Download your Blogger template by going to <b>Design</b> > <b>Edit HTML</b> > <b>Download Full Template</b>. (<b>I would advise that you first Backup your template and keep it in a safe place.</b>)</li>
</ul><ul style="text-align: left;"><li> Then you will be asked to upload your template on their site. Do it and you will be taken to a new page where in step#5 you will get a link for the modified copy of your template. Simply download your new modified template from their site and upload it on Blogger.</li>
</ul><ul style="text-align: left;"><li> Your are all done!</li>
</ul><br />
<div class="success">It will take around 30 minutes to fully index all your pages. After the 30 minutes, you will be able to see the widget appearing on your blog. Note this the widget will appear only on your post pages not at homepage.</div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0tag:blogger.com,1999:blog-3338805943353740342.post-4115626362048548982011-12-07T21:43:00.000+05:302011-12-09T11:56:13.647+05:30Christmas Countdown For Blogger New<div dir="ltr" style="text-align: left;" trbidi="on">Hi,<br />
We have Found new Blogger widgets for xmas it is very special widget.The countdown widget counts down to 25 December 2011 and in military time format by counting days, hours, minutes and seconds left for the coming Christmas event. It also alerts and wishes Christmas by generating a pop-up once the count down ends. The Script is provided by <a href="http://www.dynamicdrive.com/dynamicindex6/dhtmlcount.htm" target="_blank">dynamic drive</a> and it is styled was enhanced by MBT. This widget will be shared on each event here may it be Holi,New Year,etc. It is was very easy to install and customize it.Ths Script does not contain any ads.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVSA1HHJyFZHCs6_eAQFzCoXaHcr5FF1dXANIcN4m2a2b9tiR2ydkkM_VgT9_2zZw8wZKkBoyFuJWTxfM2rSJ-7zVRAbss5l8BcpAes2J6T4MDCMrW4YIfmGFDbbRTPlfC2TTdDJCcKs/s1600/ccd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVSA1HHJyFZHCs6_eAQFzCoXaHcr5FF1dXANIcN4m2a2b9tiR2ydkkM_VgT9_2zZw8wZKkBoyFuJWTxfM2rSJ-7zVRAbss5l8BcpAes2J6T4MDCMrW4YIfmGFDbbRTPlfC2TTdDJCcKs/s1600/ccd.png" /> </a></div><div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: center;"><b><a class="myButton" href="http://demoblogz123.blogspot.com/2011/12/christmas-countdown-widget-for-blogger.html">Demo</a></b><br />
<br />
<br />
<div class="notes"><b>How To add Christmas Countdown widget ?</b></div><br />
<ol style="text-align: left;"><li>Go To Blogger > Design </li>
<li>Choose HTML/JavaScript widget </li>
<li>Paste the following code inside it, </li>
</ol><br />
<div class="codeview"><br />
<b><style style="text/css"></b><br />
<b><br />
</b><br />
<b>.lcdstyle{ /*Example CSS to create LCD countdown look*/</b><br />
<b>background-color:fff;</b><br />
<b>color:#FF3333;</b><br />
<b>font: bold 20px arial;</b><br />
<b>padding: 15px;</b><br />
<b><br />
</b><br />
<b>border:5px solid #0080ff;</b><br />
<b><br />
</b><br />
<b>border-radius:15px;</b><br />
<b>-moz-border-radius:15px;</b><br />
<b>-webkit-border-radius:15px;</b><br />
<b>box-shadow: 5px 5px 5px #CCCCCC;</b><br />
<b><br />
</b><br />
<b><br />
</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>.lcdstyle sup{ /*Example CSS to create LCD countdown look*/</b><br />
<b>font-size: 120%</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b></style></b><br />
<b><br />
</b><br />
<b><script type="text/javascript"></b><br />
<b><br />
</b><br />
<b>/***********************************************</b><br />
<b>* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)</b><br />
<b>* This notice MUST stay intact for legal use</b><br />
<b>* Visit http://www.dynamicdrive.com/ for this script and 100s more.</b><br />
<b>***********************************************/</b><br />
<b><br />
</b><br />
<b>function cdtime(container, targetdate){</b><br />
<b>if (!document.getElementById || !document.getElementById(container)) return</b><br />
<b>this.container=document.getElementById(container)</b><br />
<b>this.currentTime=new Date()</b><br />
<b>this.targetdate=new Date(targetdate)</b><br />
<b>this.timesup=false</b><br />
<b>this.updateTime()</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>cdtime.prototype.updateTime=function(){</b><br />
<b>var thisobj=this</b><br />
<b>this.currentTime.setSeconds(this.currentTime.getSeconds()+1)</b><br />
<b>setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>cdtime.prototype.displaycountdown=function(baseunit, functionref){</b><br />
<b>this.baseunit=baseunit</b><br />
<b>this.formatresults=functionref</b><br />
<b>this.showresults()</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>cdtime.prototype.showresults=function(){</b><br />
<b>var thisobj=this</b><br />
<b><br />
</b><br />
<b><br />
</b><br />
<b>var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds</b><br />
<b>if (timediff<0){ //if time is up</b><br />
<b>this.timesup=true</b><br />
<b>this.container.innerHTML=this.formatresults()</b><br />
<b>return</b><br />
<b>}</b><br />
<b>var oneMinute=60 //minute unit in seconds</b><br />
<b>var oneHour=60*60 //hour unit in seconds</b><br />
<b>var oneDay=60*60*24 //day unit in seconds</b><br />
<b>var dayfield=Math.floor(timediff/oneDay)</b><br />
<b>var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)</b><br />
<b>var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)</b><br />
<b>var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))</b><br />
<b>if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level</b><br />
<b>hourfield=dayfield*24+hourfield</b><br />
<b>dayfield="n/a"</b><br />
<b>}</b><br />
<b>else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level</b><br />
<b>minutefield=dayfield*24*60+hourfield*60+minutefield</b><br />
<b>dayfield=hourfield="n/a"</b><br />
<b>}</b><br />
<b>else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level</b><br />
<b>var secondfield=timediff</b><br />
<b>dayfield=hourfield=minutefield="n/a"</b><br />
<b>}</b><br />
<b>this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)</b><br />
<b>setTimeout(function(){thisobj.showresults()}, 1000) //update results every second</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////</b><br />
<b><br />
</b><br />
<b>//Create your own custom format function to pass into cdtime.displaycountdown()</b><br />
<b>//Use arguments[0] to access "Days" left</b><br />
<b>//Use arguments[1] to access "Hours" left</b><br />
<b>//Use arguments[2] to access "Minutes" left</b><br />
<b>//Use arguments[3] to access "Seconds" left</b><br />
<b><br />
</b><br />
<b>//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()</b><br />
<b>//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"</b><br />
<b>//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc</b><br />
<b><br />
</b><br />
<b><br />
</b><br />
<b>function formatresults(){</b><br />
<b>if (this.timesup==false){//if target date/time not yet met</b><br />
<b>var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2011 18:25:00"</b><br />
<b>}</b><br />
<b>else{ //else if target date/time met</b><br />
<b>var displaystring=""</b><br />
<b>}</b><br />
<b>return displaystring</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b>function formatresults2(){</b><br />
<b>if (this.timesup==false){ //if target date/time not yet met</b><br />
<b>var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "</b><br />
<b>}</b><br />
<b>else{ //else if target date/time met</b><br />
<b>var displaystring="" //Don't display any text</b><br />
<b>alert("Christmas is here!") //Instead, perform a custom alert</b><br />
<b>}</b><br />
<b>return displaystring</b><br />
<b>}</b><br />
<b><br />
</b><br />
<b></script></b><br />
<b><br />
</b><br />
<b><br />
</b><br />
<b><h1 style="color:#0080ff; margin:0;">Happy Holidays!</h1></b><br />
<b><div id="countdowncontainer"></div></b><br />
<b><br /></b><br />
<b><div id="countdowncontainer2"></div></b><br />
<b><br />
</b><br />
<b><script type="text/javascript"></b><br />
<b><br />
</b><br />
<b>var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")</b><br />
<b>futuredate.displaycountdown("days", formatresults)</b><br />
<b><br />
</b><br />
<b>var currentyear=new Date().getFullYear()</b><br />
<b>//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1</b><br />
<b>var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear</b><br />
<b>var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")</b><br />
<b>christmas.displaycountdown("days", formatresults2)</b><br />
<b><br />
</b><br />
<b></script></b><br />
<br />
</div><br />
<div style="text-align: left;">How To change Colours.</div><div style="text-align: left;"></div><ul style="text-align: left;"><li>To change the color of happy holidays edit <span style="color: #0080ff;"><b>color:#0080ff</b></span> </li>
<li>To change the rounded blue border colour and size edit <span style="background-color: yellow;">border:5px solid #0080ff</span> </li>
<li>To change the Count Down text colour edit <span style="color: #9b00d3;"><b>color:#FF3333</b></span> </li>
</ul><div></div><div style="text-align: left;"> 4. Save your widget and say yoho!</div><div style="text-align: left;"></div><div style="text-align: left;">Visit your blogs to see it working just perfectly.</div><div style="text-align: left;"><br />
</div><h3 style="text-align: left;">Want to CountDown till New Year?</h3><div></div><div style="text-align: left;">Simply change <span style="background-color: #f79646;">December 25</span> to <span style="background-color: #f79646;">December 31</span> and change <b><span style="color: red;"><span style="color: #274e13;">Christmas is here!</span> </span></b>to <b style="color: #274e13;">HAPPY NEW YEAR!</b> </div><div style="text-align: left;"><br />
</div><div style="text-align: left;"> If you know basic CSS then you add more flavour and color variation to it. I hope you may find this cool new widget worth using. If you wish to share it with your readers then kindly attach attributes to MBT and dynamic drive. </div><div style="text-align: left;"><br />
</div><div style="text-align: left;"> </div><br />
<div class="success"><b>Please Share This To Your Friends !</b></div></div></div>Anonymoushttp://www.blogger.com/profile/09529249190410799364noreply@blogger.com0