Blog Genes

Showing posts with label Blogger Widget. Show all posts

Thursday, 21 August 2014

Problem Of Related Posts Widget In Blogger Templates

As i already said the templates provided by blogger lags various features and this problem is among one of them. Today we get the related posts widget inbuilt in most blogger templates but if want to use the templates provided by Blogger then you have to add this widget manually. There are many websites available online that provides free Related posts widgets for your blogs or websites such as LinkwithIn, Nrelate etc.

But we have to be careful while selecting a related posts widget because it can affect your blog in many ways. So before selecting a related posts widget for our blogs we must check the following things:

Check whether the related posts shown in the widgets are actually related or they are just showing the same posts all the time. This is an important step because if your visitors see the same posts all the time in related posts then they will get bored and will surely leave your site which will affect the bounce rate of your blog.
The second thing that we need to check while selecting a related post widget is one of the most important thing to be considered. Check whether your related posts widget is soaking your blog's link juice or not. If it is soaking your blog's link juice then it is not good for your blog. You can check it by clicking on any related post shown in related posts widget, when you click a post in related posts check whether it is directly redirecting you to your blog post or it is redirecting you first to its website(that is related posts widget providers website) and then back to your related post. The process of redirection is very fast so keep your eyes open and look at the address bar for redirection. One of the most known widget that has this problem of soaking link juice is LinkWithIn Related Posts widget, this widget looks good and professional but with this negative point of the widget i would not recommend you to use it.
Check whether your related posts widget widget provider site providing different styles of the widget or just a single style. This is not a very important thing to check but if a related posts widget doesn't fits in your sites design then it can make your site look unprofessional.

So i have discussed all the major things that you must need to consider before selecting a related posts widget for your blog. So now i will describe you which related posts widget to use for your blog.

After seeing the negative points of LinkWithIn's Related Posts widget i decided to search for a better alternative that not only show effective related post but also provide various styles and customizations. After a little search i have found a widget which is actually good for our blogs and it is provided by Nrelate. This widget not only shows effective related posts but also provide various customizations and style for which i was looking. Also they do not force you to show their name nearby or below the widget in any way, it is totally optional so you can choose whether to show their name or not. One more thing about this widget, Nrelate offer you to show the sponsors ads in your related posts widget so you both can earn some money through your widget, but again it is totally optional so if don't want to show sponsors posts then simply select no in the options. I think this is the widget of choice for Blogger Templates, so if want to add Nrelate's Related Posts Widget to your blog then follow the below link:

How to add Nrelate Related Posts widget to Blogger ?

5 Flash Animated Twitter Badge Widget For Blogger

In my previous post i have given you 7 different types flash animated twitter bird widget that you can use to promote your blog on twitter and increase the number of Twitter followers. So today i have decided to give you some new widgets that are as cool as the twitter bird widget. Basically these widgets are small badges that look pretty cool as well as they do not require much space of your blog or website. So if you are very choosy about widgets and place only specific widgets that don't acquire much space of your blog then these badges are for you. These badges are very easy to install and customize so you can easily change their height and width as per your requirements. Here i am providing you 5 different types of badges so first choose any one of the badge that you like the most and then follow the tutorial to install and customize it.

# These Flash Animations are designed and developed by twitterflash.net.

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

How to add Flash Animated Twitter Badge to Blogger ?

Log in to you Blogger Account.
Then go to Dashboard >> Layout >> Add a Gadget.
Then select HTML/JavaScript from the list.
In HTML/JavaScript box, copy and paste the code of your chosen badge from the above badge types.
Then click on Save tab and you are done.

Customizations:

Replace Amit00006 with your Twitter Username.
To change the height and width of the widget change the values shown in blue.

7 Animated Flash Twitter Bird Follow Me Widget For Blogger

Nowadays Twitter is one of the most famous social networking site available online. Twitter has huge number of users and that is the reason why most bloggers try to promote their blogs on it. Having a huge number of followers on any social networking site always gives a pleasant feeling to anyone. There are various different kind of twitter widgets available online that you can use to promote your blog on twitter but i think these widgets are one of the coolest widgets i have seen till now and i hope that they will not disappoint you.

