How To Add Floating Social Media Share Widget To Blogger

You can easily get a floating widget tray for your blog by following these simple steps. Without any delay, let's get it done. We need social widgets to get your blog more views. The content which you publish on your blog will be viewed by lot of people. If you do not have any social sharing widgets, there is a less chance of getting your blog more audience. Add Floating Social Media Sharing Buttons To Blogger for increase the number of social sharing on social networking sites like Twitter, Facebook, Google +1 and other social networks. It is very good and easy way to share your content to directly on social networks sites for your visitor. It has contain many social networking sites like Facebook Like & Facebook share, Twitter Share, Stumble Upon, Google +1, RSS Feed and Digg this with live counter which is show how many times your content share on social networks sites. You can also add more social networks sites as you want to wish to add.

Live Demo

HOW TO ADD THIS WIDGET TO BLOGGER?

• Go to your "Blogger Dashboard" page
• Now go to the "Layout" tab
• Click on "Add a Gadget"
• From the list select "HTML/JavaScript" widget
• Add the following code in the "Content" Section [NOTE : Keep "Title" section empty]

<!-- Floating Social Media Share Widget By SAHI SOFT -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:47px;top:325px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script><!-- Floating Social Media Share Widget By SAHI SOFT -->

• Click on "Save" and see your blog.
• You have your new floating widget. Enjoy... Cheers..

If you have any doubts, do leave your comments below.

Provided You By: SAHI SOFT

How to Add Widget/Gadget or HTML/Javascript to Blogger Blogspot

Widget are one of the most essential part of a Blog. And today I am going to share how to add widgets to blogger. If you are using Blogger blog, here is how you can add widgets or HTML/JavaScript codes to your Blogger blog. In my previous post I have shared how to edit your Blogger template now you can customize your blog by adding widgets to your Blogger blog too.  So if you are a newbie blogger who use blogger as your blogging platform and want to add a widget, codes or a third-party code to your blog. Follow the step by step tutorial to add widgets to Blogger.

Actually, It is very easy to add widget to Blogger even HTML and JavaScript codes too. Bloggers offers you list of widgets for your blog in its Gadget list. And it lets you add widget to your Blogger blog directly via Blogger gadget list. But there is limit of widgets in Blogger gadget list. Sometimes you may need to add external widget or a third-party code into your blog. Blogger has a widget for it called HTML/JavaScript widget. It allows you to add external codes, HTML, CSS and JavaScript code into your Blogger blog. So if you need to add a widget or a third party widget to blogger, Follow the instruction given below to add widget to blogger.

HOW TO ADD A WIDGET TO BLOGGER?

Step 1.

• Login to Your Blogger Account.
• Go to your Blogger Dashboard.

Step 2.

• Select your Blog you want to edit.
• Click on Layout tab from left pane or,
• Click on the drop-down menu and select Layout button. Check the picture given below.

Step 3.

• Here you will see all your blog element on your layout.
• Click on Add a Gadget link to Add a widget to your blog.

• Here you can search for a widget/gadget for you blog some of the most used blogger is as follows. Google+1 button, Google+Follower widget, Translate, Follow by Email, Popular Posts, Pages, Adsense, Images and search box. Click any of them and Save it.

HOW TO ADD HTML/JAVASCRIPT TO BLOGGER?

Step 4.

• Repeat Step 1 to Step 3.
• After click on Add a Gadget link A pop-up box will open now with many gadget list.
• Now scroll down and find “HTML/JavaScript” element.

Step 5.

• A new pop-up box will open where you can add Third-party code to Blogger.
• After adding your code, give it a title if require and click on “Save” button.

Step 6.

• Now arrange this widget by dragging it to a right place.
• Preview your blog and check whether the element has added or not.
• Once confirmed with your preview, Click on Save arrangement button on top. 

Cheers! You have done. This is the how you can add widget, HTML/JavaScript and a third parry code to your Blogger blog. I don’t think there would be any problem in adding a widget to blogger widget after reading through this tutorial. However, if you are facing any issue with Adding widget codes in your blog, feel free to ask via comment box below. I will help you out.

Keep on with Blogger…Happy Blogging!!
Provided You By: SAHI SOFT

Customise Your Blogger With Image Mouse Hover Effects Bullets

I recently shared a tutorial of customizing the look of your bullet list and number list  and today we will learn how to change the bullet list using the Image Hover effect. Hover your cursor over the bullet list below to see the effect.
This effect is really easy to apply. We only need to apply a simple code to your template. Lets start!

• Isn’t the image turning blue from green?
• Liked it? Now learn it!

This effect is really easy to apply. We only need to apply a simple code to your template. Lets start!

Go To,

• Blogger > Layout > Edit HTML
• Search For ]]></b:skin>
• And just above ]]></b:skin> add the code below,   (Tip:- Press Ctrl + F)

