Make Beautiful Blogger Labels Design with CSS3

Designing Blogger blogs is now becoming easier. You can design any of your blog part with rocking CSS3 codes. Every part of your blog has different CSS properties, located in head section; so you can change them any time. Today we will design the labels in blogger. Blogger labels are the links or tags which we can add to our sidebar for easy user navigation. By default they don’t look beautiful. So we need to add some CSS codes to our style sheet to make them looking attractive. We will design our labels like buttons which will be looking more attractive than the default style.

How to Design Blogger Labels with CSS3?

To Design blogger labels follow these steps:

• First log-in to your blogger account and select the blog you want to design.
• Go to Template >> Edit HTML.
• By using CTRL+F key find this code ]]></b:skin>

Now just above/before the code you’ve found at step 3 paste the following CSS3 codes.

.cloud-label-widget-content span a{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #C6C6C6;border-radius: 3px;float:left;text-decoration: none;font-size:10px;}.cloud-label-widget-content span a:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;-moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }

After having pasted this code save your template.

How to Add a Label Widget

• Now if you’ve already added a label widget then its ok, just make this setting.

Where it says “Display” There are two options List & Cloud, from those two options list and cloud select the cloud option and also un-check the check box which says “Show number of posts per label”. [see the picture for example]

In case if you haven’t added a label widget yet then just go to Blog Layout >> Add a Gadget Click it>> and a pop up window will appear, scroll down and you will see a widget labels; so just click the Add + button and you will see the setting for labels as you are told above at step 4. Make correct setting as showing in above picture and save the widget. 

Now view your blog and you will see your labels with a new buttons style -:)

Don’t forget to subscribe us via email and sharing this post.

Provided You By: SAHI SOFT

How to Embed/Add Google Maps in Blogger Blog

Letting your customers know where you are located is the key element for an online business company conducting online networking. The ideal way of doing that is to utilize Google interactive Maps that are reliable and concisely perfect. It helps your customers to find your exact location with proper driving direction and other essential information. Recently, one of our users asked us How to Embed Google Maps in Blogger so that he can easily give a precise idea to his customer about his location? In this article, we will show you How to Embed Google Maps in Blogger.

Why to use Google Maps?

There are many companies like Bing and Yahoo that provides you a feature to embed Maps on your website, but they are not flexible or robust enough to support a lot of things. Where as Google Maps  has a lot of quality features.

1. Satellite View:  It provides you two options of display either the simple map or a satellite view. However, both technologies are impressive at their own perspective. It gives you High resolution aerial or satellite images from urban areas all over the world. 


2. Directions: They provide a flexible route planner which provides direction depending upon the area. No matter you are walking, bicycling, and driving it provides extremely accurate direction. 


3. Extensibility and customization: It provides a lot of customization options so that users can easily get their personalized location in just a few clicks. With “My Places” option, you can even bookmark your location. 

How to Embed Google Maps in Blogger:

The first thing you need to do is to go to https://maps.google.com/, and enter your location in the location searcher present at the top of the webpage. For example, I am located in Lahore so I would type “My Local area, Lahore” in the search bar to ensure my correct location. You can add more details like the name of your area, building number, floor number and all that kind of mumbo jumbo details stuff.

After entering your location, you will be able to see an interactive preview of the map. Now from here you can decide whether you want to use the simple or satellite view map. More oftenly, people recommend satellite view because it is far more comprehensive and flexible. You can also add additional things like weather, traffic and more cool stuff.

After making all the customization that you like, it's time to get the embedded code so that you can add it to your Blogger blog. Here’s how:

• First make sure that the location you want to embed is correctly appearing in the current map display.
• Now press the link button which somewhat looks like this at the top of the left panel.

• A small box will appear which you provide your embed code as well as the direct link to your location. Just copy the embedded code and paste it  where ever  you want to show the map either in your about us page, posts or even sidebar.

Congratulations: Now go to Blogger.com >> Add a new Page >> Select HTML Tab and paste the embed code that you copied a few moments ago. Once everything is done, simply press the “Save” button and Google Maps are ready, and good to be live on your website.

