HOW TO ADD “WORD/CHARACTER COUNTER” TOOL TO BLOGS.

In one of our previous posts,we discussed a topic which is <a href="http://freebie-planet.blogspot.com/2012/10/add-html-encodedecode-tool-to-blogs.html" target="_blank"><span style="color:blue">“HOW TO ADD HTML ENCODE/DECODE-TOOL WIDGET TO BLOGS.”</span></a>.<br />And just as mentioned in that tutorial,the tool being made mentioned here was also provided by http://centricle.com.<p>Many at times,you might be asked to include a keyword while registering for a service online not 'More than or Below' a specified number of words and/or character.<br />This tool comes really handy in such a situation as you do not have to start counting every single letters manually.</p><p>Likewise as a blogger, you might want to count the number of characters in your post title as its often said that "Maintaining a below 60 is best".</p><p>Now,to add this tool to your blog,here's an easier way of doing that.</p><ol><li>Login to your <a href="http://blogger.com." target="_blank"><span style="color:red">Blogger dashboard.</span></a></li><li>Navigate to Layout » 'Add a Gadget' » 'HTML/JAVASCRIPT' and Copy-Paste the code below into the text box.</li><span style="color:green"><b>*Alternatively,you can create a page for it <a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">[Learn how to create pages in Blogger.]</span></a></b></span><li><p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank"> <fieldset> <label for="pad">String:</label> <textarea cols="60" rows="15" name="pad" id="pad"></textarea> <input class="submit" type="submit" name="countem" value="How Many?" /> </fieldset> </form></span></p></li><li><b>Save</b> the widget and that'll be all.</li></ol>HERE'S A LIVE DEMO OF THE WIDGET.<br /><form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank"><fieldset><label for="pad">String:</label><textarea cols="60" rows="15" name="pad" id="pad">

That's all!!!

In one of our previous posts,we discussed a topic which is “HOW TO ADD HTML ENCODE/DECODE-TOOL WIDGET TO BLOGS.” . And just as mentioned in ...

Baca selengkapnya »

HOW TO EMBED “WINDOWS MEDIA PLAYER” IN BLOGS.

Writing a great article sometimes,isn't complete without embedding a video and/or an audio file to it.<p>It is highly required when you are posting a practical tech-related tutorial or most times on a news niche,whereby the file makes the post even more explanatory.</p><p>So,what if you have the link to a video,how do you embed it in a blog(post)?</p><p>In this tutorial,I'll be showing you two easy ways to embed the <b>Windows Media Player</b> in a blog to stream live videos & audio files for visitors to easily watch and listen to.</p><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="true" width="350" height="250" loop="false" src="rtsp://v8.cache5.c.youtube.com/CjYLENy73wIaLQnd4te9PYx3RhMYDSANFEIJbXYtZ29vZ2xlSARSBXdhdGNoYJq32P6gmPjDUAw=/0/0/0/video.3gp" />[Video adapted from google.]<h2>Here's How...</h2><ol><li>The first way is by adding the media player as a gadget in the sidebar.<ul><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger.</span></a></li><li>Navigate to <span style="color:red"><b>Layout » `Add a gadget` » HTML/JAVASCRIPT</b></span></li><li>Copy-Paste the code below and save the widget.</li></ul></li><li>The second method is by embedding the player in each blog-post.<br />This can be done by pasting the code below in each post.</li></ol><h3>Here's the Media-player's code...</h3><p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false"<br />autostart="<span style="color:green">false</span>"<br />width="<span style="color:green">350</span>"<br />height="<span style="color:green">250</span>" loop="<span style="color:green">false</span>"<br />src="<span style="color:red"><b>VIDEO/AUDIO LINK</b></span>" /></div></p><textarea rows="3" col="20"><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="350" height="250" loop="false" src="VIDEO/AUDIO LINK" />

CUSTOMIZATION.

Change the settings of this player to suit you (Optional).

Autostart→ Change this value to "True" if you want the video/audio to start streaming automatically upon visiting the post[Not recommended].
Width/Height→ Change these values respectively to suit you taste.
Loop→ Force the video/audio to loop constantly.

That's all.Just make sure you get a valid url.

Writing a great article sometimes,isn't complete without embedding a video and/or an audio file to it. It is highly required when you ar...

Baca selengkapnya »

HOW TO ADD HTML ENCODE/DECODE TOOL WIDGET TO BLOGS.