For This Style Copy Code Given Below:

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggttnKTvVe69hMCNCFhiJZKxQ-kW1EFVC1GKfCLIP9BVS211eLzZFGLDMPScpT_nLs73JNWge7W8LVosrhE048NzjVGzbY2gi6Gz8mIHwod9iQtlzMJoliH1Yk6IhVzmKReoVPIpFxlKc/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDR9BnxQXQyspeUTO_wy-LuzPC1rF1nyUYpL8n8xdlXfZWM51Hxo2-RBfgNDk_fdqRhyphenhyphenCXG_jwRUVjc3hX5Ve_qevhZWGbY0LXIfFdrKV_k2JGTF_jXutgTia8QULPZ32XFDiuM6rMUls/s400/261.gif) no-repeat scroll 0px 4px;
}

For This Style Copy Code Given Below:

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgVIprbGu3Gzgsp3lXO-RNAm_BVhfjAVS0y55sNCCOwzwZC3dwRMX6VTBn7Cv9yjbBPYfkXhdaW1AueWKnHFDFo9pqRbG11f_PABounuQbA_5qm-394eGol6-YOUg42tcANFJSTf38qM/s400/255.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUjnjbUpIZa7XAOd5KT0PsjxYNtEBk8Aar4IQjlxcfQwxD8tLwDuYAkeGju9doGeGhSmVM5nxJLtJ3g6wY-rMe6EgaAtMlmWnNnMpaOR9oajHyzyCyJ1A0hoXNJBFwfk-9M1_BkQzWjsY/s400/251.gif) no-repeat scroll 0px 4px;
}

• Save your template and you are done!

Customization

The bullet image can be aligned horizontally with the text by increasing or decreasing the value 4px. You can change the value to 7px or more or less according to your blog alignment requirement.

Enable Search Description Or Meta Tag Description Setting For Blogger

As you might know blogger recently changed its old interface to completely a new one, and blogger team added some most awaited new features to its new interface including dynamic meta description tag for both home page and individual posts. Before these changes, we were facing issues while adding descriptions separately for Home page and single posts. Because blogger used to only include the home page's description in the source code, and there wasn't any description for single posts. And WordPress had these all features for years. Therefore, blogger team was working for years to make blogger more SEO friendly. Now we can optimize our blog's home page and single posts by adding unique meta descriptions.

But as usual, you'll have to make settings in order to make everything works fine. So today's post will guide you how to make a correct setting for both meta description tag for home page and for single posts. By default the dynamic meta description tag is disabled in blogger, so we will enable it and after that we will be able to make further setting, but one thing should be kept in mind that these meta tags are just for search engines' bots not for human visitors. These will be shown only in the source code of the blog and won't be shown on blog. Now let's start the procedure.

How to Enable meta description tag in Blogger for home page?

• Go to Blogger
• Setting >> Search preferences
• Click on Edit >> Yes >> Write a description for your blog's home page and the description must be under 150 characters, above 150 characters is not allowed, see below pictures

There are two screen shoots above, in the first one the meta description for blog home page was by default disabled, so you'd enable it and after that you'll write a description for maximum 150 characters for your blog's home page. Adding more than 150 characters may harm your blog. After adding description just click on save changes. 

Now if you're using a default blogger template then you can easily find the meta description tag in the source code, as I already told you that it is not for human visitors but only for search engines. So you can just right click on your blog's home page and click on source code, so you can find the meta description for your blog in the source code..

But one thing is to make sure that if you're using a custom blogger template then you might not find the description in the source code, because mostly custom blogger  templates are using the old static blogger meta tag. So to avoid this and show the dynamic tag provided by blogger, you must add a piece of XML code to your template to make things in order. Here is how?

1. Blogger >> Template >> HTML >> Proceed
2. Now find <head> tag in your template and just after/below it paste following code

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and you've done it for custom templates as well. Now once again check your blog's home page source code and this time you'll find meta description for your blog.

Adding meta description to single posts?

Now when you've enabled the meta description option in Blogger Setting >> Search Preferences, you will find an additional feature at right side of the post editor when you write a new post for your blog, see below image for example:

At the right side of your post body you can see a box for Search Description, so now you can easily add search description for each of your blog's new posts. Also if you've time then update the older posts and add up to 150 letters to each post. However, this option won't be there until you enable the meta description from the Search Preferences page under the setting page.

Remember, the description you add to every new post should be different than post title and should have a brief summary about the post. If you use this feature correctly then chances are higher to get first position in search results pages.

Leave a comment below the post if you've further questions, and always respect others in the world.
Provided You By: SAHI SOFT

Floating Social Media Widget With Hover Effect For Blogger

Hey Friends! Today I am going to share a Awesome Social Media widget for blogspot platform. In these days social popularity is very and most important thing for a blog because the social media popularity brings tons of traffic and page views to a blog. This widget has a set of five social media properties i.e. Facebook, Twitter, RSS, Google plus and Pinterest. This widget works on some very simple but effective CSS and java-script coding. The widget has sliding effect whenever a visitor will hover on a social profile, it will appear with a slide effect of that profile.