We hope  this article has helped you in understanding, How to Embed Google Maps in Blogger. We have been using Google Maps for a while now,and they are just amazing. What are your thoughts about embedding Google Maps in your website? Let us know about your experience with Google Maps in the comments below.

Provided You By: SAHI SOFT

Beautiful Blogger Notification Bar for Blogger

Looks like the new year is near! Out of the premium sets of design resources in our repository, we often share one of them as a freebie when the occasion is precious. There are many creative premium widgets, tools and plugins that we managed to develop this month for our regular clients and out of these I will be sharing just two such resources as a new year gift.

Copyright

Bloggers and developers are hereby advised not to sell or redistribute the widget codes. You are also instructed not to remove SS's watermark from the notification bar. Removing the watermark will break the entire code, leaving all your efforts in vain.

Premium version includes no watermarks. If you wish to buy the widget for Wordpress, Joomla or even Blogger Blogs, then you may kindly contact us via our services page.

What's New in it?

This notification bar works best by grabbing readers attention and helps you to focus readers towards important deals, announcements or any story. It functions on pure JQuery light-weight functions and is compatible with all major browsers including IE9.

Custom, unique and non-commercial plugins are always better then public designs. HelloBaris now too common and used everywhere and you may not like the limited design customizations offers provided by them along with their logo on the plugin. HelloBar also requests URL redirection and you need to register to use it. Scripts are stored at Hellobar server and the browser needs to send a request in order to display it on your blog or site. Really not appropriate if you don't like redirections and attribution links.

Blogger Notification bar requires no registration and provides far better design flexibility. The scripts are less than 6KB in size and fully hosted at your server.  You can change its look and theme to any color that may blend your layouts. Every single element is well structured and can easily be configured. A perfect tool to play with.

I will be always available to provide any help required here on this page.

Installing Notification Bar on blogger

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like Wordpress.

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Search for <head>
5. Paste the following scripts just below it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<!--Blogger Notification Bar by www.SahiSoft.Blogspot.com-->
<script language='JavaScript'>
//<![CDATA[
var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x519b[7]});} );
//]]>
</script>

      6.   Next search for ]]></b:skin>

      7.   Just above it paste the following styles:

/* ----Blogger Notification bar by www.SahiSoft.blogspot.com----- */
#bloggernotificationWrap{
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    margin-top: -41px;
    z-index: 999999;
    width: 100%;
    height: 41px;
}
#bloggernotification {
    width: 100%;
    height: 28px;
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    background: none repeat scroll #2E2F2E;
    position: relative;
    box-shadow:0px 1px 3px #666;
    z-index: 9998;
    text-decoration: none;
    color: #cccccc;
    font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    border-bottom:2px solid #fff;
}

#bloggernotification a{
    text-decoration: none;
    color:#FFFC00;
     font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    outline: none;
}
#bloggernotification a:hover{
    text-decoration: underline;
}
#bloggernotificationWrap #closebloggernotification{
    display: block;
    position: absolute;
    top: 0;
    right: 23px;
    height: 40px;
    width: 21px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgubLJYU-0nSrtgycT53zPNcDVnUsfdAeK2VneTqmP8SV5Hpwatt8OpG-A212JRqiArhq0gBDdj-M7bvTPrvEOs-yJS4cZGYP4KTavonWCwp51n-Bv4JwvUh05_fzMUoOeY5hTp7a-rV_rr/s400/light.png) no-repeat 0 center;
    cursor: pointer;
}
#bloggernotificationWrap #closebloggernotification:hover{
    background-position: -21px 50%;
}
#bloggernotificationWrap.bottomPosition #closebloggernotification{
    background-position: right 50%;
}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
    background-position: -42px 50%;
}
#bloggernotificationWrap #openbloggernotification{
    display: block;
    position: absolute;
    top: -6px;
    right: 15px;
    padding: 0 7px;
    background: #2E2F2E;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    cursor: pointer;
    z-index: 1;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
       box-shadow:0px 1px 3px #666;
}
#bloggernotificationWrap #openbloggernotification span{
    display: block;
    width: 21px;
    height: 34px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgubLJYU-0nSrtgycT53zPNcDVnUsfdAeK2VneTqmP8SV5Hpwatt8OpG-A212JRqiArhq0gBDdj-M7bvTPrvEOs-yJS4cZGYP4KTavonWCwp51n-Bv4JwvUh05_fzMUoOeY5hTp7a-rV_rr/s400/light.png) no-repeat right 50%;
}

