Free Download Full Version Software: Blogger Widget

Showing posts with label Blogger Widget. Show all posts

Awesome Recent Comments Widget 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/AVvXsEjdO2XtUrz48Lt2Rr_t0__lZC647wd-Tn1GSLAAi3jIWOaiO987U5Qt7XB9vPk29XySLkAhfA1sw3qg4CnO-C6qXEdst2UcyPQVDvhQ_vruNjk7GBfMaGg3VW9BAu18hGxx5RehuehgodI/s1600/Recent-Comments-Widget-Blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdO2XtUrz48Lt2Rr_t0__lZC647wd-Tn1GSLAAi3jIWOaiO987U5Qt7XB9vPk29XySLkAhfA1sw3qg4CnO-C6qXEdst2UcyPQVDvhQ_vruNjk7GBfMaGg3VW9BAu18hGxx5RehuehgodI/s1600/Recent-Comments-Widget-Blogger.jpg" /></a></div>
Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. Before i have share <a href="http://rexhacker.blogspot.com/2014/03/peeling-stickers-social-media-widget.html" target="_blank">Peeling Stickers Social Media Widget For Blogger</a> i hope you will like my this post and also will like my all old posts also. 
Before this i have share about <a href="http://rexhacker.blogspot.com/2014/03/animated-sassy-social-bookmark-gadget.html" target="_blank">Animated Sassy Social Bookmark Gadget For Blogger</a>. 
 
There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System. 
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment. 
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template. 
Now Lets Start to <a href="http://rexhacker.blogspot.com/2014/04/awesome-recent-comments-widget-for.html" target="_blank">Add Awesome Recent Comments Widget For Blogger</a> 
 
<ul style="text-align: left;">
<li>Sign In to Blogger Dashboard</li>
<li>Select Layout --> Click on Add a Gadget</li>
<li>Take HTML/Javascript from the list</li>
<li>Give the Title and Copy the below code to it and Save</li>
</ul>
 
<ul style="background-color: white; font-family: Cuprum; font-size: 15px; line-height: 21.559999465942383px; margin: 0.5em 0px; padding: 0px 2.5em;">
</ul>
<div>
<pre style="background-color: #ebb628; border: 1px solid black; height: 400px; list-style: none; margin-bottom: 10px; outline: 0px; overflow: auto; padding: 0px; vertical-align: baseline;"><script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://netoopsblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<a style="display:none" href=http://rexhacker.blogspot.com>Recent Comments Widget</a><style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

</style></pre>
Note: You Can Copy This Code From This <a href="http://pastebin.com/dg1qtk0F" target="_blank">Link</a>. 
 </div>
<div>
 
<ul style="text-align: left;">
<li>Change the RED highlighted with your blog name</li>
</ul>
If you want different Styles for this Widget, Please visit again I will post soon.</div>
<div>
 
<ul style="text-align: left;">
<li>Go to Layout --> Click on Add a Gadget</li>
<li>Select Feed from the list and give the following URL</li>
</ul>
</div>
<div>
<blockquote class="tr_bq">
http://rexhacker.blogspot.com/feeds/comments/default</blockquote>
<ul style="text-align: left;">
<li>Change the RED marked portion with your Blog URL </li>
</ul>
 
<ul style="background-color: white; font-family: Cuprum; font-size: 15px; line-height: 21.559999465942383px; margin: 0.5em 0px; padding: 0px 2.5em;">
</ul>
A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name Etc. 
Using this method you have only limited options. 
 
<ul style="text-align: left;">
<li>Click Save</li>
<li>Congratulations you have Done.</li>
</ul>
 
</div>
</div>

Awesome Recent Comments Widget For Blogger

Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your...

12:06:00 AM

Peeling Stickers Social Media Widget For Blogger

<center>
<a href="https://www.facebook.com/RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23TOqO_FroHHqEQCeoXFWQY4cT3q6OL0nbvQlZjFRW03pIsVqyh9EUPO9Lshwr_mnZzfix8uVDx5zAPmTFOSo7J5aXvRzemq_3JlWhajgA8ZBSn9UyfcjBfm71mFvq6qEkcf0qm_sHM_g/s1600/bloggertrix-facebook.png" /></a>
<a href="https://twitter.com/RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMQqw71aJO28gFBBOZEHkhBRUCq8-ZbcRimkLCKLuNHPL5L1utLU08FpqVWkcEjpQE7sLRlBuIlavg_rW5-HRMOTMuJW3so8Hfk4E0z2Ka5R6MpeBjf3UKcQzNak5ZC8akjuysEpaYabS/s1600/bloggertrix-twitter.png" /></a>
<a href="http://www.stumbleupon.com/stumbler/RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDGx6wvKhJFLQLcHSopdf9chHknfaZWNHHlSQpA1hUc31OXDnf0Gnzk5WKoywAAVT9YwtnsPt-79NGY5lfdr-lhdaEwuSaU3zr1YsuXPs_aNBx87G3R2RBwi8DOt0d5mxBBmjZOT2OM7s/s1600/bloggertrix-stumbleupon.png" /></a>
<a href="http://feeds.feedburner.com/RexHacker" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMxBFYnrZld5Ckai0HeDQVVrwHqf1-s2ln4OGrH09nsiUutmT7K1-wKLugdGiNgi0tCHxklO4Ig5HcuIAI-ZBTDl2rCJJVbQwTHGNOWjoUAftZCmHcSubRTDSeZynqAHeTlBF7fV8zz0u/s1600/bloggertrix-rss.png" /></a></center></pre>
Note: You Can Copy This Code From This <a href="http://adf.ly/iWc2X" rel="nofollow" target="_blank">Link</a>. 
 
4. After Paste Above Code. 
 
* Replace RexHacker With your Facebook Username 
 
* Replace RexHacker With your Twitter Username 
 
* Replace RexHacker With your Stumbleupon Username 
 
* Replace RexHacker With your Feedburner Username 
 
5. Now save your HTML/Javascript. 
 
6. You Are Done.</div>

Peeling Stickers Social Media Widget For Blogger

In this post I am going to explain you how to add peeling social media sharing buttons for your blog. This is just widget. You ca...

12:46:00 PM