Live Demo

Where This Widget Will Appear:-

Before, we get on to our Tutorial let us first learn where this widget will appear in a website. Since, this is a Sleek Widget. Therefore, it is extremely small in size so it wouldn’t take a large space on a website. We have integrated a Slide out Functionality that would produce sparks in the eyes of visitors. It will appear at the Top-left side of the screen.

How To Add This Widget To Your Blogger Blog:-

The steps mentioned below are extremely simple. We have tried our best to minimize the steps. 

So, let us start with our tutorial. Consider the following steps.

1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
2. Paste this code inside it.

• If your blog already have a jQuery Plugin then remove the highlighted code.

(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

<!--Blogger Socail Media Widget by www.SahiSoft.Blogspot.com-->

<style type="text/css">

ul#social {

    position: fixed;

    margin: 0px;

    padding: 0px;

    top: 10px;

    left: 0px;

    list-style: none;

    z-index:9999;

}

ul#social li {

    width: 100px;

}

ul#social li a {

    display: block;

    margin-left: -2px;

    width: 100px;

    height: 70px;    

    background-color:#fff;

    background-repeat:no-repeat;

    background-position:center center;

    border:1px solid #AFAFAF;

    -moz-border-radius:0px 10px 10px 0px;

    -webkit-border-bottom-right-radius: 10px;

    -webkit-border-top-right-radius: 10px;

    -khtml-border-bottom-right-radius: 10px;

    -khtml-border-top-right-radius: 10px;

    -moz-box-shadow: 0px 4px 3px #000;

    -webkit-box-shadow: 0px 4px 3px #000;

}

ul#social .twitter a{

     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtEhTrD8rAvIbnopdL_cyQla05cklwoW1flnf1E-NRagEKT_RfaY-xGIsABI4qdwPRKXtCgLMp0NEsm3rzkzWernjgImYPrAXuex0RDy28QYXfvg4a5-_TT_NGTgxFLJffB24HboeXBw/s1600/Twitter.png)no-repeat;

background-position:center center;

}

ul#social .googleplus a      {

    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9ADkGj4NXMOu4ggsvBtTLMEQC5ovhYhJ93oiXUnIzPqbLweHS8WmGPbIJsAGnnnYXqc9i2FnWo01LqruzKmPy4jifJaPwEq9Br0hyphenhyphenSuEG5_ZtydwkmSZIlruum9971pQmRtL02CTe7A/s1600/GOOGLE+PLus.png)no-repeat;

background-position:center center;

}

ul#social .facebook a      {

    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrYARL1ynQRArbiXPhH6JZYGdG_kaJ42f-w5Y2VP1ux9_i0uJzulSyPdD7YdJiAwL32vfxdQzkrXYwgR-rKrjz6SUWn7rpIh-MvAK1lwW_x4aaBSqVg_oEURTGMR8Wxf2gYqSiRu9CvM/s1600/Facebook.png)no-repeat;

background-position:center center;

}

ul#social .rss a      {

    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiTIgmn83DfTRDf5J3GYXQEiZTyBvNnint2V5E9AtY0uJI1D92_SMv5bSzEcBDsI34YCrJEI8i7z10H8vcNUPO-cp3xpAJGPFQBFd9otVgmJVS0ARBLUF13wB1nw0Bo-LMz9MwCFA0pg/s1600/rss.png)no-repeat;

background-position:center center;

}

ul#social .pinterest a   {

    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaMHtRScVEkUe4dZ7gXuOWoZXDhICffTDrLoU1OClgeX8FMUbfQxVEN3SsrSx1cAiEtxC2QyO3W5BtQOPS8M_hgacA0ABxV6ma2L_r39k63E5FQuTAN6sSLxSxFuRNZasuXbusUxMNF0/s1600/Pinterest.png)no-repeat;

background-position:center center;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>

$(function () {

    $('#social a').stop().animate({

        'marginLeft': '-85px'

    }, 1000);

    $('#social > li').hover(

        function () {

            $('a', $(this)).stop().animate({

                'marginLeft': '-2px'

            }, 200);

        },

        function () {

            $('a', $(this)).stop().animate({

                'marginLeft': '-85px'

            }, 200);

        }

    );

});

</script>

<ul id='social'>

 <li class='twitter'><a href='#' title='Twitter'></a></li>

 <li class='googleplus'><a href='#' title='Google Plus'></a></li>

 <li class='facebook'><a href='#' title='Facebook'></a></li>

 <li class='rss'><a href='#' title='Rss'></a></li>

 <li class='pinterest'><a href='#' title='Pinterest'></a></li>

</ul>

Note: After Adding the above code Replace # with your Profile link

• Now save the widget and See your blog. :D

If you Liked it! then Feel Free to Share this widget. Kindly let me know your views About this Widget in the comment box below.

Provided You By: SAHI SOFT

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