add new facebook like button in blogger

How to add the facebook buttons to your Blog

First up i will give you the code for the button and then we will look at were you can add the buttons in your blog posts.

Facebook Like Button Code :

<iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:40px;’/></a>

Were To Place The Button

In this post we will look at three places you can add the button

*Below the post title
*At the top of the post
*Below the entire post

First go to your blogs html by following these three steps – In your dashboard click ‘Layout’ > ‘Edit Html’ > Tick the ‘Expand Widget Templates’ box.

Blogger layout

edit html blogger

Expand widget templates blogger

To add the button directly below the post titles Find the following code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code

<div class=’post-header-line-1′>

Now paste the facebook button code Directly Below / Under <div class=’post-header-line-1′>

To add the button at the top of the posts Find the following code in your blogs Html
(Click Ctrl and F for a search bar to help find the code

<data:post.body/>

Now paste the Facebook button code Directly Before / Above <data:post.body/>

To add the button directly below the posts Find the following code in your blogs Html :

(Click Ctrl and F for a search bar to help find the code

<data:post.body/>

Now paste the Facebook code Directly Below / Under <data:post.body/>

Once you have the Facebook code pasted were you want the button to appear and your template saved go check out your new share option.

social-wordpress-plugins

Best Free Current WordPress Social Bookmarking Plugins

Almost very blog and website online have Social Bookmarking options for readers to share content on their favorite social networks.Some go with the simple Facebook and Twitter buttons below posts while others offer more networks in various positions on the page.For WordPress users there are a countless number of plugins available to make their blog more social.In this post we have 12 of the best free Social Bookmarking plugins for WordPress users.

12 Social Bookmarking Plugins For WordPress


Socialize – Socialize is one of the most popular bookmarking plugins for WordPress placing bookmark buttons inside the content aligned left or right or in a box below the content.

Sociable – Going for over two years with over 1.5 million downloads Sociable is a neat bookmarking option for WordPress.

WP Socializer – If it’s options your after WP Sicializer could be the plugin for you.With 105 buttons including Retweet, Google+1, Facebook, LinkedIn, Addthis and Sharethis buttons for your WordPress site.

WordPress Sharebar – The Share Bar has become very popular on all blogs, a collection of bookmarking buttons fixed to the side of your posts that scroll with the page.”..Sharebar adds a dynamic and fully customizable vertical box to the left of a blog post that contains links/buttons to popular social networking sites..”

The Slide – The slide is actually a Related post / Bookmarking plugin that will keep readers on your blog with Twitter and Facebook share buttons.

WordPress Social Toolbar – This Plugin for adds a highly customizable bookmarking toolbar to the foot of your WordPress Blog.The options include color selection, social network icons, recent tweet and share buttons.

Share This WordPress Plugin – Share this is a popular Bookmarking service for all blogs and websites and this plugin makes it easy to install on WordPress.”..The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more..”

Shareaholic – Shareaholic is a jQuery animated bookmarking gadget with a slide up, pop down feature.It also adds share counts and tool tips to the bookmark buttons.

Share And Follow – Share and Follow have a number of bookmarking widgets that can be positioned in various spots on your blog.”..Add Share Icons, Follow Links, Facebook Like, Twitter Tweet and other buttons in the way you want. Simple & adaptable social networking..”

Sketch Bookmarks – This is a stylish bookmarking option with hand sketched social icons.”..This plugin contains amazing looking, sketched icons for only the top social bookmarking sites. ..”

AddThis – Another popular bookmarking widget used across the web also available as a WordPress plugin.”..The AddThis Social Bookmarking Widget allows any visitor to bookmark and share your site easily with over 330 popular services..”

Instant Highlighter – Enables visitors to make colored-highlights on your web page & EASILY save/share their highlights Facebook, Twitter… 100+ such sites!

best blogger templates with sliders

Sixteen Free Blogger Templates With Fitted Featured Sliders

-Click On The Screenshot Of Each Template For The Demo and Download Details.

Namisan – Stunning Slider Blogger Template

Namisan has the latest jQuery Featured Slideshow from Cu3er with stunning transitions that completely slice up the images between slides.A well coded template packed with gadgets and features Namisan has a two column layout with right sidebar.

Namisan - Stunning Slider Blogger Template


 

Ocenolis Magazine – Advanced Blogger Template

A colorful Three Column Blogger template with Two right sidebars.The Featured Slider, Image Slideshow Displays the images in a stacked fashion which rotate on click.

Ocenolis Magazine - Advanced Blogger Template


 

Nyke – Magazine Blogger Template

The Featured Slider, Image Slideshow has a very unique rounded bottom and a number of coll transitions between images.The template has a two column layout with right sidebar.

Nyke - Advanced Magazine Blogger Template


 

Floor – jQuery Rich Blogger Template

This is a dark colored template with a right sidebar.This template has a featured Carousal section brilliantly built into the design.Using jQuery the slides, info and link approach from different directions.

Floor - jQuery Rich Blogger Template


 

Game Madness – Assassins Creed Blogger Template

The Featured Slider, Image Slideshow on the Game Madness template spans the full width of the blog with nice transitions from each corner.The template has lots of extra gadgets and a gaming theme.

Game Madness - Assassins Creed Blogger Template


 

MoonLight – Clean Magazine Blogger Template

The Featured Slider, Picture Slideshow on Moonlight has a more simple design but fits neatly above the posts with auto scroll and manual scroll options.The template has a minimalist design with two columns and a right sidebar.

MoonLight - Clean Magazine Blogger Template


 

Simplex Buzz – Full Background Slideshow

Simplex Buzz has a very unique Slideshow indeed as the blogs entire background is the slideshow !.Then template also has a secondary featured posts section and a two column design with right sidebar.

Simplex Buzz - Full Background Slideshow


 

Oracle – Advanced Magazine Blogger Template

Oracle has a beautifully fitted Featured Slider, Image Slideshow with the sides fading away.The slides auto scroll with a manual scroll option.The template also has a two column magazine design with a left sidebar.

Oracle - Advanced Magazine Blogger Template


 

Extreme – Portfolio Magazine Blogger Template

Extreme Portfolio has a full featured section below the header were users can scroll through featured posts.The template also has a second categories section and a two column layout with right sidebar.

Extreme - Portfolio Magazine Blogger Template


 

Superb – Advanced Blogger Template

Superb has a really amazing and unique Featured Slider, Image Slideshow.The slides are stacked and move across with the titles listed vertically on the side.Superb has lots of other great features and a two column layout with right sidebar.

Superb - AdVanced Blogger Template


 

Modern Photography – Abstract Style Template

Modern Photography is a specialist Blogger template with a cool large Featured Slideshow, Image Carousal.The slider has a continues scroll and manual scroll option.The layout is two column with a right sidebar.

Modern Photography - Abstract Style Template


 

Calenotis – Photographers Magazine Blogger Template

Calenotis has a beautiful full width Featured Slider Slideshow that has a 3D design.The slides are on auto scroll with a number of different transitions.The template also has a professional magazine design with a two column right sidebar layout.

Calenotis - Photographers Magazine Blogger Template


 

Magulesco -Featured Magazine Blogger Template

Magulesco has an extremely clean professional design.The Featured Slider Slideshow sits over the header and body with a wide crisp design.The slides have some neat transitions with description section on each.The template also has a two column magazine design with right sidebar.

Magulesco -Featured Magazine Blogger Template


 

Dimenzion – 3D Style Blogger Template

Dimenzion has a classic featured slider with the featured posts listed to the right of the slides for navigation.The templates design is bright and somewhat unique with a two column right sidebar layout.

Dimenzion - 3D Style Blogger Template


 

Glow – Free Premium Blogger Template

Glow has a beautifully constructed Featured Slider Slideshow.The slides are visible as thumbnails on the left of the full size slider.The template also has a glowing two column magazine design with right sidebar.

Glow - Free Premium Blogger Template


 

Mahasoli Tribune – Magazine Blogger Template

Mahasoli Tribune features a stacked style image slider, each image has a description and all images overlap to open out when clicked.The template has a magazine design with a two column right sidebar layout.

Mahasoli Tribune - Magazine Blogger Template


I have had a few requests for a tutorial on adding text re size buttons to posts on Blogger.Back in 2009 i published a gadget that allowed visitors to change all the text size and fonts on your blog including headings, sidebar text and post text.But this time i wanted a gadget that onlu changed the text in the posts.I checked out a number of scripts and styles before settling on the one i have for you today.Using some simple jQuery and some colorful icons in a table we can create a stylish text resize section and float them on the corner of posts.The gadget has three buttons to increase text size, decrease text size and a reset  button along with the standard text resize icon.

Take a look at the demo below :

View Demo Button 

Add Colorful Text Resize Gadget To Blogger Posts


Remember Always Back Up Your Template Before You Make Changes –

Step 1. In Your Blogger Dashboard Click Design > Edit Html 

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html 

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

Note – If you have previously added jQuery script to your blog remove the code in yellow.

<!– Start Text re size gadget by http://www.spiceupyourblog.com –>

<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');

// Reset Font Size
var originalFontSize = $(section).css('font-size'); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
<!– End Text re size gadget by http://www.spiceupyourblog.com –>

Step 4. Find the following piece of code in your blogs Html

<div class=’post-header-line-1’/>

Step 5. Now Copy And Paste This Code Directly Below / After <div class=’post-header-line-1’/>

Note – The gadget is currently set to only display on post pages to display it on the home page also remove the two parts of code in yellow.

<!– Start Text re size gadget by http://www.spiceupyourblog.com –>

<b:if cond=’data:blog.pageType == “item”‘>

<table border=’0′ style=’float:right; margin-left:5px;’><tr><td><img border=’0′ src=’http://4.bp.blogspot.com/-b1_J5npcUag/TdzJSK1mwdI/AAAAAAAAEFU/f7mZHFshlQI/s1600/font-size-blogger-gadget.png’/&gt; | <a class=’increaseFont’ style=’cursor: pointer; cursor: hand;’ title=’Larger Text’><img src=’http://4.bp.blogspot.com/-DP_25fJBGew/TdzJRS0KcJI/AAAAAAAAEFM/P9-ikZyu3UE/s1600/bigger-font+-+Copy.png’/></a> 
<a class=’decreaseFont’ style=’cursor: pointer; cursor: hand;’ title=’Smaller Text’><img src=’http://3.bp.blogspot.com/-9SuQUU3YZlI/TdzJTOokcLI/AAAAAAAAEFg/Nz8SeJ6-QIs/s1600/smaller-font.png&#8217; style=’cursor: hand;’/></a> 
<a class=’resetFont’ style=’cursor: pointer; cursor: hand;’ title=’Reset Text Size’><img src=’http://4.bp.blogspot.com/-i-uGhNM_bks/TdzJScrNpII/AAAAAAAAEFY/v4XGHbR30Cw/s1600/reset-font.png&#8217; style=’cursor: hand;’/></a></td></tr></table>

</b:if>

<!– End Text re size gadget by http://www.spiceupyourblog.com –>

Step 6. Find the following piece of code in your blogs Html 

<data:post.body/>

Step 7. Now replace <data:post.body/> with the following code :

<span><data:post.body/></span>

Step 8. Save your template.

create-wordpress-like-follow-bar-in-blogger

Static Follow By Email Pop Out Widget for Blogger Preview

HOW TO INSTALL POP OUT FOLLOW BY EMAIL WIDGET?

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.

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

INSTALLING WIDGET:-

In this Second Step, I am giving two ways to install this widget. Both will give the Same Effect.

  1. By Adding Widget Code to Template.
  2. Using Widget Generator.

BY ADDING WIDGET CODE TO TEMPLATE

This will converts Follow By Email Official Blogger Widget to a Pop out follow by Email Widget.

  1. First Add Follow By Email Official Blogger Widget to Your Page Elements Layout.
  2. Add the Below Section Of code before closing </head> tag. Read the rest of this entry
%d bloggers like this: