Amfas Tech | Technology, Blogging & Internet Marketing: Blogger Widgets

Reading Mode Widget/Plugin for Blogger and WordPress

Blogging is not all about creating content. It is also about gaining loyal readers. Apart from the quality of the content you provide, the visibility and readability of the content also matters. To be specific, readability includes font styles, backgrounds and eye-friendly modifications to the text on the webpage.

It is however difficult to modify the styles according to individual reader’s choice. So, it is better to leave that option to the reader himself. We have developed a simple and useful snippet of HTML/JS that allows the users change the font styles and sizes according to their eye feasting taste.

Reading Mode widget for blogger wordpress from amfastech

Copy the follow snippet of code and install it on your Blogger/WordPress blog.
<script>
function myFunction() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Open Sans";
}
function myFunction2() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Roboto";
}
function myFunction3() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction4() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction5() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="PT Sans";
}
function myFunction6() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Georgia";
}
</script>
<button type="button" onclick="myFunction()">Style 1</button>
<button type="button" onclick="myFunction2()">Style 2</button>
<button type="button" onclick="myFunction3()">Style 3</button>
<button type="button" onclick="myFunction4()">Style 4</button>
<button type="button" onclick="myFunction5()">Style 5</button>
<button type="button" onclick="myFunction6()">Style 6</button>

Customization

Change the ID “Blog1” with the blog post area of your blog. “Blog1” here is the blog post area of Blogger blog.

Change x.style.fontSize with the values of your choice.

Change x.style.color with the color of your choice.

Change x.style.fontFamily with the font family of your choice.

This is a basic script and needs to be tweaked. Any suggestions of the tweaks from your side are welcomed. You suggestions will be credited and updated in the article.
Continue Reading

Bootstrap Code Panel Widget for Blogger

We bloggers need features more than the ‘Blogger’ provides. When writing about coding tutorials or mentioning a snippet of text or statement, we would want an inline-styled panel to make the special text or code stand out from the rest of the content.

Applying different styles to the parts of the tutorial will make the article look more reader friendly. To do so we have to add some code in to the blogger template. I’ll take you through the procedure to add the ‘Code Panel’ for your ‘Blogger’ blog.

Let’s get started!

Adding Bootstrap references

As we are using the Bootstrap framework here, we need to import its CSS and JS classes. This is the important part of widget installation. Specifying wrong paths or wrong HTML will breaks the link to Bootstrap framework resources.

Copy the following code and paste it in the <head> part of your blog’s template.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Using the widget

You’ve literally installed the widget by installing above code. You need to use it now.

To use the widget in your blog posts, all you need to do is just remember the following class names and the order they are to be nested.

Level #1 – panel panel-default
Level #2.1 – panel-heading
Level #3 – panel-title
Level #2.2 – panel-body

Here is what the resultant code looks like:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">View Code:</h3> //Panel Title
</div>
<div class="panel-body">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>

Customization:

You can customize the widget though you haven’t added any CSS or JS to your template. You can add up a new CSS class and use it along with those DIVs.

For example, you can create a new class with name .codetemplate and specify font values here.

.codetemplate
{
   font-family:courier new;
   color: #333333
}

Now specify this CSS class along with panel-body in above code. It should look like like this:

..
<div class="panel-body codetemplate">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>
..

Demo:

bootstrap-code-panel-blogger-widget
Continue Reading

How to Install Feedly Subscription Button to Your Blog?

Feedly is one of the best feed readers that can keep your visitors engaged on your blog updates at one place. After adding your blog to feedly, it is recommended to have the feedly subscription button in order to increase your subscribers.

 

Adding a feedly subscription button to your blog is quite easy and simple. All you have to do is just create the button and install it on your blog.

 

To create a subscription button,

 

Go to www.feedly.com/factory.html 

 

Step 1: Select your design of the button

 

button-design-feedly

 

Step 2: Add your feedly feed URL

 

feedly-feed-url

 

Your feed URL is that we have discussed while adding your blog to feedly. It will look be the combination of two URLs,

 

http://www.feedly.com/home#subscription/feed/

+

http://feeds.feedburner.com/AmfasTech

 

It would look like as follows when combined,

 

http://www.feedly.com/home#subscription/feed/http://feeds.feedburner.com/AmfasTech

 

Add the combined URL in ‘Insert your feed URL’ step.

 

Step 3: Copy the code created and install in on your blog.

 

subscription-code

 

To add feedly button to Blogger:

Go to Dashboard > Layout > Add a Gadget > HTML/JavaScript and paste the code in it and save it.

 

To add feedly button to WordPress:

Go to Dashboard > Appearance > Widgets > Add new and paste the code in it and save it.

 

To add feedly button to Tumbler:

Go to Customize > Theme > Use Custom HTML > Insert under <div id= “sidebar”>.

 

Watch Demo of the Feedly Subscription Button.

Continue Reading

Wordpress Style Responsive Related Posts Widget for Blogger

Related posts under each blog post can help your visitors navigate through the content that is mostly related to the topic they were search for. It therefore helps you keep your visitors engaged on your blog for more time than just go away with one page served. Technically speaking, related posts widget can help you reduce bounce rate on your blog.

Therefore to reduce bounce rate on your blog, I bring you a beautiful Wordpress style ‘related posts’ widget for blogger in this article.

wordpress-style-related-posts-widget

To add this widget on your blogger add the following blocks of codes in the specified areas on your template.

Step #1: Log into your blogger account and go to your blog’s dashboard > Template >Edit HTML.

Step #2: Find the following line of code
]]></b:skin>