Animated Sassy Social Bookmark Gadget 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/AVvXsEi0l2e59ZrdMPsM7WIq8k9WSwT0yEIAAxIJduncEdo26E-IRiv-SCh7psqG2NAmJdnE7-XBiInEMIeUm31p8XBXsEU72T4rnc9owgFDPIFyLWca__7iiOEZUbySqnrfmDfQe3GNx_h0WSY/s1600/Animated+Sassy+Social+Bookmark+Gadget_wm.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Animated Sassy Social Bookmark Gadget For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0l2e59ZrdMPsM7WIq8k9WSwT0yEIAAxIJduncEdo26E-IRiv-SCh7psqG2NAmJdnE7-XBiInEMIeUm31p8XBXsEU72T4rnc9owgFDPIFyLWca__7iiOEZUbySqnrfmDfQe3GNx_h0WSY/s1600/Animated+Sassy+Social+Bookmark+Gadget_wm.jpg" title="Animated Sassy Social Bookmark Gadget For Blogger" /></a></div>
I know how much you all like social bookmarking gadgets and widgets especially unique gadgets that can catch the eye of readers and get them bookmarking your blog.Today I have a very cool social bookmarking gadget
 with a stylish animated effect.With the Sassy bookmarks gadget a basic 
share button is placed in the corner of your blog, then on hover 6 icons
 for the main social bookmarking websites appear in a semicircle.The 
buttons that appear are for Pinterest,
 Google+, Facebook, Twitter, Tumblr and Email.Below we have a live demo 
then check out the tutorial to add the Sassy Bookmarks to Blogger. 
Before i have share <a href="http://adf.ly/iWhtd" target="_blank">Add Live Chat Widget to Blogger</a>, i hope you will like this widget for your blogger, and before this i have share one more cool blogger widget for your blog that is <a href="http://adf.ly/iWjHy" target="_blank">How to Add Cool Jquery Popup Facebook Like Box to Blogger</a>. You can also <a href="http://adf.ly/iWjQF" target="_blank">Add Animated Flying Twitter Bird Widget to Blogger</a>. 
 
Now Lets Start to <a href="http://adf.ly/iWhZ3" target="_blank">Add Animated Sassy Social Bookmark Gadget For Blogger</a>. 
 
<div class="separator" style="clear: both; text-align: left;">
<a href="http://demo-blog-18.blogspot.com/"><img alt="http://adf.ly/iWjxV" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZebagmd4FVH2TAGaCMvR9sklKdJfhACrsDFJNF64avx-CzUxtIG8FUsIy40iQaEpqUGNFisyIvvzEzeSYITjpDoYW5PbrBfD9WQ7W4Kq47Xywn6UJH2hK3-ouy8aGmY-8QSYR3F__Yg/s1600/view_demo.gif" title="View Demo" /></a></div>
 
1. Log in to Your Blogger Account And Go to Dashboard. 
 
2. Choose Template > Edit HTML. 
 
3. Find The Following Code In Your Blogger Template. 
</body> 
 
4.  Copy And Paste The Following Code Directly Before </body> Tag. 
 
 <div class='shr_ss shr_publisher'> </div>   <script type='text/javascript'> var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}}; </script>   <script type='text/javascript'> (function() { var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true; 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-ss.min.js&quot;; var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s); })(); </script><a href='http://rexhacker.blogspot.com/search/label/Blogger%20Widget'>Blogger Widgets</a> - <a href='http://rexhacker.blogspot.com/search/label/Blogger%20Template'>Blogger Templates</a>   
Note: You Can Copy This Code From This <a href="http://adf.ly/iWkRf" rel="nofollow" target="_blank">Link</a>. 
 
5. Save Your Template And You Are Done.</div>

Animated Sassy Social Bookmark Gadget For Blogger

I know how much you all like social bookmarking gadgets and widgets especially unique gadgets that can catch the eye of readers and get t...

9:40:00 PM

Add Live Chat widget to 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/AVvXsEi6OKreGotvMKe7t7hHgdIkDxpyV1aw9Wwnd3enQM12bk1q5wt26OsvPcfCZMGAw6dNKIYD4PybMuJRTny9YpP-OjXz3ytnm4HV-fpoLRfquzabS4EVMNW_A359SZNxgsW8arlAckMDsLA/s1600/chatroll+live.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add Live Chat widget to Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OKreGotvMKe7t7hHgdIkDxpyV1aw9Wwnd3enQM12bk1q5wt26OsvPcfCZMGAw6dNKIYD4PybMuJRTny9YpP-OjXz3ytnm4HV-fpoLRfquzabS4EVMNW_A359SZNxgsW8arlAckMDsLA/s1600/chatroll+live.png" title="Add Live Chat widget to Blogger" /></a></div>
Today in this article we will discuss about an exciting live chat widget
 by chatroll.  With the help of this widget your blog visitors can chat 
with each other through a live chat box. It is very helpful in creating 
small discussions among your blog visitors. Adding this live chat widget
 to blogger is very easy and is a matter of few minutes. 
i hope you will like my this widget also like my old widget sharing. Before i have share  <a href="http://adf.ly/iWjQF" target="_blank">Add Animated Flying Twitter Bird Widget to Blogger</a> and a lot of people like and appreciate and before this tutorial i have share one more great widget for my friends that is <a href="http://adf.ly/iWjHy" target="_blank">Add Cool Jquery  Popup Facebook Like Box to Blogger</a>. 
Don't risk the success of your live events. Trust Chatroll to help you reach more people, engage audiences and grow your market. 
Friends now we will start to how to <a href="http://adf.ly/iWhtd" target="_blank">Add Live Chat Widget to Blogger</a>. 
 
<h3>
Part 1: Getting Live chat Widget Code </h3>
 
1. Open <a href="http://chatroll.com/" rel="nofollow" target="_blank">Chatroll</a> website and Click on Signup For Free button. 
 
2. At next screen create your new account or login with your facebook account. In my case I use Facebook login Method. 
 
3. Once you logged in your account then Click on Create a New Live Event option. 
 
4. Next page will be your live widget settings page. Enter Name for your widget and click Continue option. 
 
5. Next screen is about platform selection screen. Select Blogger option. 
 
6. Code for your live chat widget will appear. Copy this code and click Continue option. 
 
7. Now Click on Go to Settings Now option. 
 
8. Now a final page will appear which contains your live chat widget 
settings like color scheme of your widget. Configure your widget here 
and save the settings by clicking on Save Settings option. 
 
<h3>
Part 2: Adding Live Chat Widget to Blogger</h3>
<div style="text-align: left;">
1. Log in to your blogger account > Dashboard and select your blog.</div>
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
2. Select Layout<a href="http://s12.postimg.org/suvfoix1l/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s12.postimg.org/suvfoix1l/Layout.png" /></a>Option and Click on Add a Gadget option.</div>
<div style="text-align: left;">
3. Select HTML/JavaScript widget.</div>
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
4. In the HTML/JavaScript widget paste the code of the live chat widget which is obtained in the Step 6 in Part 1 of the tutorial.</div>
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
5. Save the widget and you are Done.</div>
</div>

Add Live Chat widget to Blogger

Today in this article we will discuss about an exciting live chat widget by chatroll. With the help of this widget your blog visitors c...

11:25:00 AM

How to Add Cool Jquery Popup Facebook Like Box To 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/AVvXsEi8QQb7fI6haZ6AuDirrdAZWqJIHNRBJk-HaO8Zt4VGU7iBWVnMg4SiW7MIXBwEl73Mhd7ewkCRHiwQShRShveXfY2YXMeMpChl8hio877gyolaOQrFlVoPz8apI1pn_feOXu7j1ZwdU8U/s1600/facebook+popup.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cool Jquery Popup Facebook Like Box To Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QQb7fI6haZ6AuDirrdAZWqJIHNRBJk-HaO8Zt4VGU7iBWVnMg4SiW7MIXBwEl73Mhd7ewkCRHiwQShRShveXfY2YXMeMpChl8hio877gyolaOQrFlVoPz8apI1pn_feOXu7j1ZwdU8U/s1600/facebook+popup.png" title="Cool Jquery Popup Facebook Like Box To Blogger" /></a></div>
Well here i am making a <a href="http://adf.ly/iWlxm" target="_blank">Facebook</a> like popup box for blogger which is 
also nice to install.When you install it it and when someone visit you 
any blog page it will display on the front which ask you to like the 
page and its very simple and clean. Before i have share <a href="http://adf.ly/iWjQF" target="_blank">Add Animated Flying Twitter Bird Widget to Blogger</a>. 
A pretty good way to increase your website Traffic is to generate 
traffic using Social network, One of best option is Facebook, Insert / 
<a href="http://adf.ly/iWjHy" target="_blank">Add Facebook pop up like box</a> or widget to your website, its a Jquery 
widget and these days very popular among <a href="http://adf.ly/iWmRi" target="_blank">blogger gadgets</a>, in previous post i have share very cool and worthy sharing that is <a href="http://adf.ly/iWma4" target="_blank">How to Disable Right Click On Blogger For Images</a>. 
I hope you will like my these nice sharing and i will always try my best to share best things with my friends. 
 
Now Lets Start to Learn  <a href="http://adf.ly/iWjHy" target="_blank">How to Add Cool Jquery Popup Facebook Like Box To Blogger</a>. 
 
1. Log in to Blogger Account. 
 
<div class="separator" style="clear: both; text-align: left;">
2. Go to Dashboard > Layout<a href="http://s16.postimg.org/5lu0i3q0x/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Layout" border="0" src="http://s16.postimg.org/5lu0i3q0x/Layout.png" title="Layout" /></a></div>
. 
 
3. Click Add Gadget And Select HTML/Javascript. 
 
4. Paste Below Code. 
 
