| Blogger Tips And Tricks|Latest Tips For Bloggers

How to Add Flat UI Share Buttons to Blogger

Lasantha Bandara — Fri, 01 Jul 2016 06:13:38 +0000

Do you want to add simple and quick loading, non-JavaScript share buttons to your blogger blog? Then follow the steps given below to add Flat UI Share Buttons to your blog.

1.Login to your blogger account and go to "Edit HTML" page.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag:

4. Now find this line:

5. From that line scroll down slowly until you see a code more similar to this:

6.Copy below code and paste it after the above code:



    
		 Facebook
    
    
		 Twitter
    
    
		 Google+
    
    
		 Linkedin
    
    
		 Pinterest
    
    
		 Delicious

7. Save your Blogger Template and refresh your site. Final result will look like this:

The post How to Add Flat UI Share Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Social Sexy Bookmarks v2 to Blogger

Lasantha Bandara — Sun, 18 Oct 2015 06:00:00 +0000

This is the second version of "Sexy Social Bookmark for Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jQuery. I hosted sexy bookmarks images(2 images) in Blogger. Below I explain how to add this sexy bookmarks v2 for your blogspot blog. If you like to add it to your blog then follow the steps given below.

Tutorial updated: 2015/10/18

1.Log in to your Blogger account and go to "Edit HTML".

2.Scroll down to where you see tag.

3.Now add below code before tag.

NOTE :
1. Download Image Files if you need to host images yourself.
2. If jQuery is already included into your theme remove this from above code:

4.Scroll down to where you see tag.

5.Copy below code and paste it just after .




Share this on del.icio.us
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Reddit
Add this to Google Bookmarks
Tweet This!
Share this on Facebook
Share this on Mixx
Subscribe
Buzz up!
Share this on Linkedin
Submit this to DesignFloat
Share this on Technorati
Submit this to Script & Style
Post this to MySpace
Share this on Blinklist
Share this on FriendFeed
Seed this on Newsvine

6.Now save your template and you are done.

The post How To Add Social Sexy Bookmarks v2 to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How to Add Simple Post Share Buttons to Blogger

Lasantha Bandara — Sun, 22 Feb 2015 05:23:46 +0000

This easy to follow blogger tutorial explains how to add simple and beautiful post share buttons into your blogger blog. You can share your posts on "Facebook", "Twitter", "Google Plus", "Stumbleupon" and "Digg" social networks after adding this buttons into your blog.

Here I am going to add this share buttons below post title in my blogger blog.

First go to "Edit HTML" of your blog and Find ]]> tag.

Add below code just above ]]> tag:

.btt-socialshare{margin:10px 0}
.btt-socialshareul{margin:0!important;padding:0!important;list-style:none;list-style-type:none;line-height:1}
.btt-socialshareul li{margin:0 10px 0 0 !important;padding:3px 8px!important;list-style:none!important;list-style-type:none;display:inline-block}
.btt-socialshareul li.btt-share-this{padding:3px 8px 3px 0 !important}
.btt-socialshareul li.btt-facebook{background:#3c5b9b!important}
.btt-socialshareul li.btt-twitter{background:#2daae1!important}
.btt-socialshareul li.btt-google{background:#f63e28!important}
.btt-socialshareul li.btt-stumbleupon{background:#eb4924!important}
.btt-socialshareul li.btt-digg{background:#1b5891!important;margin:0!important}
.btt-socialshareul li a,.btt-socialshareul li a:visited{color:#fff!important;text-decoration:none!important;font-style:italic}
.btt-socialshareul li a:hover,.btt-socialshareul li a:active{color:#fff!important;text-decoration:underline!important}
.btt-socialshareul li p{margin:0}

Now find this line:

Scroll down slowly until you see this line:

Now add below code just after above line:




Share This Article  

Facebook


Twitter


Google+


Stumble


Digg

Save your theme. Now social buttons will be displayed in post pages of your blog.

Find results will be look like this:

The post How to Add Simple Post Share Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How to Add AddThis Smart Layers to Blogger

Lasantha Bandara — Fri, 08 Nov 2013 14:03:08 +0000

AddThis.com is a web's largest social infrastructure and analytic platform. They have been helping publishers and brands weave a more personal and social web with their sharing tools. Smart Layers is a new service introduced by them. Smart Layers make your site smarter. It Increases traffic, engagement and revenue by instantly showing the right social tools and content to every visitor. It's one piece of code, mobile-ready and free!

This is a live demonstration of Addthis.com Smart Layers:

https://www.addthis.com/smart-layers-demo.html

About AddThis SmartLayers on Youtube:

To add Addthis Smart Layers to your site visit here: https://www.addthis.com/get/smart-layers

Select platform as "Blogger".

Smart Layers includes follow buttons, share buttons, "What's Next" and "Recommended Content" features. You can "ON" or "OFF" these features as you like.

After selecting features and entering your information, click on "Install Blogger Widget" button.

You will be directed to the Blogger.com. Select you blog name from drop down menu and click on "Add Widget" button.

Done! You successfully added smart AddThis Smart Layers to your site.

The post How to Add AddThis Smart Layers to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Perfect Share Box to Blogger

Lasantha Bandara — Tue, 22 Jan 2013 06:04:00 +0000

In this tutorial, I am going to show how to add a useful share box for your blogger blog. This share box contains official Tweet button with counter, official Facebook share button with counter, official Google plus button with counter, official Stumbleupon button with counter, Pinterest button, Linkedin button, Print button and Facebook like button. I have configure all this button for Blogger blogs, so you can add this share box quickly to your blog.

Tutorial Updated : 2013/01/22

Now follow the steps given below to add this share box for your blog.

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Add this code just above tag:

4.Now Scroll down to where you see below code:

5.Copy Share Box code given below and paste it just below the above code.

NOTE: If you can't find

in your template, paste your "Share Box" code just before .

Result:

Code 2 : Horizontal Count

Result:

Code 3 : No Count

Result:

Note :

Remember to replace "TWITTER-USERNAME" with your real Twitter username.
If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "" and "" from above codes.
5.Now save your template.
You can view more info from here:
http://twitter.com/goodies/tweetbutton
Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :
http://dev.twitter.com/pages/tweet_button
The post How To Add Twitter Official Tweet Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Blogger Official Share Buttons
Lasantha Bandara — Thu, 01 Jul 2010 13:43:00 +0000
In this tutorial I will explains, how to add blogger new share buttons to your blogspot blog.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show Share Buttons in Page Elements section.

But this method does not work for you,follow the steps given below to add blogger share buttons to your blog.

Blogger now offers new share buttons. The new buttons can be placed under each post and let your blog readers easily share your post via email, Blogger, and popular social networks—we now support Google Buzz, Twitter, and Facebook, and we plan to add more services in the future.
-From Blogger Buzz

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:

4.Now Copy below "Blogger Sharing buttons" code and paste it just below the above code.
NOTE: If you can't find
in your template, paste "Blogger Sharing buttons" code just before .

This will show blogger sharing buttons below post header.But if you want to show share buttons below blogger post,then paste your code just after .
5.Now save your template and you are done.
The post How To Add Blogger Official Share Buttons appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

20 Free Beautiful Social Media Icon Sets Collection
Lasantha Bandara — Tue, 08 Jun 2010 12:34:00 +0000
This is my another beautiful high quality social media icon collection for you.I think you will like this social icons very much.You can get these social icons directly from the authors websites.If you want to read my previous social media icon collection read below posts:
23 Free High Quality Social Media Icons Sets
Beautiful 3D Social Bookmark Icons Sets For Bloggers
Free Premium Quality Social Media Icons Collection
65 Bookmarks And Social Icons
65 freeware icons of Web 2 Social Bookmarks and Networks for use in blogs, websites, etc...Sizes: 128x128 64x64 32x32 16x16 | 260 Total icons.

Download : http://studiom6.deviantart.com/art/65-Bookmarks-And-Social-Icons-120098825
Ultra Glossy Silver Button Social Media Icons

Download : http://webtreats.mysitemyway.com/ultra-glossy-silver-button-social-media-icons/
108 Glossy Black Comment Bubble Icons

Download : http://webtreats.mysitemyway.com/108-glossy-black-comment-bubble-social-networking-icons/
154 Matte Black Social Media Icons

Download : http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/
Social.me
Social.me is an icon set consisting of 30 individual icons of the popular social networks/Web 2.0 sites out there.
The icons are iPhone-inspired and is based on the template provided by Tim (www.lostpixel.com) @ MacThemes Forum.Feel free to use these icons anywhere on your website, blog, or even in print.

Download : http://jwloh.deviantart.com/art/Social-me-90694011
Black Inlay on Steel Social Media

Download : http://webtreats.mysitemyway.com/iconsetc-black-inlay-on-steel-social-media-icons/
Social Media Balloons
The icons come in different sizes (from 32px to 128px) and they are in 32-bit transparent PNG format. The set is free for both personal and commercial use (under Creative Commons Licence, attribution is needed). However, resell is not allowed. If you want to integrate them into a website template which is for sale (e.g. WordPress theme, Social bookmark plugin, etc), you need to purchase an extended license.

Download : http://www.doublejdesign.co.uk/2010/03/social-media-balloons/
Social Media Balloons 2

Download : http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/
Social Jeans

Download : http://nishad2m8.deviantart.com/art/jeans-social-media-icon-pack-131069708
Simple Glossy Silver Social Media Icons

Download : http://webtreats.mysitemyway.com/simple-glossy-silver-social-media-icons/
Social 2 Duo

Download : http://iconblock.com/goodies/icons/
OLED Social Icons
Contents:21 icons
- 256x256px,- 128x128px,- 96x96px,- 64x64px,- 48x48px,- 32x32px,- 16x16px21

Download : http://arrioch.deviantart.com/art/OLED-social-icons-151238966
Furry Cushions Social Icons
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

Download : http://www.cutelittlefactory.com/freebies/furry-cushions-social-icons/
Free Social Media Icon Set Chrome
This set includes 19 social networks along with a standard RSS icon in PNG format.

Download : http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/
Wooden Social Media Icons
This is a set of free Social Bookmarking icons which is in Wooden style. Icons are in editable PSD and PNG formats so they can be customized as per your requirement.

Download : http://annanta.com/archive/wooden-social-media-icons/
Free 3D Social
Free 3D Social Icons are a free icon collection ideal for Web sites and applications associated with all sorts of social networks. The pack delivers images depicting various communication technologies and Web sites.
The icons from the pack come in sizes of 16x16, 20x20, 24x24, 32x32, 48x48, 64x64, and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP. Source files in 3D-Max format are also available.
This fabulous icon pack is available for instant free download!

Download : http://www.large-icons.com/stock-icons/free-3d-social-icons.htm
Grunge Social

Download : http://www.box.net/shared/hxycdc1m8z
Large Delicious Icons
Large Delicious Icons are a free icon collection ideal for Personal blogs and Web-pages. This set pictures the well-known Delicious symbol in lots of fresh and attractive variations.
The icons from the pack come in sizes of 16x16, 24x24, 32x32, 48x48 and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP.
This fabulous icon pack is available for instant free download!

Download : http://www.large-icons.com/stock-icons/large-delicious-icons.htm
Social Media Price Tag
The source file (PSD) is included, as well as two sizes of PNGs (250×150 px & 125×75 px). You can use these icons for personal and commercial projects at free of charge.

Download : http://deepubalan.com/blog/2009/12/14/high-resolution-social-media-iconset-for-free-price-tag-style/
Woodgrain A Free Social Media Icon Set

Download : http://www.chris-wallace.com/2009/06/30/woodgrain-a-free-social-media-iconset/
The post 20 Free Beautiful Social Media Icon Sets Collection appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.