How to Auto Generate Short URLs of Your Bogger Posts

How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly

It is an online service that provides you short URLs of your posts so that you can share them with your friends, family, and on the web. This service is fairly popular on microblogging site twitter because it is the default shortening service since May 6, 2009. The shorten links created with this service are permanent and somewhat look like this http://bit.ly/6wgJO.

The First thing you will be doing is to login into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> and search for the ]]>

tag. Once you find it, just above it paste the following CSS code.

Copy Below Code:

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}
Now after pasting the style sheet coding into your template, it is time to move ahead, and get things a bit more serious. Again in the template, search for

Read More

How to add Ajax Based Sitemap Widget For Blogger

Ajax Based Sitemap Widget For Blogger

Sitemap is a must have page for every blog, it can help to improve your blog navigation and also to reduce the blog's bounce rate. The sitemap widget we're going to add today shows a list of articles on the latest published order under each categories.

Also Read: How To Add Google+ Popup Followers Widget For Blogger

How To Add Sitemap Widget On Your Blog

Note:- Please create a back up of your template before you install this widget. To do this, navigate to "Template" and make a backup of your template by clicking on the "Backup/Restore" link at the top. Once the back up is over, follow these steps carefully.

Also Read: How To Add Facebook Popup Widget For Blogger 

Step by Step Tutorial How to Add Sitemap

• On the Blogger Dashboard Go to Template > Edit HTML Button
• Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
• Now search for </head>
• Above that place the following code.

<style type='text/css'> .btnt-sitemap { border-bottom: 4px solid #444; } .btnt-toc-wrap { display: inline-block; font-family: "Century Gothic",sans-serif; width: 100%; } .btnt-toc-wrap .btnt-cat { background: #333; border-radius: 2px; color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; text-transform: capitalize; } .btnt-toc::before { background: #333; bottom: 0; content: ""; left: 20%; margin-left: -10px; position: absolute; top: 0; width: 4px; } .btnt-toc { margin: 0; padding: 30px 20px; position: relative; } .btnt-toc li { list-style: none; margin: 0; padding: 0; position: relative; } .btnt-toc > li .toc-date { color: #999; display: block; font-size: 14px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; } .btnt-toc > li .btnt-icon { background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px #333; color: #fff; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; height: 10px; left: 20%; line-height: 10px; margin: 0 0 0 -25px; position: absolute; text-align: center; text-transform: none; top: 30px; width: 10px; } .btnt-toc > li .btnt-post::after { border-color: transparent #f5f5f5 transparent transparent; border-style: solid; border-width: 10px; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: auto; width: 0; } .btnt-toc > li .btnt-post { background: #f5f5f5; border-radius: 5px; display: block; font-size: 15px; line-height: 15px; margin: 0 0 15px 23%; padding: 25px 30px; position: relative; } .btnt-toc > li .btnt-post a { color: #333; font-weight: bold; } .btnt-toc > li .btnt-post a:hover { color: #999; } </style>

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <script type='text/javascript'> /*<![CDATA[*/ $(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="btnt-sitemap"></div>');$(".post-body .btnt-sitemap").text(t);var r=$(".btnt-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".btnt-sitemap").html(i);$(".btnt-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="btnt-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="btnt-icon"></div><span class="btnt-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="btnt-toc-wrap"><div class="btnt-cat">'+t+'</div>'+i+"</div>")}})})}})}}); /*]]>*/ </script> </b:if>

Final Step:

• Now save your template.
• After that On the Dashboard, Go to Pages > New Page
• On the new page content after adding the page title and hiding the comments using options, add the following code in the page content area.

[sitemap]


For better understanding check the highlighted area in the below image.

Now click publish button and check the published page to see the newly added sitemap widget.

I hope you liked this article and Ajax Based Sitemap Widget . This is a simple a widget to increase your fan following of your profile in order to Increase your blog traffic.

Read More

How to Add Facebook popup Widget for Blogger

Facebook popup Widget for Blogger:

Here’s a fantastic way to increase facebook likes for your blog or website. Add this enticing widget to your website and a facebook like box will pop up with the lightbox effect when a user visits your page.

Also Read: How to Add Google+ Popup Followers Widget for Blogger

What is Facebook popup Widget:

How it is useful for your Blog/Website? It is useful as a visitor click on your website there will be automatic popup of this widget. If a visitors wants to like your facebook page, he will like the page without doing anything further. 

Tags: Facebook popup Widget, Facebook, Facebook popup Widget for blogger, Facebook popup, Facebook Widget, Blogger widget, how to add popup widget, how to, blogger, Blogging tips