<pre style="background-color: #9fc5e8; border: 1px solid black; height: 300px; overflow: auto;"><style>#simplemodal-overlay{background-color:#aaaaaa;cursor:wait;}/* Container */#simplemodal-container{height:360px;width:360px;background-color:#fff;border:5px solid #000000;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;}
#simplemodal-container a.modalCloseImg{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRIoqtcSWrfFhwHCx92VRmETvw6_iGQzDk2Jy6FNdpwjpO9uCOfT3lmf2GJq5st1fmtm_s2u2HauOlnjmth6T_5ICmLUC0hJFI7Rn7JNuJZb2M4LD0LIqkhBzVvBBak8HcVtvAyBIwb8/s1600/Close-2-icon.png') no-repeat;width:40px;height:60px;display:inline;z-index:3200;position:absolute;top:-15px;left:350px;cursor:pointer;}
#simplemodal-container a.modalCloseImg:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2BHakZG-hKV0XeBjUEZJN0d1D4QWtt6xNXaWjJu1Zc0IRasFj7pnUYwa14271jMSzIMPQfpaOsVX8zk1b0wvipB9rSe6GoJRgbl7ZAT-byZJDAfYG1fQLvarkygbAyWdCNdPYyjYp4ZM/s1600/Close-2-icon+copy.png') no-repeat;width:40px;height:60px;display:inline;z-index:3200;position:absolute;top:-15px;left:350px;cursor:pointer;}
#simplemodal-container #basicModalContent{padding:8px;}#btfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#btfb a,#btfb a:hover,#btfb a:visited{text-decoration:none;}
.btbox-title{background:#16b7f4;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:2px solid #ddd;border: 1px solid 
#939191;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:15px;font-family:arial !important;}
.btbox-tagline{color:#999;margin:0;text-align:center;}#btsubs-container{padding:35px 0 30px 0;position:relative;}a:link, a:visited{border:none;}.demo{display:none;}</style>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/jquery2.js"></script>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/jquery.btrix.js"></script>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/bloggertrix1.js"></script><div style='display:none'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id='exit_content' style='padding:10px;'> <h3 class="btbox-title">
 <center>Like Us On Facebook</center>
</h3>
<center><div class="fb-like-box" 
data-href="https://www.facebook.com/RexHacker" 
data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div></center>Powered By <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://rexhacker.blogspot.com">Blogger widget</a> | </div></div>
</pre>
 Note: You Can Copy This Code From This <a href="http://adf.ly/iWmr2" rel="nofollow" target="_blank">Link</a>. 
 
5. Change https://www.facebook.com/RexHacker With Your Page URL. 
 
6. Save It And You Are Done.</div>

How to Add Cool Jquery Popup Facebook Like Box To Blogger

Well here i am making a Facebook like popup box for blogger which is also nice to install.When you install it it and when someone visit...

11:55:00 PM

Add Animated Flying Twitter Bird Widget to 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/AVvXsEj4XQ_hqJf4mel3fdMWx2pSmtXEJ4ZuJNdE9Za4q-eWCCxzi-qTB9RlOTSTrS3sv0fdlHjE7R486hoTJ4d-2ObpoSE-HAy9sjRUaV-Okq_F5LEzpANOqtvwdlUod4WOXl4WVuKL-Tx-qMI/s1600/Add-Animated-Flying-Twitter-Bird-Widget-to-Blogger-Blogs-Updated.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add Animated Flying Twitter Bird Widget to Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XQ_hqJf4mel3fdMWx2pSmtXEJ4ZuJNdE9Za4q-eWCCxzi-qTB9RlOTSTrS3sv0fdlHjE7R486hoTJ4d-2ObpoSE-HAy9sjRUaV-Okq_F5LEzpANOqtvwdlUod4WOXl4WVuKL-Tx-qMI/s1600/Add-Animated-Flying-Twitter-Bird-Widget-to-Blogger-Blogs-Updated.jpg" title="Add Animated Flying Twitter Bird Widget to Blogger" /></a></div>
Hello readers, <a href="http://adf.ly/iWjQF" target="_blank">adding twitter flying bird</a> in blogger is amazing. It is 
not just for fun. It is the best widget to sharing your blog by 
visitors. Each and every visitor who enters into your blog will see the 
flying bird. More than half of the people try to catch the bird (click 
on that bird). By clicking the bird they promote your blog in <a href="http://adf.ly/iWnRj" target="_blank">twitter network</a>. So that you will get more visitors from twitter. Before i have share <a href="http://adf.ly/iWma4" target="_blank">How to Disable Right Click On Blogger For Images</a>. Twitter is one of the top most social networking services which is used 
by people for community purpose like <a href="http://adf.ly/iWlxm" target="_blank">Facebook</a>. The bird will fly for the
 movement of cursor which is moved by blog visitors. More than half of 
the people living in the world having twitter account to index them in 
society. So that your blog will be promoted by sharing your blog in 
twitter easily with the help of this flying bird. I have share <a href="http://adf.ly/iWnp6" target="_blank">How to Redirect Blogger to Another Site</a>. 
I hope you will like my these articles, also will like this article <a href="http://adf.ly/iWjQF" target="_blank">Add Animated Flying Twitter Bird Widget to Blogger</a>. 
 
Now Lets Start to <a href="http://adf.ly/iWjQF" target="_blank">Add Flying Bird to Blogger</a>. 
 
1. Log in to Blogger Account. 
<div class="separator" style="clear: both; text-align: left;">
2. Go to Dashboard > Template ><img alt="Template" border="0" src="http://s21.postimg.org/am6sx4j0j/Template.png" title="Template" />Edit HTML<a href="http://s29.postimg.org/4h5ynqqyr/Edit_html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Edit HTML" border="0" src="http://s29.postimg.org/4h5ynqqyr/Edit_html.png" title="Edit HTML" /></a></div>
 
3. Copy The Below Widget Code. 
 
 <script type="text/javascript" src="http://yourjavascript.com/71110244313/suyb-twitter-bird.js"> </script> <script type="text/javascript"> var twitterAccount = "Rexhacker"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script> <a title='Blogger Widget by http://Rexhacker.blogspot.com' href="http://rexhacker.blogspot.com" target='_blank'>Blogger Widgets</a>  
 
<div style="text-align: left;">
Note: You Can Copy This Code From This <a href="http://adf.ly/iWoKE" rel="nofollow" target="_blank">Link</a>.</div>
4. Search For </body> Tag And Place Widget Code Just Before It. 
 
5. Change Your Twitter Account User Name. 
 
6. Save Your Template. 
 
7. You Are Done. Thanks.</div>

Add Animated Flying Twitter Bird Widget to Blogger

Hello readers, adding twitter flying bird in blogger is amazing. It is not just for fun. It is the best widget to sharing your blog by ...

10:44:00 PM

How to Disable Right Click On Blogger For Images

<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/AVvXsEjPp0g4032dkwG0CxO3jCTvCt2JRhLlqV8nyMkNAHrHJChLzxj8nyCv5Ipe89gCOJ3zXkMOCAA9ybCimecB2fL9daGLkfQ3SFT20-l3Jft27C-xk45OQNhKP74JlMVii9uHxXY2Ob9Nke8/s1600/disable+right+click+on+blogger+images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Disable Right Click On Blogger For Images" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPp0g4032dkwG0CxO3jCTvCt2JRhLlqV8nyMkNAHrHJChLzxj8nyCv5Ipe89gCOJ3zXkMOCAA9ybCimecB2fL9daGLkfQ3SFT20-l3Jft27C-xk45OQNhKP74JlMVii9uHxXY2Ob9Nke8/s1600/disable+right+click+on+blogger+images.jpg" title="How to Disable Right Click On Blogger For Images" /></a></div>
Have you noticed, that some sites do not allow their visitors using 
right mouse click while pointer is on the blog area. This option is 
useful for the site and blog owners, who want to minimize the 
possibilities of the content direct copying to other posts. Right click on any internet browser is very important element and we 
must use it when it comes to copy or editing texts and etc. It’s very 
important when it comes to webmasters too but some people may use it in
 a bad way, and you may want to make click right disabled on your blog. 
to protect you text, images links and etc. Before i have share <a href="http://adf.ly/iWnp6" target="_blank">How to Redirect Blogger to Another Site</a> and you can also visit <a href="http://adf.ly/iWpZL" target="_blank">Add Google Translate Gadget to Blogger</a>. I hope you will like these articles & also will like this <a href="http://adf.ly/iWma4" target="_blank">How to Disable Right Click on Blogger For Images</a>. 
 
<div class="separator" style="clear: both; text-align: left;">
1. Log in to Blogger And Go to Dashboard > Layout<a href="http://s21.postimg.org/5zkv8u3oz/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s21.postimg.org/5zkv8u3oz/Layout.png" /></a></div>
 
2. Click Add Gadget And Select HTML/Javascript 
 
3. Copy Paste Below Code. 
 
<pre style="border: 1px solid black; height: 100px; overflow: auto;"><script language="JavaScript1.2">

var clickmessage="Right click disabled on images!"

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script></pre>
 Note: You Can Copy This Code From This <a href="http://adf.ly/iWpov" rel="nofollow" target="_blank">Link</a>. 
 
4. Now Click On Save Button, You Are Done. </div>

How to Disable Right Click On Blogger For Images

Have you noticed, that some sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is ...

10:17:00 PM

How to Redirect Blogger to Another Website

<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/AVvXsEicaHvoBM5xF_x4MevU6e9MLRSudoskRm1xnxxF_02ecylgrqnjQNNS1SlWa6n5Tz14OJ7ceQfuX6Xy2JAZw6ieINgeGeR0-KE06SCxz4tqVZAGhYruc_9xM3aGyx06c8ouxgtXt1Jtvvs/s1600/redirect-blogger-blog-another-site.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Redirect Blogger to Another Website" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicaHvoBM5xF_x4MevU6e9MLRSudoskRm1xnxxF_02ecylgrqnjQNNS1SlWa6n5Tz14OJ7ceQfuX6Xy2JAZw6ieINgeGeR0-KE06SCxz4tqVZAGhYruc_9xM3aGyx06c8ouxgtXt1Jtvvs/s1600/redirect-blogger-blog-another-site.jpg" title="How to Redirect Blogger to Another Website" /></a></div>
There are a number of reasons you may want to automatically send 
visitors to your blog to another URL or from one blog to another.For 
example if you moved your blog, if you had two blogs and wanted to focus
 one just one and cover both topics.Automatically directing visitors to 
another URL is actually quiet easy and only requires a snippet of code 
added to the top of the template. In this post i will show you the code 
needed to automatically Redirect from a Blogger Blog to any other URL. Before i have share <a href="http://adf.ly/iWpZL" target="_blank">Add Google Translate Gadget to Blogger</a> i hope you will like this post also and before Translate Gadget i have also share <a href="http://adf.ly/iWqGf" target="_blank">Add Flying Letters Below Mouse Pointer Animation</a>. 
 
Lets Start to <a href="http://adf.ly/iWnp6" target="_blank">Redirect Blogger to Another Website</a>. 
 
Now Follow These 6 Steps. 
 
1. Log in to blogger  and Go to Layout >> Add Gadgets<a href="http://s16.postimg.org/u58eulp5d/addgadgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add a Gadgets" border="0" src="http://s16.postimg.org/u58eulp5d/addgadgets.png" title="Add a Gadgets" /></a> 
 
<div class="separator" style="clear: both; text-align: left;">
2. Click Add Gadget and select 'HTML/Javascript'<a href="http://s2.postimg.org/6qwzt9711/html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML/Javascript" border="0" src="http://s2.postimg.org/6qwzt9711/html.png" title="HTML/Javascript" /></a></div>
 
3. Paste below code 
 
<pre style="background-color: #9fc5e8; border: 1px solid black; height: 120px; overflow: auto;"><form name="redirect">
<center>
Your site will redirect within 
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds
</center>

var targetURL="http://www.RexHacker.Blogspot.com/"
var countdownfrom=10

var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
</script></pre>
Note: You Can Copy This Code From This <a href="http://adf.ly/iWqXE" rel="nofollow" target="_blank">Link</a>. 
 
4.   Replace  var target URL  with redirect URL 
 
5. Replace var countdownfrom value for your like. (redirect time) 
 
6. Click Save you are Done.</div>

How to Redirect Blogger to Another Website

There are a number of reasons you may want to automatically send visitors to your blog to another URL or from one blog to another.For e...

11:23:00 PM

Add Google Translate Gadget to 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/AVvXsEhwM6I40UVhaPP1Yrgtbr8LgnD3TCfHTq5hBaTRCJL3QBOy6YysGl1BHY1Evy1HoMeNU0Ew51HOOTrMar6buOiTCQTuIvK5iTsJEoJBO76RYmcGuVuWnEyI1CJ9FlCC94hbflnDS_0S7Ns/s1600/Translate+Blog+in+Other+Languages+with+Google+Translation+Widget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add Google Translate Gadget to Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwM6I40UVhaPP1Yrgtbr8LgnD3TCfHTq5hBaTRCJL3QBOy6YysGl1BHY1Evy1HoMeNU0Ew51HOOTrMar6buOiTCQTuIvK5iTsJEoJBO76RYmcGuVuWnEyI1CJ9FlCC94hbflnDS_0S7Ns/s1600/Translate+Blog+in+Other+Languages+with+Google+Translation+Widget.png" title="Add Google Translate Gadget to Blogger" /></a></div>
Today i am sharing Google Translate Gadget for your blogspot/website, 
with the help of this gadget you can easily translate your blog/website into any language. I hope you will enjoy this tutorial and will be must appreciate me. 
Its very nice and easy. 
You can check my previous post <a href="http://adf.ly/iWqGf" target="_blank">Add Flying Letters Below Mouse Pointer Animation</a> and before this i have shared one more interesting thing that is <a href="http://adf.ly/iWr07" target="_blank">Add Circle Image Style to Popular Post In Blogger</a>. 
Now we will start this tutorial. If you have any problem about this tutorial you can <a href="http://adf.ly/iWr9z" target="_blank">Contact Us</a>, we will try to explain it more. 
 
1. Sign In to your blogger account and click on "Pages" 
 
2. Click "Add Gadget " and select "HTML/JavaScript". 
 
3. Copy this below code and Save it. 
 
 
<script
 
src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>  
 
4. You can copy this code from this <a href="http://adf.ly/iWrQ8" rel="nofollow" style="background-color: white;" target="_blank">link</a>. 
 
5. Now you can see new blog gadget.
</div>

Add Google Translate Gadget to Blogger

Today i am sharing Google Translate Gadget for your blogspot/website, with the help of this gadget you can easily translate your blog/we...

11:21:00 PM

Add Flying Letters Below Mouse Pointer Animation

<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/AVvXsEjNVtir-tdCRzxJXQKE9xVJLfFRIRMyFzq3mlgpBI11vnUXuqUagGagmUINIC2LEjontJEhRi5SMb4KYYfngXR9TCjTEG1yxRODvG7bHUZ_v652vNi-U9TbISjUbUjekZ5c6nXP9IPd5ls/s1600/flying+letters+mouse+pointer.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVtir-tdCRzxJXQKE9xVJLfFRIRMyFzq3mlgpBI11vnUXuqUagGagmUINIC2LEjontJEhRi5SMb4KYYfngXR9TCjTEG1yxRODvG7bHUZ_v652vNi-U9TbISjUbUjekZ5c6nXP9IPd5ls/s1600/flying+letters+mouse+pointer.jpg" /></a></div>
How to setup <a href="http://adf.ly/iWqGf" target="_blank">flying letters below mouse pointer</a>. 
This a simple article 
that Spice your Blog. 
After inserting this Code,When you move mouse over 
your Blog, 
you will see that Letters you SET in the below code will 
flying like a Animation. 
Before i have share <a href="http://adf.ly/iWr07" target="_blank">Add Circle Image Style to Popular Post In Blogger</a>. 
Also i have share <a href="http://adf.ly/iWsm9" target="_blank">Multi Colored Random Post Widget For Blogger</a> i hope you will like my all posts. 
Always visit <a href="http://adf.ly/iWswG" target="_blank">RexHacker.Blogspot.Com</a> 
 
<h2 class="h2title">
 </h2>
<h2 class="h2title">
Install Flying Letters Below Mouse Pointer</h2>
<div class="h2title" style="text-align: left;">
Before This work Please must backup your Recent Template.</div>
<div class="h2title" style="text-align: left;">
Now follow these steps and install flying letters below mouse pointer.</div>
<div class="h2title" style="text-align: left;">
 
1. Sign In to Your Blogger Account.</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
2. Go to Template <a href="http://s17.postimg.org/hipq9glcr/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s17.postimg.org/hipq9glcr/Untitled.png" /></a>Edit HTML<a href="http://s23.postimg.org/5o9fje3xj/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s23.postimg.org/5o9fje3xj/Untitled.png" /></a></div>
<div class="h2title" style="text-align: left;">
 
3. Find </body> (Using Ctrl + F) Copy And Paste The Below Code Above </body></div>
<div class="h2title" style="text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
<script type="text/javascript"></div>
var text=&#39; ENTER YOUR FLYING TEXT HERE &#39;; 
</script> 
<script src="http://netoopscodes.googlecode.com/svn/branches/Js%20files/mousetail.js" type="text/javascript"> 
</script> 
<div class="separator" style="clear: both; text-align: left;">
4. Now Click On Save Template Button.<a href="http://s21.postimg.org/vbvfcciab/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s21.postimg.org/vbvfcciab/Untitled.png" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
5. Its All Done. Now Check Your Blog.</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Note: You Can Get This Code From This <a href="http://adf.ly/iWt7l" rel="nofollow" target="_blank">Link</a>. </div>
<h4 class="notice">
</h4>
</div>

Add Flying Letters Below Mouse Pointer Animation

How to setup flying letters below mouse pointer . This a simple article that Spice your Blog. After inserting this Code,When you move ...

11:56:00 PM

Add Circle Image Style To Popular Post In 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/AVvXsEg2xEr9AJ4upX56YcokjX5uLE3rjXyFwBcVAx6aTInBT5aS97zi5eiPIA8SUhD6_bqeitom-pJ3_RMyu7Hs_KK6vsF7D9sth2KifJqa1m1jpK0LjQ4V3Z2vvKns8XWF_jNNu7otNhJgDqo/s1600/circle-popular-post.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add Circle Image Style To Popular Post In Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xEr9AJ4upX56YcokjX5uLE3rjXyFwBcVAx6aTInBT5aS97zi5eiPIA8SUhD6_bqeitom-pJ3_RMyu7Hs_KK6vsF7D9sth2KifJqa1m1jpK0LjQ4V3Z2vvKns8XWF_jNNu7otNhJgDqo/s1600/circle-popular-post.jpg" title="Add Circle Image Style To Popular Post In Blogger" /></a></div>
In this post i am going to explain you, how to <a href="http://rexhacker.blogspot.com/2014/03/add-circle-image-style-to-popular-post.html" target="_blank">add circle image popular post widget</a> to your blogger. Actually popular post widget helps you to identify
 popular post in your blog. In blogger already have this widget , but we 
can do some customize for make it more attractive. This include with nice 
hover effect too. 
i hope you will like this nice tutorial on Add Circle Image Popular Post Widget to Your Blogger. 
Before i have share  <a href="http://rexhacker.blogspot.com/2014/01/awesome-multi-colored-popular-posts.html" target="_blank">Awesome Multi Colored Popular Post Widget</a>, i hope you will also like this post also. 
Please must comment on this post and appreciate me for more nice tutorial and always love and like <a href="http://rexhacker.blogspot.com/">http://Rexhacker.blogspot.com</a> 
Now Lets start this Nice Tutorial. 
 
 
1. Log in to blogger account and Go to Template >> Edit HTML 
(make sure backup your template first) 
 
2. Select Template coding with CTRL + A and click on Format Template 
 
3. Find this code by using Ctrl+F ]]></b:skin> 
 