Make these Design changes if you wish:

• To change the background color of the bar simply edit #2E2F2E
• To change text color edit #cccccc
• To change hyperlink color edit #FFFC00
• To change anything else, just post me your query in the comment form below! :)

      8.  Finally to make the bar appear just add the following code below <body>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>
Write Your Notification Message Here
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>
<br/><br/> 

9. Save your template and you are all done!

To create links inside the notification bar use the following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

You must add the class='link' , which is required by the script. 

How to Find Your Blog's Secret ID Number in Blogger

Every blog hosted at blogger has its own unique ID Number, which presents its identity and makes it different from the other blogs present on a specific blogger account. Most of the time, there is no need to be anxious about these ID numbers, but occasionally it could be useful for everyone to know this number. While installing several third-party services, these numbers would be useful. So in you are looking to figure this out then you have arrived to the right place. In this article, we will show you How to Find Your Blog's Secret ID Number in Blogger.

The first thing you need to do is to login into your Blogger dashboard through your Google Account. After logging in, from the list of your blogs under your account, select any one blog. It depends on you whether you click over its name or open any other area of the same blog.

Now from the posting, setting, layout or template area, you can find your blog's Secrete ID Number if you look at the URL in the address bar of the browser. Towards the end of the address, you would see something like this blogID=XXXXXXXXXXXXXXXXXXX where the "X's" represents your Blog's ID. For more detailed instructions, check out the following screenshot.

Note: Every blog that you have on your account consists of different ID numbers, so be sure that you are getting the right one. The Number ID consists of 19 digit code, so before you use them make sure that you are copying the right numbers in the correct pattern.

We hope this article has helped you in learning How to Find Your Blog's Secret ID Number in Blogger. In the coming tutorials ahead, we will be showing you some ways through which you can use this ID Number to install some third-party Plugins for your blog. Keep in mind that, these are the secrete numbers which can only be seen by either Blog authors or administrators. Take extreme precautions while using them. If you have any confusion, try commenting below.
Provided You By: SAHI SOFT

Best CSS Popup Facebook Like Box Widget For Blogger Blog

Add beautiful Facebook pop up like box gadget in Blogger Blog. This pop up is with scrolling feature means it is fixed position on the screen. It is very light widget to easy to load on websites or blogs. This widget is very useful must add this widget in your blog.

This pop up like box widget is designed to get more Facebook likes. This pop up box like widget has many features. The main feature is that it loads on blogs very easily and fast and it is with scrolling effect, that means this box will scroll top to down when you will moving your mouse from top to bottom.

This box has also a close button on the top right side. Visitor can close this widget by click on that button. This Widget is officially created by Blogger Spice. This box is 100% safe and don't harm your blog or website.

Also Check:

• JQuery Popup Facebook Like Box For Blogger

Add this Widget in Blogger :

• Open Blogger in your browser and log in to your account.
• Now go to Layout option tab.
• Click on Add a Gadget and then select HTML/JavaScript.
• Now copy and paste the CSS and HTML code in HTML/JavaScript Now click om Save button and enjoy with your gadget.

      If you save any kind of problem or suggestion about this article, tell us by comments. Also Share it with your friends.

Provided You By: SAHI SOFT

How to Allow Users to Reblog your Posts in Blogger Blog?

Allowing your users to Reblog or share your content on their blogs is something that could make your posts goes viral. Recently, one of our users asked that how to allow users to Reblog your posts in Blogger? What if someone adored your post and wishes to share it on his blog? In this situation, you can offer them a one-click share functionality which will not only spread your content all over the internet, besides that it also helps you to earn a previous backlink. Therefore, today in this article, we will show you How to allow users to Reblog your posts in Blogger?

Note: You can see the Demo Here, make sure you scroll down to the bottom of the post to see the green "Reblog this post" button.

Why to allow uses to Reblog your Posts?

