www.fantafab.com header. So cool!

Since
I fell in love with the pic, 

I AM SHARING WITH YOU. LET'S FALL IN LOVE TOGETHER.



www.fantafab.com

How To Replace Blogger Profile with Google+ Profile

Linking your blogs to your Google+ profile allows you to easily share your blog posts to your Google+ stream, right from your Blogger dashboard. In addition to getting access to existing and upcoming Google+ features, linking your blogs to your Google+ profile will give your readers a more robust and familiar sense of who you are. Your blog posts will also be highlighted in Google search results, for your social connections to see

To link your blog with your Google+ account, you’ll need to replace your Blogger profile with your public Google+ profile.

How To Get Started


You must already have a Google+ profile. If you don’t have a Google+ account, you can create one here first, before you continue with the steps below. If you already have a Google+ account, follow the steps below:

Log in to your Blogger blog

Go to http://www.blogger.com/switch-profile.g

Tick the "I have read the above and fully understand ......" box

Click the "Switch Now" button.

That's all.

Upon switching to your Google+ profile, your posts and comments will link to your public Google+ profile More so, your Blogger profile will become unavailable for visitors, and everyone will be redirected to your Google+ profile.

Feel free to check out this Google Plus Manual.

The Twitter Follow Button is a small widget which allows users to easily follow a Twitter account from any webpage. If you add the twitter follow button to your blog, it will help your visitors to connect with you on Twitter.

If you want to add the "Follow Me on Twitter" button to your Blogger blog, follow the steps below.

How To Get Started

Go to : https://twitter.com/about/resources/buttons#follow

Fill the button options accordingly and copy the code

Log in to your Blogger dashboard

Go to Layout or Design

Right on the sidebar, click "Add a gadget"

Choose "HTML/Javascript" gadget from the list that will come up

Paste the code of the button into it. You can give it a title: "Follow Me On Twitter"

Click SAVE.

That's all

View your  blog and you should see the "Follow Me on Twitter" button on your blog.

Kindly follow me on Twitter via: www.twitter.com/thefantafab

Cheers!

How To Add Extra Widgets To Any Section of Blogger Layout

How To Add Extra Widgets To Any Section of Blogger Layout

There will be cases where you might want to add extra widget to a section of your Blogger/Blogspot blog but you will not be able to find the "Add a gadget" link at that section of your blog. Well, with some simple tweak, you can easily fix this. This comes very handy especially when you want to add extra widgets e.g ad banners, Facebook Like box etc to your Blog Posts column.


How To Get Started

==> Login to your Blogger dashboard and back up your template

==> Then, go to "Template" ==> "Edit HTML" ==> "Proceed" (If using New Blogger dashboard)

==> Use CTRL F to search for: <b:section class='main' id='main'

==> Modify the line to : <b:section class='main' id='main' maxwidgets='6' showaddelement='yes'>

==> Save your template.


This tweak will add a "Add a Gadget" (showaddelement='yes') link to your Blog Posts section on the Layout page and allow you to add a maximum of six widgets (maxwidgets='6') to your Blog Posts column.

If you check out the Layout page, you should now see a "Add a Gadget" link on top of your Blog posts column as seen in below picture:

NOTE

==> Once you might have added the maximum number of widgets, you will no longer see the "Add a gadget" link untill you increase the maxwidgets number in the code above.

==> You can apply the tweak to other sections of your blog. You can easily locate all the sections of your blog by using CTRL F to find: <b:section class= in your blog's HTML.

I hope this helps.

Kindly relay your comments via the comment form below.

Download Bloggers Guide to HTML (Free Ebook)

Download Bloggers Guide to HTML (Free Ebook)

I just stumbled on a Bloggers Guide to HTML and I have decided to share it with you. The free HTML Ebook explains how to use basic HTML tags in formatting your blog posts.

It is a simple 26 page PDF file you can download or print. Read it!

Click to view/Right-click to download

You can test your HTML skills here after reading the basic HTML free ebook.

Just type something into the box, including any HTML tags you want to try out, then click the "Preview" button. Your text appears in another window, formatted according to the tags you use.

I hope this helps.

What do you have to say about this?

Want To Add Facebook Recommendation Bar To Blogger/Blogspot Blog?

Want To Add Facebook Recommendation Bar To Blogger/Blogspot Blog?

While reading articles on some blogs, you might have noticed a Facebook recommendation bar docked to the lower right (or left) of the screen which expands as you scroll down the page or after you might have finished reading the blog post. This Facebook social plugin was designed to show you a social recommendation of the next article to read on such blogs.


If you add the Facebook recommendation bar to your blog, it will boost your traffic, by allowing you to gain more pageviews, though the bar will only display your blog posts that are previously liked or shared on Facebook. It features the "Like" button and can display up to 5 recommended posts but default is 2. Below is a screenshot of the FB recommendation bar:

So, How Do I Add Facebook Recommendation Bar to Blogger Blog?

You will need to create a Facebook application so as to get your appID which will be needed to make the bar work on your blog. If you already have your appID, probably after reading my tutorial on adding the Facebook comment form to your blog, you can just go to step 2.