There are times whereby you might need to post an Html tag as plain text most especially for bloggers in “Blog niches”.<br />It is also needed when a visitor has to write some codes in the comment box.<p>Although,<a href="http://www.freebie-planet.blogspot.com/search/label/Blog%20hacks%20and%20tricks" target="_blank"><span style="color:blue">Blogger</span></a> has really made it easier to post “html” codes as plain text in the <a href="http://freebie-planet.blogspot.com/2012/10/how-to-edit-posts-in-new-blogger.html" target="_blank"><span style="color:blue">New blogger dashboard</span></a>,it still isn't helpful in situations when you need some other tags to function in a post.<br />So,to solve this,a tool has been provided by Centricle.com to make posting of codes easier and faster.<h2>Here's How It Works...</h2>When a html code is inputed in the textbox,the “Encode” button needs to be pressed,and the result when posted,is shown as live codes.<p>To integrate this widget in your blog,just Copy-Paste the following code snippet preferably into a <b>Page</b>[<a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">Learn how to create pages on blogger.</span></a>]</p>Here's the code...<p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><form action="http://centricle.com/tools/html-entities/" method="post" target="blank"><br /><fieldset><br /><input value="y" name="s" type="hidden"/> <label for="pad">Convert text to HTML entities and vice-versal:</label> <textarea id="pad" rows="15"cols="60" name="pad"></textarea> <input value="Encode" name="submit" type="submit"/> <input value="Decode" name="submit" type="submit"/><br /></fieldset><br /></form></div></p><h4>Live Demo</h4><form action="http://centricle.com/tools/html-entities/" method="post" target="blank"><fieldset><input value="y" name="s" type="hidden"/><label for="pad">Convert text to HTML entities and vice-versal:</label><textarea id="pad" rows="15"cols="60" name="pad">

That's all.If you need further information about the usage of this tool,do not hesitate to leave a comment behind.

There are times whereby you might need to post an Html tag as plain text most especially for bloggers in “Blog niches”. It is also needed wh...

Baca selengkapnya »

HOW TO ADD A “PRINT PAGE” BUTTON TO BLOGGER BLOGS.

Adding a “Print Page” button to a blog is another way of generating little traffic to it,as visitors are given the option to print an entire article without stress,and by so doing can boost the traffic of your blog through Word-of-mouth,online forums etc.<p>So,if you'd love to include this button on your blog,this post will show you how…</p><ol><li>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger.</b></span></a></li><li>Navigate to <b><span style="color:blue">Templates » Edit HTML</span></b><span style="background-color:#ffffcc">[Always remember to backup your template.]</span></li><li>Check the box next to <span style="color:red"><b><br /><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"></head></font></span> by pressing <b>CTRL+F.</b></li><li>Next,Copy-Paste the code below directly <font size="4">above/before</font> it.</li><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><style type="text/css" media="print"><br />#noprint {display: none;}<br />// Hide unwanted elements<br />body {background:fff; color:000;}<br />// Black text on White background<br />a {text-decoration: underline; color:00f;}<br />//Underline Hyperlinks in blue}<br /></style></div></div><li>Once done,search(again) for <span style="color:red"><font size="6"><p><data:post.body/></p></font></span></li><li>When found, Copy-Paste the following code snippet directly <font size="4">below/after</font> it.</li><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><a href="javascript:window.print()"><span style="color:blue">Print Page</span></a></div></div><li>Preview the template to avoid errors and thereafter, Save it.</li></ol>That's all.

Adding a “Print Page” button to a blog is another way of generating little traffic to it,as visitors are given the option to print an entire...

Baca selengkapnya »

RANDOM BANNER WIDGET FOR BLOGGER BLOGS.

There are so many reasons you might want to add a banner to your blog site.<br />Adding a “Random banner widget” makes it better for any website.<p>It helps to manage space and is very useful in promoting affiliate links.<br />So in this tutorial,I'll be giving you an easy-to-use widget which can be modified to suit your taste.</p><h2>Steps On How To Add Random Banner To Blogs.</h2><ol><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger</span></a>.</li><li>Navigate to <span style="color:red"><b>Layout » <span style="color:red">“Add a Gadget”</span> » HTML/JavaScript</b></span></li><li>Next,Copy - Paste the code snippet below<p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><script language="JavaScript">images = new Array(3); images[0] = "<a href='<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'><br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'> </a>";images[1] = "<a href = '<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'> <br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'> </a>"; images[2] = "<a href='<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'> <br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'><br /></a>";index = Math.floor(Math.random() * images.length); document.write(images[index]);<br /></script></div></p></li><li>Finally,SAVE the widget and preview your blog to ensure it's working.</li></ol>If you need further information about this widget,please leave your comments behind.<h4>Also Read</h4><a href="http://freebie-planet.blogspot.com/2012/09/how-to-add-advertise-with-us-widget-to.html" target="_blank"><span style="color:red">HOW TO ADD ADVERTISE WITH US WIDGET TO BLOGGER.</span></a>

There are so many reasons you might want to add a banner to your blog site. Adding a “Random banner widget” makes it better for any website....

Baca selengkapnya »

AWESOME FACEBOOK LIKE,STUMBLE,RETWEET & DIGG COUNTER WIDGET FOR BLOGS.

Here's another cool Share-buttons widget for blogs. It's a 4-in-1 share widget with an awesome look and counters.<p>Well,I must confess,this is one of the most widely-used Social-media widget in the Blogosphere.</p><p>It includes the Facebook Like button,Digg Counter button,Stumble and Retweet buttons.</p><img alt="4in1 social share button.jpg" src="http://farm9.staticflickr.com/8455/8031099089_97525504ce_m.jpg"><h2>How To Add These Buttons To Blogger</h2>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger.</b></span></a><br />Go to <b><span style="color:red">Template</span></b><b> » </b><span style="color:red">Edit HTML</span> & Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b>.</span><p>Next,search for <span style="color:red"><font size="6"><data:post.body/></font></span> by hitting <b>CTRL+F.</b><br />Just add the following codes directly <font size="4">above/before</font> it.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><b:if cond='data:blog.pageType ==&quot;item&quot;'> <table border='0'> <tr> <td><div style='padding-top:6px;'> <script type='text/javascript'> tweetmeme_style = &quot;compact&quot;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div></td> <td> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot;+ data:post.url'/> </td> <td><div style='margin-left:35px;'> <script type='text/javascript'> (function() { var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; s.type = &#39;text/javascript&#39;; s.async = true; s.src = &#39;http://widgets.digg.com/buttons.js&#39;; s1.parentNode.insertBefore(s, s1); })(); </script> <a class='DiggThisButton DiggCompact'/> </div></td> <td> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url +&quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/> </td> </tr> </table> </b:if><br /></div></div><p>That's it. Do not forget to share your testimony with others[If it worked or not].</p>

Here's another cool Share-buttons widget for blogs. It's a 4-in-1 share widget with an awesome look and counters. Well,I must confes...

Baca selengkapnya »

HOW TO ADD “ONLINE HTML CALCULATOR” TO BLOGS.

Here's a quick tool-script you can add to your website/blog to display online calculator.<p>Once a number or sign is clicked on,the page reloads with the option in the text area.</p>Here's a demo of this online application.<p><form name="Calc"> <center> <input disabled="disabled" type="text" style="font-weight: bolder; font-size: large;" name="Input"/> <input type="hidden" name="PHPSESSID" value="6be315796135a9d9627813b4af5fb2ad" /> </center><table> <tr> <th> <input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'"/> </th> <th> <input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'"/> </th> <th> <input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'"/> </th> <th> <input type="button" name="plus" value=" + " OnClick="Calc.Input.value += '+ '"/> </th> </tr> <tr> <th> <input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'"/> </th> <th> <input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'"/> </th> <th> <input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'"/> </th> <th> <input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '"/> </th> </tr> <tr> <th> <input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'"/> </th> <th> <input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'"/> </th> <th> <input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'"/> </th> <th> <input type="button" name="times" value=" * " OnClick="Calc.Input.value += '* '"/> </th> </tr> <tr> <th> <input type="button" name="zerozero" value="00" OnClick="Calc.Input.value += '00'"/> </th> <th> <input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'"/> </th> <th> <input type="button" name="point" value=" . " OnClick="Calc.Input.value += '.'"/> </th> <th> <input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '"/> </th> </tr> </table> <table> <tr> <th> <input type="button" name="clear" value=" Clear " OnClick="Calc.Input.value = ''"/> </th> <th> <input type="button" name="DoIt" value=" Ans " OnClick="Calc.Input.value = eval(Calc.Input.value)"/> </th></tr> <tr> Script by:<a href="http://freebie-planet.blogspot.com">SOLJAR2</a> </tr> </table></form></p>So,to add this application on your blog,Copy-Paste the codes in the box below into a Page,Post or gadget.<textarea rows="4" col="20" readonly="readonly"><form name="Calc"> <center> <input disabled="disabled" type="text" style="font-weight: bolder; font-size: large;" name="Input"/> <input type="hidden" name="PHPSESSID" value="6be315796135a9d9627813b4af5fb2ad" /> </center><table> <tr> <th> <input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'"/> </th> <th> <input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'"/> </th> <th> <input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'"/> </th> <th> <input type="button" name="plus" value=" + " OnClick="Calc.Input.value += '+ '"/> </th> </tr> <tr> <th> <input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'"/> </th> <th> <input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'"/> </th> <th> <input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'"/> </th> <th> <input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '"/> </th> </tr> <tr> <th> <input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'"/> </th> <th> <input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'"/> </th> <th> <input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'"/> </th> <th> <input type="button" name="times" value=" * " OnClick="Calc.Input.value += '* '"/> </th> </tr> <tr> <th> <input type="button" name="zerozero" value="00" OnClick="Calc.Input.value += '00'"/> </th> <th> <input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'"/> </th> <th> <input type="button" name="point" value=" . " OnClick="Calc.Input.value += '.'"/> </th> <th> <input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '"/> </th> </tr> </table> <table> <tr> <th> <input type="button" name="clear" value=" Clear " OnClick="Calc.Input.value = ''"/> </th> <th> <input type="button" name="DoIt" value=" Ans " OnClick="Calc.Input.value = eval(Calc.Input.value)"/> </th></tr> <tr> Script by: <a href="http://freebie-planet.blogspot.com">Soljar2.</a> </tr> </table></form>Hope you found it useful.

Here's a quick tool-script you can add to your website/blog to display online calculator. Once a number or sign is clicked on,the page r...

Baca selengkapnya »

HOW TO ADD “ADVERTISE WITH US” WIDGET TO BLOGS.

Nowadays,almost every blog has an “Advertise with us” widget in their sidebar. <img alt="Advertise with us.jpg" src="http://i44.tinypic.com/2v97vv9.jpg">The widgets in most cases,are in the dimension '125 by 125' which is the most commonly used in the blogosphere.<p>So,if you'd like to embed this widget in your blog,all you have to do is follow these easy & straightforward steps.</p><h2>Steps on how to add the advertise widget on your blog.</h2>Before we begin with this tutorial,make sure you have a page you can direct your patronizers to when the widget is being clicked on.<p>If you do not already have,create one[<a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">Learn how to create a page</span></a>],and specify the amount you charge for each “ad-space”. Name the page “ADVERTISE” and publish it.</p><p>Once that's done,we are ready to start.</p><ol><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger</span></a></li><li>Navigate to <b>Layout » Add a gadget</b> and select<b>Html/Javascript</b></li><li>Next,Copy-Paste the code below into the box →<p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><center> <table border="0"><tr> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/> </a> </th> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </th> </tr> <tr> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> </tr> </table> </center></div></div></p></li><li>Replace all <span style="color:red"><b>YOUR PAGE'S URL HERE</b></span> in the code snippet with the one you derivated after <a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">creating your page.</span></a>Likewise,you can decide to increase/decrease the widget-image's size by replacing <span style="color:red"><b>'125'</b></span> in the code.</li><li>Finally, SAVE the widget.</li></ol>If you encountered any challenges,please let us know...

Nowadays,almost every blog has an “Advertise with us” widget in their sidebar. The widgets in most cases,are in the dimension '125 by 12...

Baca selengkapnya »

GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

In our <a href="http://freebie-planet.blogspot.com/2012/09/animated-follow-me-widget-for-blogs.html" target="_blank"><span style="color:blue"><b>previous post</b></span></a>,we discussed on “How to Add Animated Follow-us widget to blogger”.<p>So likewise,in this tutorial we will be dealing with how to add animated social bookmarking widget with 3D effect.</p><img src="http://farm9.staticflickr.com/8450/8070352141_2f525047a0_t.jpg"><p>This widget is so cool that when hovered on,spins 360 degrees and spins back when released.<br />To add the widget on your blog,just follow the instructions below.</p><p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> » </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>.<br />Now,locate "HTML/JAVASCRIPT" and select ADD.<br />Just copy/paste the code below and save the widget.</p><div style="border:1px solid #700000" background:#d8d8d8"><style><br />#social a:hover{background-color:transparent;opacity:0.7;}<br />#social img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}<br />#social img:hover { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);}</style><br /><center><br /><div id="social"><br /><!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="<span style="color:blue"><b>YOUR FEED URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_zP1rLPAMMbiMbyH5pSmeCK_W5c9DWZhl6qWQ-kwibb8m2U-j26p4J9lGH05CeTkmX_3zBBTCF79wQi5fjGmzQwrSVVBuQa7vK11SCXKfhv5mRCeSwQ_KpgQUlkt9cszFElvz-bPJ8j0/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End RssIcon--><br /><!--Start Email Rss Icon--><br /><a rel="nofollow" title="Get Free Updates Via Email" href="<span style="color:blue"><b>YOUR EMAIL RSS URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZWM1jRAyyJNrcUiFegtcNXrO64Mkv1omF1cykRS_y1mCFpbLhdV_mozp46RhjdNOILzgzvFeNdpxtq5YeVnzSJZI_9fc02jtXrMhKVvRyz7XBBMoXkgTXt6Gx1tDYobbP2keb7T4jZYN/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Email Rss Icon--><br /><!--Start Facebook Icon--><br /><a rel="nofollow" title="Like Our Facebook Page" href="<span style="color:blue"><b>YOUR FACEBOOK PAGE URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpoM94glXq1hyMvTLL6QrW8d8WbH1gO6NxpEluJ9XVXPIC8c4NZOKR4afl3NyFEcrPKgMYQJQuOafMfrXXxM1Y_MRRddSrqG7deoBOIqKUy9NpI9E9Quq7vDFqFE_bnIGexNcOuZx4oGu/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Facebook Icon--><br /><!--Start Twitter Icon--><br /><a rel="nofollow" title="Follow Our Updates On Twitter" href="<span style="color:blue"><b>YOUR TWITTER URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJD29fgO20pRtVhUGZ96NZ9yB_E1Fbl3THzZ9bKf3r-MCuaNw6EFWxq2LLrWR_QR2th0kDy5YEko9iZ5jYqD1DM8Xb86pWzBKo1fRyINhO_IgxsJgI32k0UUhjfWOyspGv3Y_1ZpTdY0L/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Twitter Icon--><br /><!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="<span style="color:blue"><b>YOUR GOOGLE PLUS URL HERE</b></span>" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MUURk-pVu5Tn29-4Ub9LGM2g32JqwVAKail63i7AvgB_YoYQ0fwbsVQGxyPPzwgi2GEy-IIXmMItIZYO5y4erz_KreEK8TBcLY9u-NYP3ug0cIUfY2nzLir7UNVbmvz2w3OGwEJYWbWI/s1600/GOOGLE-PLUS-48x48.png"/></a><br /><!--End Google Icon--><br /><!--Start Pinterest Icon--><br /><a title="Follow Our Pins" rel="nofollow" href="<span style="color:blue"><b>YOUR PINTEREST URL HERE</b></span>" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVrfIX8neHFfDitreQ5S3eL504gkCy2XeukKPbAzKmHF-jVWnU5EafPi-suNvjeHYncVFoATxrgH42iYF5jTt_5TvhcMnI4WhTGTcq9Cajk_AF4jsM5cvBz0cOuXQYNq_A1hJybQrIsK-/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a><br /><!--EndPinterest Icon--></div><br /><!--Start Feed Count Button--> <a href="<span style="color:blue"><b>FEEDBURNER URL HERE</b></span>" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><br /><!--End Feed Count Button--> </center></div><p><b>NOTE <br />If you don't have any of these urls,you can simply remove it for the time being.<br />Just delete all codes from where you see 'START' to the 'END' part.</b></p>

In our previous post ,we discussed on “How to Add Animated Follow-us widget to blogger”. So likewise,in this tutorial we will be dealing wit...

Baca selengkapnya »

ANIMATED FOLLOW-US WIDGET FOR BLOGS.

Have you ever wondered if it's really possible to have an animated widget?...<p>If yes,then I'm glad to introduce to you this animated 3D[three dimension] FOLLOW-US widget which can easily catch the attention of your blog visitors.</p><p>It was designed in form of a square which rises and changes from gray to a stupefying color when hovered upon.</p><p>To add this widget in your blog,here's what you need do →<br />Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> » </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>.<br />Now,locate "HTML/JAVASCRIPT" and select ADD.<br />Just copy/paste the code below and save the widget.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><style>.blogtoolz-flt-wdt{position:fixed; right:10px; top:36%;}<br />.blogtoolz-flt-wdtimg {float:right; clear:right; margin:1px; -webkit-transition:all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition: all .2s ease-in-out;}<br />.blogtoolz-flt-wdt img:hover{-moz-transform:scale(1.2) rotate(6deg);-webkit-transform: scale(1.2) rotate(6deg);-o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);}</style><br /><div><br /><style><br />.BlogToolz1{display: block;width:64px;height: 64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent:-99999px;}<br />.BlogToolz1:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png')bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Facebook Link Here</b></span>"></a><br /><style><br />.BlogToolz2{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;text-indent:-99999px;} .BlogToolz2:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Twitter Link Here</b></span>"></a><br /><style><br />.BlogToolz3{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;text-indent: -99999px;}<br />.BlogToolz3:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom; height:64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Rss Feed Link Here</b></span>"></a><br /><style><br />.BlogToolz4{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png')bottom;text-indent: -99999px;}<br />.BlogToolz4:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Google Plus Link Here</b></span>"></a> </div><br /><!-- Animation widget ends --></div></div><p>That's it.Just replace the necessary things there i.e the blue texts and save the widget.</p>

Have you ever wondered if it's really possible to have an animated widget?... If yes,then I'm glad to introduce to you this animated...

Baca selengkapnya »

RECENT COMMENT WIDGET FOR BLOGS.

The default 'Recent comment widget' for blogger is something that doesn't work on most blogs {mine inclusive},and this made me explore Google in search of a valid recent comment gadget.<p>After searching for days,I finally came across one and decided to share it with those who might have thesame questions..<br /></p><p>Even though there are some html/javascripts to carry out this order,the usage of gadgets is much more viable,as too much of html/javascripts in a web page can slow it down.</p><p>This also has its own uniqueness,as you are able to decide whether you would show <b><span style="color:blue">post dates</span>,<span style="color:red">post title</span>,<span style="color:blue">decide the number of comments to display</span></b> etc.</p><p>To do this,just visit <a href="http://www.bloggerbuster.com/2007/08/create-your-oen-recent-comments-widgets.html" target="_blank"><span style="color:orange">this site</span></a>,and fill out the form appropriately.</p><p>The widget will then be automatically sent to the site you specify.</p><b><span style="color:red">Note:This widget does not include any backlink to the site I specified above,because I thought so and decided not to try it at first.</span></b><br /><br />Here's <a href="http://www.bloggerbuster.com/2007/08/create-your-oen-recent-comments-widgets.html" target="_blank">the site </a> again.<p>I'm sure this will save you a whole lot of stress to using javascripts which might sometimes include backlinks.</p>