Step #3: Add the following block of CSS code right above the line specified in Step 2.
<--Wordpress Style Responsive Related Posts CSS code starts-->
#related-posts {
          margin: 1px 0px !important;
          background-color: #111;
          background-image: -moz-linear-gradient(#444, #111);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
          background-image: -webkit-linear-gradient(#444, #111);
          background-image: -o-linear-gradient(#444, #111);
          background-image: -ms-linear-gradient(#444, #111);
          background-image: linear-gradient(#444, #111);
          height: 280px;
          width:100%!important;
          padding: 0px !important;
          box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
          border-radius: 5px 5px 5px 5px;
          overflow:hidden;
        }
        #related-posts h2{
          margin: 0px !important;
          padding: 10px !important;
          color: rgb(255, 255, 255);
          font-weight: normal;
          text-transform: capitalize;
          background-color: rgb(18, 18, 18);
          border-bottom: 1px solid rgb(0, 0, 0);
          border-top-right-radius: 5px;
          border-top-left-radius: 5px;
          background-color: #111;
          background-image: -moz-linear-gradient(#444, #111);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
          background-image: -webkit-linear-gradient(#444, #111);
          background-image: -o-linear-gradient(#444, #111);
          background-image: -ms-linear-gradient(#444, #111);
          background-image: linear-gradient(#444, #111);    
          text-decoration:none!important;  
        }
        #related-posts a{
          font-weight:bold!important;   
          color: white;
          font-family: arial!important;
          border-right:0px!important;
          margin: 10px 0px 10px 10px !important;    
        }
        #related-posts a:hover{
          border-right:0px!important;
          margin: 10px 0px 10px 10px !important;
          background:none!important;
          text-decoration:underline!important;  
        }
        #related-posts img{
          border: 1px solid #666 !important;
          padding: 1px !important;
          width: 115px !important;
          height: 95px !important;
          margin-right: 15px !important;
          overflow: hidden;
          background:#444!important;  
        } 
        #related-posts img:hover{
          opacity:0.5;
        }
<!--Wordpress Style Responsive Related PostsCSS code end-->

Step #4: Now we have to position the ‘related posts’ in footer section of the blogpost. To do so find the following line of code at first.
<div class='post-footer-line post-footer-line-1'>

Step #5: Now add the following block of code under the line specified in Step 4.
<!-- Related Posts with Thumbnails Code Start-->
                     <!-- remove -->
                     <b:if cond='data:blog.pageType == &quot;item&quot;'>
                       <center>
                         <div id='related-posts'>
                           <b:loop values='data:post.labels' var='label'>
                             <b:if cond='data:label.isLast != &quot;true&quot;'>
                             </b:if>
                             <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=5&quot;' type='text/javascript'/>
                           </b:loop>
                           <script type='text/javascript'>
                             removeRelatedDuplicates_thumbs();
                             printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                           </script>
                         </div>
                       </center>
                       <!-- remove -->
                     </b:if>
                     <!-- Related Posts with Thumbnails Code End-->

Step #6: ‘Save template’ and check if its working on your blogger blog. Trace down the process carefully once more if you don’t find the widget under each post.

Comment below if need any help installing this widget on your blog. I’ll help to my best.
Continue Reading

Adding Facebook Like & Google +1 Buttons after each post in Blogger

Writing alone can't make your blogging dreams come true. Readers would want to react to your article. They sometimes would want to support your views in that article or they just 'like' it and wanted to award it a Facebook like or +1 it on Google+. So what to do?

After reading out my above valid points, you must be thinking about adding share buttons. Right? Yeah that's a great idea, but who cares to spare their time to share? Adding a 'Facebook like' button or 'Google Plus +1' button would help your article get active on social media.

Being the major social networks with millions of users(yeah! Google + have most of the Google users linked to it. So said!) Facebook and Google+ have their role in building traffic to websites. Getting more '+1's' and 'Likes' would help your article get more traffic from these social media giants.

How to add Facebook Like and Google's +1 button

Adding Facebook like button and Google +1 button is as easy as you add any code in your blog. To add these buttons under each post follow the instructions as shown below.
  • Go to Layout > Add a Gadget > HTML/Javascript
  • Copy the following code and paste it in there.

Code

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"fblike":["vcount","Facebook Like",""],"plusone":["vcount","Google 1",""]});var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>
  • Save Changes and view your blog.
Continue Reading

Adding a Breadcrumb to your Blog | Breadcrumb for Blogger

Breadcrumbs are the line of texts that show the path of the article or page they are currently in. By using breadcrumbs user can navigate your site with ease. Breadcrumbs would help you find where you are in a website. In other words, they keep track of your navigation throughout the website or blog. The breadcrumb can be seen on our site too in the top and it looks like this:
 

 
So you come to know what a breadcrumb means. Is it cool enough to have one on your website or blog? Follow my instructions to install a breadcrumb on your blog too.
 

Installation Procedure:

Go to Template &gt; Edit HTML
Ctrl+F to find the following code
<b:include name="status-message" data="top" />

and paste the following code immediately after the above line
<b:include data='posts' name='breadcrumb'/>

Now find the following code
<b:includable id='main' var='top'>

Paste the following code right before the code above
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>

The above code displays label of the current post in the breadcrumbs.

Add this following CSS code before ]]></b:skin>
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; }

Now Save your template and check for breadcrumb in your template. Post a comment if you have any problem in installation of this code in your blog.

Continue Reading

Smooth CSS ‘Back-To-Top’ Widget for Blogger