STEP 1

==> Visit Facebook Apps SetUp page

==> A small windows will pop out. Type anything you like in the "App Name" field. Make sure it says valid

==> Click the "Continue" button

==> You will be prompted to enter a captcha code. Enter it in the space provided and click on submit

==> A new page will be displayed. Click Website with Facebook Login tab and inside the box, enter your blog URL with an ending slash. See the screenshot below

Do not touch remaining options and click Save Changes.

==> You will also see two strings of alpha-numerical characters on the page. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later


STEP 2

==> Log in to Blogger.com

==> Go to Design → Edit HTML (In Old Blogger Interface) or Click on Blog Title → Template → Edit HTML (in New Blogger Interface)

==> Tick the "Expand Widgets Templates" box and Use CTRL F to find </body>

==> Add the code below directly above </body>


<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by Ogbongeblog.com
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


==> Replace xxxxxx with your appID copied in Step1 ( Important)

==> Click on Save Template

STEP 3

==> Still in "Edit HTML" with "Expand Widgets Templates" box ticked, Use CTRL F to find </head>

==> Copy and paste the code below directly above </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>


==> Click on Save Template


STEP 4

==> Still in "Edit HTML" with "Expand Widgets Templates" box ticked, Use CTRL F to find <data:post.body/>

==> Copy the code below directly after <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-recommendations-bar' data-action='like' data-num-recommendations='2' data-read-time='30' data-side='right' data-trigger='onvisible' expr:data-href='data:post.url' expr:data-site='data:blog.homepageUrl'/>
</b:if>


==> Click on Save Template

That's all.

View your blog posts and you should see the Facebook recommendation bar as you scroll down the page.

NOTE

==> You can change the number of recommended posts in the code above though maximum is 5. You can check out the official Facebook recommendation bar page for more info on how to customize the bar.

I hope this helps.

If you have contributions or questions to ask, kindly make use of the comment form below.

Cheers

How To Divide Blogger Header Into Two Sections

How To Divide Blogger Header Into Two Sections

The Blogger template designer allows you to customize your blog template but as at the time of publishing this tutorial, you cannot use it to split the header of your blogger blog into two. Today, am sharing with you, how I divided my blog's header into two after following a tutorial at BloggerSentral, making it possible for me to add extra gadgets beside my blog logo.

Splitting your blog header into two sections can make your blog look more professional, making your logo to appear on the left side of your blog header, while you have some space to add any other gadget or advertisement banner to the right of the logo.

Below is what my Blog header looks like after splitting it into two columns:

So, How Can I Divide My Blog's Header into Two Columns?


==> Log in to your Blogger dashboard via www.blogger.com
==> Click Template
==> Click Edit HTML tab
==> Back up your blog template
==> DO NOT tick the "Expand Widget Templates" checkbox
==> Use CTRL F to find the code below:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>

==> Copy and paste the code below, right under (after) it

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

==> Hence, your code should now look like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

==> Use CTR F to find ]]></b:skin>
==> Copy and add the code below right above the ]]></b:skin> line

#header, body#layout #header {width:35%;display:inline-block;float:left;padding:15px;}
#header-right, body#layout #header-right  {width:50%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

==> Save your template.

Go to "Layout" and you should now notice a "Add a gadget" link right beside the header. Click it to add any widget right beside your blog logo. ( eg Social media icons, advertisement banner, Google Search box etc)

That's all.

I hope this helps.

If you have contributions or questions to ask, kindly relay them via comments.

Cheers!

Floating Sharing Bar for Blogger Blogs

Floating Sharing Bar for Blogger Blogs

You might have seen some blogs with a vertical floating share bar widget where Facebook like, Tweet, Google+ buttons are present on the left or right side of the blogs. Adding this floating sharing bar to your blog will make it easy for your blog visitors to Like, reTweet, +1 and share your posts, which will help in increasing your blog traffic.

Though I've explained how to add the sharing bar when I published how to add Facebook Share & Like buttons, Digg and Tweet Button to the side of blogger/blogspot blogs, I've recoded a better one which I decided to share with you. I have replaced "Facebook Share" with Facebook Like button and removed Digg and SU buttons.

More so, since displaying too many social media counters could affect the speed at which your blog loads, I've added a AddThis share button which provide your visitors with over 300+ social sharing options all in one place.

Below is a screenshot:

So, How Do I add the Floating Share bar to my Blogger/blogspot blog?

Adding the Vertical Floating Bar to a Blogger blog is very easy. You just have to copy a snippet of code,and drop it into a HTML/JavaScript gadget.

STEPS

• Log in to your Blogger account.
• Go to Layout
• Click "Add A Gadget"
• In Add A Gadget window, select HTML/Javascript
• Copy the code highlighted below and paste it inside the HTML/Javascript box

<!-- floating page sharers Start Share This With Friends-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via='ogbongeblog' >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href=www.fantafab.com"">Get</a> <a href=fantafab.blogspot.com"">this</a></div>
</div>
<!-- floating page sharers End -->

Save the gadget and click "Save arrangement" button on the upper right corner.

View your blog and I hope it works for you.