Blogging Trainings: Social Media Sharing widgets

Showing posts with label Social Media Sharing widgets. Show all posts

How to add floating , animated facebook like widget

How to add floating , animated facebook widget in blogger.so this new work is all about social share scrolling buttons widget to your blogger blog. Its very easy to use while adding it to blogger it also more easy just follow the setups the i tell it to you, you will easily get the scrolling social buttons to your blog.

You know that social points to any of the blog is much importance to get better look at natural level its also good for search engine and counted as a positive vote. Search engine bring positive visibility of the page URL which has more social votes to it. So now i am sharing this nice gadget to you that how to add it to blogger. You can also read the post how to add social share icons to blogger in a blogger side column its also useful.

This gadgets look like these.

So here it is how to install it.

Go to your blogger dashboard
Select your blogger blog
Click on Layout from Drop Down menu (shown in picture)

A new Window appear
Click on Add gadget
And select HTML/JavaScript
Next Box of HTML/JavaScript will appear (shown in picture)

Now the box of HTML/JavaScript will appear when you click on the box.

Now you have to paste the following code to install the gadget to your blog.
Its not so difficult to add just copy it and paste it in the box like shown above.

Adding the code social buttons looks like this

Add This Code

Adding the code social buttons looks like this

Add This Code

I personally added 8 total social network in this gadget you can easily edit them here it is

Just remove the line in the code
Like if you want to remove MySpace.com button remove this line from the code

<a class="addthis_button_myspace"></a>

These 8 social networks are here

Facebook.com                        Twitter.com
Delicious.com                         Pinterest.com
Digg.com                                Orkut.com
Googleplus.com                      Myspace.com

Adding the code social buttons looks like this

Add This Code

You can also remove or edit the code and here is also 8 networks added just see the above method how to remove the 1 network you just have to remove the line in the code that's it.

So these are the 3 top gadgets for social share buttons they are the most useful gadget for every blogger blog should add it on their page.

While adding this gadget is not so difficult its scrolled when the page is scrolled down or up, its bring more social share to the webpage.

Thanks for watching this, Keep watching our website , www.bloggingtranings.blogspot.com, contact me 0323-7591466.

Facebook Popup like box widgets for blogger and for website

To day i am going to provide you some beautiful facebook popup like box widgets for blogger and for your website. you can easily embed this code in your html page.Well here i am making a Facebook like popup box for blogger which is also nice to install.When you install it it and when someone visit you any blog page it will display on the front which ask you to like the page and its very simple and clean.

Here is screenshot of this widget

1

So you have to do these steps to install it on your blogger blog

          1. Go to blogger dashboard > Layout
          2. Now click on > Add a gadget
          3. A box will appear select >  HTML/Java Script box by scrolling until you find it
          4. Now paste this code into the box and click on >  Save

Remember, At end of this code you will find mbgadget words replace it with your own fb like page username.

2

So this new gadget looks like this

So you have to remember in this code you have to find mbgadget and replace it with your Facebook username.

So here is the more info about this box:

So now i am explaining the every part of this widget which is only for blogger blog. so here it is,

Easy to install

If we look that this box is very easy to install on any kind of blogger blogs, you just have to copy the code and paste it into the HTML gadget to the inside section of blog.

Its not very difficult to do so, You don't need to edit any type of template code to add this gadget it very easy to install.

Style

Well while looking at the structure of the box then this box is more better then ever. Its very simple and clean you can easily understand that what type of this box is, Its normal display the like button of your facebook page it bring more likes.

Attract Attention

This widget bring attention to your facebook fan page to like it and get updates from the fan page, if your blog is better and bring much better results and traffic then its good for you to add it up.

Best way to increase likes

As i think this is one of the most powerful way to increase your fan page likes, if you have a little blog on blogger then you have to add this on your blog, its really boost your likes of fan page. Its simple work that, a visitor come to your website because of your brilliant content and if he really impress then he like your page.

Please keep watching our website and keep downloading and getting instructions from my website if you have any problem you may contact me. 0323-7591466, keep visiting my website www.bloggingtrainings.blogspot.com.

In This Post i will show you how to add a Floating Facebook Like Box Widget For Blogger.

This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This widget can help you to increase facebook likes. You just need to our small code to your blogger blog. Currently this widget is only for Bloggeer/Blogspotblogs.

Go to Design > Page Elements.
Click Add A Gadget.
Select HTML/Javascript .
Paste the following code inside it,

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwqt9Mb3XpVygmQfJicmFDdoZJgLD_CVpNUTLhRrDXEMtMS4Z8RWYtedhrx_HLyXgsKLr-4evwIy2FVmU85VynFsFbfZSyWJQDpf3PY2LiXF6I_Ci9cVfUi9kjIIX9Zi1U4OLu_x5cAo/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggertools1&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://all-blogger-tools.blogspot.com">blogger widget</a></span> </div> </div>