So today i am going to provide you some animated widgets that look very cool and they can surely increase the number of your twitter followers. These widgets are quiet easy to install and also enhance the looks of your blog/website. Here i am providing 7 different types of twitter bird widgets so choose any of the widget that you like the most for your blog and follow the instructions to add it to your blogger blog.

# These Flash Animations are designed and developed by twitterflash.net.

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

Type 6:

Type 7:

How to add animated flash Twitter bird widget to blogger ?

Log in to your Blogger Account.
Then select the blog in which you want to add this widget.
Then go to Dashboard>> Layout >> Add a Gadget.
Then select HTML/JavaScript from the list.
In HTML/JavaScript box paste the copied code.
Click on Save button and you are done.

Customizations:

Replace Amit00006 with your Twitter username.
To change the size of the widget change the value of Width and Height shown in blue.

Also read:

Flying Twitter bird for Blogger (Recommended)

Stylish Jumping Social Share Buttons For Blogger

Social share buttons are the great widgets for promoting your blog on different social platforms. Although there are many social share buttons available online but the thing that we need to consider is to attract our blog visitors to share our posts. Attracting visitors to share our contents is not a big deal if you have stylish buttons that pull the visitors attention.

Our social sharing widget must need to look attractive as well as allow the visitors to share your content with ease otherwise visitors might ignore sharing your posts. So, today i am going to provide you a fantastic share widget that can easily attract your visitors to share your posts. These social share buttons look very cool as well as they jumps whenever you move your mouse over them. These buttons are easy to customize and you can add as many as buttons you want. You can see the live demo of these button in this blog, just see below the post and decide whether they are cool or not. So lets begin the tutorial:

How to add Jumping share buttons to Blogger ?

Go to www.Shareaholic.com
Then click on Add Shareaholic to your site

Then you will find three options: Related Content, Share Buttons, Social Analytics.
Select Share buttons as we are here to add share buttons to our blogs and then click on Get Started, however if you want to select other options then you can select them too.

Now it will ask you to create an account or log in with your Facebook or Twitter account.
Then create an account or simply log in with your Facebook or Twitter account.

Then it will redirect you to Add a new website page.
In Add a new website page enter your blog URL, Blog name, platform, category and language as shown in screenshot and then click on Continue tab.

Now you will be taken to Publisher Apps page.
In Publisher Apps page, enter the location where you want to show your share buttons that is below or above posts, theme, headline, alignment etc fields and then click on Save Settings.

Now it will show you two codes, copy both the codes.

Now log in to your Blogger Account.
Then go to Dashboard >> Template >> Edit HTML.
Now in edit HTML section press CTRL + F and search the follwing code:

</head>

Then paste your first code just above </head>.
Now again in Edit HTML section search the following code:

<data:post.body/>

Note: This code appears three times in Edit HTML section, so search the second one.

Then paste the second code just below <data:post.body/> to show the buttons just below your posts but if you want to show these buttons above your posts then paste the second code just above <data:post.body/>.
Then click on Save Template tab and you are done.

Enjoy your new stylish share buttons !

Also read:

Black social media vertical bar widget for Blogger
Facebook Pop up like box widget for Blogger (Recommended)

Professional Subscription Widget For Blogger

An email subscription box is generally a widget that helps your visitors to be connected to your blog or website. Subscription box asks for an email from the visitor to send them regular updates about your blog. Whenever you create a post or publish anything then it will send an update email to all your subscribers and hence it helps you in increasing traffic for your blog. This number of subscriptions to your blog not only increases your blog traffic but it also shows the interest of your blog users in your blog and how desperate they are to listen you.

There are many subscription widgets available online that you can get from various sites but the thing you must consider while selecting your subscription widget is to look for a professional looking subscription box which suits your website layout. So here i am providing you one such professional looking subscription box. This widget is easy to install, looks professional and easily merges with your blog's template. The best thing about this widget is you can install this widget in your blogs layout by using add a gadget option and also you can install this widget directly to your template. In this tutorial i will show you both the methods of installing this widget. This widget has some features like in header section you can leave a short message for your visitor that why they subscribe your newsletter also it asks for the name of visitor who is subscribing to your blog. This widget also adjust its text and background color according to your blog's template and hence it does not affect the look and feel of your blog.
Live Demo
Below are the steps describing you how to install this widget to blogger :