4.  Paste below code Before ]]></b:skin> code 
 
5. Click On This <a href="http://pastebin.com/yvD89S5Q" rel="nofollow" target="_blank">Link</a> And Get Code. 
 
6. Again Now Find this code  by using Ctrl+F  
 
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
 
7. After you found, scroll below until you see this code  </b:widget> 
 
8. Now delete it start to end. 
 
9. After delete is place below code in same place. 
 
10. Click On This <a href="http://pastebin.com/XKf8KLic" rel="nofollow" target="_blank">Link</a> And Get Code. 
 
11. Now save your template. You are done. 
 
Remember me in your prayers and must like my post and and also share with your friends. 
You can visit my old <a href="http://rexhacker.blogspot.com/search/label/Blogger%20Widget" target="_blank">Blogger Widgets</a> and also can visit <a href="http://rexhacker.blogspot.com/search/label/Blogger%20Template" target="_blank">Premium Responsive Blogger Templates</a>.</div>

Add Circle Image Style To Popular Post In Blogger

In this post i am going to explain you, how to add circle image popular post widget to your blogger. Actually popular post widget helps ...

10:42:00 PM

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJvLQRmuxtDS4O2vLrx97txSXHbFTGomdGXt8dlVPGVYN_81uM4bKKor_ITmjv76Na1F_cLFJBKdWZfOiuajHOlebfKWda402mMUN85xed0R89hcY1iOrLByIA-V6Qt1abO7lTeX2e2w/s1600/Awesome+Multi-Colored+Popular+Posts+Widget+for+Blogger+powered+CSS3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJvLQRmuxtDS4O2vLrx97txSXHbFTGomdGXt8dlVPGVYN_81uM4bKKor_ITmjv76Na1F_cLFJBKdWZfOiuajHOlebfKWda402mMUN85xed0R89hcY1iOrLByIA-V6Qt1abO7lTeX2e2w/s1600/Awesome+Multi-Colored+Popular+Posts+Widget+for+Blogger+powered+CSS3.jpg" /></a></div>
Popular Posts Widget is a Widget providing by Blogger and we can add it 
to our Blog. This Widget displays the Most viewed posts of your blog, 
that may be of Month or in Week or All the time. You can select how 
Popular posts are to be displayed.By default it shows an image(if the 
post has) and Title of Post followed by the content of post wrapped by 
20-25 Words. This article is a tutorial to Style that Popular posts 
Widget to an Awesome Multi - colored Popular posts Widget. This trick is
 done using simple CSS3 rather than using complex JavaScripts. A great 