5. Replace allbloggertools1 With Your Facebook Page Username

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

This widget will allow your visitors to share your blog posts on social networks such as google+, facebook, twitter ...

The design is very attractive widget with animation from top to bottom and encourages readers to share your article easily by clicking on one of these buttons.
we spend now to install this widget

Go To Blogger > Design

Choose a HTML/JavaScript widget

Paste the following code inside it,

<style>

/*-------All Blogger Tools------------*/

#floatdiv {

position:absolute;

width:94px;

height:229px;

top:0;

left:0;

z-index:100

}

#mbtsidebar {

border:1px solid #ddd;

padding-left:5px;

position:relative;

height:220px;

width:55px;

margin:0 0 0 5px;

}

</style>

<div id="floatdiv">

<div id="mbtsidebar">

<table cellpadding="1px" cellspacing="0">

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>

</td>

</tr>

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">

<g:plusone size="Tall" expr:href="data:post.url">

</g:plusone></td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="allbloggertool1">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">

<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://all-blogger-tools.blogspot.com/" target="_blank">Widgets</a></p>

</td>

</tr>

</table>

</div>

</div>

<script type="text/javascript">

// JavaScript Document



</script>

Replace allbloggertool1 with your Twitter username.

PS: If you have already added the Google +1 Button somewhere in your blog then you need to add this code Just above

</head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

Now you are done.

In this tutorial we will see how to add like and send buttons on your blogger blog.
This code combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code.

Go To Blogger > Design > Edit HTML

Click "Expand widgets templates box"

Search for <data:post.body/>

and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Save and you are done.

Use Social Media to Create a Successful Blog

Are you searching for effective ways to grow your online audience while increasing your blog traffic? Social media is an efficient tool for promoting your blog and making it popular among your target audience. Businesses have successfully extended their blog’s reach using social media sites such as YouTube, LinkedIn, Pinterst, Google+, and of course Facebook and Twitter.

9 Tips for Using Social Media to Successfully Promote Your Blog

Let’s take a look at our Top 9 Tips for Promoting Your Blog Using Social Media:

Post to Social Media Profiles Using Feed Tools

Twitterfeed, and various other feed tools give you the ability to publish links to your blog posts on multiple social media sites automatically. If your blog is running on the WordPress platform, you’ll find some really great plug-ins that help you automate this process.

Automate Your Publishing

Imagine how simpler your blogging life would be if you could automate your posts. Well, using tools like HootSuite, SproutSocial and TweetDeck, you can. Simply schedule your posts for the entire day, week or even month ahead. This is a great way for busy business owners to get the word out about new posts quickly and simply. Scheduling allows you to spread your posts out, while simultaneously posting to various social media profiles.

Add Icons on Your Blog for Quick Social Media Sharing, Tweeting and Liking

No matter which blogging platform you use, your sidebar should contain social network icons. Why? These icons allow your readers to quickly connect with you via your social network profiles, with just one click. They also encourage your audience to share, like and tweet about your blog or any of its contents.

Link Your Blog and Social Media Profiles to Each Other

Every single one of your social network profiles should include the URL of your blog. That way, no matter where your audience is connecting to you from, your blog is only a simple click away.

Your Forum Signatures Should Contain the URL of Your Blog

When you post relevant, valuable information, questions or comments in industry-related forums, you increase your web presence. Including a link to your blog in forum signatures helps to create backlinks to your blog, which helps to increase blog traffic.

Comments Made on Other Blog Should Contain Your Blog’s URL

Leaving or responding to comments on other relevant blogs also increases your web presence among your target audience. Add a link to your blog within your comments to create valuable backlinks. This also increases the chances of that audience visiting your blog using a single click.

Utilize the Social Media Widgets and Tools Offered

Most of the popular social media networks offer free widgets and tools to promote user profiles. These can be added to your blog to increase your content’s exposure. Simply log into your social media profiles, access these features, and add them to your blog.

Google+(Plus) Launches Pages For Google +(Plus). A Businesses solution for Promoting products and sharing news, photos and events, to your customers and Fans. it is very similar to the Facebook Fan Pages. in this Article i show you how to Create and Promote a Fan Page for your Blogger Blog.

HOW TO CREATE A GOOGLE+ FAN PAGE?

You Must Have a Google+ Account to create a G+ Fan Page

Go to THIS PAGE and Click on Product or Brand
Enter the Blog Title and URL as Follows
Select the Category as WebSite
Tick the Agree Page Terms check-box and Click on Create Button.
Enter the Tagline of the Blog and Upload a Profile photo (if any!)
Your G+ page is almost created. if you wish to share your page with your Google+ Circles, then click the Share on Google+ button and Finally Click the Finish button

ADDING OFFICIAL GOOGLE+(PLUS) PAGE BADGE