How to add Subscription widget to Blogger Layout ?

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
Now in HTML/JavaScript content box copy and paste the below code in it.

<b:if cond='data:blog.pageType == "item"'>

<style>
#bloggenes-sbox {
height:250px;
width:280px;
background:hsla(0,0%,95%,0.4);
padding:3px;
border:3px solid hsla(0,0%,67%,0.19);
border-radius:10px 10px 10px 10px;
}
#bloggenes-sboxh3 {
text-align:center;
margin:4px;
text-transform:uppercase;
font-weight:bold;
font-family:'Merienda';,cursive;
font-size:1.1em;
letter-spacing:0.7px;
}
#bloggenes-sboxheader {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
font-size:11px;
padding-bottom:3px;
font-family:'Marmelad',sans-serif;
text-align:left;
}
.bloggenes-sbox-form {
padding:10px;
}
#bloggenes-sboxheader img {
padding-right:5px;
}
.bloggenes-sbox-name {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKkaDlVoyi50DMyXDU_z4h2Mk22UIFbup5pYYuxEruVkOgV-BA9ujeNntNMttUIwOVaN3z341jdoRiuw7cTja5wth6RCtn4XNqvKLGT8H8DcvqY6yIubF7ImJM1m9XaGC06V3XFkYH4G0/s320/name.png) no-repeat 7px 8px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:11px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:80%;
height:16px;
padding:5px 15px 5px 22.5px;
vertical-align:top;
display:inline-block;
}
.bloggenes-sbox-email {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2_15JfdFx32JdsXJ-4nwwiygcPzTwiD-FBTlZXxFhVslf2vdRYt54pxb5Hn6TMrhwK_-oTiTNECpq4HGxZe-EQgRUM3n_MsbtwghqRZzw5-L_eqZjHs66SM3S2pMmukWBW8foh5gQAc/s320/email.png) no-repeat 7px 10px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:11px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:80%;
height:16px;
margin-top:10px;
padding:5px 15px 5px 22.5px;
vertical-align:top;
display:inline-block;
}
.bloggenes-sbox-name:hover,.bloggenes-subsbox-email:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.bloggenes-sbox-submit {
float:right;
margin-top:10px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 16px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.bloggenes-sbox-submit:hover {
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );
background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');
background-color:#dfdfdf;
}
.bloggenes-sbox-submit:active {
position:relative;
top: 1px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'/>
<center>
<div id='bloggenes-sbox'>
<div id='bloggenes-sboxh3'>
Subscribe To Our Newsletter
</div>
<div id='bloggenes-sboxheader'>
<a href='http://goo.gl/6rQJK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNABC7Dineu73XtzoZUIl3r_mls2OidmZbUzgm2vjwnerDUBSQOaHAxG0Be5HvFJJ1pMNfrTIcGb6iJj4u2QMkDU5Yc89TNJSaVhovmdGx3RzknqKZZ48MqeqPmacK1-GCOu6BRDi3PM/s1600/mail-icon.png' style='float:left;'/></a>
<p style='margin-top:13px;'>
Get Blogging Tips and Widgets Straight To Your Inbox By Submitting Your Email ID Below. It's 100% Free!
</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogGenes' class='bloggenes-sbox-form' method='post' target='_new'>
<input class='bloggenes-sbox-name' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/>
<input class='bloggenes-sbox-email' name='email' onblur='if (this.value == '') {this.value = 'Your Email Adress';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/>
<input class='bloggenes-sbox-submit' type='submit' value='Sign Up!'/>
</form>
<p style='font-family:times new roman;margin-top:5px;font-size:10.5px;'>
<b>We Hate Spam! </b>Really, It's terrible and we never do it.
</p>
</div>
</center>
</b:if>

Now save your gadget and you are done.

How To add Subscription Widget to Blogger Template ?

Go to Dashboard >> Template >> Edit HTML.
Now search for the following code:

<data:post.body/>

Note: This code appears three or four times in blogger templates, so search the third one.

Now paste the Subscription code(provided above) just below it.
Then Save your template and you are done.

Customizations:

Replace "BlogGenes" shown in red with your Feedburner user name.
Replace the text in blue with your message.
To change the height and width of the widget simply change the values in green.

Also read: Do you like this article updated subscription and follow widget for Blogger.

Live Cricket Scores Widget For Blogger

Live Cricket Scores widget is a cool widget for sports related blogs or website, also if you are a big fan of cricket and want to decorate your blog or website with sports widgets then this widget is for you. This widget has three tabs - Live, Recent and Upcoming. Live tab shows live scores, Recent tab shows scores of recently played matches and Upcoming tab shows the upcoming matches schedule.

The widget is available in five different color patterns, this widget does not take much space and therefore it does not affect your website layout.

LIVE DEMO

Code:

Green:

Cream:

Purple:

Sky Blue:

Pink:

How to add this widget to Blogger ?

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Now select HTML/JavaScript from the list.
Then copy and paste any of the above code in HTML/JavaScript content box.
Now Save your gadget and you are done.

This widget is mainly provided by CRICWAVES to its users for regular cricket updates, however if you want more cricket related widgets then visit their website.

Sitemap page using css and HTML.

Sitemap for a website or blog generally describes the structure of a website. Sitemap page is like a table of content which helps the website users to easily navigate through the website. We often see sitemap links on various website, there are different layouts for sitemap page but the motive is same to help users to easily navigate.
Live Demo You can generate a sitemap page on your own but it takes some time, so if you don't want to give time for creating and updating sitemap then this widget is perfect for you. This sitemap/table of content generator widget fetches all your tags or labels and shows it in a structured manner. This widget shows all your posts with an expand feature that is it shows tags and when you click on a tag then it shows all the post with in that tag.

Sitemap widget expand feature.

Here i am providing this widget with CSS code that makes this widget more attractive but if you don't want to use css code then don't use it, even without css code it works perfectly.

Sitemap without css.

How to add this widget to Blogger ?

Step 1:

This is a two step process :

Log in to your Blogger Account.
Then go to Dashboard >> Template >> Edit HTML.
Now search for following code:

]]></b:skin>