Navigation is the crucial part of SEO. No doubt you write awesome articles in your blog and it can’t earn visitor’s appreciation if not properly navigated. There available many navigating plugins in which you might have added the ‘menu’ or ‘pages’ widget already. I’m talking about ‘that thing’ that would ease visitors get back to the top of the page where the menu exists. Yes! it is the ‘back to top’ widget. I use it on my site and recommend you to use it if you write long and long articles on your blog.

 

back to top widget

How to install the widget

Its so easy to install this widget. Simply follow the steps you read on below.

  1. Login to blogger > Go to your blog’s dashboard.
  2. Click on Layout > Add a Gadget > HTML/JavaScript.
  3. Copy the below code and paste it in the HTML/JavaScript widget space.
  4. Save the widget and check your blog/site once.
<!--Back to top widget Start--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 100px; right:5%; cursor:pointer;font:12px arial;'><img src='http://chrislorensson.com/wp-content/themes/yin_and_yang/images/layout/top-button.png
' width="50px" height="50px"/></a><!--Back to top widget End-->

 

Customization:

You can replace the following arrow URL with your wished one.

http://chrislorensson.com/wpcontent/themes/yin_and_yang/images/layout/top-button.png

Continue Reading

Customizing Google Custom Search Engine like Amfas Tech’s | How to make Google Custom Search Engine look professional

Implementing Google Custom Search Engine(CSE) into your blog would boost up your AdSense earnings. Google allows AdSense users to customize the search engine and search results code as per their requirements. After creating a search engine, you can simply customize it by going to www.google.co.com/cse webpage. Though this is a great feature from Google, the opt-in-from-options type of customization of the search engine won’t give full control in to your hands. The only way to modify it to your needs is to modify the code, which is what I’m going to share with you now.

If you are not aware of creating a custom search engine, consider the following method to create one.

Creating Custom Search Engine

  1. Log on to your Google AdSense account.
  2. Click on ‘My Ads’.
  3. Look for ‘Search’ from the left options pane and click on it to enter.
  4. Click on ‘New Custom Search Engine’ and fill in all necessary details. Do not save here!
  5. Expand ‘Search results’ options. Select ‘on my website using an iframe’ from the ‘Display results:’ section.
  6. In the next field, provide the URL of your blog where you think search results should be displayed. For eg., I’ve given www.amfastech.com
  7. Choose the width of the results area to your wish.
  8. Now ‘Save’ it and get the code. Here you will be shown ‘search box code’ and ‘results code’ separately allowing you to place search engine and results area in two different places. You may use this search bar code more than once in your blog but the results code should be used only once as to reduce confusion when searched.
If you already created a custom search engine earlier, modify the ‘search results’ settings as shown above(Refer from Step 5 to 8).

Copy the search results code from the codes shown and add it to your blog. Considering blogger platform, the code can be added as follows.

Adding code to blogger blog

  • Go to your blogger dashboard after logging in.
  • Go to Layout > Add a Gadget > HTML/JavaScript > Paste the following code where you want to display search results.
Search Results Code:
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 800;
var googleSearchDomain = "www.google.co.in";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
</script>

Add the following search bar code where ever you want to display it.

Search Bar code:
<div id='whites2'>
<form action='/' id='search' method='get'>
<input name='q' placeholder='Search amfas tech...' size='40' type='text'/>
</form>
</div>

Customizing the search bar

The search bar can be customized to look as follows,

Customizing CSE like amfas tech's

Paste the following CSS code before ]]></b:skin> to make search bar look like amfas tech’s custom search bar.
#whites2 #search {
}
#whites2 #search input[type="text"] {
background: url(http://2.bp.blogspot.com/-GOn5C47SlEE/UL10qeX1DAI/AAAAAAAAGcw/AsRxdnyaYXg/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 250px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#whites2 #search input[type="text"]:focus {
width: 260px;
}
Save your template and refresh your blog once and check if the search engine is working fine or not.

Please comment if you need any guidance in adding this custom search engine to your blog. We’re happy to help you!
Continue Reading

Add Custom Google Plus Widget to your blog

Adding Google Plus widget won’t give satisfactory result sometimes like it happened in my case. So I thought of setting up my own customized widget to showcase its followers with face thumbnails. After a little research about it on the internet, I found a better solution. That is adding of custom Google+ code in the HTML/JavaScript third party gadget areas.

 

Why should you add Google+ widget to your blog?

Because, Google cares for sites that show up or talk about their services. This helps search engine notice your blog more quickly than you can expect. Remember, getting links on Google+ for your posts would help the search engine index quickly. If you care about SEO for your blog, you should care adding this widget on your blog.

 

Widget Code

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+AmfasTechSols" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>

Customization

Continue Reading

Christmas widgets to decorate your blog | Widgets for Blogger and WordPress

Haven’t you decorated your site for this Christmas? or just searching for the right widgets to fit to your needs? You no need to. Because I bring you this time the coolest Christmas widgets that would bring a great Christmas to you and your blog readers. Here they are,

Snowfall & Bells Widget

Christmas widgets to decorate your blog
Adding widget to Blogger site:
  • Login to your blogger and click on Layout.
  • Click on Add a Gadget and choose HTML/JavaScript.
  • Copy and paste the following code in the content area and Save.
Adding widget to WordPress site:
  • Go to Dashboard > Appearance > Widgets > Text Widget.
  • Drag the Text Widget to the sidebar.
  • Copy and paste the following code and Save.