The default 'Recent comment widget' for blogger is something that doesn't work on most blogs {mine inclusive},and this made me e...

Baca selengkapnya »

PAGE-LOAD TIMER SCRIPT FOR BLOGGER BLOGS.

Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then <b>Read-on.</b><p>In this post,I will be explaining how you can easily add this widget to your blog.</p><h2>How to add load timer to blogger blogs</h2>To add this widget to your blog,follow the steps below.<p><font size="5">Step 1:</font></p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue"><b>Blogger</b></span></a> & go to <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span></b><span style="background-color:#ffffcc">[Always remember to backup your template.]</span> Check the box next to <span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="4"><head></font></span> by pressing <b>CTRL+F.</b> Once you get that,copy-paste the codes below directly <font size="4">after</font> it.<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script></div></div><testarea rows="3" col="20"><!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script></testarea><p><font size="5">Step 2:</font></p>Find <span style="color:red"><font size="4"></body></font></span> in your template and immediately <font size="4">before</font> that,copy-paste this code:<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- page load timer begins --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a&quot;P&quot; element document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in:&quot; result &quot; seconds&quot;; </script> <!-- page load timer ends --></div></div><testarea rows="3" col="20"><!-- page load timer begins --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a"P" element document.getElementById("loadtime").innerHTML = "Page loaded in:" result " seconds"; </script> <!-- page load timer ends --></testarea><br /><b>Preview</b> and <b>Save template.</b><p><font size="5">Step 3:</font></p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a> » <b><span style="color:red">Design</span></b> »<span style="color:red"><b>Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>. Next,scroll down till you find "HTML/JAVASCRIPT" and click on ADD. Now,copy-paste the following codes in it:<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- Widget portion --> <p id="loadtime">Your custom message goes here</p></div></div>Finally,save widget and view your blog to see the load-timer. If you are not satisfied with the <b>“Page loaded in:”</b> that displays together with the load-time,simply change it in “step 2” above.

Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then Read-on. In this post,I will be exp...

