tag:blogger.com,1999:blog-9555172623442919932024-03-05T16:20:25.528-08:00Tools for bloggerAll kinds of Tools,Gadgets,Tricks and Tips and all you need for Creating a blog and monetizing with it.Unknownnoreply@blogger.comBlogger29125tag:blogger.com,1999:blog-955517262344291993.post-2472508046814913492012-08-03T05:23:00.002-07:002012-08-03T08:39:05.320-07:00How To Add a Reply Button To Blogger Comments<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOP5ZLB3Tgu5X9BWCLPpFyYNv1FP40x6x2Q4SLk49-xn8XjUHVz28_CCKqYGsJ-laIc0K_yyg_NyNOpkVK_aQwUrwsp1Y1v39Z98hFHy27FEBHBRlFN1Fqk7WCXj4E7PHEFewKuAZjkH4/s1600/reply_comment_button.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOP5ZLB3Tgu5X9BWCLPpFyYNv1FP40x6x2Q4SLk49-xn8XjUHVz28_CCKqYGsJ-laIc0K_yyg_NyNOpkVK_aQwUrwsp1Y1v39Z98hFHy27FEBHBRlFN1Fqk7WCXj4E7PHEFewKuAZjkH4/s400/reply_comment_button.png" width="400" /></a></div>
<span style="font-size: large;">You would have seen a reply button to each particular comment in wordpress blogs, and we also want blogger to add this feature in blogger comments and make blogger comments more useful.But they busy in adding more blogger features to blogger blogs to make it more easy and useful.As its not possible to make hack to have this reply button in blogger comments as wordpress blogs, but we have come with small hack like this to make reply button which would make look blogger comment system look better than before.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">Now let's see to how adding this reply button to each comments in blogger.</span><br />
<span style="font-size: large;"><br /></span><br />
<br />
<div style="font-size: x-large;">
1.) Go To dashboard Click Design > Edit Html > Tick the 'Expand Widget templates' box.</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
2.) Press Ctrl + F and search for below code</div>
<div style="font-size: x-large;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: #e7e7e7; color: #333333; font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 20px; text-align: justify;"><data:commentPostedByMsg/></span>
</div>
<div style="text-align: center;">
<span style="background-color: #e7e7e7; color: #333333; font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 20px; text-align: justify;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #e7e7e7; color: #333333; font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 20px; text-align: justify;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit; font-size: large;">And place the below codes after it.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div style="text-align: justify;">
</div>
<div class="codeview" style="background-color: #e7e7e7; border: 2px solid rgb(193, 193, 193); clear: both; color: #333333; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; line-height: 20px; list-style-type: none; margin: 15px 25px 15px 15px; outline: 0px; overflow: hidden; padding: 10px; vertical-align: baseline; word-wrap: break-word;">
<br />
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<span style="background-color: transparent; border: 0px; color: red; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">YOUR-BLOG-ID</span>&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=450,height=450&quot;); return false;'><span style="background-color: transparent; border: 0px; color: red; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">[Reply]</span></a></span></div>
<br />
<br />
<div style="text-align: justify;">
<span style="color: red; font-family: inherit; font-size: large;"><b>Note:</b></span></div>
<div style="text-align: justify;">
<span style="color: red; font-family: inherit; font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"></span></div>
<span style="font-size: large;">You must need to change the <span style="color: red;">YOUR-BLOG-ID</span> with your blog id. Now how to get your blog id.Just got to blogger Design > Page Elements.</span><br />
<span style="font-size: large;">Now see for adress bar in your browser.You will get link like this.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: large;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOHeqm23DxpmuwgtX3-5oTl1GkyNQEfB4qOvxI3aslmqJreBbN-SqkX5ttgAwmOhE1OIXciImErqJ-t7qgC9P79MdLetyowqJD3PeyzXKU8dgGlUiT3ptej6lDNG0zKYEY7zYNO5QuWA/s1600/blog-id.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOHeqm23DxpmuwgtX3-5oTl1GkyNQEfB4qOvxI3aslmqJreBbN-SqkX5ttgAwmOhE1OIXciImErqJ-t7qgC9P79MdLetyowqJD3PeyzXKU8dgGlUiT3ptej6lDNG0zKYEY7zYNO5QuWA/s1600/blog-id.jpg" /></a></span></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">Just get the id number in pink border and replace in the above code. And you have done now and just save your template.Now you will be able to see the reply button in each blogger comments.</span><br />
<span style="font-size: large;"><br /></span><br />
<h4>
<span style="font-size: large;">Change Reply text into Button:</span></h4>
<div>
<span style="font-size: large;"> Some users like to keep reply button instead of text [reply]. So just replace <span style="color: red;">[Reply]</span> in red with the below code and customize the image link to whatever reply button you want to use or keep it as default.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<div class="codeview" style="background-color: #e7e7e7; border: 2px solid rgb(193, 193, 193); clear: both; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; line-height: 20px; list-style-type: none; margin: 15px 25px 15px 15px; outline: 0px; overflow: hidden; padding: 10px; text-align: justify; vertical-align: baseline; word-wrap: break-word;">
<span style="color: #333333;"><img src="</span><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHnpCeTBrIIgD9J9q3QBzHyvl16olxuoq_Z7nXj1ApqmxFNS5FgVvMvI1yICWKvFb6li1MOzGy6J7D6-rOxj0Xf7IUZExYh6dq4rXsDM622f42egE7RF6dsH46I1W3KK2a4lhgUOvVnHi/s1600/reply%5B1%5D.gif</span><span style="color: #333333;">"/></span></div>
</div>
<div>
<span style="font-size: large;">That's it.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Source: <a href="http://www.anshuldudeja.com/" target="_blank">anshuldudeja</a></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-15044964732766576052012-08-02T10:17:00.004-07:002012-08-16T07:07:13.383-07:00Flash Animated Label Cloud For Blogger and Wordpress<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPH7YCP4IukJZ38N0krr6V1pqirxvUukW2MxDwYchXPEwpBbwA9xGNAZTdNflcRAXnKLmLLBYhyphenhyphennP2bWQBNTz2MtaKJhLnj-kfHX-TzrYQvQq_fv5CReqmUrCtjjEFW0iXyXFXEPy_eo4/s1600/a.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPH7YCP4IukJZ38N0krr6V1pqirxvUukW2MxDwYchXPEwpBbwA9xGNAZTdNflcRAXnKLmLLBYhyphenhyphennP2bWQBNTz2MtaKJhLnj-kfHX-TzrYQvQq_fv5CReqmUrCtjjEFW0iXyXFXEPy_eo4/s320/a.jpg" width="320" /></a></div>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">The Flash Animated Label Cloud has been a popular widget for WordPress and Blogger for some time. </span><span style="font-size: large;">Flash Label Cloud Widget is very popular for blogger.Its is very useful it save space and look beautiful.New Flash label cloud is different from old one it is easy to install and having colorful hover effect this label cloud is transparent which help to see every label clearly.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Here is a Demo <a href="http://jsfiddle.net/harishdasari/g8xP9/embedded/result/" target="_blank">CLICK HERE!</a></span><br />
<br />
<h4 style="text-align: left;">
<span style="font-size: large;">It's time to create your's:</span><span style="font-size: x-large;"></span></h4>
<div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;">1.) Log in into blogger</span></div>
<span style="font-size: large;">
</span>
<div>
<span style="font-size: large;"><br /></span></div>
<span style="font-size: large;">
</span>
<div>
<span style="font-size: large;">2.) Click Layout.</span></div>
<span style="font-size: large;">
</span>
<div>
<span style="font-size: large;"><br /></span></div>
<span style="font-size: large;">
<div>
3.) Click Edit HTML tab</div>
<div>
<br /></div>
<div>
4.) Click Download Full Template and back up the template first.</div>
<div>
<br /></div>
<div>
5.)Find the code similar with the code below without expanding the widgets</div>
</span></div>
<span style="font-size: large;"><br /></span>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-size: 12px; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><span style="font-family: 'Courier New', Courier, monospace;"><b:section class='sidebar' id='sidebar' preferred='yes'></span></span>
</div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc; font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;">Now Place the below codes immediately after the above line you found</span></div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc; font-family: inherit; font-size: large;"><br /></span></div>
<div style="text-align: left;">
</div>
<div class="codeview" style="border-bottom-color: rgb(193, 193, 193); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(193, 193, 193); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(193, 193, 193); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(193, 193, 193); border-top-style: solid; border-top-width: 2px; clear: both; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; line-height: 20px; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 25px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: justify; vertical-align: baseline; word-wrap: break-word;">
<span style="background-color: #cccccc;"><br /></span>
<span style="background-color: #cccccc;"><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><b:widget id='Label99' locked='false' title='Labels' type='Label'></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><b:includable id='main'></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><b:if cond='data:title'></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><h2><data:title/></h2></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"></b:if></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><div class='widget-content'></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><script type='text/javascript'></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">// uncomment next line to enable transparency</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">//so.addParam("wmode", "transparent");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addVariable("tcolor", "0x333333");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addVariable("mode", "tags");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addVariable("distr", "true");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addVariable("tspeed", "100");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.addParam("allowScriptAccess", "always");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;">so.write("flashcontent");</span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"></script></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"><b:include name='quickedit'/></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"></div></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"></b:includable></span><br style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;" /><span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-style: italic; line-height: 22px; text-align: -webkit-auto;"></b:widget></span>
</span></div>
<span style="background-color: #cccccc;"><br /></span>
<br />
<div style="text-align: left;">
<span style="font-size: large;">Now you can Preview your template. If its Ok You can Save it.</span></div>
<div style="text-align: left;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><b><span style="color: red;">NOTE:</span> </b>You can change codes highlited in red above to change the color of text in blogumus and background color of it.You can also alter its size to adjust your sidebar just edit the red values in above codes.</span></div>
<div style="text-align: left;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: large;">That's it.</span><br />
<span style="font-size: large;"><br /></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-67577092396952270872012-07-31T01:52:00.001-07:002012-07-31T03:46:18.822-07:00Add Scrollbar To Blog Posts<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UADLPbGglZx0sT8imMcAH8d6n9BGzyh_KJKmEe1k2WNwyjmpRXDqHQAxmoRgDLq7dL4te89es5gA1NSDsq_o4yh7Jmv3Ys5d4gLb7gBkkarS8r3G4_cg6_efY2V4fRdcvc25WjJ4gw8/s1600/untitled.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UADLPbGglZx0sT8imMcAH8d6n9BGzyh_KJKmEe1k2WNwyjmpRXDqHQAxmoRgDLq7dL4te89es5gA1NSDsq_o4yh7Jmv3Ys5d4gLb7gBkkarS8r3G4_cg6_efY2V4fRdcvc25WjJ4gw8/s1600/untitled.JPG" /></a></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">These scrollbars can be made to automatically appear when the contents overflow a certain specified width or height setting. We have also talked about how scrollbars can be added to the Blog Post body. We shall in this tutorial elaborate on that and let you know how to add the scrollbars within each Blog Post.</span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span><br />
<h4 style="text-align: left;">
<span style="font-size: large;">Scrollbars to Blog Post body:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in <span style="color: red;">red</span></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<table border="1" cellpadding="2" style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 13px; text-align: left; width: 344px;"><tbody>
<tr><th scope="col" width="332"><div align="left">
.post {<br />
<span style="color: red;">height:200px;</span><br />
<span style="color: red;">overflow:auto;</span><br />
}</div>
</th></tr>
</tbody></table>
</div>
<div>
<span style="font-size: large;">This will give you scrollbars to every post.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-size: large;">Scrollbars within Blog Post:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">For example, we can <span style="color: red;">insert</span> in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows this setting, scrollbars will automatically appear:-</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<br />
<table border="1" cellpadding="2" style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 13px; text-align: left; width: 344px;"><tbody>
<tr><th scope="col" width="332"><div align="left">
<span style="color: red;">.scrollbox {</span><br />
<span style="color: red;">height:100px;</span><br />
<span style="color: red;">width:400px;</span><br />
<span style="color: red;">overflow:auto;</span><br />
<span style="color: red;">}</span></div>
</th></tr>
</tbody></table>
</div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">Add these tags (<span style="color: red;">shown in red</span>) before and after the part of the text that you want to enclose within the scrollbox.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<br />
<table border="1" cellpadding="2" style="background-color: white; color: #333333; font-family: Arial, sans-serif; font-size: 13px; text-align: left; width: 344px;"><tbody>
<tr><th scope="col" width="332"><div align="left">
<span style="color: red;"><div class="scrollbox"></span>TEXT TO BE INCLUDED IN THE SCROLLBOX.<span style="color: red;"></div></span></div>
</th></tr>
</tbody></table>
</div>
<div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;">You can continue typing the post by switching back to the “Compose” mode.</span></div>
<span style="font-size: large;">
<div>
<br /></div>
<div>
After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkH2miuQZORR14EWQlUNtsbz3wKILmVA39KBPfvJHiddAIq7YsCVXhvGuOveDW1GkAp0l8HBI46lec4YaIdLXBMY9bNou_jyZqWo3WNX3J0AwYHnTOEPZYyhupxmQlLX4MovHXBgYSq0/s1600/scrollbars+blog+posts+002.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkH2miuQZORR14EWQlUNtsbz3wKILmVA39KBPfvJHiddAIq7YsCVXhvGuOveDW1GkAp0l8HBI46lec4YaIdLXBMY9bNou_jyZqWo3WNX3J0AwYHnTOEPZYyhupxmQlLX4MovHXBgYSq0/s1600/scrollbars+blog+posts+002.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
Adjust the size of the scrollbox in the stylesheet accordingly.</div>
<div>
<br /></div>
<div>
<br /></div>
</span></div>
<div>
<span style="font-size: large;">Source: </span><a href="http://tips-for-new-bloggers.blogspot.in/">http://tips-for-new-bloggers.blogspot.in</a></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-27640564078356517452012-07-26T07:34:00.002-07:002012-07-26T07:41:31.985-07:00Change Older Post And Newer Post Links With Image<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cQ5iIvCuATH9okONaivtFTPZLo_lw-6QOFez9A1pvjsLD40oiEovQ8hWQheL0XSJrBqvC3KtUTHYiz6w3WyfTO3IL9mfGSe1iK4ssuHy3kI6eLeqoFkLl-BqyWAzkqTKFp5qm837iMo/s1600/asdfg.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cQ5iIvCuATH9okONaivtFTPZLo_lw-6QOFez9A1pvjsLD40oiEovQ8hWQheL0XSJrBqvC3KtUTHYiz6w3WyfTO3IL9mfGSe1iK4ssuHy3kI6eLeqoFkLl-BqyWAzkqTKFp5qm837iMo/s640/asdfg.bmp" width="640" /></a></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.</span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">These are the links below pointed by arrows to be get replaced in picture which i was talking about.</span><br />
<span style="font-size: large;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsn01F7r001fwmnegY7Lj-C5L4HQcO0x5cUVjW1Uk2z3fUz0LzEbLFCViYlCEEZtKsSxwBx2Ah2Lyh_sjQI7gQK5IVE05F9IRbDJnTo-Urbsvm9EyGaCtxx7H_Dllmi1RO2-GBwF4pkI/s1600/Links.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsn01F7r001fwmnegY7Lj-C5L4HQcO0x5cUVjW1Uk2z3fUz0LzEbLFCViYlCEEZtKsSxwBx2Ah2Lyh_sjQI7gQK5IVE05F9IRbDJnTo-Urbsvm9EyGaCtxx7H_Dllmi1RO2-GBwF4pkI/s1600/Links.png" /></a></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">Now how to change these links with icons is very easy.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">Got to <b>LAYOUT</b> > <b>Edit HTML</b> > <b>Expand Widgets</b></span><br />
<span style="font-size: large;"><b><br /></b></span><br />
<h4 style="text-align: left;">
<span style="font-size: large;"><b>Now follow these steps to replace codes :</b></span></h4>
<div>
<span style="font-size: large;"><b><br /></b></span></div>
<div>
<div class="codeview" style="background-color: #e7e7e7; border: 2px solid rgb(193, 193, 193); clear: both; font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 20px; list-style-type: none; margin: 15px 25px 15px 15px; outline: 0px; overflow: hidden; padding: 10px; text-align: justify; vertical-align: baseline; word-wrap: break-word;">
<br />
<br />
Find the code in red lines and replace them with lines in green following each red line-<br />
<br />
<span style="color: #333333;">1.</span><span style="background-color: transparent; border: 0px; color: #ff6666; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><data:newerPageTitle/></span><br />
<span style="color: #333333;">Replace with</span><br />
<span style="background-color: transparent; border: 0px; color: #33cc00; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><img src='http://bandofgirls.googlepages.com/Newer_post_icon.png'/></span><br />
<br />
<span style="color: #333333;">2.</span><span style="background-color: transparent; border: 0px; color: red; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><data:olderPageTitle/></span><br />
<span style="color: #333333;">Replace with</span><br />
<span style="background-color: transparent; border: 0px; color: #33cc00; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><img src='http://bandofgirls.googlepages.com/older_post_icon.png'/></span><br />
<br />
<span style="color: #333333;">3.</span><span style="background-color: transparent; border: 0px; color: #ff9900; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><data:homeMsg/></span><br />
<span style="color: #333333;">Replace with</span><br />
<span style="background-color: transparent; border: 0px; color: #33cc00; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><img src='http://bandofgirls.googlepages.com/home_icon.png'/></span><br />
<br />
<span style="color: #333333;">Please Host these images to your hosting image service and change these urls with yours as they may exceed bandwidth.</span></div>
<br />
<br />
<span style="font-family: inherit; font-size: large;"><span style="color: red;"><b>NOTE:</b></span> </span></div>
<div>
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;">1.) The image links in the above can be changed to whatever images you like. Visit </span><span style="background-color: white;"><span style="font-size: large;"><a href="http://www.iconarchive.com/" target="_blank">iconarchive</a> and search for the icons you want and upload it to your <a href="https://picasaweb.google.com/" target="_blank">picasa account</a> and use that link.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;">2.) You can customize the image's height and width with this code.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc;"><b><span style="color: #333333; font-family: Vollkorn; line-height: 25px;"><img src="</span><span style="color: red; font-family: Vollkorn; line-height: 25px;">image direct link</span><span style="color: #333333; font-family: Vollkorn; line-height: 25px;">" Width="</span><span style="color: red; font-family: Vollkorn; line-height: 25px;">change</span><span style="color: #333333; font-family: Vollkorn; line-height: 25px;">" height="</span><span style="color: red; font-family: Vollkorn; line-height: 25px;">change</span><span style="color: #333333; font-family: Vollkorn; line-height: 25px;">" /></span></b></span>
</div>
<div style="text-align: center;">
<span style="background-color: #cccccc;"><span style="color: #333333; font-family: Vollkorn; font-size: medium; line-height: 25px;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: Vollkorn; font-size: large;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: Vollkorn; font-size: large;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: Vollkorn; font-size: large;"><span style="line-height: 25px;">You can save your template now.</span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: Vollkorn; font-size: large;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: Vollkorn; font-size: large;"><span style="line-height: 25px;">That's it.</span></span></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-38564112586095696042012-07-26T05:15:00.002-07:002012-07-26T05:19:11.911-07:00Customize Blogger Read More Text<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-p_pxlFPdEpmPVT8mpp0snoL34dnfZKfMZGsU0W_6kHQcLXg_kM4rsKPiiliiVh_Uas5kl8qJNAU6IvFKS_-Gsu_e6hTBI_ix29pg6uerIs5sfA1fupvq2JtxkjgYgiMXQwhR-tBBvY/s1600/allinone9.jpg" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-p_pxlFPdEpmPVT8mpp0snoL34dnfZKfMZGsU0W_6kHQcLXg_kM4rsKPiiliiVh_Uas5kl8qJNAU6IvFKS_-Gsu_e6hTBI_ix29pg6uerIs5sfA1fupvq2JtxkjgYgiMXQwhR-tBBvY/s200/allinone9.jpg" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiT9CGiDfx3IOTnqXBTFMcG8Y2T_qw0LNuzJrut5cNmyuGPCHOOQloGqFMtws7sUHFvNlSsPqiY6aBXhEsdYTngeoBSSR-L2YB8R6lNeNCQExzqBeC2IBWZBrXaC3dSdpf6ti7OzOCfs/s1600/allinone7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiT9CGiDfx3IOTnqXBTFMcG8Y2T_qw0LNuzJrut5cNmyuGPCHOOQloGqFMtws7sUHFvNlSsPqiY6aBXhEsdYTngeoBSSR-L2YB8R6lNeNCQExzqBeC2IBWZBrXaC3dSdpf6ti7OzOCfs/s200/allinone7.jpg" width="200" /></a></div>
<br />
<span style="font-size: large;">Change Read more button, Change text, Add images or animations. How to customize Blogger read more button. </span><span style="background-color: white;"><span style="font-size: large;">These are the topics we are going to learn on this post. </span></span><span style="background-color: white;"><span style="font-size: large;">Blogger will add " Read more >> " Text as default Jump Break text. we can easily change this text and its attributes like font, size align using basic Html and Css codes. We also can link an image file for it. Have you seen animating read more buttons? It's very easy to do. Just make animating button and save it as .Gif image. now you can link that image to your Jump break as we learn on this post.</span></span><br />
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span><br />
<span style="background-color: white;"><span style="font-size: large;"></span></span><br />
<a name='more'></a><span style="background-color: white;"><span style="font-size: large;"><br /></span></span><br />
<h4 style="text-align: left;">
<span style="background-color: white;"><span style="font-size: large;"><b>To replace you Read More Link do the following:</b></span></span></h4>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span><br />
<span style="font-size: large;"></span><br />
<div style="background-color: white;">
<span style="font-size: large;">1. Go to Layout > Edit HTML</span></div>
<div style="background-color: white;">
<span style="font-size: large;">2. Back up your template</span></div>
<div style="background-color: white;">
<span style="font-size: large;">3. Press Ctrl + F , and in the search box search for the following code...</span></div>
<div style="background-color: white;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><span style="background-color: #cccccc;"><data:post.jumpText/></span></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><span style="background-color: #cccccc;"><br /></span></span></div>
<h4 style="text-align: left;">
<span style="font-size: large;">Change Read more text:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div style="background-color: white;">
<span style="font-size: large;">Now replace it using this code:</span></div>
<div style="background-color: white;">
<span style="font-size: large;"><br /></span></div>
<span style="font-size: large;"><span style="background-color: #cccccc;"><P> <span style="color: red;">Your Text</span> </P></span></span><br />
<span style="font-size: large;"><span style="background-color: #cccccc;"><br /></span></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">You can enter any character, Number or a symbol in the "<span style="color: red;">Your text</span>" part.</span><br />
<span style="font-size: large;"><br /></span><br />
<h4 style="text-align: left;">
<span style="font-size: large;">Change alignment and other text properties of the Read more text:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"> You can align your Read more button using "left" , "right" or "center" properties of Paragraph tag. For a sample lets use "<span style="color: red;">Continue reading...</span>" as our jump text button in center of the article page.. then that code will be like this:</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;"><span style="background-color: #cccccc;"><b:if cond='data:post.hasJumpLink'></span></span></div>
<span style="font-size: large;">
</span><br />
<div>
<span style="font-size: large;"><span style="background-color: #cccccc;"><div class='jump-link'></span></span></div>
<span style="font-size: large;">
<div>
<span style="background-color: #cccccc;"><a expr:href='data:post.url + &quot;#more&quot;'</span></div>
<div>
<span style="background-color: #cccccc;"> expr:title='data:post.title'></span></div>
<div>
<span style="background-color: #cccccc;"><p align='center' ><span style="color: red;">Continue reading...</span></p></a></span></div>
<div>
<span style="background-color: #cccccc;"></div></span></div>
<div>
<span style="background-color: #cccccc;"></b:if></span></div>
<div>
<br /></div>
<h4 style="text-align: left;">
Add an image instead of Text:</h4>
<div>
<br /></div>
<div>
Adding an image to the read more button is very easy. Just upload your read more button which you downloaded from below and get the direct image link. you can upload it to blogger or your <a href="https://picasaweb.google.com/" target="_blank">picasa web album</a>. easy way to get the direct link to a new image is create a new post and upload your image. then publish it and go to the published page, right click the image , click copy image location, now you can delete that post. once you have the direct link to the uploaded image you can use <img> tag to link the image to Read more button.</div>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
Download Read more buttons from below:</h4>
<div>
<b>1.)</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiT9CGiDfx3IOTnqXBTFMcG8Y2T_qw0LNuzJrut5cNmyuGPCHOOQloGqFMtws7sUHFvNlSsPqiY6aBXhEsdYTngeoBSSR-L2YB8R6lNeNCQExzqBeC2IBWZBrXaC3dSdpf6ti7OzOCfs/s1600/allinone7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiT9CGiDfx3IOTnqXBTFMcG8Y2T_qw0LNuzJrut5cNmyuGPCHOOQloGqFMtws7sUHFvNlSsPqiY6aBXhEsdYTngeoBSSR-L2YB8R6lNeNCQExzqBeC2IBWZBrXaC3dSdpf6ti7OzOCfs/s1600/allinone7.jpg" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/mybloggertricks/Home/AnimatedReadMoreButtonsWithArrowNose.rar?attredirects=0" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLBBX1uoM1S8OuK-4e5CKt45Ty8vQK0u-BaP_C06VU4-kVZOAxRD7cIgqIP0LaXuaZ5v0Mx24v6qLuZUu4LdK_YNyK8Ni-yu3-nNh15kQiBvXTRXU4VlXaMRv2YuQtpGVdrkk68m8qDw/s1600/download4he0.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2.)</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-p_pxlFPdEpmPVT8mpp0snoL34dnfZKfMZGsU0W_6kHQcLXg_kM4rsKPiiliiVh_Uas5kl8qJNAU6IvFKS_-Gsu_e6hTBI_ix29pg6uerIs5sfA1fupvq2JtxkjgYgiMXQwhR-tBBvY/s1600/allinone9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-p_pxlFPdEpmPVT8mpp0snoL34dnfZKfMZGsU0W_6kHQcLXg_kM4rsKPiiliiVh_Uas5kl8qJNAU6IvFKS_-Gsu_e6hTBI_ix29pg6uerIs5sfA1fupvq2JtxkjgYgiMXQwhR-tBBvY/s1600/allinone9.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/mybloggertricks/Home/MBTArrowHeadReadMoreButtons.rar?attredirects=0" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLBBX1uoM1S8OuK-4e5CKt45Ty8vQK0u-BaP_C06VU4-kVZOAxRD7cIgqIP0LaXuaZ5v0Mx24v6qLuZUu4LdK_YNyK8Ni-yu3-nNh15kQiBvXTRXU4VlXaMRv2YuQtpGVdrkk68m8qDw/s1600/download4he0.gif" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Now find this code on your Template code:</div>
<div>
<br /></div>
<div style="text-align: center;">
<span style="background-color: #cccccc;"><data:post.jumpText/></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
Now replace it using this code:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><P> <img src="<span style="color: red;">image direct link</span>"/></P></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
You can use your image url in the red color text. you can directly resize your image using width and height properties like this</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><P> <img src="<span style="color: red;">image direct link</span>" Width="<span style="color: red;">change</span>" height="<span style="color: red;">change</span>" /></P></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
That's It.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
</span></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-35597280195825772472012-07-25T09:44:00.000-07:002012-07-26T03:24:43.684-07:00Animated CSS3 Multi Drop Down Menu For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjakcZeAoTyDsY-WrcUcPRxERfq6t7jZB0tmu76UZ2PkZ35_wP4KmhMR0TZEpAfwbXnh9kc8S55mkXEQHlPH-tSlJ2pqhVxZxMpqpwHx7B8PBGEjw38YtXif2BYOQHPns9qoOyB9EpQkY/s1600/css3-menu-animation.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjakcZeAoTyDsY-WrcUcPRxERfq6t7jZB0tmu76UZ2PkZ35_wP4KmhMR0TZEpAfwbXnh9kc8S55mkXEQHlPH-tSlJ2pqhVxZxMpqpwHx7B8PBGEjw38YtXif2BYOQHPns9qoOyB9EpQkY/s1600/css3-menu-animation.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<span style="font-size: large;"> <span style="font-family: inherit;">Beauty is the key component of a blog this is the reason why most of blogger always wishes to make their blog as eye-catching as possible. To craft their blog looks more astonishing they take help of different widgets resembling Featured Posts, Image Gallery and etc. If we go deeper, we will come across this conclusion that usually majority of Blogger pays no concentration to their CSS Drop Down Menus. Therefore, their blog not only remains short of ideal appearance but also fails in providing user-friendly experience to visitors. So today we will insert Animated CSS Drop Down Menu in blogger. This astonishing Drop down menu is created by Catalin Rosu with spectacular JQuery effects! We will be sharing a customized version which works flawlessly with blogger. It purely represents true supremacy of CSS3 with the combination of JQuery. This widget will make your Blogger Blogspot blog outlook more fashionable and attractive. So instead of waiting lets startworking!!!</span></span><br />
<span style="font-size: large;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="font-size: large;"></span><br />
<a name='more'></a></div>
<h4 style="text-align: left;">
<span style="font-size: large;">To add this widget in Blogger simply Follow these steps:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;">1.) First Go to Blogger.com >> Your Blog </span></div>
<span style="font-size: large;">
<div>
<br /></div>
<div>
2.) Now Select Layout >> Add a Gadget (the place where you want to insert your drop down menu).</div>
<div>
<br /></div>
<div>
3.) Then Click on HTML/JavaScript >> and then just Paste the following code.</div>
<div>
<br /></div>
<div>
<br /></div>
</span></div>
<div>
<br /></div>
<div>
<pre class="prettyprint prettyprinted" style="border: 1px solid rgb(136, 136, 136); padding: 2px; text-align: -webkit-auto;"><span style="line-height: 18px;"><!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>
<nav id="mbl-menu-wrap">
<ul id="mbl-menu">
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Home</span></a></li>
<li>
<a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Categories</span></a>
<ul>
<li>
<a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">CSS</span></a>
<ul>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 11</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 12</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 13</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 14</span></a></li>
</ul>
</li>
<li>
<a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Graphic design</span></a>
<ul>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 21</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 22</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 23</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 24</span></a></li>
</ul>
</li>
<li>
<a href="<span style="color: red;">URL-Here"</span>><span style="color: blue;">Development tools</span></a>
<ul>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 31</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 32</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 33</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 34</span></a></li>
</ul>
</li>
<li>
<a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Web design</span></a>
<ul>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 41</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 42</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 43</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Item 44</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Work</span></a>
<ul>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Work1</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Work2</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Work3</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Work4</span></a></li>
</ul>
</li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">About</span></a></li>
<li><a href="<span style="color: red;">URL-Here</span>"><span style="color: blue;">Contact</span></a></li> <li><a href="http://toolsforblogger.blogspot.com">Blogger</a> </li> </ul>
</nav>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
/* Mobile */
$('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');
$("#mbl-menu-trigger").on("click", function(){
$("#menu").slideToggle();
});
// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#mbl-menu ul').addClass('no-transition');
});
</script></span></pre>
<br style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: -webkit-auto;" /></div>
<div>
<br /></div>
<h4 style="text-align: left;">
<span style="font-size: large;">Important:</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">1.) insert URL according to your choice replace <span style="color: red;">URL-Here</span></span></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">2.) </span><span style="background-color: white;"><span style="font-size: large;">Don't forgot to include <b>http://www.</b> before every URL</span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div>
<span style="font-size: large;">3.) </span><span style="background-color: white;"><span style="font-size: large;">Customizating this widget is very simply but still to make it more easier we have highlighted those elements which need to be changed (i.e.) <span style="color: red;">URL-Here</span> and <span style="color: blue;">Home</span> , Etc.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div>
<span style="background-color: white;"><span style="font-size: large;"></span></span><br />
<div>
<span style="background-color: white;"><span style="font-size: large;"> After customizing your widget just save your template by pressing Save Button. </span></span></div>
<span style="background-color: white;"><span style="font-size: large;">
<div>
<br /></div>
<div>
Now go and check your blog you will witness a picture perfect Animated CSS Drop down menu</div>
<div>
<br /></div>
<div>
<br /></div>
</span></span></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-26568871310622728692012-07-22T10:35:00.001-07:002012-07-22T10:53:41.126-07:00Remove Underline Below Text Links<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oONVqp51hfpxBJuNi2gysKV0XeiOytrAq6sdX9VUFrDH-jYrYducPr0RJTfyLCehN0Vaj1Re1hmtPgipMJO99Vw7UVZHh7AZSymiHbmmrnKDNt4ircrX9faFhvyxnk_dyPrGz-YKbCw/s1600/article-new_ehow_images_a07_v4_c5_deactivate-underlined-text-dreamweaver-800x800.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oONVqp51hfpxBJuNi2gysKV0XeiOytrAq6sdX9VUFrDH-jYrYducPr0RJTfyLCehN0Vaj1Re1hmtPgipMJO99Vw7UVZHh7AZSymiHbmmrnKDNt4ircrX9faFhvyxnk_dyPrGz-YKbCw/s320/article-new_ehow_images_a07_v4_c5_deactivate-underlined-text-dreamweaver-800x800.jpg" width="320" /></a></div>
<span style="font-size: large;">In some templates, the text links are underlined. This distinguishes the hyperlinks from the normal text. If you don't like that, you can remove the underlines. You can also modify the template to have underlines only in the main posts and not in the sidebar or vice-versa. This tutorial will show you how it can be done.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">When you are at Template -> Edit HTML, the link styles are found here:-</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"></span><br />
<span style="font-size: large;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-size: large;">a:link { }</span><br />
<span style="font-size: large;"><span style="font-size: large;">a:visited { }</span></span><br />
<span style="font-size: large;"><span style="font-size: large;">a:hover { }</span></span><br />
<span style="font-size: large;"><span style="font-size: large;">a:active { }</span></span></div>
<br />
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span><br />
<span style="font-size: large;"><span style="font-size: large;"></span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><b>a:link</b> tells the browser how links should appear.</span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><b>a:visited</b> shows the style for links that have been clicked or visited.</span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><b>a:hover</b> is the link style you would see when the cursor or mouse moves over the links.</span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><b>a:active</b> defines the style to an activated element.</span></span><br />
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span><br />
<h4 style="text-align: left;">
<span style="font-size: large;"><span style="font-size: large;">Remove Underlines in the entire Blog:</span></span></h4>
<div>
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span></div>
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: white;"> To have all the underlines removed, scroll to these lines:-</span></span></span></div>
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: white;"><br /></span></span></span></div>
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: white;"></span></span></span><br />
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: #cccccc;">a:link {</span></span></span></div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: #cccccc;">
</span></span></span><br />
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: #cccccc;">text-decoration:underline;</span></span></span></div>
<span style="font-size: large;"><span style="font-size: large;">
</span></span><br />
<div>
<span style="font-size: large;"><span style="font-size: large;"><span style="background-color: #cccccc;">}</span></span></span></div>
<span style="font-size: large;"><span style="font-size: large;">
<div>
<span style="background-color: #cccccc;">a:visited {</span></div>
<div>
<span style="background-color: #cccccc;">text-decoration:underline;</span></div>
<div>
<span style="background-color: #cccccc;">}</span></div>
<div>
<span style="background-color: #cccccc;">a:hover {</span></div>
<div>
<span style="background-color: #cccccc;">text-decoration:underline;</span></div>
<div>
<span style="background-color: #cccccc;">}</span></div>
<div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
Change the text-decoration style to this:-</div>
<div style="background-color: white;">
<br /></div>
<br />
<span style="background-color: #cccccc;">a:link {</span><br />
<span style="background-color: #cccccc;">text-decoration:<span style="color: red;">none</span>;</span><br />
<span style="background-color: #cccccc;">}</span><br />
<span style="background-color: #cccccc;">a:visited {</span><br />
<span style="background-color: #cccccc;">text-decoration:<span style="color: red;">none</span>;</span><br />
<span style="background-color: #cccccc;">}</span><br />
<span style="background-color: #cccccc;">a:hover {</span><br />
<span style="background-color: #cccccc;">text-decoration:<span style="color: red;">none</span>;</span><br />
<span style="background-color: #cccccc;">}</span><br />
<span style="background-color: #cccccc;"><br /></span><br />
<br />
Should you want to keep the underlines for visited links or hover effects, retain the underline attribute under <b>a:visited</b> and <b>a:hover</b> accordingly.<br />
<br />
<h4 style="text-align: left;">
Link Underlines in Blog Posts only:</h4>
<div>
<br /></div>
<div>
The above sets the style for the entire blog. You may prefer to have underlines for the links under the Blog Posts only and not for links in the sidebars. After setting the default text-decoration to “none” as shown above, insert this other style definition just for the links in the Blog Posts:-</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: #cccccc;">.post a:link {</span></div>
<div>
<span style="background-color: #cccccc;">text-decoration:underline;</span></div>
<div>
<span style="background-color: #cccccc;">}</span></div>
</div>
<div>
<br />
Preview the template and Save if you see the underlines below the Blog Posts links.<br />
<br />
Note that the underlines will appear in the Blog Posts section, and that includes the Post Title and Footer links. In case you don't want that, and would like the underlines only in the Post content, you can insert this code instead:-<br />
<br />
<br />
<span style="background-color: #cccccc;">.post-body a:link {</span><br />
<span style="background-color: #cccccc;">text-decoration:underline;</span><br />
<span style="background-color: #cccccc;">}</span><br />
<span style="background-color: #cccccc;"><br /></span><br />
<br />
<h4 style="text-align: left;">
Link Underlines in Sidebars only:</h4>
<div>
<br /></div>
<div>
Similarly, after setting the default link style to show no underlines, to reinstate the link underlines only for the Sidebars, insert this additional style:-</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: #cccccc;">.sidebar a:link {</span></div>
<div>
<span style="background-color: #cccccc;">text-decoration:underline;</span></div>
<div>
<span style="background-color: #cccccc;">}</span></div>
</div>
<div>
<span style="background-color: #cccccc;"><br /></span></div>
<div>
Preview and Save the template. Refresh your Blog page to see the underlines below the Sidebar links</div>
</div>
</div>
</span></span></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-17224374161770354822012-07-22T05:33:00.002-07:002012-08-16T08:27:11.169-07:00Create A Rollover Image Effect (change image on mouseover)<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://toolsforblogger.blogspot.in/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img onmouseout="this.src='http://i1256.photobucket.com/albums/ii494/helplogger76/helploggerblogspotcomstickie3.png'" onmouseover="this.src='http://i1256.photobucket.com/albums/ii494/helplogger76/helploggerblogspotcomstickie2.png'" src="http://i1256.photobucket.com/albums/ii494/helplogger76/helploggerblogspotcomstickie3.png" /></a><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.<br />
<br />
<br /><a name='more'></a><b><br /></b>
<b>DEMO:</b> Touch the above image.<br />
<br />
<b>You have the following code:</b><br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="<span style="color: #38761d;">URL ADDRESS</span>"><img src="<span style="color: red;">URL OF THE FIRST IMAGE GOES HERE</span>" onmouseover="this.src='<span style="color: blue;">URL OF THE SECOND IMAGE GOES HERE</span>'" onmouseout="this.src='<span style="color: red;">URL OF THE FIRST IMAGE GOES HERE</span>'" /></a></span></div>
<br />
<br />
<span style="font-family: inherit;"><b>Change the colored texts as it follows:</b></span><br />
<span style="font-family: inherit;"><b><br /></b></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: inherit;">1.) <b><span style="color: #38761d;">URL ADDRESS</span></b></span></h3>
<br />
<span style="background-color: white;"> This is the address you want the image to lead to when it's clicked.</span><br />
<b>Example :</b> In the above image when clicked you will be taken to <span style="color: #38761d;">http://toolsforblogger.blogspot.in</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<h3 style="text-align: left;">
2.) <span style="background-color: white;"><span style="color: red;"><b>URL OF THE FIRST IMAGE GOES HERE</b></span></span><b> </b></h3>
<br />
<span style="background-color: white;"></span><br />
Replace the <span style="color: red;">red text</span> (two times) with your first image's url address - this is the image shown before you hover over it.<br />
<br />
<br />
<h3 style="text-align: left;">
3.) <b><span style="color: blue;">URL OF THE SECOND IMAGE GOES HERE</span></b></h3>
<br />
Replace the <span style="color: blue;">text in blue</span> with the url of your second image - this image will appear when your cursor hovers over it.<br />
<br />
Now you can paste your image inside a blog gadget, going to Page Elements > Add a Gadget > Select "HTML/JavaScript and add it to your sidebar Or you can add it inside your post by going to New Post > Switch to Edit HTML tab and then paste the code in the empty box.<br />
<br />
That's it.<br />
<h3 style="text-align: left;">
Feel free to hit Like, Share or Comment if you like the Post.</h3>
</div>
</div>
Unknownnoreply@blogger.com3Puducherry, Pondicherry, India11.9309645 79.785181811.8066795 79.6272533 12.0552495 79.9431103tag:blogger.com,1999:blog-955517262344291993.post-5428384710851778412012-07-22T05:19:00.000-07:002012-07-22T05:19:23.351-07:00How to Add Different Background Color or Image in Each Blogger Post<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JvD7h4e360tXTJClIxhGYlUMGUHdWLzQMxxP54Yousyl9ADPnPQwJ6eCVyvNwadyJGoc45uPh59Jw69eFdYjVUCMsQzMGaIi2z_gjQIW2FB-3HVB8hbGA67PR2UKF3Wy2G4M6nobsIE/s1600/sdg.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JvD7h4e360tXTJClIxhGYlUMGUHdWLzQMxxP54Yousyl9ADPnPQwJ6eCVyvNwadyJGoc45uPh59Jw69eFdYjVUCMsQzMGaIi2z_gjQIW2FB-3HVB8hbGA67PR2UKF3Wy2G4M6nobsIE/s320/sdg.bmp" width="320" /></a></div>
<span style="font-family: inherit; font-size: large;">If you have multiple authors in a blog or want to make a specific post stand-out, you can make your posts to appear in different color or place a background image behind your posts.</span><br />
<span style="font-family: inherit; font-size: large;">In this tutorial i will show you how you can do this by adding some simple codes in your Blogger posts. (observation: this won't take effect if you have the read more function enabled on your blog...)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><h4 style="text-align: left;">
<span style="font-size: large;"><b>Change the color of the post background:</b></span></h4>
<span style="font-size: large;"><b><br /></b></span><br />
<span style="background-color: white;"> </span><span style="background-color: white; font-size: large;">When you create a post, switch to Edit HTML, near the Compose tab.</span><br />
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
Add the following code just at the beginning and at the end of your post content.</div>
<div style="font-size: x-large;">
<br /></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: red;"><div style="background-color:</span> <span style="color: orange;">#DCC368</span><span style="color: red;">; padding: 5px 8px 5px</span> <span style="color: red;">8px;"></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;">Your text goes here...</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue; font-family: 'Courier New', Courier, monospace;"></div></span></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span><br />
<h4 style="text-align: left;">
<span style="font-family: inherit; font-size: large;">Note: </span></h4>
<ul style="text-align: left;">
<li><span style="background-color: white; font-family: inherit; font-size: large;">place <span style="color: red;">the red line</span> at the BEGINNING of your post.</span></li>
<li><span style="background-color: white;"><span style="font-size: large;">add the <span style="color: blue;">div tag in blue</span> at the END of your post.</span></span></li>
<li><span style="background-color: white;"><span style="font-size: large;">replace <span style="color: orange;">the part in orange</span> with preferred color hex value.</span></span></li>
<li><span style="background-color: white;"><span style="font-size: large;">instead of "Your text here...." you will have your Post content.</span></span></li>
</ul>
<div style="text-align: center;">
<span style="font-family: inherit;">Here's the example of the placed code in the Post Edit box:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-aBztNvohkvvgEPOdTdga9yBuz1Ugcxe61xfLTgjR-BtSqeNU6hLHQqLmi10IBcr6e4DsTblHRS1d7EPoo3BLbz7QpA4gOyM9XE2GFsXRdI2y-gFzyROGW_-k-6daDkhqvbHuSYwFlM/s1600/how+to+add+different+backgrounds+to+blogger+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-aBztNvohkvvgEPOdTdga9yBuz1Ugcxe61xfLTgjR-BtSqeNU6hLHQqLmi10IBcr6e4DsTblHRS1d7EPoo3BLbz7QpA4gOyM9XE2GFsXRdI2y-gFzyROGW_-k-6daDkhqvbHuSYwFlM/s1600/how+to+add+different+backgrounds+to+blogger+posts.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="text-align: left;">
<span style="font-family: inherit; font-size: large;">Add a background image behind the Blogger post:</span></h4>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span style="font-family: 'Courier New', Courier, monospace;">
</span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span style="font-family: 'Courier New', Courier, monospace;">
</span><br />
<div>
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="color: red; font-family: 'Courier New', Courier, monospace;"><div style="background-image: url(</span><span style="color: orange; font-family: 'Courier New', Courier, monospace;">IMAGE-URL-HERE</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">); background-repeat: no-repeat; "></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">Your text goes here...</span></div>
<span style="font-family: 'Courier New', Courier, monospace;">
</span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue; font-family: 'Courier New', Courier, monospace;"></div></span></span></div>
<br />
<span style="font-size: large;"><b>Note:</b></span><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white; font-family: inherit; font-size: large;">in <span style="color: orange;">orange</span>, you need to place the URL address of your hosted picture (use Photobucket, Tinypic etc.)</span></li>
<li><span style="background-color: white;"><span style="font-size: large;">in <span style="color: red;">red</span> is the line you have to place at the BEGINNING of your post.</span></span></li>
<li><span style="background-color: white;"><span style="font-size: large;">in <span style="color: blue;">blue</span> is the line you have to place at the END.</span></span></li>
<li><span style="background-color: white;"><span style="font-size: large;">instead of "Your text here...." you have your Post content (if not, switch back to Compose tab, type your post content and then come back to edit your post)</span></span></li>
</ul>
<div>
<span style="font-size: large;">Now click Publish Post and you are done.</span></div>
</div>
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;">
<span style="font-family: 'Courier New', Courier, monospace;">
</span></span></span></div>
<span style="font-family: 'Courier New', Courier, monospace;">
</span></div>
</div>
</div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-955517262344291993.post-88450139041248732602012-07-22T03:25:00.001-07:002012-07-22T09:46:18.069-07:00Add Rainbow Links To Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS1cWQPsIYyfrJZozluug4hxQIS4Np0hlARxT-OOFjFh8NZpt6yWo9TJmA4u4vckiKJ1PRbODorZZbqhBEzTE9F8FqgYuCVB8cQr3tjY-x9H2fHqJnGtxnGYZnsJ2RPiDU_-dznv0fSWw/s1600/rainbow-links-javascript-blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS1cWQPsIYyfrJZozluug4hxQIS4Np0hlARxT-OOFjFh8NZpt6yWo9TJmA4u4vckiKJ1PRbODorZZbqhBEzTE9F8FqgYuCVB8cQr3tjY-x9H2fHqJnGtxnGYZnsJ2RPiDU_-dznv0fSWw/s200/rainbow-links-javascript-blogger.png" width="200" /></a></div>
<span style="font-family: inherit; font-size: large;">Before your visitors follow through on a link, let them follow the rainbow. </span><span style="background-color: white;"><span style="font-size: large;">Once it's applied, all links on the page exhibit a rainbow effect onmouseover.</span></span><br />
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span><br />
<span style="background-color: white;"><span style="font-size: large;">Try using the above script on a page with black background and white text.</span></span><br />
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span><br />
<span style="background-color: white;"></span><br />
<div style="font-size: x-large;">
</div>
<a name='more'></a><span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-family: inherit; font-size: large;">For Demo: <a href="http://tricktoearnonline.blogspot.in/" target="_blank">Click Here!</a></span><br />
<br />
<div style="font-size: x-large;">
<br />
Paste this code to a new HTML/Javascript gadget:</div>
<div style="font-size: x-large;">
<br /></div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://yourjavascript.com/512719721/rainbow-links.js'>/*Rainbow Links Script- HamXa WasimFor full source code, 100's more DHTML scripts, and TOS, Visit http://www.dynamicdrive.comVia http://mycybertricks.blogspot.com/*/</script></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-family: inherit; font-size: large;">That's it Now check your links glittering.</span></div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-955517262344291993.post-26991057529516010862012-07-22T02:48:00.004-07:002012-07-22T02:48:59.109-07:00Animated Flying Twitter Bird For Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbViROLk6n_v3ESobaFkVR10rM7RFSbZFJd3YpummEByRSkBgbbrQx8h1c1JiKq41690TPYlinfBiZIwC79FgII6eQ-1q9Cmcl9cNL5WBek0v5X4daPeJxdvurc8WuB9-DB6RVYUlUg4/s1600/twitter-bird-sprite.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbViROLk6n_v3ESobaFkVR10rM7RFSbZFJd3YpummEByRSkBgbbrQx8h1c1JiKq41690TPYlinfBiZIwC79FgII6eQ-1q9Cmcl9cNL5WBek0v5X4daPeJxdvurc8WuB9-DB6RVYUlUg4/s320/twitter-bird-sprite.png" width="255" /></a></div>
<span style="font-size: large;">This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you...</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..</span><br />
<span style="font-size: large;"><br /></span><br />
<br />
<div style="font-size: x-large;">
1.) Twitter Bird with tweet text has Post title and URL for all post pages Only.</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
2.) Twitter Bird with tweet text has Current Page title and URL for all Blog pages.</div>
<div style="font-size: x-large;">
<br /></div>
<h4 style="font-size: x-large; text-align: left;">
Add Flying Twitter Bird To Post Pages Only:</h4>
<div style="font-size: x-large;">
1.) Go to Your Blogger Dashboard Click > Design > Edit Html</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
2.) Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</div>
<div style="font-size: x-large;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;">3.) Copy and paste the following ocde directly Below / After </span><span style="font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div>
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">
<span style="font-family: 'Courier New', Courier, monospace;">
</span></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"><span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><!-- Twitter Bird Widget for Blogger by Way2blogging.org --></span></span></span></div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">
</span><br />
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js"></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></script></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><script type="text/javascript"></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">var twitterAccount = &quot;<span style="color: red;">Your Twitter User Name Here!</span>&quot;;</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">tripleflapInit();</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></script></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><!-- Twitter Bird Widget for Blogger by Way2blogging.org --></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></b:if></span></div>
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span style="font-family: inherit; font-size: large;"><b>Important:</b></span><br />
<span style="font-size: large;"> Replace <span style="color: red;">Your Twitter User Name Here!</span> with your twitter user name.You add just the username not the entire URL of your Twitter profile.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;">4.) Save Your template And Check Out Your Twitter Bird.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<h4 style="text-align: left;">
<span style="font-size: large;">Add Flying Twitter Bird To All Pages:</span></h4>
</div>
<div>
<span style="font-size: large;">1.) Go to Your Blogger Dashboard Click > Design > Edit Html</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;">2.) Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; font-size: large;">3.) Copy and paste the following code Directly Below / After </span><span style="font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div style="text-align: left;">
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><!-- Twitter Bird Widget for Blogger by Way2blogging.org --></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js"></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"></script></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><script type="text/javascript"></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;">var twitterAccount = &quot;<span style="color: red;">Your Twitter User Name Here!</span>&quot;;</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;">var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;">tripleflapInit();</span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"></script></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a></span></div>
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><!-- Twitter Bird Widget for Blogger by Way2blogging.org --></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="background-color: #cccccc;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><b>Important:</b></span></div>
<div style="text-align: left;">
<span style="font-size: large;"> Replace <span style="color: red;">Your Twitter User Name Here!</span> with your twitter user name.You add just the username not the entire URL of your Twitter profile.</span></div>
<div style="text-align: left;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: large;">4.) Save Your template And Check Out Your Twitter Bird.</span></div>
</div>
<div>
<span style="background-color: #cccccc;"><span style="font-family: inherit; font-size: large;">
</span></span></div>
</div>
</div>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-955517262344291993.post-74636518738929690922012-07-21T04:40:00.004-07:002012-07-26T03:27:51.402-07:00Add A YouTube Subscribe To Channel Gadget To Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCTE78i_x_XC6_SzOKMQizuAgNL1pMC_mQmJto5KrdWY_EDBU6E9S_cqZXlQBCCNsfROc0mPZa-LRMq1YgQmcJQLCuLurgHUNgsA1u3YO97hc0eD2qY9m10o4rygaORNb-VYoarCS52Q/s1600/youtube-icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCTE78i_x_XC6_SzOKMQizuAgNL1pMC_mQmJto5KrdWY_EDBU6E9S_cqZXlQBCCNsfROc0mPZa-LRMq1YgQmcJQLCuLurgHUNgsA1u3YO97hc0eD2qY9m10o4rygaORNb-VYoarCS52Q/s200/youtube-icon.png" width="200" /></a></div>
<span style="font-family: inherit; font-size: large;">The widget is very user friendly and like the Facebook Fan Page / Like Page widget users can subscribe to your channel without the need to leave the page.You channels image thumbnail, Username, Number of videos and Number of subscribers are displayed along with the YouTube logo.You can also change the width and height of the gadget...<o:p></o:p></span><br />
<span style="font-size: large;"><span style="font-family: inherit;"><br /></span></span><br />
<span style="font-size: large;"><span style="font-family: inherit;"></span></span><br />
<a name='more'></a><span style="font-size: large;"><span style="font-family: inherit;"><br /></span></span><br />
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; font-family: inherit; font-size: large;"><b>Add To Wordpress:</b></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; font-family: inherit; font-size: large;"><b><br /></b></span></div>
<span style="font-family: inherit; font-size: large;"> To add this to your Wordpress sidebar copy the code in Step 2 below into a text gadget on your wordpress sidebar.To do this go to Appearance > Widgets > Add the code to a text widget.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<h4>
<span style="font-family: inherit; font-size: large;">Add The YouTube Subscribe To Channel Widget To Blogger:</span></h4>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click > Design > Add A Gadget > Choose Html/Javascript</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><b>Step 2:</b> Copy and Paste the following code into the Html/Javascript Gadget</span></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><center><!--YouTube Subscribe Gadget www.toolsforblogger.blogspot.com--><iframe src=http://www.youtube.com/subscribe_widget?p=<span style="color: red;">YOUR-YOUTUBE-USERNAME</span> style="overflow: hidden; height: <span style="color: blue;">130px</span>; width: <span style="color: blue;">260px</span>; border: 0;" scrolling="no" frameborder="0"></iframe></center></span></div>
</div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;">Important:</span><br />
<span style="font-family: inherit;"><br /></span><br />
<ul>
<li><span style="font-family: inherit; font-size: large;">Replace YOUR-YOUTUBE-USERNAME with your YouTube Username.Your YouTube username is displayed in the top right of the page when your logged into YouTube beside the sign out link.It will have no spaces.</span></li>
<li><span style="font-family: inherit; font-size: large;">The height and Width are in blue and can be changed to suit your blog.</span></li>
</ul>
<div>
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 3:</b> Save the gadget and you can then drag and drop it into position on your blogs design page.</span></div>
</div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-7129795967216839682012-07-21T04:39:00.003-07:002012-07-22T02:08:46.980-07:00Polaroid Icons Blog Subscription Gadget With Rollover Effect:<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs9mT5RhnjA8hD3ALJ_7on5UTAvFLM8uI4kEA4JqmhhNmt6SeL2CLEJwyc9eJGdlbnB28vo3chKa5AQ3zpgCvM_LEwOF8sZbujh5KOy08ncNGro8YPAzRk_-pHmTZpEOwRmbdYiTspDpM/s1600/rollover-blog-subscribe-icons.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs9mT5RhnjA8hD3ALJ_7on5UTAvFLM8uI4kEA4JqmhhNmt6SeL2CLEJwyc9eJGdlbnB28vo3chKa5AQ3zpgCvM_LEwOF8sZbujh5KOy08ncNGro8YPAzRk_-pHmTZpEOwRmbdYiTspDpM/s200/rollover-blog-subscribe-icons.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Here just had to add your URLs then copy and paste.Two of the icon sets were very similar both having a Polaroid Picture Design.One was fresh and bright while the other had a vintage worn look.This lead me to thinking wouldn't it be cool to have the worn vintage...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b style="background-color: white; font-family: inherit; font-size: x-large;">The Code:</b></div>
<div class="separator" style="clear: both;">
<b style="background-color: white; font-family: inherit; font-size: x-large;"><br /></b></div>
<div class="separator" style="clear: both;">
<span style="background-color: white;"><span style="font-size: large;"> This is just html so it will work in any part of your blog that allows it.I will show how to quickly add the icons to your Blogger sidebar below the code, if you have Wordpress or another blog platform add the code to a sidebar text/html widget.</span></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<span style="font-family: inherit; font-size: large;"><b><br /></b></span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href=http://www.facebook.com/<span style="color: red;">username</span> onmouseover= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaWCZjnXFs_-UnnSObO009KFTyT6mobdDBBr30bZ36fjSGRubiHBgKLJ4dg1pE0jtxdPjGhFYsuhNGx1M0gmzFNlhqudIi-HG1sKBAh37948XoHyBBMaBe1Ql6k9tSRoYg6niLNKkMMPn/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IG82KhGB88nmgn4DAAJYc4FCbQ009THFuofrUy-K5mKjEf3l-kakYdSDA1EHcbDOPfRkVpzTtJeouqWItojpQn2U2Gc4GnBZTRK4Lf-U1eGS3L-KuhyNl2kXHMessyE4PXlHGJ8k2N6Y/s1600/facebook.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IG82KhGB88nmgn4DAAJYc4FCbQ009THFuofrUy-K5mKjEf3l-kakYdSDA1EHcbDOPfRkVpzTtJeouqWItojpQn2U2Gc4GnBZTRK4Lf-U1eGS3L-KuhyNl2kXHMessyE4PXlHGJ8k2N6Y/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><a href=http://twitter.com/<span style="color: red;">username</span> onmouseover= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinjPh7UDNeYGeHWelzN-kPhuf1uPnzrjAeLrcHaMBEwgRgIhP_Z1k93o3v-1T5cRI9Pj8vImEcTb6pZ1_19Cj4kpUfWtyeycfKyUFKUaQN59I-QZZAt2yABK_RFEX8HGTfx6aCe_WfBX1y/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhO4wLkFBCk1RRr-X1bYgBRbW_00fyK8bPJM80vN3zWozFuQYtA0eWJkQlDQZ4wCMJSA_IGqW0NHUm-z3v5bvnkBj0w2wti0xMKtqc43KrwHsGXa9avfQeNciNjvB2tnX5I48Hs6FQFQ5/s1600/twitter.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhO4wLkFBCk1RRr-X1bYgBRbW_00fyK8bPJM80vN3zWozFuQYtA0eWJkQlDQZ4wCMJSA_IGqW0NHUm-z3v5bvnkBj0w2wti0xMKtqc43KrwHsGXa9avfQeNciNjvB2tnX5I48Hs6FQFQ5/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><a href=http://feeds.feedburner.com/<span style="color: red;">username</span> onmouseover= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvz_3Vcu5KxZm4AgCPheeeepqU3qd4cUs3mGKbH7akiWm6kyY0afkbwybjZ5awh_a4IC4bm2mRtFn23Hf8nzl7zSaZ3MguKvr9yaMXPxZk5Admv4OtRcvoZVRBXrY7onZ0jhgTAT4xje9q/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecoVWzXceeZWEZAU0H4P-2sC1K5jJYNgI3n_FDA3MuUj_1cGEsKqJ4fdof4bwCZB4U3uVShDNhpjIrP-viGpfWKF7bC2WvZ6PoO-sL1Fn3cee-cvwZu34-ekAx_hdzMrmh_SjmsdKbnp9/s1600/rss.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecoVWzXceeZWEZAU0H4P-2sC1K5jJYNgI3n_FDA3MuUj_1cGEsKqJ4fdof4bwCZB4U3uVShDNhpjIrP-viGpfWKF7bC2WvZ6PoO-sL1Fn3cee-cvwZu34-ekAx_hdzMrmh_SjmsdKbnp9/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a><br/><a href="http://toolsforblogger.blogspot.in" target="_blank"><small>Blog Gadgets</small></a></span></div>
<br />
<div>
<div style="font-size: x-large;">
<span style="font-family: inherit;"><span style="color: red;"><br /></span></span></div>
<div style="font-size: x-large;">
<span style="font-family: inherit;"><span style="color: red;">NOTE:</span> Replace the username to your's</span></div>
<div style="font-size: x-large;">
<span style="font-family: inherit;"><br /></span></div>
<h4>
<span style="font-size: large;">Add Icons To Blogger Sidebar:</span></h4>
</div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><b>Step 1:</b> In your Blogger dashboard click > Design > Add A Gadget > Choose Html/Javascript Gadget </span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<span style="font-size: large;"><b>Step 2:</b> Copy and Paste the following code into the html/javascript gadget and save.</span></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-58331967134928440102012-07-21T04:38:00.001-07:002012-07-22T02:08:02.000-07:00Fixed Hovering Social Bookmarking Widget For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66NVRBYfJH_H3gO2tIPVs5UlZkMVfXB5mzLYBRUY93jSzqnWCqBmS5TCvzWJFjUxnyV4R_ifhBwhIOpgG0JWCCH54Mu9gL4F6K4ywcBsZ885hQfi7rW4RBi3OxKjRy8WNknEw0rLoMaQ/s1600/fixed-share-this-hovering-buttons-blogger-tip-gadget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66NVRBYfJH_H3gO2tIPVs5UlZkMVfXB5mzLYBRUY93jSzqnWCqBmS5TCvzWJFjUxnyV4R_ifhBwhIOpgG0JWCCH54Mu9gL4F6K4ywcBsZ885hQfi7rW4RBi3OxKjRy8WNknEw0rLoMaQ/s200/fixed-share-this-hovering-buttons-blogger-tip-gadget.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">You may have noticed Social Bookmarking Buttons or Icons in a fixed or hovering position that scroll with the page on many of the blogs you visit.This type of Fixed Bookmarking widget has become very popular and can get more people sharing your content on Twitter, Facebook and other social networks.In this Blogger Tip i will show you probably the easiest way you too can have fixed social bookmarking buttons on your blog...</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<a name='more'></a><br /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-family: inherit; font-size: large;">Always Back Up Your Template Before You Make Changes.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<br />
<div style="font-size: x-large;">
<b>Step 1:</b> Got To ShareThis.Com</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 2:</b> Log In Or Sign Up, quickest.</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 3:</b> Click the Labs option in the top menu choose Hovering Buttons.</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 4:</b> Un-check the Enable Ads box, Choose the docking position for the left or right of your blog, Select the buttons you want then click get the code.</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 5:</b> Back in your blogger dashboard click Design > Edit Html.</div>
<div style="font-size: x-large;">
<br /></div>
<span style="font-size: large;"><b>Step 6:</b> Place the first snippet of code from Share this Directly above </span><span style="font-family: 'Courier New', Courier, monospace;"></head></span><br />
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 7:</b> Place the second snippet of code directly above </body> .</div>
<div style="font-size: x-large;">
<br /></div>
<div style="font-size: x-large;">
<b>Step 8:</b> Save your template.</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-16202634488440293092012-07-21T04:36:00.003-07:002012-07-22T02:07:10.455-07:00Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger:<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqbDnZfWJ3gjhzxc9AMle-DJFHbxy6MwJAR-brR3F5Qo29pLsFbkgyMeolf9trJ6m6BpKhrf3_MOz8kz7H8duoQmpTRznBcuf1CltCxDIY94tSs2WwGQIxzqsPFZwVCKH1yrdTDntux8/s1600/twitter-bird-gadget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqbDnZfWJ3gjhzxc9AMle-DJFHbxy6MwJAR-brR3F5Qo29pLsFbkgyMeolf9trJ6m6BpKhrf3_MOz8kz7H8duoQmpTRznBcuf1CltCxDIY94tSs2WwGQIxzqsPFZwVCKH1yrdTDntux8/s200/twitter-bird-gadget.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">Using the latest Twitter API it's become easy to create a neat latest tweets gadget.In this post i will show you how to add a Twitter bird with a speech bubble containing your latest tweet to your blog.The idea comes from Paulund.co.uk and all that's needed is some Css and a few lines of script. Add The Latest Tweet Twitter Bird To Your Blog Remember Always Back Up Your Template Before You Make Changes...</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<span style="font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click Design > Template Designer, Then Advanced > Add Css</span><br />
<span style="font-size: large;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9v1mPE7k_aICKH5AjGgvZctB3lF0cIZ5gdlNsOv63S2zrkLbv_SepnCoehxna2xgA-toq1MGrGD0AZCpvogtasjbqrutYeOrO-dr0XVOJ32oSXsBPWbydKuUi4qn-3ODnj8xrS7U-WR8/s1600/advanced-css-code-here-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9v1mPE7k_aICKH5AjGgvZctB3lF0cIZ5gdlNsOv63S2zrkLbv_SepnCoehxna2xgA-toq1MGrGD0AZCpvogtasjbqrutYeOrO-dr0XVOJ32oSXsBPWbydKuUi4qn-3ODnj8xrS7U-WR8/s1600/advanced-css-code-here-blogger.png" /></a></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 2:</b> Copy and Paste the following code into the Css section (See Paste Code Here Above)</span><br />
<span style="font-size: large;"><br /></span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">#twitter_update_list{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">list-style:none;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#twitter_update_list li{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: #f4f8f9; /* Old browsers */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">box-shadow: 1px -1px 2px #bbc6c8;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-webkit-box-shadow: 1px -1px 2px #bbc6c8;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-moz-box-shadow: 1px -1px 2px #bbc6c8;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-radius:7px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-moz-border-radius:7px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-webkit-border-radius:7px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">padding:15px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">width:250px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#twitter_update_list::after {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">content: "";</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">position: relative;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">left: 30px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-width: 15px 15px 0;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-style: solid;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-color: #e8f0f2 transparent;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">display: block;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">width: 0;}</span></div>
<br />
<br />
<span style="font-size: large;"><b>Step 3:</b> Thats the Css added now return to the design page and click Add A Gadget > Choose Html / Javascript</span><br />
<span style="font-size: large;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><b>Step 4:</b> Copy and Paste the following code into the Html/Javascript gadget</span></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><ul id="twitter_update_list"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><li>Loading Tweets..</li></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></ul></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><a title="Follow Me" href="http://www.twitter.com/<span style="color: red;">username</span>" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoVkMHmNqBW41ojEHrihP8DIwaFGsP9-fa1tuhsyA-oVB_N9lI2Vjo52rQYeL0W_3F1-4q9-8eCNnWTs0Oyl9sIP5OoIOHNYUPG2gFS8KBnRTef-ecpRaTbE2cGSkqY8Es3GNgLYDQCqj/s1600/twitter-bird-gadget.png" /></a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<span style="color: red;">username</span>.json?callback=twitterCallback2&count=1"></script></span></div>
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Important:</b> Change the Twitter username with yours.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-size: large;"><b><br /></b></span><br />
<span style="font-size: large;"><b>Step 5:</b> Click Save and check out your new Twitter gadget.</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-78100882249109295752012-07-21T04:35:00.004-07:002012-07-22T02:06:06.973-07:00Add A One Time Email Subscription Pop Up Form To Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Lo432aWaeltyzcZpju68-iOsoJDJrK2t_MuhzGZ6462zZrtBm7CgxaepUVwU4jAyXWWAW6BM85AuKs_Khy0SchWgI7QfLOH_NQ5TBVLJvLmKpShRIvGREkbsHXDqJ88HDFfojfLUcBw/s1600/email-pop-up-feed.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Lo432aWaeltyzcZpju68-iOsoJDJrK2t_MuhzGZ6462zZrtBm7CgxaepUVwU4jAyXWWAW6BM85AuKs_Khy0SchWgI7QfLOH_NQ5TBVLJvLmKpShRIvGREkbsHXDqJ88HDFfojfLUcBw/s200/email-pop-up-feed.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">So many blogs and websites i visit these days have implemented a pop up subscription form for their newsletter.I'm sure you have seen it, you land 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...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br />
<a name='more'></a><br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click Design > Edit Html</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 2:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">]]></b:skin></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 3:</b> Copy and Paste the following code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;">]]></b:skin></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">/*Subscription Pop Up Css*/</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#popupContactClose{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">cursor: pointer;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">text-decoration:none;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#backgroundPopup{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">display:none;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">position:fixed;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">_position:absolute; /* hack for internet explorer 6*/</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">height:100%;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">width:100%;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">top:0;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">left:0;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background:#000000;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border:1px solid #cecece;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">z-index:1;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#popupContact{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">display:none;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">position:fixed;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">_position:absolute; /* hack for internet explorer 6*/</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">height:384px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">width:408px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background:#FFFFFF;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border:2px solid #cecece;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">z-index:2;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">padding:12px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">font-size:13px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#popupContact h1{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">text-align:left;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">color:#6FA5FD;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">font-size:22px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">font-weight:700;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-bottom:1px dotted #D3D3D3;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">padding-bottom:2px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">margin-bottom:20px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#popupContactClose{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">font-size:14px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">line-height:14px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">right:6px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">top:4px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">position:absolute;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">color:#6fa5fd;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">font-weight:700;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">display:block;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">/*End Subscription Pop Up Css @ http://toolsforblogger.blogspot.in */</span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 4:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></head></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 5:</b> Now Copy And Paste This Code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!--Pop Up Subscription--></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> </span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://yourjavascript.com/8296222511/jquery.cookies.2.2.0.min.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var popupStatus = 0;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//loading popup with jQuery magic!</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">function loadPopup(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">centerPopup();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//loads popup only if it is disabled</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">if(popupStatus==0){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#backgroundPopup&quot;).css({</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">&quot;opacity&quot;: &quot;0.7&quot;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">popupStatus = 1;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//disabling popup with jQuery magic!</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">function disablePopup(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//disables popup only if it is enabled</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">if(popupStatus==1){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">popupStatus = 0;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//centering popup</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">function centerPopup(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//request data for centering</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var windowWidth = document.documentElement.clientWidth; </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var windowHeight = document.documentElement.clientHeight; </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var windowscrolltop = document.documentElement.scrollTop;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var windowscrollleft = document.documentElement.scrollLeft;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var popupHeight = $(&quot;#popupContact&quot;).height();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var popupWidth = $(&quot;#popupContact&quot;).width();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var toppos = windowHeight/2-popupHeight/2+windowscrolltop;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//centering</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#popupContact&quot;).css({</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">&quot;position&quot;: &quot;absolute&quot;,</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">&quot;top&quot;: toppos,</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">&quot;left&quot;: leftpos</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//only need force for IE6</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#backgroundPopup&quot;).css({</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">&quot;height&quot;: windowHeight</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//CONTROLLING EVENTS IN jQuery</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(document).ready(function(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">if ($.cookie(&quot;anewsletter&quot;) != 1) { </span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//load popup</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">setTimeout(&quot;loadPopup()&quot;,5000); </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">} </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//CLOSING POPUP</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//Click the x event!</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#popupContactClose&quot;).click(function(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">disablePopup();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//Click out event!</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&quot;#backgroundPopup&quot;).click(function(){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">disablePopup();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">//Press Escape event!</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(document).keypress(function(e){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">if(e.keyCode==27 &amp;&amp; popupStatus==1){</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">disablePopup();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!--End Pop Up Subscription @ http://toolsforblogger.blogspot.in --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 6:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 7:</b> Copy and Paste the following code Directly Above / Before </span><span style="font-family: Georgia, 'Times New Roman', serif;"></body></span></div>
<div>
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, 'Times New Roman', serif;"></span></div>
<span style="font-family: Georgia, 'Times New Roman', serif;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><div id='popupContact'></span><br />
<span style="font-family: Georgia, 'Times New Roman', serif;"><a id='popupContactClose'>x</a></span><br />
<span style="font-family: Georgia, 'Times New Roman', serif;"><h1>Get Our Latest Posts Via Email - It&#39;s Free</h1></span><br />
<span style="font-family: Georgia, 'Times New Roman', serif;"><p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">username</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;">username</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></span><br />
<span style="font-family: Georgia, 'Times New Roman', serif;"></div></span><br />
<span style="font-family: Georgia, 'Times New Roman', serif;"><div id='backgroundPopup'/></span></div>
<br />
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Important: </b></span><br />
<span style="font-family: inherit; font-size: large;"> You need to change our feedburner username with yours.The username for your feed can be found at the end of your feed URL.</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-41804290614353261252012-07-21T04:34:00.002-07:002012-07-22T02:05:08.224-07:00One Time Facebook Pop Up Like Box For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: -webkit-auto;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRVwmBeM7qTb26FoklaNBPzSR06mAYCfSWquoZ-6DI5QgJTpb4xTSdo72LMWxVOrTfqMblk5QkWg7RSsUqXfTZ4VyMd-vSJ2p-qlDzSy0QhUd2sNIUj1l7loilL3EOM3Yn3M0PQ_-7bB4/s1600/facebook-pop-up-like-box-blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRVwmBeM7qTb26FoklaNBPzSR06mAYCfSWquoZ-6DI5QgJTpb4xTSdo72LMWxVOrTfqMblk5QkWg7RSsUqXfTZ4VyMd-vSJ2p-qlDzSy0QhUd2sNIUj1l7loilL3EOM3Yn3M0PQ_-7bB4/s200/facebook-pop-up-like-box-blogger.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">When a visitor lands on your blog a pop up box will appear with the option to like your Facebook page.The gadget will only appear on the first visit so your readers or you wont have to see it again...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: -webkit-auto;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
</div>
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><b><br /></b></span></div>
<div style="text-align: -webkit-auto;">
<span style="font-family: inherit; font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click Design > Add a gadget > Choose html/javascript</span></div>
<div style="text-align: -webkit-auto;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div style="text-align: -webkit-auto;">
<span style="font-size: large;"><b>Step 2:</b> Copy and Paste the following long code into the Html/Javascript gadget.</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc; font-size: large;"><br /></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc; font-size: large;"><br /></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><style></span></span></div>
<div style="text-align: -webkit-auto;">
<br /></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">/*</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">ColorBox Core Style:</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">The following CSS is consistent between example themes and should not be altered.</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">*/</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxOverlay{position:fixed; width:100%; height:100%;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxMiddleLeft, #cboxBottomLeft{clear:left;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxContent{position:relative;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxLoadedContent{overflow:auto;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxTitle{margin:0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxPhoto{float:left; margin:auto; border:0; display:block;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxIframe{width:100%; height:100%; display:block; border:0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">/*</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">User Style:</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">Change the following styles to modify the appearance of ColorBox. They are</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">ordered & tabbed in a way that represents the nesting of the generated HTML.</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">*/</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxOverlay{background:#000;opacity:0.5 !important;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#colorbox{</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">box-shadow:0 0 15px rgba(0,0,0,0.4);</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) no-repeat 0 0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivsRzxfMMunT1DESNYNcN0TIr9e4mUug5Cnc1nbsBfB-exTirbJL3VRIFCAZmz0UEJbb7J1dmBfs6RsGn9VixXqEpJHWLV8_kxoY1jIS5YQNwvY9myMe5TGjgfk52KQ_qWVqUPrax-x4A0/s1600/border.png) repeat-x top left;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) no-repeat -36px 0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) no-repeat 0 -32px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivsRzxfMMunT1DESNYNcN0TIr9e4mUug5Cnc1nbsBfB-exTirbJL3VRIFCAZmz0UEJbb7J1dmBfs6RsGn9VixXqEpJHWLV8_kxoY1jIS5YQNwvY9myMe5TGjgfk52KQ_qWVqUPrax-x4A0/s1600/border.png) repeat-x bottom left;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) no-repeat -36px -32px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) repeat-y -175px 0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) repeat-y -211px 0;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxContent{background:#fff; overflow:visible;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxLoadedContent{margin-bottom:5px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObmNVp6t5a62gCXkh6kf-5LlQFJ9KQo6-pAw5ab7uSwSPpK53f8nA1z54-bBOXQq0gfXcphi6-uYJxfUyXn6oq83-C5uhq9fraC4i8NGWYTg16Y3vN9-z3zA2_4tRdRWy8FpZPEfhv2Au/s1600/loading-background.png) no-repeat center center;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTliKHRas95D_H9Rizp0nc__mMC3qFAb3BpTlGAJWTDzvEujYBwov8Hp5AxynPJHnWHDM8wXPaKn_Y_m-7cHUZ9D-JLfH21XhFeqRq-XNutBWjW3hvVeKJLLVEGEUr3bvGCi1BDwIZ5tj/s1600/loading.gif) no-repeat center center;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fRyfXAYGF1d6Nk9S-xZT0WrP0eRlhOXWN8JOTadYINGVhjARVGSWX_JPy3r0OLuUz9xf7HbzyQwuWGw-Igxu1-JTcEwW1KV_UU6YgmG5q2fJad8lWZ1mKbJFVFxo345S8xjvGm2CUCO3/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxPrevious{left:0px; background-position: -51px -25px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxPrevious.hover{background-position:-51px 0px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxNext{left:27px; background-position:-75px -25px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxNext.hover{background-position:-75px 0px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxClose{right:0; background-position:-100px -25px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#cboxClose.hover{background-position:-100px 0px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">/*-----------------------------------------------------------------------------------*/</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">/* Facebook Likebox popup For Blogger</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">/*-----------------------------------------------------------------------------------*/</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#subscribe {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#subscribe a,</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#subscribe a:hover,</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#subscribe a:visited {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">text-decoration:none;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.box-title {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">color: #3B5998;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">font-size: 20px !important;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">font-weight: bold;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">margin: 10px 0;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">border:1px solid #ddd;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">-moz-border-radius:6px;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">-webkit-border-radius:6px;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">border-radius:6px;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">box-shadow: 5px 5px 5px #CCCCCC;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">padding:10px;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">line-height:25px; font-family:arial !important;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.box-tagline {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">color: #999;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">margin: 0;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">text-align: center;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">#subs-container {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">padding: 35px 0 30px 0;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">position: relative;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">a:link, a:visited {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">border:none;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">.demo {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">display:none;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></style></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="color: blue; font-family: 'Courier New', Courier, monospace;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><script type="text/javascript"></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">jQuery(document).ready(function(){</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">if (document.cookie.indexOf('visited=true') == -1) {</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">var fifteenDays = 1000*60*60*24*30;</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">var expires = new Date((new Date()).valueOf() + fifteenDays);</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">document.cookie = "visited=true;expires=" + expires.toUTCString();</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">$.colorbox({width:"400px", inline:true, href:"#subscribe"});</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">}</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;">});</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></script></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><!-- This contains the hidden content for inline calls --></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><div style='display:none'></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><div id='subscribe' style='padding:10px; background:#fff;'></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> </span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><center></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: red;">Username</span>&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></center></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://toolsforblogger.blogspot.in">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></div></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: #cccccc;"><span style="font-family: 'Courier New', Courier, monospace;"></div></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="font-size: large;"><span style="background-color: #cccccc;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="font-size: large;"><span style="background-color: #cccccc;"><br /></span></span></div>
<div style="text-align: -webkit-auto;">
<span style="font-size: large;"><span style="background-color: #cccccc;"><br /></span></span></div>
<h4>
<b style="font-size: x-large;">Important: </b></h4>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;"> You have two ways to make it work for your blog, </span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;"><br /></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;">1.) Change the letter in red to your facebook fanpage username.</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;"><br /></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;">2.) </span><span style="background-color: white;"><span style="font-size: large;">Or if your page does not have a simple username you can create your like box <a href="http://developers.facebook.com/docs/reference/plugins/like-box/" target="_blank">here</a> and replace the entire paragraph which has a red text in it with your generated like box code. (Select the IFRAME tab and use that code here)</span></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white;"><span style="font-size: large;"><br /></span></span></div>
<h4>
<span style="background-color: white;"><span style="font-size: large;"><b>Important 2:</b></span></span></h4>
<div style="text-align: -webkit-auto;">
<span style="background-color: white;"><span style="font-size: large;"> </span></span><span style="background-color: white; font-size: large;">If you already have jQuery script in your template remove the line in blue.</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: white; font-size: large;"><br /></span></div>
<br class="Apple-interchange-newline" /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-70113379660810089872012-07-21T04:32:00.000-07:002012-07-22T02:04:06.395-07:00Rss And Social Icons For Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKove5srF-zBtpJ2OIQo1cfiiA8xMFV6ft7-DAUUSMhld0RV4DJ901B3jtxehmEA9HgJXBUQYmX7DsCBozDP1btCcEMJXbWjG_nnmaOYeJgbQ1oaFBL4VsLLBfHrUPfWaeMmFSi4GRLYw/s1600/blog-social-icon-set-1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKove5srF-zBtpJ2OIQo1cfiiA8xMFV6ft7-DAUUSMhld0RV4DJ901B3jtxehmEA9HgJXBUQYmX7DsCBozDP1btCcEMJXbWjG_nnmaOYeJgbQ1oaFBL4VsLLBfHrUPfWaeMmFSi4GRLYw/s200/blog-social-icon-set-1.PNG" width="189" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">In this post i have a brand new set of stylish icons you can use on your blog for readers to subscribe and follow you on social platforms.I really liked the look of this icon set and it includes an icon for Google + (Plus) you can use for people to check out and follow you on Google's new social network.In total i have four icons here for Facebook, Twitter, Google Plus and your Rss Feed.However the complete set has 24 icons…</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><br />
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b style="background-color: white; font-family: inherit; font-size: x-large;">Step 1:</b><span style="background-color: white; font-family: inherit; font-size: large;"> In Your Blogger dashboard click Design > Add a gadget > Choose Html/Javascript</span></div>
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JQ2CFbxa8rN_2Wkv-NNn9sfF_P1PleGp_PMS-AkaaVI8z3-QdYjLgCwzh4cauVxqpNOIotIj6jNvql1OSZCpCpUMrczNU6KYUWeS-41aIyRdU0J84Vmj8t31AHaBpmZ_sVL6Jh8EhwY/s1600/htmljavascript.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<span style="font-size: large;"><b>Step 2:</b> Copy and paste the following code into the html gadget then make the changes shown below.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="http://facebook.com/<span style="color: red;">username</span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8E3hYVZ5ad5NpnKoIM3zyT1oM-8UWb3lsDGvBk3frGbqULlaQO_L2se6EuHprbjzwsSD10xASjtYGqh6_emr6pu2Vm6LswKUOJy09g2aQoIYgGsdS7AZATUy85iFzwFxUP6eOH6ZcY5I/s1600/facebook-30x43.png" /></a><a href="http://twitter.com/<span style="color: red;">username</span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0EIYBTGhqm4cobT45jI8nVC54JQqzRKTZwlIXiGeezU4RF868eaeFZpB-c6xELmd7DiNNksRc_g4dzcoSqEut6haJxv92-e45fkHLHxVwMQnTUhYCSDUzEKEFhAGTm3kkg9uZW7yYyA/s1600/twitter-30x43.png" /></a><a href="https://plus.google.com<span style="color: red;">/username</span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIG5lRCIzA5NXWLHinps0pM8NvnVEzgxPcvOJ87NYugwjTk33iUbGCKiAdvdKuL2mf-Fs7DNFb-UQA64ZTATMUbthbveeqLo2iYzsLj4V_eDjhwmlA9-Yd7gdYfA6hV0LeryN5kjsG1U/s1600/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/<span style="color: red;">username</span>" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nrG6Ne1UbxzSEerhSQwraEm6NQgIJszrs3gYqtAjGq7NXo0m5ch1HNyWTNzgYRTAiLbu63tt5Sgk1ezMHUGl7a3uNYwoI3QbMKYkCViou9UuBnEfOIt2tsyPA_BtdhlzVeE5n6otqm0/s1600/rss-30x43.png" /></a></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<div>
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Note:</b> Change the word username in red to your's</span></div>
<div>
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><b>Step 3:</b> Save the gadget and your done.</span></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-67863850962253939742012-07-21T04:26:00.002-07:002012-07-22T02:02:57.536-07:00Shareaholic JQuery Slide Bookmarking Gadget With Tooltips And Counters For Blogger And Wordpress<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6zlp1t0fiU4seBBYbpGjcP-AFvrbKTUY6maYv5zUVF9PhHy9n1uglfFrVmfStUGXzMTZX6PPlH55JgTV7e6GoR-CBraVl8A9vvdUGaNdy-JwQll7OMWZ28HhWRcdqzRtr4PBCeLAk3g/s1600/pop-up-social-bookmarking-gadget-for-blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6zlp1t0fiU4seBBYbpGjcP-AFvrbKTUY6maYv5zUVF9PhHy9n1uglfFrVmfStUGXzMTZX6PPlH55JgTV7e6GoR-CBraVl8A9vvdUGaNdy-JwQll7OMWZ28HhWRcdqzRtr4PBCeLAk3g/s320/pop-up-social-bookmarking-gadget-for-blogger.PNG" width="320" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span><br />
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">The Shareaholic bookmarking widget still has the "Drop Down" and "Slide Up" features but also features tool tips and counters showing how many times your posts were shared.Take a look at the screenshot...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<span style="background-color: white; font-family: inherit; font-size: large;">Wordpress users can download the </span><a href="http://www.shareaholic.com/publishers/get_share_button" style="background-color: white; font-family: inherit; font-size: x-large;" target="_blank">Share Plugin Here</a><span style="background-color: white; font-family: inherit; font-size: large;">, below is the Blogger tutorial.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box</span><br />
<span style="font-size: large;"><b><br /></b></span><br />
<span style="font-size: large;"><b>Step 2:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;">]]></b:skin></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: inherit; font-size: large;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 3:</b> Copy and Paste the following code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;">]]></b:skin></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}</span></div>
</div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span style="font-family: inherit; font-size: large;"><b>Step 4:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><div class='post-footer'></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 5:</b> Now Copy And Paste This Code Directly Below / After </span><span style="font-family: 'Courier New', Courier, monospace;"><div class='post-footer'></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!--Start Social Bookmarks from http://toolsforblogger.blogspot.in --></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div class='shr_class shareaholic-show-on-load'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @<span style="color: red;">your twitter user name</span>&quot;}};</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">(function() {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">})();</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></script><a href='http://toolsforblogger.blogspot.in/' target='_blank'>Blogger Social Bookmark Gadget</a><span style="color: blue;"></b:if></span></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!-- End Social Bookmarks from http://toolsforblogger.blogspot.in --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<h4>
<span style="font-family: inherit; font-size: large;">Important:</span></h4>
<div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;"> Change text in red with your twitter username, if you dont have a twitter username please remove paulcrowepro and leave it blank.</span></div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;"><br /></span></div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;"> The two sections of code in yellow make the gadget only appear below your posts on the post pages not the home page. If you want the gadget to appear on your home page remove the two snippets.</span></div>
<span style="font-size: large;">
</span><br />
<div>
<span style="font-size: large;"><b><br /></b></span></div>
<span style="font-size: large;">
</span><br />
<div>
<span style="font-size: large;"><b><br /></b></span></div>
<span style="font-size: large;">
</span><br />
<div>
<span style="font-size: large;"><b>Step 6:</b> That's it save your template and check out your cool new gadget.</span></div>
<span style="font-size: large;">
</span></div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-25528935292160776352012-07-21T04:25:00.001-07:002012-08-19T11:26:35.856-07:00Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTdVMajbNAQFizC-SkYkoE-sBFVcDQXFraO0RCIPldYx8hWwqM0VgtUhD7aavQeosIGP8SG2AAgLO8pUJHL3xPw-ou9qDQEVnSW-nqTT82fTKJpah3k0sp3SHSJDQpDvA_KPBXJoVAkE/s1600/blogger-share-this-slide-out-heart-bookmarking-gadget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTdVMajbNAQFizC-SkYkoE-sBFVcDQXFraO0RCIPldYx8hWwqM0VgtUhD7aavQeosIGP8SG2AAgLO8pUJHL3xPw-ou9qDQEVnSW-nqTT82fTKJpah3k0sp3SHSJDQpDvA_KPBXJoVAkE/s200/blogger-share-this-slide-out-heart-bookmarking-gadget.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">The gadget in question is a love heart with the share this logo and on hover the heart splits to reveal a selection of bookmarking buttons.It looks awesome and the slide effect is very cool while still being practical.When the heart opens it...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; font-family: inherit; font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span></div>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click Design > Edit Html </span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Step 2:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code</span><br />
<span style="font-size: large;"><br /></span>
<br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></head></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<br /></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 3: </b>Copy and Paste the following code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Start Heart Bookmarking Gadget Code From http://toolsforblogger.blogspot.in/ --></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!-- End Heart Bookmarking Gadget Code From http://toolsforblogger.blogspot.in/ --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;"><b>Step 4:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 5:</b> Now Copy And Paste This Code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Start Heart Share Code From http://toolsforblogger.blogspot.in/ --></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div style='position: fixed; <span style="color: red;">bottom: 2%; left: 2%</span>;'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div class='shareEgg' id='shareThisShareHeart'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://toolsforblogger.blogspot.in/">Blogger Wordpress Gadgets</a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!-- End Heart Share Code From http://www.toolsforblogger.blogspot.in/ --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<br />
<h4>
<span style="font-family: inherit; font-size: large;">Important, Move The Position Of The Gadget :</span></h4>
<div>
<span style="font-size: large;"> The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><b>Step 6:</b> Save Your Template.</span></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-48359951684426700892012-07-21T04:21:00.003-07:002012-07-22T02:00:40.076-07:00Cool Fixed Position Slide Open Egg Social Bookmarking Gadget For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJciuVzQUhxijESZIi5WuUOEkt_-sj9Cda5A0LxihV8v6eve85btLHSn4So2idfHLrRtz3fhSxEc0sxauZkm6Dtc3dYDfjKeZVE3KzB8ZcTtveuSPX7vCVYfD7k0cs-AysfQoCxUbCsys/s1600/share-this-slide-out-egg-bookmarking-gadget-blogger-blogs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJciuVzQUhxijESZIi5WuUOEkt_-sj9Cda5A0LxihV8v6eve85btLHSn4So2idfHLrRtz3fhSxEc0sxauZkm6Dtc3dYDfjKeZVE3KzB8ZcTtveuSPX7vCVYfD7k0cs-AysfQoCxUbCsys/s200/share-this-slide-out-egg-bookmarking-gadget-blogger-blogs.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">The share egg sits in the bottom corner of your blog and remains fixed as the reader scrolls the page.On hover the egg slides open to reveal bookmarking buttons for your readers to share posts on Facebook, Twitter,...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; font-size: large;">Remember Always Back Up Your Template Before You Make Changes</span></div>
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 1:</b> In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose "Edit Html"</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 2:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></head></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span style="font-size: large;"><b>Step 3:</b> Copy and Paste the following code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Start Heart Bookmarking Gadget Code From http://toolsforblogger.blogspot.in/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://toolsforblogger.blogspot.in --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 4:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div style="text-align: center;">
<span style="background-color: #cccccc; font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<br /></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 5:</b> Now Copy And Paste This Code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; <span style="color: red;">bottom: 2%; left: 2%</span>;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://www.spiceupyourblog.com/ --></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<h4>
<span style="font-family: inherit; font-size: large;">Important, Move The Position Of The Gadget :</span></h4>
<div>
<span style="font-size: large;"> The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><b><br /></b></span></div>
<div>
<span style="font-size: large;"><b>Step 6:</b> Save Your Template.</span></div>
</div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-92008792779439869882012-07-21T04:19:00.004-07:002012-07-22T01:59:42.717-07:00Mashable Like Subscribe And Follow Sidebar Gadget For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCCJ3pN1o-J51Qwdv87PBiznPn_4q5vh4M06gwTX7IsnKYSAp2f0OTuR0nEVHKgDzEvA40oZf5apSGFbk2OaIl7p_YyIiUtpMJyjitafgqaXSISUqzvaSDuCbzUxCP4GlNOBt3ZCccXo/s1600/1333981039_mashable-subscribe-follow-gadget-blogger-blogs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCCJ3pN1o-J51Qwdv87PBiznPn_4q5vh4M06gwTX7IsnKYSAp2f0OTuR0nEVHKgDzEvA40oZf5apSGFbk2OaIl7p_YyIiUtpMJyjitafgqaXSISUqzvaSDuCbzUxCP4GlNOBt3ZCccXo/s200/1333981039_mashable-subscribe-follow-gadget-blogger-blogs.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">As a blogger it's expected to give subscription options such as Rss Feed, Email Feed and Social networks like Facebook, Twitter and Google +.Its been proven the most effective position for your subscription options is at the top of your blogs sidebar...</span><span style="font-family: 'Times New Roman', serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span><br />
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: large;">This gadget created by Harish on Way2Blogging could not be easier to add to your blog.Follow the link below to the widget generator, add your Rss ID and social ID's, click generate.On the next page click the "Add To Blogger" button and add it to your blog.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><a href="http://www.way2blogging.org/widget-generators/mashable-style-social-subscription-widget" target="_blank">Go To Widget Generator --></a></span></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-57725191751734380772012-07-21T04:16:00.002-07:002012-07-22T01:59:27.251-07:00Add the Subscribe And Follow Widgets To Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyO0fCuyECd5cvgIzWjZVUq9fp12I-dvZEFfLh59sL6Z62aAcmmjL_3roezvT2WUMK6AAPMeiqqDWrUkXA2O9bEOTjdaUfwzZIrjGudynb4gZ5LbgSLvmhaGPamW84ZN9hrWwodJu8SE/s1600/subscribe-social-follow-icons-blog-sidebar.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyO0fCuyECd5cvgIzWjZVUq9fp12I-dvZEFfLh59sL6Z62aAcmmjL_3roezvT2WUMK6AAPMeiqqDWrUkXA2O9bEOTjdaUfwzZIrjGudynb4gZ5LbgSLvmhaGPamW84ZN9hrWwodJu8SE/s200/subscribe-social-follow-icons-blog-sidebar.png" width="200" /></a></div>
<span style="background-color: white; font-family: 'Times New Roman', serif; font-size: 18pt;">The icons have a vintage design and we have icons that will link to your Rss Feed, Email Rss Feed, Twitter, Facebook and Google Plus.Just for a little extra style i added a very simple opacity effect on hover.You can download the full set of Vintage Social Icons if you would like to add more profiles. For Blogger i have a Easy One Click...</span><br />
<div dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"></span><br />
<a name='more'></a><span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"> Below is the code for the widget, you can add it manually to Blogger in a Html/Javascript gadget. </span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"> For Wordpress go to Appearance > Widgets > Add the code to a text widget.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><span style="color: red;"><br /></span></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><span style="color: red;">Note:</span> Change the words in Red to your's</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
</div>
<span style="font-family: 'Courier New', Courier, monospace;"></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><style></span><br />
<span style="background-color: #eeeeee;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span></div>
<span style="background-color: #eeeeee;"><span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;">a:hover {background-color: transparent;opacity:0.7;}</span></span><span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span></span><br />
<div class="separator" style="clear: both;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"><span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"></style></span></span></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><a title="Rss Feed" href="http://feeds.feedburner.com/<span style="color: red; font-family: 'Courier New', Courier, monospace;">Your username</span>" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPC3TeF4WH5GCicGUbunwy0wkIglwexjO600cetoaIIuQ3svJ66E0iHxs6tkvADdxMu6ffgQXnCO6VQifTHbP2Ah7n8WXkfugH9hjbTHz146trdIGY46fTnge49s45p-TcFm39c8Es2rYJ/s1600/rss_48x48.png" /></a></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red; font-family: 'Courier New', Courier, monospace;">Your username</span>&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Vd5lzLfvJK0-3_Nan345c8C4U7-hzWxYSVA_yNQMkBp4L4fYF-NResjmkQa5pP-ZcUj-3REQXIdqXaCCCNMmNr_KblxG1Uo67rLjwbg5xo2CqvtFXdZvWOLDyANLj0ZFvXijneheknRk/s1600/mailrss_48x48.png" /></a></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><a title="Follow On Twitter" href="http://twitter.com/<span style="color: red; font-family: 'Courier New', Courier, monospace;">Your username</span>" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_9qRl7W9sJGQKbhQCVJG4hPslWKG6zA9pSxYBMWY_asV9si2UK7dKxhD7VOQxgzuw5Id3DLs9AxxV_EWV6mK_5GQx-TM49UUSO38PPDvJvmI7MClUP77klFPlZICUp-BOeqHsE_9GEYC/s1600/twitter_48x48.png" /></a></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><a title="Find Us On Facebook" href="http://facebook.com/<span style="color: red; font-family: 'Courier New', Courier, monospace;">Your username</span>" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypnskoAgqm1sas7SYu1vZNmLW14dCxSvTz3HqQAD-nc2DYhIJ2RouHkGssyYkGR3UBQL-G2BuQQQji-_XCe1TbzLUiTxkwo_sKuP0ukiWsNyaRyi6kIVtqkdKoJUjvFHYwhDxKm4xoIMh/s1600/facebook_48x48.png" /></a></span></div>
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><span style="font-family: 'Courier New', Courier, monospace;"></span></span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"><a title="Add To Circles" href="https://plus.google.com/<span style="color: red; font-family: 'Courier New', Courier, monospace;">Your username</span>" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEB62QGlz894BXr4gKbECf93AoX-hxZuabjNko8ogxkZOZ0kpj1M9T1Jq5KkYW9opO0TXCNF0OHaNEm6HwnzL0CMnUiLhHcL5d0VxSMxIddszMcq3XvhVQ8MOANbYAc5R28UasC3VwXiE/s1600/googleplus_48x48.png" /></a></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"><span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;"></span></span></div>
<br class="Apple-interchange-newline" /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-55295519923026257542012-07-21T04:14:00.002-07:002012-07-22T01:59:04.275-07:00Triangle Social Icon Gadgets For Your Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BOBhicD77EBKofa2fiu3yOHkDAXqp75zjIiUsbieevGfPYxfY1MEAf6d7zBt1OPSaLacVLceogKQ6jfT79MuERtETe9fMSoVRlrk82jJYnLQOd6muCKTG-nQk_oWxD1JQBPypLC9e3Q/s1600/asdfg.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BOBhicD77EBKofa2fiu3yOHkDAXqp75zjIiUsbieevGfPYxfY1MEAf6d7zBt1OPSaLacVLceogKQ6jfT79MuERtETe9fMSoVRlrk82jJYnLQOd6muCKTG-nQk_oWxD1JQBPypLC9e3Q/s200/asdfg.bmp" width="200" /></a></div>
<span style="background-color: white; font-family: 'Times New Roman', serif; font-size: 18pt;">Here is a Subscribe and Follow section for your blog using a neat set of triangle social icons.You can add the icons with links to your feed and profiles to your sidebar on Blogger and Wordpress. The icons are from Design Cauldron and look fantastic,Included in the gadget we have the code for are icons for your Rss Feed, Email...</span><br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oF-nTXQajBXSG2UlqBuJX32R2QPb3yQkoM2eLs4awCBOrbztiCQGrpsyl7ARRW88a5mIiZ12pAZS24Jr6uMErCEZKznNjQtRumolJ94gfWksd6Ic25BfdiYvLnccNPOyBz-NkMyFK3Y/s1600/asgs.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oF-nTXQajBXSG2UlqBuJX32R2QPb3yQkoM2eLs4awCBOrbztiCQGrpsyl7ARRW88a5mIiZ12pAZS24Jr6uMErCEZKznNjQtRumolJ94gfWksd6Ic25BfdiYvLnccNPOyBz-NkMyFK3Y/s1600/asgs.bmp" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<span style="font-size: large;"> On wordpress you add the code below to a text gadget by going to appearance > widgets > paste in code, making sure to add your links as highlighted.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"> On Blogger you add the gadget to a HTML/Javascript gadget by going to Layout > Add A Gadget > Choose HTML/Javascript and paste in the code, making sure to add your links as highlighted.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><span style="color: red;"><b>Note</b></span> - Change "Your user name" in red to your's</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e8e8e8; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!--Subscribe Follow Gadget--><center><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/<span style="color: red;">Your user name</span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJjUgCVl4VvGrOR0ZHR2ZJfMBSgnS2UtQ4AgfQigfblhraUKeia35t1VMmV-KTxBRuEoKlM_X0kFPq4jJXNetoRUcFjOPmXeIFgxxuJEwYJWx8dst_sN2fOhszMNRo6uO6JC-xYA2B2st/s1600/RSS_78x75.png" style="margin-right:2px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">Your user name</span>&amp;loc=en_US" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3d7Mc3rKSa8-3QHftvvkGhKzGJlhIEqDhgtHCDWt7J66-exvtBYJ-fCntw8VQrkF34Fxm_KOvk0fQoCm4G_YUNn73bgpvBbT_OlaW6UokyP3ki9VfTWwnQWmLQfZb5UiH0d1FK1g-dr8b/s1600/Email_78x75.png" style="margin-right:2px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/<span style="color: red;">Your user name</span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9olAv7hMv4-Lu3ggbO8FZgvbB_jqVZixRKZjpwYb_9Jx_HGAI8YwhCLlgDvav7n3mWmQch93jmsfRlt8OaClvrwVnsfoYopTePGgtPwFA7W8zT0YnuCVtp_bkdyAYWyKpewy_sMzVGtR/s1600/Facebook_78x75.png" style="margin-right:2px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/<span style="color: red;">Your user name</span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmSlfa-bNZOktzuMLVRmfAVuGgDfEdSHRG2VhRPeb97wFFqESoNwBchGTynU2-hkU4-qoD82ZHutR6I1T2J0UyZOD31gZX-0DYnyDz6l6NRMJ63d0Gg17PV8d5x7baHALNHJrt1e_aHOt/s1600/Twitter_78x75.png" style="margin-right:2px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/<span style="color: red;">Your user name</span>" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFnbts_Dlmsi6-OCqGtHLRJjHTKymwOikf6w5XgjqknVh7erFZuHeaWLdFNhqkDcmixzSY6GdxGTGQq1IlqQaLDmKf02FcLBslURfnY9KdWLIBgxqXZq-o_SK9sZtw6yxantpjHRRfIot2/s1600/Google+_78x75.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/<span style="color: red;">your user name</span>/" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbdR6kiCS7qFstqq8N-tDEx3DWpIAwB2tJ8Ir4OCacDaUG3cpatTPbjNunmfjYYRpkEyfWBL4AWXjy6ae3cVTnZZaV7c4YsRhU8uvDp0Kdu5i3YZEet7LLEL2pJ0XhVTdQZbTTEPZKQkAN/s1600/Pinterest_78x75.png" alt="Follow Me on Pinterest" /></a><a title="See Our Vids" rel="nofollow" href="http://youtube.com/<span style="color: red;">your user name</span>/" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnhLf5vx5plNrLTzaCrj1-Zok0BwdmJYgcpQXwalE1qFY2Kv8XmUC4r8AD2BmLAtN5iZiwYQo62D0e4uoFQrl-jt_WxWqXGTVmlrFTMStFTkgmG0lCn4XXs0InTdHSyD54qnIlgvPB5cQn/s320/YouTube_78x75.png" alt="YouTube" /></a><br/></center><!--Subscribe Follow Gadget http://toolsforblogger.blogspot.in --></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<br class="Apple-interchange-newline" /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-955517262344291993.post-8026122659463747832012-07-21T04:11:00.002-07:002012-07-22T01:54:26.493-07:00Fixed Scrolling Social Bookmarking Bar Beside Posts For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVuDrhwMYAMl4ukgGidN9mDhdRkCReZ8vy8SPVA4vmLM-3xKXrrXtN0P1gf8DdMO0Bk2xxRpxtm_PDeizD4fSNky03D8sM3OBJeau9Yx6qDl9TK6V7GtsSGBkWiUA90HlEOVkuz0VBe0o/s1600/blogger-sticky-share-bar-gadget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVuDrhwMYAMl4ukgGidN9mDhdRkCReZ8vy8SPVA4vmLM-3xKXrrXtN0P1gf8DdMO0Bk2xxRpxtm_PDeizD4fSNky03D8sM3OBJeau9Yx6qDl9TK6V7GtsSGBkWiUA90HlEOVkuz0VBe0o/s200/blogger-sticky-share-bar-gadget.png" width="200" /></a></div>
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;">This gadget is popular on all the top blogs and really does help increase the number of times your posts get shared on Twitter, Facebook and other social networks.Using jQuery we attach a bar to the side of your blog posts with bookmarking buttons, as the page scrolls the bar neatly follows...</span><br />
<span style="font-family: 'Times New Roman', serif; font-size: 18pt;"><br /></span></div>
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-size: large;"><span style="color: red;">Remember:</span> Always Back Up Your Template Before You Make Changes</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 1:</b> In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box.</span><br />
<span style="font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 2:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><b:includable id='post' var='post'></span></div>
<div style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 3: </b>Copy and Paste the following code Directly Below / After </span><span style="font-family: 'Courier New', Courier, monospace;"><b:includable id='post' var='post'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!--Start Sticky Bar Code http://www.spiceupyourblog.com--></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='paulcrowepro' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:blog.url + &quot;&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=80&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=arial&amp;amp;height=90&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:90px;'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">function run_pinmarklet() {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">var e=document.createElement(&#39;script&#39;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">document.body.appendChild(e);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></script> </center><br/><a href='http://feeds.feedburner.com/<span style="color: red;">Your username here</span>' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUL_t6PWnsAmd9JW7znDpt-NWrWseXkmpiYEZ5ucNc5fZL6UC9bX3b_Zkg55ixyeYafHDOMVlzmndbionoZK6yMue8MXJ9fEg9Oa9NyzPPEn9oSAxzaD-O8ywSEj95BcWUuLIEgp7OnwY/s1600/rss-seat.png'/></a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br/><a href='http://www.spiceupyourblog.com/' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div></b:if></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!--End Sticky Bar Code http://toolsforblogger.blogspot.in--></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="background-color: white; color: red; font-family: inherit; font-size: large;">Important</span><span style="background-color: white; font-family: inherit; font-size: large;"> - Replace the Text in Red to your username.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<span style="font-size: large;"><b>Step 4:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">]]></b:skin></span></div>
</div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: inherit; font-size: large;"><b>Step 5:</b> Now Copy And Paste This Code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;">]]></b:skin></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;">/*Start Sticky Bar Css http://www.spiceupyourblog.com*/</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#share-buttons {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">background: none repeat scroll 0 0 #fff;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border: 1px solid #CCCCCC;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">left: -80px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">padding: 8px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">position: absolute;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-moz-border-radius: 6px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-webkit-border-radius: 6px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">-goog-ms-border-radius: 6px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">border-radius: 6px;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#share-buttons .scount{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">clear: both;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">display: block;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">margin: 2px auto;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">text-align: center;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">width: 55px;z-index:-1;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">.facebook.sbutton .fb_ltr{width:40px !important;}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">.post-outer{height:auto;}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#main{position:relative;}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#main-wrapper{position:relative;}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">/*End Sticky Bar Css http://www.spiceupyourblog.com*/</span></div>
<br />
<span style="font-family: inherit; font-size: large;"><b>Step 6:</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span><br />
<div style="text-align: center;">
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"></head></span></div>
</div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 7: </b>Copy And Paste The Following Code Directly Above / Before </span><span style="font-family: 'Courier New', Courier, monospace;"></head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><span style="color: red;">Note:</span> </span><span style="background-color: white;"><span style="font-size: large;">The line of code in Red is the jQuery script.If you previously added jQuery to your template you do not need to add this.</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div style="background-color: #e0e0e0; padding: 5px 8px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!--Start Sticky Bar Scripts http://www.spiceupyourblog.com--></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: red; font-family: 'Courier New', Courier, monospace;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script src='http://yourjavascript.com/4701293254/share-bar-script.js' type='text/javascript'/></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><script type='text/javascript'></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(document).ready(function () {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">$(&#39;#share-buttons&#39;).stickySidebar({speed: 300, constrain: true})</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">});</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!--End Sticky Bar Scripts http://www.spiceupyourblog.com--></span></div>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: inherit; font-size: large;"><b><br /></b></span><br />
<span style="font-family: inherit; font-size: large;"><b>Step 8:</b> Save your template.</span></div>
</div>
</div>
</div>
</div>Unknownnoreply@blogger.com0