Code:
<script type="text/javascript"> //Configure below to change URL path to the snow image var snowsrc="http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png" // Configure below to change number of snow to render var no = 15; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0; // Configure how much snow should drop down before fading ("windowheight" or "pageheight") var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? " http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png" : snowsrc for (i = 0; i < no; i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 Math.random()/10; // set step variables sty[i] = 0.7 Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot" i "\" style=\"POSITION: absolute; Z-INDEX: " i "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" snowsrc "' border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot" i "\" style=\"POSITION: absolute; Z-INDEX: " i "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" snowsrc "' border=\"0\"><\/div>"); } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; i) { // iterate for every dot yp[i] = sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 Math.random()/10; sty[i] = 0.7 Math.random(); } dx[i] = stx[i]; document.getElementById("dot" i).style.top=yp[i] "px"; document.getElementById("dot" i).style.left=xp[i] am[i]*Math.sin(dx[i]) "px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i ) document.getElementById("dot" i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script> <br /> <img src="http://2.bp.blogspot.com/_u4gySN2ZgqE/TQ-G1GVAD3I/AAAAAAAABtw/doqIyU32ngs/s1600/christmas-bells-icon.png" style="position:fixed; top: 0px;left:0px;border:none;"/><img class="aneesh" src="http://3.bp.blogspot.com/_u4gySN2ZgqE/TQ-SkcTSrTI/AAAAAAAABt4/Qqpj5MR3tU8/s1600/christmas-bells-icon-right.png" style="position:fixed; top: 0px;right:0px;border:none;"/><br /> <script> if (typeof bp_onload_queue == 'undefined') var bp_onload_queue = []; if (typeof bp_dom_loaded == 'boolean') bp_dom_loaded = false; else var bp_dom_loaded = false; if (typeof bp_async_loader != 'function') { function bp_async_loader(src, callback, id) { var script = document.createElement('script'); script.type = "text/javascript"; script.async = true; script.src = src; script.id = id; /*Check if script previously loaded.*/ var previous_script = document.getElementById(id); if (previous_script) if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") { callback(); return; } else { script = previous_script; } if (script.onload != null) previous_callback = script.onload; script.onload = script.onreadystatechange = function() { var newcallback; if (previous_script && previous_callback) newcallback = function() { previous_callback(); callback(); }; else newcallback = callback; if (bp_dom_loaded) { newcallback(); } else bp_onload_queue.push(newcallback); /* clean up for IE and Opera*/ script.onload = null; script.onreadystatechange = null; }; var head = document.getElementsByTagName('head')[0]; if (!previous_script) head.appendChild(script); } } if (typeof bp_domLoaded != 'function') function bp_domLoaded(callback) { bp_dom_loaded = true; var len = bp_onload_queue.length; for (var i = 0; i < len; i ) { bp_onload_queue[i](); } } /*JS gets loaded here */ bp_domLoaded(); /*Loading jQuery Asynchronously */ bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() { bp_async_loader("http://blogergadgets.googlecode.com/svn/trunk/snowfall.min.jquery.js", function() {}, "bp-snow"); }, "jQueryjs"); </script> <a href="http://allbloggingtips.com/2011/12/22/snow-falling-effect-with-bells-widget-for-your-blog/" target="_blank"><img src="https://lh5.googleusercontent.com/-yPvmBp_p424/TuYsnjeIzaI/AAAAAAAACNY/KrkMl02fzh0/I/snowfall-widget-for-blogger.png" alt="Snowfall Widget for Blogger" /></a>

Snowfall Only Widget

Adding widget to Blogger site:
  • Login to your blogger and click on Layout.

  • Click on Add a Gadget and choose HTML/JavaScript.

  • Copy and paste the following code in the content area and Save.
Adding widget to WordPress site:
  • Go to Dashboard > Appearance > Widgets > Text Widget.

  • Drag the Text Widget to the sidebar.

  • Copy and paste the following code and Save.