To Grow your fans and Audience, add the official Google+ page badge to your blog.

After finishing creating page, you will see the page like below. click the get the Badge link.
You will redirect to this page. and your Google + page ID is automatically added.
Choose a Style of Badge and Language (Leave the Advanced options to Default).
Here, you will get Two sections of Code.(Code1 and Code2).
Go to Blogger Dashboard > Design > Edit HTML
Search for the </head> tag
Add the Code1 section before </head> tag and Save the Template
Add the Code2 section in HTML/JavaScript gadget or place where you want the badge to be appear.

How to add Blogger Email Subscription box With Social Networking Sites

To day i am going to share Blogger Email Subscription box With Social Networking Sites with you.
Blogger Email Subscription box Widget along with windows 8 effect social networking icons.When ever the user subscribed for blogger posts by entering their email address-which allows the user can read the blogger posts via by email.sometimes the user unable to access the blog or website.User can read the posts by email.This widget very helpful to both blogger's and visitors.Email Subscription box with Facebook,Twitter,Google plus,RSS.

------------------------------------DEMO BELOW----------------------------------------------

// If you Like the Post...Spend a Second to Share IT. "SUBSCRIBE TO Our Emails"

---------------------------------------------------------------------------------------------------

1.Login your Blogger account

2.Then go to Dashboard-->Layout

3.Click on "Add a Gadget"-->choose HTML/JavaScript

4.Copy the below code and paste it.

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Itsallfreeonlineblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 1px solid #ccc; padding: 3px; text-align: center;" target="popupwindow">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/HutchMe" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8mgU5EJkIJBWASuUFoWzhZfqtWuhu9Eqd_BKRG9BDJgiW8-ziXm4NB4yKx733MDwO9DrCxz4wvDO-nJg9bo95mUyLUDQC7kxYkeyv5hB8InLPuLCH9ag5tX8Wj1BbHEs8Al8SN_0HMwQ/s1600/Facebook-Harivind.png" /></a>   <a href="http://twitter.com/harivind007" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXHDcN4Lcrvkx-RrHb8OTIGr2jX8Mij7_zcvSKibE1BCmC_oQW2oxPxe0t-IEuJGQbHbdlu9THOMU5mOS97-NF7V8ez8Wb_AQAfXnrt0ykcY4e4j5uRnNWXTlnxImWio4rvbUY4vfmrNJ/s1600/Twitter-harivind.png" /></a>   <a href="https://plus.google.com/110861785424129113302" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitL7jNEJ4gfiWPtiXMQSW9RlgBcx4f1Ah20nca3NcJLLX8Kq_PBXOswW7l-G1pOEc-JurgV6RzGdxtky1EJIHeuHlwdApX3noQ5lL20VmR0A_UPjvcJvdnzMEHDkORezhUFOdy38DaIbIN/s1600/Plus-Harivind.png" /></a><span id="goog_1162613680"></span>   <a href="http://feeds.feedburner.com/Itsallfreeonlineblog" target="_blank"><span id="goog_1162613681"></span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9Y9Lr9iArjZYHJh9NuuHh73oLA2mMwgCmVmy38zHF2Y2XCHVwk0pillBFLDXjZH3LyJwcBzVsSn_12K2EqQ2zYEhDsT3gGtLiOs3Im_WH5naH6Ba7ChDU5Quksh1AjLv8XJPsMQSXa84/s1600/Feed-Harivind+com.png" /></a></div>
<br />
<b>    Email Subscription Box</b><br />
<input name="email" style="width: 140px;" type="text" /><br />
<input name="uri" type="hidden" value="Itsallfreeonlineblog" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Subscribe" /><br />
<br />
<span style="font-size: xx-small;">Widget by <span style="font-size: x-small;"><a href="http://www.harivind.com/" target="_blank">Harivind</a></span></span></form>

5.Blue color change to-->Your Facebook Page Name
Red color change to-->Your Twitter UserName
Green color change to-->Google plus ID
Orange color change to-->FeedBurner ID/Name

6.Done!
A lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger, flash for blogger templates, and a lot of other tricks here at www.bloggingtrainings.blogspot.com for blogger users.

Blogging Trainings

How to add floating , animated facebook like widget

Facebook Popup like box widgets for blogger and for website

1

2

Floating Facebook Like Box Widget For Blogger

Add Floating Share Buttons Widget For Blogger Blogspot

New Like and Send Buttons of facbook for blogger

Use Social Media to Create a Successful Blog

9 Tips for Using Social Media to Successfully Promote Your Blog

HOW TO CREATE A GOOGLE+ FAN PAGE?

HOW TO CREATE A GOOGLE+ FAN PAGE?

ADDING OFFICIAL GOOGLE+(PLUS) PAGE BADGE

How to add Blogger Email Subscription box With Social Networking Sites

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors

Template Information

Test Footer 2

Template Information