feature of this trick is each Post shown in each Flat UI color, so these
 colors catches your Blog visitor's eyes and they have the tendency to 
take that post even if the Post is not so good. 
Features of this Widget 
 
<ul style="text-align: left;">
<li>Flat UI colors used (it will attract users attention)</li>
<li>Automatic Post Numbering</li>
<li>CSS3 Hover Animation</li>
</ul>
<h4 class="notice">
Sign in to your Blogger Account and Active Popular Posts Widget</h4>
<ul>
<li>First Add Popular post Widget to Blogger</li>
<ul>
<li>Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.</li>
<li>Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save </li>
</ul>
<li>Go to Template -> Edit HTML, Find ( <a href="http://netoopsblog.blogspot.com/2012/01/use-search-bar-find-code-blogger-blog.html" target="_blank">Ctrl + F</a> ) ]]></b:skin></li>
<li>Copy the following code and Paste just above it</li>
</ul>
 
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} 
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#PopularPosts1 ul li:first-child:after, 
#PopularPosts1 ul li:first-child + li:after, 
#PopularPosts1 ul li:first-child + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + 
li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff} 
#PopularPosts1 ul li 
.item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;} 
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none} 
#PopularPosts1 img{ 
-moz-border-radius: 130px; 
-webkit-border-radius: 130px; 
border-radius: 130px; 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
transition: all 0.3s ease; 
padding:4px; 
border:1px solid #fff !important; 
} 
#PopularPosts1 img:hover { 
border-radius: 0 0 0 0; 
-moz-transform: scale(1.2) rotate(-711deg) ; 
-webkit-transform: scale(1.2) rotate(-711deg) ; 
-o-transform: scale(1.2) rotate(-711deg) ; 
-ms-transform: scale(1.2) rotate(-711deg) ; 
transform: scale(1.2) rotate(-711deg) ; 
} 
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<ul style="text-align: left;">
<li>Click on Preview Template (You can see the template without saving)</li>
<li>Save the Template.</li>
</ul>
View Your Blog it is ready to attract users. I think this article 
will help you if so please share and Like us to spread our Blog. 
If any problems with this trick don't hesitate to ask, do comment here...<ul style="text-align: left;">
</ul>
</div>
</div>

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your...