Baca selengkapnya »

CREATE CUSTOM PERMALINKS FOR ALL BLOGGER POSTS.

You might have noticed some blogs having shortened urls at the top/bottom of every post with a <b>“Share this post”</b> text. This is a very nice widget which can help increase your blog's traffic as visitors won't have to go through the stress of manually getting your posts url.<h2>How to add shortened url to your blog.</h2>In this tutorial,I 'll be making use of bit.ly i.e twitter's default service. <img alt="bitly.jpg" src="http://farm9.staticflickr.com/8162/7487342344_85b1c497a2_t.jpg">To begin,you will have to create an account with bit.ly to get your <a href="http://bit.ly/a/your_api_key/" target="_blank"><span style="color:red"><b>API KEY</b></span></a>.Once gotten,we can begin with the tut.<h2>STEP BY STEP TUTORIAL.</h2>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a>&go to <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b><span style="background-color:#ffffcc">[Always remember to backup your template.]</span>Check the box next to <span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"></head></font></span> by pressing <b>CTRL+F.</b>On getting that,Copy-Paste the code below directly<font size="4">above/before</font><p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=<span style="color:red"><b>USERNAME</b></span>&amp;apiKey=<span style="color:red"><b>YOURAPIKEY</b></span>"></script> <script type="text/javascript" charset="utf-8"> BitlyClient.addPageLoadEvent(function(){ BitlyCB.myShortenCallback = function(data) { // this is how to get a result of shortening a single url var result; for (var r in data.results) { result = data.results[r]; result['longUrl'] = r; break; } document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text'value='" + result['shortUrl']+ "' name='bitlyurl'/&gt;"; } BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback'); }); </script></span></p>Replace <span style="color:red"><b>USERNAME</b></span> with the name you supplied while registering at bit.ly and also replace <span style="color:red"><b>YOURAPIKEY</b></span> with the <a href="http://bit.ly/a/your_api_key" target="_blank"><span style="color:red">key</span></a> assigned to your account.<p><font size="5">STEP 2»</font></p>Search for this line of code[CTRL+F]<p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><div class='post-footer-linepost-footer-line-3'><span style="color:red"><b>PLACE SCRIPT HERE</b></span></div></span></p>Replace “PLACE SCRIPT HERE” in the code above with this»»<p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><b:if cond='data:blog.pageType =="item"'><form id='shorturl'/></b:if></span></p>Now,<b>Preview & Save</b> your template.<p>You should now have a shortened url in all your blog posts. If you encountered any problem trying this,don't hesitate to leave a commen behind.

You might have noticed some blogs having shortened urls at the top/bottom of every post with a “Share this post” text. This is a very nice ...

Baca selengkapnya »

“BOOKMARK THIS SITE” WIDGET FOR BLOGGER.

́Bookmarking widget̀ in my perspective,is one of the ways you can retain your blog's visitors. Some people tend to forget/ignore bookmarking a site even if they like the post. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfxQpVEfRstx_2UQ-IlRRNR7Fyk4FModS5rNIeNlN-2veRlb0uLnOpBJ2kCAorH1_ZNPYt48jgB48mAz7QguwAZgYYIwc0aw7VuLp5QAiY6hBs8O7Wrcu5FDEQ8xKGkoUbyjR0qau1Qo/">Having the widget installed in your blog can help prevent that.<h2>Bookmark script.</h2><script type="text/javascript"> /*********************************************** * Bookmark site script- © Dynamic Drive DHTML code library. * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/for full source code * Shared by SOLJAR2 @ http://freebie-planet.blogspot.com/ ***********************************************/ function bookmarksite(title,url){ if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } </script> <a href="javascript:bookmarksite('<span style="color:red"><b>YOUR BLOG/SITE NAME</b></span>', '<span style="color:red"><b>YOUR BLOG URL</b></span>')"><span style="color:blue"><b>BOOKMARK THIS SITE!</b></span></a><h2>HOW TO USE THIS WIDGET</h2>Login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger acc.</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> >> </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>. Now scroll down till you see "HTML/JAVASCRIPT" and select ADD. Just copy/paste the code above and select SAVE.<h3>CUSTOMIZATION.</h3>Change the texts in red above accordingly i.e<span style="color:red"><b>YOUR BLOG/SITE NAME</b></span> and <span style="color:red"><b>YOUR BLOG URL.</b></span><p>To make the bookmark button appear as an image instead of a text,replace <span style="color:blue"><b>BOOKMARK THIS SITE!</b></span> in the code above with» <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfxQpVEfRstx_2UQ-IlRRNR7Fyk4FModS5rNIeNlN-2veRlb0uLnOpBJ2kCAorH1_ZNPYt48jgB48mAz7QguwAZgYYIwc0aw7VuLp5QAiY6hBs8O7Wrcu5FDEQ8xKGkoUbyjR0qau1Qo/" alt="<span style="color:blue"><b>Text to be displayed if browser's image is turned off"/></b></span></p>THAT'S ALL.

́Bookmarking widget̀ in my perspective,is one of the ways you can retain your blog's visitors. Some people tend to forget/ignore bookmar...

Baca selengkapnya »

HOW TO SHOW/HIDE BLOGGER WIDGETS ON PARTICULAR PAGES.

When you add a new <a href="http://freebie-planet.blogspot.in/search/label/widget%20."><span style="color:blue">widget/gadget</span></a> on your blog,it automatically displays on your blog's homepage,<a href="http://freebie-planet.blogspot.in/2012/05/create-static-pages-on-blogger.html"><span style="color:blue">static pages</span></a>and post-pages.<br />Whereas,there are some widget which is not needed in particular areas of your blog.<br />E.G,Widgets like <a href="http://freebie-planet.blogspot.in/2012/04/related-posts-widget-for.html"><span style="color:blue">Recent comments,</span></a><a href="http://freebie-planet.blogspot.in/2012/04/related-posts-widget-for.html"><span style="color:blue">Related posts</span></a>,<a href="http://freebie-planet.blogspot.in/2012/04/recent-post-widget-for-blogger.html"><span style="color:blue">Recent posts</span></a>,<a href="http://freebie-planet.blogspot.in/2012/05/top-commentators-widget-for-blogger.html"><span style="color:blue">Top commentators</span></a>etc...which are not needed in <a href="http://freebie-planet.blogspot.in/2012/05/create-static-pages-on-blogger.html"><span style="color:blue">static pages</span></a> &sometimes homepage are displayed everywhere,thereby flooding your blog with extraneous <a href="http://freebie-planet.blogspot.in/search/label/widget%20."><span style="color:blue">widgets.</span></a><p>Fortunately,there are some conditional tags which will help solve this problem.<br />A Conditional tag consists of two sections of codes i.e,A <b:if+condition> and a matching end tag which is </b:if><h2>HOW TO DISPLAY/HIDE WIDGETS ON BLOGGER.</h2><ul><li>To display/hide widgets on specific pages,you have to know that particular <span style="color:red">widget's id</span> first[You can leave a comment below if you don't know how to get it.]</li><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a> » <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b></li><li>Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span>and search for the widget's Id.</p></li></ul><h2>APPLYING CONDITIONAL TAGS.</h2>On getting the widget's id,you will get something like this»<br /><b:widget id='HTML1' locked='false' title='' type='HTML'><br /><b:includable id='main'><br /><span style="background-color:#cc99cc"><span style="color:#99FFFF"><b>CONDITIONAL TAG GOES HERE</b></span></span> <!-- only display title if it's non-empty --><br /><b:if cond='data:title != &quot;&quot;'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><br /><b:include name='quickedit'/><span style="background-color:#cc99cc"><span style="color:#99FFFF"><b>CLOSING TAG.</b></span></span><br /></b:includable><br /></b:widget><br /><p>Below are the conditional tags to replace with the ones in the widget above.</p><h3>TO SHOW A WIDGET ONLY IN HOMEPAGE.</h3><span style="background-color:#cc99cc"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><h3>SHOWING WIDGET ONLY IN LIST PAGES.</h3><span style="background-color:#FFCC00"><b:if cond="data:blog.pageType == "index""></span><h3>SHOW WIDGET ON ONLY POST PAGES.</h3><span style="background-color:#33CC99"><b:if cond='data:blog.pageType == "item"'></span><h3>SHOW WIDGET ON A SPECIFIC PAGE.</h3><span style="background-color:#FFFFCC"><b:if cond='data:blog.url == "URL OF PAGE"'></span><h3>SHOW WIDGET ON ARCHIVE PAGES ONLY.</h3><span style="background-color:#FF99CC"><b:if cond='data:blog.pageType == "archive"'></span><h3>SHOW WIDGET ONLY ON STATIC PAGES.</h3><span style="background-color:#00FFFF"><b:if cond='data:blog.pageType == "static_page"'></span><h3>SHOW WIDGET ON BOTH POST & STATIC PAGES.</h3><span style="background-color:#CC9999"><b:if cond='data:blog.url == data:post.url'></span><h3>SHOW WIDGET ON ONLY LABEL-SEARCH PAGES.</h3><span style="background-color:#FF9900"><b:if cond='data:blog.searchLabel'></span><p><b>NOTE:-</b>Whenever you use any of the codes above,do not forget to include the matching end tag,i.e <font size="7"></b:if></font></p><font size="3">ENCOUNTERED ANY DIFFICULTY?<br />DO NOT FORGET TO LEAVE A COMMENT BEHIND!!!</font>

When you add a new widget/gadget on your blog,it automatically displays on your blog's homepage, static pages and post-pages. Whereas,t...

Baca selengkapnya »

SOCIAL SHARING WIDGET FOR BLOGSPOT.

Previously,I wrote on how to add stylish<a href="http://www.freebie-planet.blogspot.com/2012/05/stylish-open-heart-bookmarking.html" target="_blank">open heart bookmarking widget</a> on blogger& today,I'll be giving some cool sharing widget to integrate on your blog.<p>This widget contains: facebook,twitter,digg,stumble linkedin and technorati buttons which will appear at the buttom of all your posts.<br />Sharing widget as we all know,is very useful on blogs to make it easier for your blog visitors to mention an article on their favourite social site,thereby increasing the number of traffic & obtaining favourable S.E.O on search engines.<h3>HOW TO ADD THE SHARE WIDGET ON YOUR BLOG.</h3>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a> » <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b><span style="background-color:#ffffcc">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"><data:post.body/></font></span> by pressing <b>CTRL+F.</b><p>Now,copy/paste the code below just <font size="6">after</font> <font size="3"><data:post.body/></font>.</p><xmp><b:if cond='data:blog.pageType =="item"'><div style='border:1px solid#E2E2E2;width:100%;position:relative;margin-top:15px;'></div><div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:red;position:relative;top:12px;'><center>If you found this article useful,kindly take 5 seconds to share it!!!</center></div><table align='center' cellpadding='8' cellspacing='1' id='shareit'><tr><td><a class="external" expr:href=""http://www.facebook.com/share.php?u="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Facebook"><img alt="Share on facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcr6UxX9SzqciejIuORNjMvX-DxVVvFI64IoZLEj2i-ZYJZEelj60gRg8-k6Jtem4F9yHOE-RM3tHpSWgo6nT5X9YSclx9R_oSPSoHNIyYxxjtZfJHKpn0ov21pLcQJChO_4TEmZkjEbY/h120/1.PNG"/></a></td><td><a class="external" expr:href=""http://twitter.com/home?status=Reading:" + data:blog.title +" - " + data:post.url + " (@NAME)"" rel="nofollow" target="_blank" title="Tweet This!"><img alt="Tweet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKOGFKaABik_Z8zDYV5MVlxNxTvXHv43y7C-5sYrp5FTcqS50ols2P36xmLtGPb6zFt_dzHSvlEcU8Xa5XSvFcr2KYcdWGSXnpe_NBwYagWkMPObtAkrlk7HM0YmaKVaUg_NK5G4wkqsQ/h120/6.PNG"/></a></td><td><a class="external" expr:href=""http://technorati.com/faves?add="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Technorati"><img alt="Technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinVzzqs3z02023jVFKLhgVkxnVatMHeYKHVPxub-nyDIvhhmKA1Vlyui5pbGpSaJuc4Tz3TgJjmklzQAlPTw5KLLQYK0J2sOpztgXPtW73RPGmpMlSTPZcwaw1RPdYG9MCXdmUpEP0a7A/h120/5.PNG"/></a></td><td><a class="external" expr:href=""http://del.icio.us/post?url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on del.icio.us"><img alt="Delicious!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln56HHsTZpjTNcx5sP7aqhnOuFSa8o2L-E_zoaqEGn3F499xQebnbF2h4bYSxQCPvhcM4C_3X9e6YHfWKhyphenhyphencN_Gya-4P9EHhL116lKPfWzPRnHIATsmRdacGB3D2l0sfYCuDMipTdVT0/h120/3.PNG"/></a></td><td><a class="external" expr:href=""http://digg.com/submit?phase=2&url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Digg this!"><img alt="digg it!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG1-SEQcA8ACYgBlLb1EblJOljtp1t-Uy2X6xoJW5hZ5unbuuqht82sdSKANl4pBDt1kswdZpIpzod5tNusZJs9aAhaidusXHL7xRe2FPaqdu_wZsnGjLMPcXkFaNp6_ez3obsfoy_tw/h120/2.PNG"/></a></td><td><a class="external" expr:href=""http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Linkedin"><img alt="linkedin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSF1zM7romuPs4MchJ9hLXVNQ2tmYhPZA9C-XZ5JhLZb0iaSbMQOVFwokQ0FdmutncEYGV9EArR3GHtsz6hOTkXO_QfWA5V9yGiztjaTiO9LYK4hxWPAI-4qa45rrD6pAO-6zYUBRDbQ/h120/4.PNG"/></a></td><td><a class="external" expr:href=""http://www.stumbleupon.com/submit?url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Stumble upon somethinggood? Share it on StumbleUpon"><img alt="Stumbleupon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXUNkChOJp7JwTKyb6cpuK6coFA6Cyob2Gym66euwWAt_WLXZRb8y2daZ_aZubJdOAcWGY1HpthnZ1nQVcuWXrAvdLsL2iyHOUooInrcLuP4WJsSjoLCMqJtrgYk2Z79400NjNt-F9YU/h120/7.PNG"/></a></td></tr></table></div></b:if></xmp>Next,search for <font size="6">]]></b:skin></font> and paste the codes below directly <font size="6">above/before</font> it.<xmp>#shareit{width:100%px;height:50px;border:0px solid red;position:relative;} #shareit tr td img{width:50px;height:50px;position:relative;}</xmp>DONE!!!.Just preview your blog & <font size="4">save</font> it if there are no errors.

Previously,I wrote on how to add stylish open heart bookmarking widget on blogger& today,I'll be giving some cool sharing widget to...

Baca selengkapnya »

STYLISH OPEN-HEART BOOKMARKING WIDGET/GADGET FOR BLOGSPOT.

This is one of the best bookmarking widget I've come across.<img align="left" alt="openheart.jpg" src="http://farm8.staticflickr.com/7075/7272912266_bb8bbdaf28_t.jpg"><br />The bookmarking widget is made in form of <b>heart</b>like seen in the image above,and whenever you mouse hover it,the heart slides open and several bookmarking buttons such as <b>facebook,twitter,linkedin,stumbleupon,pinterest</b> etc are revealed for your blog visitors to use.<p>You can also <a href="http://www.freebie-planet.blogspot.com/2012/04/add-floating-share-box-to-your-blog.html" target="_blank"><span style="color:red"><b>visit this post</b></span></a> for another method of adding bookmarking widget in floating form.</p><h3>STEPS ON HOW TO ADD THE WIDGET ON YOUR BLOG.</h3>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger Account.</b></span></a><br />Go to <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b><span style="background-color:#ffffcc">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"></head></font></span> by pressing <b>CTRL+F.</b><p>On getting that,just copy/paste the code below,directly <font size="4">above/before</font> it.</p><p style="background-color:#ffffcc"><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><br /><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><br /><script type='text/javascript'>stLight.options({publisher:&quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script><br /><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/></p>Having done that,the next step is to search for <font size="6"></body></font>[CTRL+F]<br />Now,copy/paste the code below directly <font size="7">above/before</font></body><p style="background-color:#ffffcc"><div style='<span style="background-color:white">position:fixed; bottom:2%;left:2%;</span>'><br /><div class='shareEgg' id='shareThisShareHeart'/><br /></div><br /><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://freebie-planet.blogspot.com/2012/05/stylish-open-heart-bookmarking.html" target="_blank"><span style="color:red">[GET THIS]</span></a></p>Just <b>preview and save</b> your template.<br /><span style="color:red">NOTE:-THIS WIDGET HAS BEEN SET TO BE DISPLAYED AT THE BOTTOM-CORNER OF YOUR BLOG.TO CHANGE IT,PLAY AROUND WITH THE NUMBERS HAVING WHITE BACKGROUND ABOVE TILL YOU'RE SATISFIED.</span><br />That's all.

This is one of the best bookmarking widget I've come across. The bookmarking widget is made in form of heart like seen in the image abov...

Baca selengkapnya »

CSS RELATED POST WIDGET.

<img align="left" alt="relatedposts.jpg" src="http://farm9.staticflickr.com/8003/7270510484_49bffe3d8a_t.jpg">In one of my <a href="http://freebie-planet.blogspot.com/2012/04/related-posts-widget-for.html" target="_blank"><span style="color:red"><b>previous posts,</b></span></a>I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to embed the codes into their template,this is a nice way of doing that.<h4>HOW TO ADD THE WIDGET ON YOUR BLOG.</h4>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger Account.</b></span></a><br />Go to <b><span style="color:red">Design/Layout</span></b><b>»»<span style="color:red">Edit HTML</span></b>.<span style="background-color:#FFCC99">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:#ccff00"><span style="background-color:#cccccc"><b></head></b></span></span>by pressing <b>CTRL+F.</b><p>On getting that,just copy/paste the code below directly <font size="3">before/above</font> it.</p><p style="background-color:#FF9966"><!--Related Posts with thumbnails Start--><br /><!-- remove --><b:if cond='data:blog.pageType ==&quot;item&quot;'><br /><style type="text/css"><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia,&#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage="<span style="color:red">http://farm8.staticflickr.com/7104/7267555714_285261d73d_t.jpg</span>";<br />var maxresults=<span style="color:#ccff33">5</span>;<br />var splittercolor="#d4eaf2";<br />var relatedpoststitle="Related Posts";<br /></script><br /><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails End--></p><p><big>NOTE»</big><br />When a post has no image,a default image is shown.To change the picture,get the address of an image,then change it with the url in <span style="color:red">red</span> above.<br />Likewise,to change number of posts,replace 5 in the code above.</p><big>Next</big>,search for either of these codes<br /><p style="background-color:#FF9933"><div class='post-footer-line post-footer-line-1'></p><big>Can't find that?</big>,search for this instead.<p style="background-color:#FF9933"><p class='post-footer-line post-footer-line-1'></p>On getting any of those two,copy/paste the code below directly <font size="4">after</font> it.<p style="background-color:#FF9933"><!-- Related Posts with Thumbnails Start--><br /><!-- remove --> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast!= &quot;true&quot;'><br /></b:if><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name+ &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp; max-results=<span style="color:#ccff33">5</span>&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --> </b:if><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><a href='http://freebie-planet.blogspot.com'>Home of internet freebies.</a><br /></b:if></b:if><br /><!-- Related Posts with Thumbnails End--></p>CHANGE 5 ABOVE TO THE NUMBER OF POSTS YOU WANT SHOWN.<p>Now most importantly,save your template,and that's it.<br />Adapted from HELPLOGGER!!!.

In one of my previous posts, I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to emb...

Baca selengkapnya »

GOOGLE +1 BUTTON FOR BLOGS.

As we all know,'google +1' button is one of the essential buttons a blog should have to become more popular.<img align="left" alt="google +1" src="http://searchengineland.com/figz/wp-content/seloads/2011/03/Picture-92-300x209.png"><p>This button is similar to facebook & twitter send buttons.</p><h3>HOW TO ADD THE BUTTON TO YOUR BLOG.</h3>To add this button,just follow the steps below carefully.<p>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger Account.</b></span></a><br />Go to <b><span style="color:red">Design/Layout</span></b><b><span style="color:blue"> →→ </span><span style="color:red">Edit HTML</span></b>.<span style="background-color:b0b0b0">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"></head></font></span> by pressing <b>CTRL+F.</b></p>On getting that,copy/paste the code below directly <span style="color:red"><font size="4">ABOVE/BEFORE</font></span> it.<p><script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'en-US'} </script></p>Now,to add this button directly below your <b>post title</b>,search for <span style="color:red"><big><data:post.body></big></span> and paste the codes below directly <b>above/before</b> <data:post.body>,but if you would like it after your blog posts,then paste the code <b>below/after</b> <data:post.body>.<h6>HERE'S THE CODE</h6><p style="background-color:#c08080"><div style='float:left'><g:plusone size="<span style="color:red">standard</span>" expr:href="data:post.url"/></div></p>You can also change the size of the button above by changing the text in red to either <b>small,medium or tall</b>.<br />All that is left for you to do now is preview your blog to ensure there are no errors,and afterwards <big>SAVE YOUR TEMPLATE.</big>

As we all know,'google +1' button is one of the essential buttons a blog should have to become more popular. This button is similar ...

Baca selengkapnya »

PAGE NAVIGATION/PAGINATION FOR BLOGGER BLOGS.

Page Pagination/navigation widget is a very useful widget every blog should have.<br />The widget replaces blogger default 'next','previous' and 'home' link at the buttom of every post.Likewise,it makes your blog look more professional.<h3>HOW TO ADD THE PAGINATION WIDGET.</h3>Login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger acc.</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> >> </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>.<br />Now scroll down to where you see "HTML/JAVASCRIPT" and select ADD.<br />Just copy/paste the code below and save the widget.<xmp><style type="text/CSS">.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #7AA1C3; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #7AA1C3; background-color:#F6F6F6; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #7AA1C3; background: #F6F6F6; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #7AA1C3; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#7AA1C3; } </style><br /><script type="text/JavaScript">function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==" .com /"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount = 2; var displayPageNum = 5; var upPageWord = 'Previous'; var downPageWord = 'Next'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord+'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="COLOR:#000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script><br /><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script></xmp>THAT'S ALL!!!<br />Note:-Save the widget below <b>'Blog posts'</b>.

Page Pagination/navigation widget is a very useful widget every blog should have. The widget replaces blogger default 'next','pr...

Baca selengkapnya »