Some people might take it in a wrong way as allowing users to share your posts on their blogs might end up in plagiarism. However, there is a twist in the tail. Since, a credit backlink of the original source is always there, so it means you would continue to be an original author.

On the other hand, you can get a lot of high-quality natural backlinks. Just consider, if your blog has 100 posts and each post is re-shared by 1000 folks and in return you get a lot of worthy backlinks to your site. It will also benefit you by providing your site with more popularity as people might follow your site from being the original author.

How to Add a Reblog Button to your posts in Blogger?

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 ]]></b:skin> tag. Once you find it, just above it paste the following CSS code.

.reblog {color: #fff;font-weight: bold;font-size: 14px;text-shadow: 1px 1px 0 #75a43b;padding: 5px 10px;display: inline;border: 1px solid #69963b;background: #7cc237;border-radius: 2px;background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));background: -webkit-linear-gradient(top, #afd95b, #7cc237);background: -moz-linear-gradient(top, #afd95b, #7cc237);background: -ms-linear-gradient(top, #afd95b, #7cc237);background: -o-linear-gradient(top, #afd95b, #7cc237);box-shadow: inset 0 1px 0 #d0e8a0;-webkit-box-shadow: inset 0 1px 0 #d0e8a0;-moz-box-shadow: inset 0 1px 0 #d0e8a0;-o-box-shadow: inset 0 1px 0 #d0e8a0;}
.blogthis a {color: #fff; text-decoration:none;}
a.reblog:hover {color: #fff;background: #7cc62b;background: -webkit-gradient(linear, left top, left bottom, from(#b5e261), to(#7cc62b));background: -webkit-linear-gradient(top, #b5e261, #7cc62b);background: -moz-linear-gradient(top, #b5e261, #7cc62b);background: -ms-linear-gradient(top, #b5e261, #7cc62b);background: -o-linear-gradient(top, #b5e261, #7cc62b);text-decoration:none;}

After adding the CSS code, its time to add the code which would make the widget work. Just search for <div class='post-footer'> and just above it paste the following code. Once everything is done, press “Save Template” button to conclude the process.

<div class="reblogme"><li class='blogthis'><b:if cond='data:top.showBlogThisButton'><a class='reblog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Reblog This Post</a></b:if> </li></div>

Congratulations: You have successfully learned How to allow users to Reblog your posts in Blogger?  Not only that, but you can also stylize it according to your desire needs. You can also preview your posts to see everything is working in an order or not.We hope this tutorial has facilitated you to understand how to allow users to reblog your posts in blogger. Does anyone of you is using the same technique, If yes then let us know about your experience. If you like the post then do share it with your social media friends.
Provided You By: SAHI SOFT

How to Delete/Remove Your Blog in Blogger

Blogger allows you to create 100 blogs on one account, but it does not mean you should uselessly create a site that not even sound attention-grabbing.  More often, people creates one site and jumps on to create another one while the older sites remains abandoned for years and keeps on collecting bulks spam comments. Probably, you would like to disable, or delete such sites which are causing problems including, Spammy comments, crappy content and etc. In this article, we will show you How to Delete Your Blog in Blogger?

You can delete, download your sites data and import new posts within the same area. To delete your site the first thing you need to do is to go to login into your Google account. After logging in, from the dashboard go to Blogger.com >> your site >> Settings >> others and Proceed to the next step. 

Now at the top of your screen, you will see a “Delete Blog” link just press it. Caution: make sure you are deleting the correct site. However, you can always recover your site back anytime you like from the list of “Deleted blog” located at the Dashboard.

Now a new widow will pop out asking you to confirm the removal. Lastly, press orange “Delete the Blog” button and the deletion wizard would take place, and your site would be removed, nobody would be able to access it anymore including the crawlers or the visitors. 

Anyhow, if you wish to recover your site back then go to the dashboard and select “Deleted Blogs”, from the right side of your screen. It will take you to a new page, Press “Restore” button present just beside the title of your site. 

We hope this small but useful tip would help you in getting rid of useless sites on your account. However, use this function with caution because you could lose your site for no reason. Make sure your site is not violating Blogger content policy because they can also remove your site for spam. 

Provided You By: SAHI SOFT