9:06:00 PM

Multi Colored Random Posts Widget 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/AVvXsEha3939JJ4fTBH7Q3AvbfPIIySFP4MRY20foHmU7f3_MBqSEK9MpWequYOAE-Wxqvko62LUYRQ0VPeBTm4qzaK_nYqiVQv6EM39vUGlQZmuZzZnxcJN_umcNS7QKuUbRP1IdoRgxIrjdeI/s1600/multicolored-random-posts-widget-blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha3939JJ4fTBH7Q3AvbfPIIySFP4MRY20foHmU7f3_MBqSEK9MpWequYOAE-Wxqvko62LUYRQ0VPeBTm4qzaK_nYqiVQv6EM39vUGlQZmuZzZnxcJN_umcNS7QKuUbRP1IdoRgxIrjdeI/s1600/multicolored-random-posts-widget-blogger.png" /></a></div>
Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget,
 Most important feature of this widget is it lets your Blog visitors to
 surf more blog posts in your blog.Its let your users to spend more 
time in your Blog. Surely it increases your Blog's internal links that 
lets your blog higher traffic.This is the modified version of the Random
 posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked
 me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions... 
<h3>
Features of This Widget</h3>
<ul style="text-align: left;">
<li style="text-align: left;"> Flat UI colors used (it will attract users attention)</li>
<li style="text-align: left;">Automatic Post Numbering</li>
<li>Sign In to Blogger Dashboard</li>
<li>Go to Layout</li>
<li>Click on Add Gadget and look for HTML/Javascript and select it</li>
<li>Copy the below code inside it and click save</li>
</ul>
 <div>
<div class="code">