Also Read: How to Submit Your Blog and get Index in 24 Hours

How to Add Facebook PopUp Widget on your Blog:

• Open the Blog on which you want to add this widget
• Go to > Layout > Add a Gadget
• Select HTML/JavaScript after this
• Put this code given below

Copy The Below Code.

<style type="text/css">
/***********************************************
www.bloggingride.blogspot.com
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv8HiWVTla3is8E1-uYEiyjqng5_W2kLI-5_Qdnq7t8YZU6Uwf3biaAwoPJyjfYJK-mSLWCgSAYbcSqv8ef0lwVZ7hBsjCauyV89dJjnNxabiMvs2f69aFYthbLZdVwjbYMgwipLYgkg/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {z-index:9999;background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:440px; position:fixed; top:45%; left:50%; margin-top:-220px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Receive All Updates Via Facebook. Just Click The Like Button Below...</h3></center>
<center>
<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/Virtual-Study-Solutions-364090163924393&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></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>
</center>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://bloggingride.blogspot.com/">Blogging Ride</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Skip To Continue</a></center>
</div>
</div>
<!-- www.bloggingride.blogspot.com -->

Final Step:

Now Change The “Red” Color Text With Your With your Google+ Profile Link.
and “Blue“ Color Text With Your Text.(What You Want To Show On the widgets head
Click Save and you are done.

Also Read: How to add Ajax Based Sitemap Widget For Blogger

I hope you liked this article and Facebook Pop Upwidget. This is a simple a widget to increase your fan following of your profile in order to Increase your blog traffic.

Read More

How to Add Google+ Popup Followers Widget for Blogger

What is Google+ Widget.

As you know Google+ is the part of Google Like Blogger. It will inform all your friends or followers to whenever you post a new article to your blog. It creates a reader of your blog. It also helps to better rank in Google Search Result. best practice to generate traffic from google.

Also Read: How to Add Facebook popup Widget for Blogger

Advantages Of Google+ Popup Widget

• Google+ Popup Widget Has simple Layout which Doesn’t affect The blog loading Time.
• Nice and simple Style which attracts the reader to follow your or your blog page.
• Google+ Popup Widget is Made with CSS and Java script.
• Automatically appears when the homepage loads.
• Shows the number of followers with little Image.
• Having a skip button to skip this widget.

Also Read: How to Submit Your Blog and get Index in 24 Hours

How to Add Google+ Popup Followers Widget For Blogger

If you are following some Pro bloggers then you might hear about the importance of social networking site. You can see many bloggers are using Social widgets like Facebook Like a box, Google+ Follow widget, etc. In their blog to increase social fan following. In this social war Google+ has also own impact. Google+ is a part of Biggest search engine Google. You can find Google+ followers widgets in almost every blog or website. Here is a popup widget for your Blogger blog to increase your fan following. Best responsive blogger templates 2015 free download.

Also Read:  How To Improve Alexa Rank Of Your Blog

Step by Step Tutorial to Add Google+ Popup Widget

Follow the Below Step To Add this awesome widget to your Blog.

• Log in to Blogger.
• Select your blog (If You Have More Than One Blog)
• Now go Layout And Then Select “Add Gadget“.
• In the new Window scroll down and Find “HTML/JAVA Script“

Paste The Below Code.

<style type="text/css">
/***********************************************
  www.bloggingride.blogspot.com
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv8HiWVTla3is8E1-uYEiyjqng5_W2kLI-5_Qdnq7t8YZU6Uwf3biaAwoPJyjfYJK-mSLWCgSAYbcSqv8ef0lwVZ7hBsjCauyV89dJjnNxabiMvs2f69aFYthbLZdVwjbYMgwipLYgkg/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {z-index:9999;background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:440px; position:fixed; top:45%; left:50%; margin-top:-220px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Receive All Updates Via Google+. Just Click The Button Below...</h3></center>
<center>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+Zohaibk" data-source="blogger:blog:followers" data-width="310">
</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>
</center>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://apk-free-downloads.blogspot.com/">Apk-free-downloads</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Skip To Continue</a></center>
</div>
</div>
<!-- www.bloggingride.blogspot.com -->

Final Step:

• Now Change The “Red” Color Text With Your With your Google+ Profile Link.
• and “Blue“ Color Text With Your Text.(What You Want To Show On the widgets head
• Click Save and you are done.

Also Read: How to add Ajax Based Sitemap Widget For Blogger

I hope you liked this article and Google+ Pop Upwidget. This is a simple a widget to increase your fan following of your profile in order to Increase your blog traffic.

Read More