Code:
<script> if (typeof bp_onload_queue == 'undefined') var bp_onload_queue = [];      if (typeof bp_dom_loaded == 'boolean') bp_dom_loaded = false;     else var bp_dom_loaded = false;      if (typeof bp_async_loader != 'function') {         function bp_async_loader(src, callback, id) {              var script = document.createElement('script');             script.type = "text/javascript";             script.async = true;             script.src = src;             script.id = id;             /*Check if script previously loaded.*/             var previous_script = document.getElementById(id);             if (previous_script) if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") {                 callback();                 return;             } else {                  script = previous_script;             }             if (script.onload != null) previous_callback = script.onload;             script.onload = script.onreadystatechange = function() {                 var newcallback;                 if (previous_script && previous_callback) newcallback = function() {                     previous_callback();                     callback();                 };                 else newcallback = callback;                 if (bp_dom_loaded) {                     newcallback();                 } else bp_onload_queue.push(newcallback);                 /* clean up for IE and Opera*/                 script.onload = null;                 script.onreadystatechange = null;             };             var head = document.getElementsByTagName('head')[0];             if (!previous_script) head.appendChild(script);          }     }      if (typeof bp_domLoaded != 'function') function bp_domLoaded(callback) {         bp_dom_loaded = true;         var len = bp_onload_queue.length;         for (var i = 0; i < len; i++) {             bp_onload_queue[i]();         }     }     /*JS gets loaded here */      bp_domLoaded();      /*Loading jQuery Asynchronously */     bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() {          bp_async_loader("http://blogergadgets.googlecode.com/svn/trunk/snowfall.min.jquery.js", function() {}, "bp-snow");      }, "jQueryjs"); </script> <a href="http://www.bloggerplugins.org/2011/12/christmas-snowfall-widget-for-blogger.html" target="_blank"><img src="https://lh5.googleusercontent.com/-yPvmBp_p424/TuYsnjeIzaI/AAAAAAAACNY/KrkMl02fzh0/I/snowfall-widget-for-blogger.png" alt="Snowfall Widget for Blogger" /></a>

Comment below if you have any problems installing the widgets to your blogs!
Continue Reading

Recent Comments Widget with CSS effect

Hello friends, I am back with a new widget for blogger that exposes the visitors activity on your  website or blog. Recent Comments Widget is not a unknown widget to a blogger but the same with the new CSS effect is definitely not known.

 

You can watch the DEMO of the widget which was installed on a sample blog on the internet.

 

image

 

Recommended To You: Random Posts with Thumbnails Widget

Adding the Widget

To add this widget on to your blogger, go to Layout > Add a Gadget > HTML/JavaScript, paste the following code in it and Save.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}

</style>
<script type="text/javascript">
//<![CDATA[
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 35,
roundAvatar = true,
characters  = 40,
defaultAvatar  = "
http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-commentsv3.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Customizing the code

You can customize the code as per your requirements. You can change,

numComments=5 to your desired number.

showAvatar=true to false if you don’t wanted to show the avatar of the commenter.

roundAvatar=true to false if you don’t want the default style of the commenter’s Avatar to be changed to round shape.

charachters=40 to your desired length.

defaultAvatar’s URL to your desired image URL.

hideCredits=true to false  if you wanted to display the credits of the code.

maxfeeds=50 to your desired length and

Replace ‘Your Name’ in adminBlog=’Your Name’ with your name.

Continue Reading

Random Posts with Thumbnails Widget

The good thing with blogging platforms is that the ability to add custom widgets. The following is the ‘Random Posts’ widget for blogger.

How to add the widget?

  • Go to blogger.com and sign in into your account.
  • Click on the Layout > add HTML/JavaScript.
  • Copy the code below and paste in it.
  • You may change the No. of posts to display to your wish.

Code:

<style type="text/css"><!--
.recent_post_content_item {filter: alpha(opacity=80);opacity: 1.0;}
.recent_post_content img {width:48px;height:48px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}
.recent_post_content_item table, .recent_post_content_item tr, .recent_post_content_item td {vertical-align: left;}
.recent_post_content_item table {margin-bottom:2px;margin-top:3px;}
.recent_post_content_item:hover {filter: alpha(opacity=100);opacity: 1;}
.recent_post_title a{font-size:12px;text-decoration:none;font-weight:Normal;color:'#ffffff';}
.recent_post_title a:hover{text-decoration:underline}
.recent_post_content_item .recent_post_info {filter: alpha(opacity=100);opacity: 0.6;font-size: 11px;}
--></style>
<script type="text/JavaScript">
<!--
//Setting_begin
var No_Thumb_Url='http://www.ezeego1.co.in/ezeego1.cms/static/images/noimage.jpg';
var Max_Post_Display=5;
var Sum_Len='0';
//Setting_end
//Define your language
var Lang_By = 'By ';
var Lang_comment = ' comment';
var Lang_comments = ' comments';
//For valid feed, not touch
var _0xc4c0=["\x75\x20\x46\x28\x4E\x2C\x48\x2C\x6F\x2C\x65\x2C\x4F\x29\x7B\x37\x20\x4A\x3D\x27\x27\x3B\x35\x28\x48\x21\x3D\x27\x27\x29\x4A\x3D\x27\x2F\x2D\x2F\x27\x2B\x48\x3B\x37\x20\x51\x3D\x27\x27\x3B\x35\x28\x6F\x21\x3D\x27\x27\x29\x51\x3D\x27\x6F\x2D\x31\x71\x3D\x27\x2B\x6F\x2B\x27\x26\x27\x3B\x37\x20\x4D\x3D\x27\x27\x3B\x35\x28\x65\x21\x3D\x27\x27\x29\x4D\x3D\x27\x65\x2D\x31\x74\x3D\x27\x2B\x65\x2B\x27\x26\x27\x3B\x31\x38\x2E\x31\x39\x28\x27\x3C\x55\x20\x4E\x3D\x22\x31\x70\x2F\x31\x6F\x22\x20\x50\x3D\x22\x2E\x2E\x2F\x2E\x2E\x2F\x31\x6E\x2F\x27\x2B\x4E\x2B\x27\x2F\x36\x27\x2B\x4A\x2B\x27\x3F\x27\x2B\x51\x2B\x4D\x2B\x27\x31\x72\x3D\x64\x2D\x63\x2D\x55\x26\x4F\x3D\x27\x2B\x4F\x2B\x27\x22\x3E\x3C\x5C\x2F\x55\x3E\x27\x29\x7D\x75\x20\x4B\x28\x64\x29\x7B\x37\x20\x31\x31\x3D\x2F\x3C\x5C\x53\x5B\x5E\x3E\x5D\x2A\x3E\x2F\x67\x3B\x32\x2E\x73\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x76\x2E\x24\x74\x29\x3B\x32\x2E\x6F\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x73\x2E\x24\x74\x29\x3B\x32\x2E\x44\x3D\x41\x28\x64\x2E\x43\x2E\x49\x24\x31\x75\x2E\x24\x74\x29\x3B\x32\x2E\x45\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x6B\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x62\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x36\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x79\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x71\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x42\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x72\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x76\x3D\x66\x20\x68\x28\x29\x3B\x32\x2E\x38\x3D\x32\x2E\x73\x2D\x32\x2E\x6F\x2B\x31\x3B\x35\x28\x32\x2E\x38\x3E\x32\x2E\x44\x29\x32\x2E\x38\x3D\x32\x2E\x44\x3B\x54\x28\x37\x20\x69\x3D\x30\x3B\x69\x3C\x32\x2E\x38\x3B\x69\x2B\x2B\x29\x7B\x32\x2E\x79\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x71\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x42\x5B\x69\x5D\x3D\x27\x27\x3B\x35\x28\x31\x32\x20\x31\x35\x21\x3D\x27\x31\x69\x27\x29\x32\x2E\x42\x5B\x69\x5D\x3D\x31\x35\x3B\x32\x2E\x45\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x6B\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x62\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x36\x5B\x69\x5D\x3D\x30\x3B\x32\x2E\x72\x5B\x69\x5D\x3D\x27\x27\x3B\x35\x28\x31\x32\x20\x31\x34\x21\x3D\x27\x31\x69\x27\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x31\x34\x3B\x32\x2E\x76\x5B\x69\x5D\x3D\x27\x27\x3B\x37\x20\x34\x3D\x64\x2E\x43\x2E\x34\x5B\x69\x5D\x3B\x35\x28\x27\x31\x33\x27\x63\x20\x34\x29\x32\x2E\x45\x5B\x69\x5D\x3D\x34\x2E\x31\x33\x2E\x24\x74\x3B\x35\x28\x27\x6B\x27\x63\x20\x34\x29\x32\x2E\x6B\x5B\x69\x5D\x3D\x34\x2E\x6B\x2E\x24\x74\x3B\x35\x28\x27\x62\x27\x63\x20\x34\x29\x7B\x54\x28\x37\x20\x6A\x3D\x30\x3B\x6A\x3C\x34\x2E\x62\x2E\x47\x3B\x6A\x2B\x2B\x29\x7B\x35\x28\x34\x2E\x62\x5B\x6A\x5D\x2E\x31\x46\x3D\x3D\x27\x31\x4C\x27\x29\x7B\x32\x2E\x62\x5B\x69\x5D\x3D\x34\x2E\x62\x5B\x6A\x5D\x2E\x52\x3B\x31\x4E\x7D\x7D\x35\x28\x6A\x3D\x3D\x34\x2E\x62\x2E\x47\x29\x32\x2E\x62\x5B\x69\x5D\x3D\x27\x23\x27\x7D\x35\x28\x27\x36\x27\x63\x20\x34\x29\x32\x2E\x36\x5B\x69\x5D\x3D\x34\x2E\x36\x2E\x24\x74\x3B\x32\x2E\x36\x5B\x69\x5D\x3D\x32\x2E\x36\x5B\x69\x5D\x2E\x31\x49\x28\x31\x31\x2C\x27\x27\x29\x3B\x35\x28\x32\x2E\x36\x5B\x69\x5D\x2E\x47\x3E\x5A\x29\x7B\x32\x2E\x36\x5B\x69\x5D\x3D\x32\x2E\x36\x5B\x69\x5D\x2E\x31\x48\x28\x30\x2C\x5A\x29\x2B\x27\x2E\x2E\x2E\x27\x7D\x35\x28\x27\x6D\x27\x63\x20\x34\x29\x7B\x35\x28\x27\x56\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x7B\x32\x2E\x79\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x56\x2E\x24\x74\x7D\x35\x28\x27\x71\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x32\x2E\x71\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x71\x2E\x24\x74\x3B\x35\x28\x27\x57\x24\x59\x27\x63\x20\x34\x2E\x6D\x5B\x30\x5D\x29\x7B\x32\x2E\x42\x5B\x69\x5D\x3D\x34\x2E\x6D\x5B\x30\x5D\x2E\x57\x24\x59\x2E\x50\x7D\x7D\x35\x28\x27\x58\x24\x31\x37\x27\x63\x20\x34\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x34\x2E\x58\x24\x31\x37\x2E\x31\x4A\x3B\x35\x28\x27\x31\x6B\x24\x73\x27\x63\x20\x34\x29\x32\x2E\x76\x5B\x69\x5D\x3D\x34\x2E\x31\x6B\x24\x73\x2E\x24\x74\x7D\x4C\x20\x32\x7D\x75\x20\x31\x63\x28\x38\x2C\x65\x29\x7B\x35\x28\x38\x3D\x3D\x65\x29\x7B\x4C\x20\x38\x7D\x37\x20\x78\x3D\x30\x3B\x37\x20\x6E\x3D\x30\x3B\x35\x28\x65\x3E\x38\x29\x7B\x6E\x3D\x65\x2D\x38\x3B\x78\x3D\x38\x7D\x31\x6D\x7B\x6E\x3D\x38\x2D\x65\x3B\x78\x3D\x65\x7D\x6E\x3D\x31\x67\x2E\x31\x4B\x28\x31\x67\x2E\x31\x77\x28\x29\x2A\x6E\x29\x3B\x4C\x28\x6E\x2B\x78\x29\x7D\x46\x28\x27\x31\x68\x27\x2C\x27\x27\x2C\x27\x27\x2C\x27\x30\x27\x2C\x27\x31\x65\x27\x29\x3B\x75\x20\x31\x65\x28\x64\x29\x7B\x31\x66\x3D\x4B\x28\x64\x29\x3B\x31\x64\x3D\x31\x66\x2E\x73\x3B\x70\x3D\x31\x64\x2D\x31\x6C\x3B\x35\x28\x70\x3C\x31\x29\x70\x3D\x31\x3B\x70\x3D\x31\x63\x28\x31\x2C\x70\x29\x3B\x46\x28\x27\x31\x68\x27\x2C\x27\x27\x2C\x27\x27\x2B\x70\x2B\x27\x27\x2C\x27\x27\x2B\x31\x6C\x2B\x27\x27\x2C\x27\x31\x6A\x27\x29\x7D\x75\x20\x31\x6A\x28\x64\x29\x7B\x37\x20\x39\x3D\x4B\x28\x64\x29\x3B\x37\x20\x33\x3D\x22\x22\x3B\x54\x28\x37\x20\x69\x3D\x30\x3B\x69\x3C\x39\x2E\x38\x3B\x69\x2B\x2B\x29\x7B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x4D\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x30\x20\x31\x61\x3D\x22\x30\x25\x22\x20\x31\x47\x3D\x22\x30\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x62\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x52\x3D\x22\x27\x2B\x39\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x20\x6B\x3D\x22\x27\x2B\x39\x2E\x36\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x7A\x20\x50\x3D\x22\x27\x2B\x39\x2E\x72\x5B\x69\x5D\x2B\x27\x22\x20\x31\x61\x3D\x22\x31\x36\x22\x20\x31\x79\x3D\x22\x31\x36\x22\x2F\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x78\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x52\x3D\x22\x27\x2B\x39\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x20\x6B\x3D\x22\x27\x2B\x39\x2E\x36\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x39\x2E\x6B\x5B\x69\x5D\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x41\x22\x3E\x27\x3B\x33\x2B\x3D\x28\x31\x42\x2B\x39\x2E\x79\x5B\x69\x5D\x2B\x27\x20\x2D\x20\x27\x2B\x39\x2E\x76\x5B\x69\x5D\x29\x3B\x35\x28\x41\x28\x39\x2E\x76\x5B\x69\x5D\x29\x3E\x31\x29\x7B\x33\x2B\x3D\x31\x45\x7D\x31\x6D\x7B\x33\x2B\x3D\x31\x44\x7D\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x77\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x62\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x30\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6C\x3E\x27\x7D\x33\x3D\x27\x3C\x6C\x20\x7A\x3D\x22\x31\x43\x22\x3E\x27\x2B\x33\x2B\x27\x3C\x2F\x6C\x3E\x27\x3B\x31\x38\x2E\x31\x39\x28\x33\x29\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x74\x68\x69\x73\x7C\x73\x74\x72\x5F\x6F\x75\x74\x7C\x65\x6E\x74\x72\x79\x7C\x69\x66\x7C\x73\x75\x6D\x6D\x61\x72\x79\x7C\x76\x61\x72\x7C\x6D\x69\x6E\x7C\x52\x70\x6F\x73\x74\x7C\x7C\x6C\x69\x6E\x6B\x7C\x69\x6E\x7C\x6A\x73\x6F\x6E\x7C\x6D\x61\x78\x7C\x6E\x65\x77\x7C\x7C\x4F\x62\x6A\x65\x63\x74\x7C\x7C\x7C\x74\x69\x74\x6C\x65\x7C\x64\x69\x76\x7C\x61\x75\x74\x68\x6F\x72\x7C\x64\x69\x66\x66\x7C\x73\x74\x61\x72\x74\x7C\x6D\x69\x6E\x5F\x69\x6E\x64\x65\x78\x7C\x75\x72\x69\x7C\x74\x68\x75\x6D\x62\x7C\x74\x6F\x74\x61\x6C\x7C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x63\x6D\x7C\x74\x64\x7C\x72\x6D\x69\x6E\x7C\x61\x75\x6E\x61\x6D\x65\x7C\x63\x6C\x61\x73\x73\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x61\x76\x61\x74\x61\x72\x7C\x66\x65\x65\x64\x7C\x69\x74\x65\x6D\x7C\x70\x75\x62\x7C\x46\x65\x65\x64\x5F\x43\x61\x6C\x6C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x6C\x61\x62\x65\x6C\x7C\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x7C\x64\x69\x72\x7C\x46\x65\x65\x64\x5F\x50\x61\x72\x73\x65\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6D\x61\x78\x5F\x72\x65\x73\x75\x6C\x74\x7C\x74\x79\x70\x65\x7C\x63\x61\x6C\x6C\x62\x61\x63\x6B\x7C\x73\x72\x63\x7C\x73\x74\x61\x72\x74\x5F\x69\x6E\x64\x65\x78\x7C\x68\x72\x65\x66\x7C\x7C\x66\x6F\x72\x7C\x73\x63\x72\x69\x70\x74\x7C\x6E\x61\x6D\x65\x7C\x67\x64\x7C\x6D\x65\x64\x69\x61\x7C\x69\x6D\x61\x67\x65\x7C\x53\x75\x6D\x5F\x4C\x65\x6E\x7C\x74\x61\x62\x6C\x65\x7C\x72\x65\x7C\x74\x79\x70\x65\x6F\x66\x7C\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x7C\x4E\x6F\x5F\x54\x68\x75\x6D\x62\x5F\x55\x72\x6C\x7C\x4E\x6F\x5F\x41\x76\x61\x74\x61\x72\x5F\x55\x72\x6C\x7C\x33\x32\x70\x78\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x77\x72\x69\x74\x65\x7C\x77\x69\x64\x74\x68\x7C\x74\x72\x7C\x52\x61\x6E\x64\x6F\x6D\x7C\x54\x6F\x74\x61\x6C\x5F\x50\x6F\x73\x74\x7C\x47\x65\x74\x5F\x54\x6F\x74\x61\x6C\x5F\x50\x6F\x73\x74\x7C\x6A\x50\x6F\x73\x74\x7C\x4D\x61\x74\x68\x7C\x70\x6F\x73\x74\x73\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x52\x61\x6E\x64\x6F\x6D\x5F\x50\x6F\x73\x74\x5F\x53\x68\x6F\x77\x7C\x74\x68\x72\x7C\x4D\x61\x78\x5F\x50\x6F\x73\x74\x5F\x44\x69\x73\x70\x6C\x61\x79\x7C\x65\x6C\x73\x65\x7C\x66\x65\x65\x64\x73\x7C\x4A\x61\x76\x61\x53\x63\x72\x69\x70\x74\x7C\x74\x65\x78\x74\x7C\x69\x6E\x64\x65\x78\x7C\x61\x6C\x74\x7C\x73\x74\x61\x72\x74\x49\x6E\x64\x65\x78\x7C\x72\x65\x73\x75\x6C\x74\x73\x7C\x69\x74\x65\x6D\x73\x50\x65\x72\x50\x61\x67\x65\x7C\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73\x7C\x72\x61\x6E\x64\x6F\x6D\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x68\x65\x69\x67\x68\x74\x7C\x69\x6D\x67\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x69\x6E\x66\x6F\x7C\x4C\x61\x6E\x67\x5F\x42\x79\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x72\x65\x6C\x7C\x62\x6F\x72\x64\x65\x72\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x75\x72\x6C\x7C\x66\x6C\x6F\x6F\x72\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x5F\x69\x74\x65\x6D\x7C\x62\x72\x65\x61\x6B","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x5cedx1,_0x5cedx2,_0x5cedx3,_0x5cedx4,_0x5cedx5,_0x5cedx6){_0x5cedx5=function (_0x5cedx3){return (_0x5cedx3<_0x5cedx2?_0xc4c0[4]:_0x5cedx5(parseInt(_0x5cedx3/_0x5cedx2)))+((_0x5cedx3=_0x5cedx3%_0x5cedx2)>35?String[_0xc4c0[5]](_0x5cedx3+29):_0x5cedx3.toString(36));} ;if(!_0xc4c0[4][_0xc4c0[6]](/^/,String)){while(_0x5cedx3--){_0x5cedx6[_0x5cedx5(_0x5cedx3)]=_0x5cedx4[_0x5cedx3]||_0x5cedx5(_0x5cedx3);} ;_0x5cedx4=[function (_0x5cedx5){return _0x5cedx6[_0x5cedx5];} ];_0x5cedx5=function (){return _0xc4c0[7];} ;_0x5cedx3=1;} ;while(_0x5cedx3--){if(_0x5cedx4[_0x5cedx3]){_0x5cedx1=_0x5cedx1[_0xc4c0[6]]( new RegExp(_0xc4c0[8]+_0x5cedx5(_0x5cedx3)+_0xc4c0[8],_0xc4c0[9]),_0x5cedx4[_0x5cedx3]);} ;} ;return _0x5cedx1;} (_0xc4c0[0],62,112,_0xc4c0[3][_0xc4c0[2]](_0xc4c0[1]),0,{}));
-->
</script><script type="text/JavaScript" src="../../feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=Get_Total_Post"></script><script type="text/JavaScript" src="../../feeds/posts/summary?start-index=50&amp;max-results=1&amp;alt=json-in-script&amp;callback=Random_Post_Show"></script>
Comment below if you have any queries regarding the code!
Continue Reading

Stylish Social Bookmarking & Subscription Widget for Blogger

Blogging alone doesn’t make any sense if no one reads it. Social bookmarking is considered as on of the top traffic resource for a website. Moreover having loyal readers to your blog earns some reputation in the social networking sites as the readers interact for one or other post you’ve posted.

 

The following is the social bookmarking widget that I’m using it on Amfas Tech. I’m going to give you the code along with the ‘how-to-customize’ it guide. Let’s take a look at the installation process and customization.

 

DEMO: For demo of this widget checkout subscription widget in the sidebar of this site.

 

Stylish social bookmarking & subscription widget

Installation Process

Step 1: Login to your blogger and go to your blog’s dashboard.

 

Step 2: Click on ‘layout’ and then click on ‘add a gadget’ to add this widget.

 

Step 3: Click on ‘HTML/JavaScript’

 

Step 4: Now add the following code in it.

 

<style>
#socialwidget {
border: 1px solid #ebebeb;
width: 320px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #ebebeb;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 310px;
}
.g-plusone {
float: left;
}
.twitter {
background: #ffffff;
border-bottom: 1px solid #ebebeb;
padding: 10px;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 330px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 42px;
background: #EFF8FB;
width: 280px;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 5px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 35px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 10px;" href="http://facebook.com/askmeforasolution" target="_blank" rel="nofollow">
<img src="http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/amfastech" target="_blank" rel="nofollow">
<img src="http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/112850548996825291523" target="_blank">
<img src="http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/sasikareti/amfas-tech/" target="_blank">
<img src="http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/amfastech" target="_blank" rel="nofollow">
<img src="http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png" title='RSS Feed'/></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium" href="http://www.amfastech.com/"></g:plusone>
<!-- Place this render call where appropriate -->
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="TZ">
<!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Faskmeforasolution&amp;send=false&amp;layout=button_count&amp;width=450&amp;

show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=amfastech&amp;show_count=true&amp;

show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=amfastech', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="50px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="amfastech"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>

<!-- End Widget -->
</div>

Step 5:Save’ it and ‘view blog’.

 

Customization

 

1. Press Ctrl+F and search for ‘amfastech’(without quotes) & replace all search results with your feedburner uri and twitter handle respectively.

Note: In my case my feedburner uri & twitter handle is same.

2. Find ‘askmeforasolution’ and replace your facebook page name with it.

 

3. Find ‘Google+’ page and profile ID and replace it with yours.

 

4. Find ‘Pinterest’ and replace your ‘Pin board’ URL.

 

Width of the objects are variable. You can vary them as per your requirement.

 

I hope I have covered with every customization in it. Comment below if you need any help in the installation.

Continue Reading