<div class="MsoNormal">
<style type="text/css"> 
.Rex-random-posts ul li { 
    list-style-image:none; 
}.Rex-random-posts ul { 
list-style-type: none; 
margin: 0; 
padding: 5px 0; 
} 
.Rex-random-posts ul li { 
border: 0 none; 
margin: 5px 0; 
padding: 10px; 
position: relative; 
} 
.Rex-random-posts ul li:first-child { 
background: none repeat scroll 0 0 #FF4C54; 
width: 97%; 
} 
.Rex-random-posts ul li:first-child:after { 
content: "1"; 
} 
.Rex-random-posts ul li:first-child + li { 
background: none repeat scroll 0 0 #FF764C; 
width: 87%; 
} 
.Rex-random-posts ul li:first-child + li:after { 
content: "2"; 
} 
.Rex-random-posts ul li:first-child + li + li { 
background: none repeat scroll 0 0 #FFDE4C; 
width: 84%; 
} 
.Rex-random-posts ul li:first-child + li + li:after { 
content: "3"; 
} 
.Rex-random-posts ul li:first-child + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 81%; 
} 
.Rex-random-posts ul li:first-child + li + li + li:after { 
content: "4"; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li { 
background: none repeat scroll 0 0 #33C9F7; 
width: 78%; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li:after { 
content: "5"; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li { 
background: none repeat scroll 0 0 #7EE3C7; 
width: 75%; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li:after { 
content: "6"; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F6993D; 
width: 72%; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li:after { 
content: "7"; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F59095; 
width: 69%; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li:after { 
content: "8"; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 66%; 
} 
.Rex-random-posts ul li:first-child + li + li + li + li + li + li + li +
li:after { 
content: "9"; 
} 
.Rex-random-posts ul li:first-child:after, .Rex-random-posts ul li:first-child
+ li:after, .Rex-random-posts ul li:first-child + li + li:after, .Rex-random-posts
ul li:first-child + li + li + li:after, .Rex-random-posts ul li:first-child +
li + li + li + li:after, .Rex-random-posts ul li:first-child + li + li + li +
li + li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li +
li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li + li +
li:after, .Rex-random-posts ul li:first-child + li + li + li + li + li + li +
li + li:after { 
background: none repeat scroll 0 0 #353535; 
border-radius: 50% 50% 50% 50%; 
color: #FFFFFF; 
font-size: 25px; 
height: 30px; 
position: absolute; 
right: -17px; 
text-align: center; 
top: 1px; 
width: 30px; 
} 
.Rex-random-posts ul li a { 
color: #444444; 
font-size: 13px; 
text-decoration: none; 
} 
</style> 
<div class="Rex-random-posts"><script
type="text/javascript"> 
    var randarray = new Array();var l=0;var flag; 
    var numofpost=5;function Rexrandomposts(json){ 
    var total =
parseInt(json.feed.openSearch$totalResults.$t,10); 
    for(i=0;i <
numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j
in randarray){if(l==randarray[j]){ flag=1;}} 
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); 
    for(n in randarray){ var p=randarray[n];var
entry=json.feed.entry[p-1]; 
    for(k=0; k < entry.link.length;
k++){if(entry.link[k].rel=='alternate'){var item = "<li>" +
"<a href=" + entry.link[k].href + ">" +
entry.title.$t + "</a> </li>"; 
    document.write(item);}} 
    }document.write('</ul>');} 
    </script><a
href="http://rexhacker.blogspot.com"
style="font-size:0pt">Blogger Widgets</a> 
<script type="text/javascript"
src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"></script></div></div>
</div>
</div>
</div>

Multi Colored Random Posts Widget For Blogger

Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature o...

6:26:00 PM

How to Add Marquee Notification Bar to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Notification bar widget is one of the most popular blogger widgets. It also helps in boosting your blog’s traffic
 by increasing the number of page views of your blog. In this post we 
will discuss a new and amazing marquee notification bar for blogger
 blogs with a stylish moving text effect. It uses HTML marquee tag for 
creating text animation. You can easily customize this notification bar 
according to your blog’s color scheme. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9QQBQyY3khIJ4f94Wz7CJImXE5yiFtv1ztAx5HB4tUkpUl4sRUWfNaPEldnkzD_CbLwUKjlx-Qy7oG4Wf2y9ol3N-w2BdEF6Eq779NooorE8HSsfxpeR1HG9tdYxATdwZsCvJo_Cn4Y/s1600/how+to+add+marquee+notification+bar+to+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9QQBQyY3khIJ4f94Wz7CJImXE5yiFtv1ztAx5HB4tUkpUl4sRUWfNaPEldnkzD_CbLwUKjlx-Qy7oG4Wf2y9ol3N-w2BdEF6Eq779NooorE8HSsfxpeR1HG9tdYxATdwZsCvJo_Cn4Y/s1600/how+to+add+marquee+notification+bar+to+blogger.png" width="400" /></a></div>
 
<h3>
Why you need to add a notification bar to your blog ?</h3>
Notification
 bar is used to display popular post links, event notification, or any 
other important info. It also helps in increasing the pageviews of your 
blog. You can also use this notification bar for promoting your own 
services such ebooks or softwares. 
<h3>
Features of this marquee notification bar  - </h3>
<ol>
<li>It is sticky floating notification bar. </li>
<li>It is created in HTML and CSS only. </li>
<li>Light weight code which do not effect blog’s loading time. </li>
<li>Stylish and attractive design with moving text effect.</li>
</ol>
<h3>
Adding this notification bar to your blog</h3>
<ol>
<li>Login to your blogger dashboard and select your blog. </li>
<li>Select Layout option and select Add a gadget option. </li>
<li>Select HTML/JavaScript widget from the list. </li>
<li>In the HTML/JavaScript widget paste following code and save it. </li>
<li>Preview your blog to see the new changes.</li>
</ol>
Note: In the following code replace Blue color code with your post titles and Red color code with links to these posts. 
<pre class="code"><style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px #444444;
-moz-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}

#wc-movtext
{
text-align:center;
padding:8px;
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}

#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:yellow;
text-decoration:none;
}

</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee behavior='alternate' direction="left"
 onmouseover="this.stop();"
 onmouseout="this.start();">

<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>

 </marquee>
</div>
<div></pre>
</div>

How to Add Marquee Notification Bar to Blogger

Notification bar widget is one of the most popular blogger widgets. It also helps in boosting your blog’s traffic by increasing the number...

4:48:00 PM

Multi Column Footer Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4RxUwXKDQMq-wayNT3PSVTFG3SmxHIgEi8hVFO3rH0u1AQ68L1kRHC1j_qYOimOI5hl3YQJdq38rkXlP7EitB2cx5EdHK21M1hkbmmYAMdrPmkJwgz7Jmjs74b_woIoimPTF3u8qWHA/s1600/Multi-Column-Footer-Widget-for-blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4RxUwXKDQMq-wayNT3PSVTFG3SmxHIgEi8hVFO3rH0u1AQ68L1kRHC1j_qYOimOI5hl3YQJdq38rkXlP7EitB2cx5EdHK21M1hkbmmYAMdrPmkJwgz7Jmjs74b_woIoimPTF3u8qWHA/s400/Multi-Column-Footer-Widget-for-blogger.gif" width="400" /></a></div>
 
We had previously shared a tutorial on Three Column Footer Widget
 which was well appreciated and today we have yet another more advanced 
version of the same widget. This new widget can become three column, 
four column or with as many columns as you wish. Further this new footer
 widget has some great CSS effects added to it which makes it even 
better. First see a demo to know what’s so different about it. 
 
<h4>
How To Add the Multi Column Footer Widget To <a href="http://blogger.com/" target="_blank">Blogger</a>?</h4>
First
 we will add the CSS code to your blogger templates and then the HTML. 
So without wasting any time lets jump straight to the steps, 
<ol>
<li>Go To Blogger > Design > Edit HTML </li>
<li>Backup Your Template </li>
<li>Search for ]]></b:skin> </li>
<li>Just above ]]></b:skin> paste the code below,  </li>
</ol>
 
<blockquote>
/*----- RH MULTI COLUMN FOOTER WIDGET -----*/ 
 #lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 960px; border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 23%; text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; }</blockquote>

 
5.    Now search for </body> and paste the following code just above </body> 
 
<blockquote>
<div id='lower'> 
<div id='lower-wrapper'> 
 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div> 
 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div> 
 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div> 
 
<div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> </b:section> </div> 
 
<div style='clear: both;'/> 
</div> </div></blockquote>
 
6.   Save your template and you are done! 
Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this, 
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6jSzFWG59dyjyFSByhS3ZyfC5gnxtnXgrYB4rhv0b4MHRModAOv34CgPG7JGg7CR8kMSxNgwxFiiBmNci4DP_TK9NXrw3jkxGINzeuY9Uf7xsFb5nf9Z4v1Hxvr4Qs-m018Yk-VknGo/s1600/Multi+Column+Footer+Widget+For+Blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6jSzFWG59dyjyFSByhS3ZyfC5gnxtnXgrYB4rhv0b4MHRModAOv34CgPG7JGg7CR8kMSxNgwxFiiBmNci4DP_TK9NXrw3jkxGINzeuY9Uf7xsFb5nf9Z4v1Hxvr4Qs-m018Yk-VknGo/s1600/Multi+Column+Footer+Widget+For+Blogger.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div align="justify">
You can observe that there a 
total of four columns by default and you can add as many widgets as you 
want to each column. If you wish to increase or decrease the number of 
vertical columns then follow the steps below.</div>
<h4>
How to Customize the Widget?</h4>
<div align="justify">
Well
 I will keep it simple. I think the colors and overall size and padding 
and margining are just perfect. The only thing that you will need to 
adjust according to your template is the width of the widget and the 
number of vertical columns. </div>
1.  In order to reduce or increase the overall width of the widget simply change width: 960px; 
2.  If you wish to decrease the number of widgets to three then simply delete this part of the code, 
 
<div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> </b:section> </div> 
  
 
3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/> 
<blockquote>
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar#' preferred='yes'> 
</b:section> 
</div></blockquote>
 
Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5. 
After you have added the fifth column then remember to change width: 23%; with width: 17%; 
You
 will repeat step 3 for as many columns as you wish to create. But three
 and four and five columns are a standard. Increasing them will make 
things look ugly. 
 
 
 </div>

Multi Column Footer Widget For Blogger

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advan...

10:40:00 PM

Subscribe to: Posts ( Atom )