Now paste the below code just above ]]></b:skin> code.

/*---- css code for sitemap strat ----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

/*---- css code for sitemap end----*/

Then Save your template.

Note: Step 1 is optional, if you don't want to style your sitemap page then skip step 1.

Step 2:

Now again go to Dashboard >> Pages.
Then click on New Page and select Blank Page.
Now in HTML section of your page copy and paste the below code in it.

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">
</script>
<script src="http://www.bloggenes.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>

Now Save your page and click on Preview or Publish button to see the sitemap of your blog.

Customizations:

Replace my blog URL shown in red with your blog's URL.

Also Read: How to add code box to blogger ?

Facebook Popup Likebox Widget For Blogger

Every webmaster loves to promote his/her blog or website. Social media websites are the great source of generating traffic for your blog. As we all know that Facebook is the largest social networking website and therefore every webmaster is searching for new and effective ways to promote his/her blogs on Facebook.

Today developers are creating various cool social media widgets that can be helpful for you to promote your blog or website on different social networking websites. Facebook popup widget is one of the coolest widget that can increase Facebook likes for your website or blog. This Facebook popup widget is a fast loading, easy to install and good looking widget. I have tested this widget on various templates and using it on almost all my blogs and its actually helping me. So now, if you want to add this widget to your blog then just follow the simple instructions below:

Also read: Stylish scrolling Facebook like box widget for Blogger. - Recommended

How to add Facebook Popup Widget to Blogger ?

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
Then copy and paste the below code in HTML/JavaScript box.

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VPTSbfGYS0iUtsnvTAFK_SxuKRNSUHuV6X9fGcCqZ3x-d-QB1vhBu49t4EXcsnEunMzKY1DLsFkAVRhNked_XSm-0Nzj6NAaRnLA-cGL1Lrvx4ryx16AK5chJ7ZKcO48PqgQ8ofs4IrY/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/bloggenes&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit"><a href="http://www.bloggenes.com/2013/10/facebook-popup-likebox-widget-blogger.html">Facebook Popup Widget</a></span></center>
</div>
</div>

Now save the gadget and you are done.

How to add this widget on any website or other platforms ?

To add this widget on any website, just copy and paste the above code in body section of your website i.e. in between opening and closing body tag (<body> your code </body>).

How to customize it ?

Replace the code in red with your Facebook fan page URL.
By default, This widget appears only once in 30 days for a user. So if you want the widget to appear on every reload then search and remove the following code from the above code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Note: This widget appears only once in 30 days, so if want to see it again then clear your browser's cookie.

Also read:

Floating Twitter Follow Us Badge Widget For Blogger

Twitter is also a great platform to promote your blog/website, the number of followers shows how much people believe in you and your blog. This twitter follow us badge is a decent widget that can get you some followers. You can use this widget to either promote you or your blog on twitter. The best thing about this widget is it does not take too much space, it is simple and precise and therefore it merges with your blog template.

This widget is just like other floating widget but it looks great, generally this widget looks great on website that has light background, However you can use this on blogs with dark background. This widget is very easy to install and customize.

To install this widget just follow the simple instructions given below:

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
And then copy and paste the below code in HTML/JavaScript content box.

Now click on Save tab and you are done.

Customizations:

Just replace my twitter name shown in red with your twitter name.
If you want to change the default text "Follow us" to "Follow me" then simply replace Follow us shown in green with follow me.
To change the color of widget replace the HTML color code shown in blue with your HTML color code or default color name.
If you want that your widget to appear on the left side of the page then replace "r", shown in blue with "l".
To adjust the position of the widget simply change the value "136",shown in orange with your desired value.

Also read:

Do You Like This Article Updated Subscription And Follow Widget For Blogger

Generally we use social like, follow and subscription widget to promote our blogs on various social networking sites as well as to increase some visitors and for this we require some good widgets that can attract our users. So, this is a widget of choice, this widget is not only attractive but it is also full of features such as like, follow and subscription tools. The best thing i like about this widget is that it is attractive plus its placement, this widget is mainly designed to place it just after the post so that as your reader ends his/her reading they can see a sentence asking them "Do you like this article/story ?". If your blog post is good then they will definitely like, follow or subscribe it.

As we know everybody is in hurry so many times visitors like your post but don't click on like button. This is due to a non attractive widget or wrong placement of your widget. I like this widget very much and would recommend everyone to use it on their blogs/websites. I have removed each and every error from the code and tested it on my other blogs, you can see a demo of this widget by clicking the demo link given below:
Live Demo
The installation and customization of this widget is very easy. You can install this widget to your blog by following the easy steps given below:

Log in to you Blogger Account.
Then go to Template >> Edit HTML.
And then search this code:

<data:post.body/>

NOTE: This code appears three times in your template's Edit HTML section, so you have to find the second one. And if it doesn't work then find the third one.

Then copy and paste the below code just below/after it.

<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5sX3isRKJJFKns7sLla86kuWx1ns9qYWTthaqtre9RQpittVpBq5R2BADaRPdmH5DXwxQGTCFkBexwWaWnRDMAjN-9uRHw4lWg-IJ_qMAnEkRKwA-RbTA9ZZ13a-deVgYbMhl7YVHSQf/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: Lucida Fax,arial,sans-serif, verdana; color: red;'>Do You Like This Article?</span>
<tr>
<td>
<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 class="fb-like" data-href="http://facebook.com/thebravesandsmarts" data-width="300" data-show-faces="true" data-send="true"></div>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Subscribe To Free Email Updates !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=btsnts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='thebravesandsmarts'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4a_0gSc7-P9IgbJ0lIUow_rRzCQ8L1wKgeXS1JQ6xidDkhoqTmTM8xR5aTWH85e51SxIiPTOA8s9H4bs1SJHoww97vCStSH3pLgyh2Fo-BeWF84klQQiW2MA_q7Ku5dY19bzl-NoefMr/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/TheBrvsAndSmrts' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcJsY00TFS9z1Ur8surSgixswYtT9bo2cmWx358DyG-CMOSrelQ5_wq0gU4C7zunKoWxQdl1EThiUj26s-hWrcdVzd1EX9EoElqSPlthCLfRErnygpX8ClWHjbvfSVKAImVmoLI05sSI5/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz72fa8j25sxmxLZRSEK4ZTnGP1XYTPm6Gg_5c36IT0MBqG5MhvyEQJWEYokwkzqiLlBM38RNdbfgGlPRBMjDwpFD2Vz_5NnTMycNuqahzPbv1VTOzn3Pg9ufSwEOF05XL9kGIx-XKpa9z/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table>
*Don't forget to click the confirmation link( in your email) to verify your entry!
</div></div>
</b:if>

Then Save your template and you are done.

Major/Necessary Customizations:

Replace the text in red color with your Facebook page id .
Replace the text in green with your Twitter username .
Replace the text in sky blue with your Feedburner id .

Some Other Customization:

These are not necessary but if you want then you can change this widget according to your requirements:

To change the background color pf the widget just replace the text shown in pink with default color names or HTML color codes .
To change the width of the widget just change the pixels value in yellow .
To change the background color on hover or mouse over just replace the HTML color code in light grey with your HTML color code or with default color names .
To change the font style just remove the text italic shown in grey color .
To change the font size just replace the pixel values shown in orange .
To change the font family just replace the text Lucida Fax shown in pink with your desired font family for Eg. Arial, Lucida Handwriting etc .
If you want to change the default Text with your own then simply replace "Do you like this article ?" shown in purple .
If you want don't want to show faces and Facebook send button then replace the text "true" with "false" shown in blue . Also if you want to change the length of Facebook button widget then just change the value shown in blue color .
If you want to replace the text "Get subscribe to free email updates", simply replace it with your own text shown in light/faded red color .

Also read:

Code Box For Blogger With Customizations

code box

Generally code box is required to provide some code to our users because sometimes long codes can affect your website/blog's looks and make it look weird. This code box is mainly designed for the bloggers who provides some tips or widgets to other bloggers but you can also use it for various other purposes such as for providing some text or articles that you don't want to so on your post etc.

This code box can make your blog look attractive as well as you can customize it as per your needs and requirements and hence it merges with your blog template without affecting your blog's looks. This code box is easy to install and customize, you can change its colors, text, size etc in few seconds. One more thing you just have to install it once and then you can use it anywhere in your post without pasting the entire code, means you just have to use simple short code to use it like our "Live Demo or Download Button's code". You can see the live demo of this code box below:

DEMO
Also read: Sitemap or table of content generator widget for Blogger.

Now, i think i have described you everything about this code box except how to add this code box to your blog?. So to add this code box to your blog just follow the simple steps below:

Log in to your Blogger Account.
Go to Template >> Customize >> Add CSS.
Then in Add CSS box just copy and paste the below code in it and click on "Apply To Blog" tab.

.bloggenes { background:#F9F9F9; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 1px; color: #000000; font: 13px 'courier new', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 150px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; }

Now whenever you need this box in your blog post.
Just open your post and go to HTML section and paste the below code in it.

<div class="bloggenes">
Paste your code here
</div>

Screenshot 1

screenshot 2

Now go to compose section of your post and replace "Paste your code here" with your code and you are done.

screenshot 3

Customizations:

To change the background color of code box replace the HTML color code in red with your HTML color code or with color names like red, green, blue etc.
To change the border color simply replace the HTML color code in green with your own color code.
To change the border width just replace the pixel values in blue.
To change the font color replace the HTML color code in pink with your HTML color code or with default color names.
To change the font size simply replace the pixel value in purple with your desired pixel value.
To change the font style just replace font style in orange with your required font style for example: Lucida fax, Arial etc.
To change the height of the box just change the pixels value in grey.
To change the width of the code box just replace the percentage value in yellow with your desired value.

Also read:

Thursday, 21 August 2014

Tuesday, 19 August 2014

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

How to add Flash Animated Twitter Badge to Blogger ?

Customizations:

Monday, 18 August 2014

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

Type 6:

Type 7:

How to add animated flash Twitter bird widget to blogger ?

Customizations:

Friday, 1 November 2013

How to add Jumping share buttons to Blogger ?

Wednesday, 16 October 2013

How to add Subscription widget to Blogger Layout ?

How To add Subscription Widget to Blogger Template ?

Customizations:

Sunday, 13 October 2013

Code:

How to add this widget to Blogger ?

How to add this widget to Blogger ?

Customizations:

Saturday, 12 October 2013

How to add Facebook Popup Widget to Blogger ?

Code:

How to add this widget on any website or other platforms ?

How to customize it ?

Saturday, 21 September 2013

Customizations:

Sunday, 15 September 2013

Major/Necessary Customizations:

Some Other Customization:

Saturday, 14 September 2013

Customizations:

Best URL Shortener 2015

Best Ad Networks 2015

Most Visited Articles