Showing posts with label Blogger widgets and plugin. Show all posts
Showing posts with label Blogger widgets and plugin. Show all posts

How To Make Money From Blogging

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Are you a newbiein blogging fieldand wonder that how people are making money from their blogs? Well not everyone does earn from blogging. Frankly saying, the success ratio is very less, but it all depends on your approach. You might be interested to join that ‘Small’ portion. If this is so, then this article is meant for you as I am going to list down the best ways to make money from a blog. Do check them out, as who knows, you may find a suitable one for you? Let's proceed ahead with the list.
 

Display Ads on Blog


The best and most used way to make money from a blog, is by displaying adson it. There are a no. of ad serving companies that let you to display ads on your blog. You can opt for any of your choice. Google Adsenseis recommended for everyone. Though the approval process is bit tough, but it pays the most.

Paid Reviews


If your blog has got good stats like good Alexa Rank, Pagerank, Page Authority, Domain Authority, then you will get many offers from the advertisers regarding the paid reviews. You just need to review the advertiser's product or service on your blog, and advertiser will pay you a handsome amountfor doing so.
 
 

In-text Advertising


Don't want to show the ads on your blog and want to keep it simple and clean? If yes is your call, then opt for In-text advertising. There are plenty of In-text advertising networks available and when used on your blog, they convert the normal texton your blog into clickable links. Each click generates revenue, which is shared in a fixed ratio between you and ad network.

Affiliate Marketing


Affiliate marketing is difficult way to make moneyfrom blog and it requires a successful blog to show you some positive results. If you have got one such blog, just apply for affiliate networks of your desire and place the affiliate links on your blog. Whenever someone will buy the product following your affiliate link, you will get commission. Simple.But to learn only, not to master.


Offer your Services

Your blogging journey teaches you a hell lot of things. It improves your skills in various fields. You can now offer your experience to newbies, for a decent amount. To get clients for your services, it's good to place a ' Hire Me' page on your blog. Your blog's visitors will check out the services offered by you, and will like to hire you, if they want.

Many more ways, but listed best ones only, the ones which can bring best results for you in this aspect.Ahhan! Stop reading now and give these ways a practical shot now. A huge money is waiting for you behind the curtains of blogging. It’s up to you whether you can grab it or not. Many are doing it already. Work hard, implement what you learnt here, and join the queue of those ‘Many’ people.

Here Is 3 FREE SEO Plugins For Your Blog Must Use It

I would like to share 3 valuable wp plugins:

SEO No Duplicate – This plugin helps you manage your search engine duplicate content, by setting your post page’s canonical to the permalink.

Broken Link Checker
– This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

Redirection Plugin - Acts as an even better solution to the 404 (broken links) problem. Redirection is a WordPress plugin to manage 301 redirections and keep track of 404 errors without requiring knowledge of Apache .htaccess files.

Add New Floating Social Sharing Bar Widget To Your Blog

Live Preview - Demo

How to Add Floating Social Sharing Bar Widget?

First,
  1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox
Just follow 3 Simple steps,

The jQuery Plugin!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

The Social Scripts

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)
Add the below snippet code before </head> tag
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Adding Social Buttons Widget

Let’s add the final Social horizontal bar widget code.
Add this code before <data:post.body/> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwTJZGSp4h_WXUIZSa4V-RjxQ_5rUaEIVDb4OMi3IvZatrRcYNpsZpo15zn6P1xDPDwYA46q8Amc8L-dpt6-mrfJnEZaejn8GBdrCdvBYzNaAq0uetYg_pTb9JL_XdgswXgwxwhNSvF6Ex/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

Save Template!!!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.
Hope this widget is helpful to you, Please leave your comments, and share this Widget.
Thanks to Raghav! for requesting this simple and awesome widget.

Update :-

1. I found the tag Three times?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
Place the Widget code in between the two tags.

2. How to change the background color of Horizontal bar?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for
background:#FFFFFF;
and change the #FFFFFF with your own Hex Color.
Thanks to All.

How To Add Facebook Popout Likebox for Blogger

                                            Live Demo

How to Install Facebook Popout Likebox Version 2 ?

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.8.2/jquery.min.js"></script>
  1. Click the Widget Generator Button
  2. Customize the Settings as you need
  3. Click on Generate button and add widget to your Blog
Widget Generator

Some Instructions to Newbies

Likebox is for Facebook Pages. Some New Bloggers are using Their Profile Url and try to Installing the Facebook Likebox. But it gives Error!!.
For Example, Way2Blogging’s FB page is http://facebook.com/way2blogging and you should see the Like Button in this Facebook Page.
where as in Facebook profile you should see the +1 Add Friend button.
That is the small Difference you can identify in the FB Page. Good Luck!

Leave your Comments. :)

How To Add Facebook Comments Box To Blogger Blog's Post


1. If you wish to completely hide the blogger comments form then read Replace Blogger comments form With Facebook

2. Show both Facebook and Blogger Comments inside Tabs!



facebook-comments-boxIn 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old Blogger Comment form so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.



Live Demo

This is how the Facebook Comments box looks like,
LIGHT SCHEME
facebook-commentS-box LIGHT

DARK SCHEME
Facebook-comments-dark-scheme

Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
3. Hit "create app" button and proceed
4. After submitting the security check code you will see this page,
app-id
5. Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
6. One the new window that appears click the Edit Settings link ,
edit-settings
7. Then go to Website option and write your Site Domain as blogspot
website
8. Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now its time to do embed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
  5.  Next search for 
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
< div id='fb-root'/>
< script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;YOUR_APP_ID&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
< /script>



  • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
6. Next search for </head> and just above it paste the following code,
< meta expr:content='data:blog.pageTitle' property='og:title'/>
< meta expr:content='data:blog.url' property='og:url'/>
< meta content='MY Blogger Tricks' property='og:site_name'/>
< meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
< meta content='YOUR_APP_ID ' property='fb:app_id'/>
< meta content='http://www.facebook.com/mybloggertricks' property='fb:admins'/>
< meta content='article' property='og:type'/>


Make these changes:
  • Replace MY Blogger Tricks with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
logo

  • Replace YOUR_APP_ID with the your Facebook Application ID that you saved in notepad
  • Replace http://www.facebook.com/mybloggertricks with your Facebook user profile link
7. Now Search for this,
< b:includable id='comment-form' var='post'>
8. Just after it paste the code given below,
< b:if cond='data:blog.pageType == &quot;item&quot;'>
< div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
< div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
< div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by < b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
< /b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)

How to Display Your Scripts and Codes in Blogger Posts

How to display the Scripts and Codes in blogger post To show codes in blogger post in special section.
Suppose we want to show a simple code like bellow
< h1> Related posts </h1>
but it is HTML Code so it will display like bellow.

Related postsTo avoid this we show codes in special Section amd make it friendly to post
Just follow these steps
  1. Login to Blogger dashboard
  2. Go to Design Section
  3. Then select Edit HTML tab
  4. Find ]]></b:skin> tag
  5. Paste it above Code of section
    .codeview {
    margin : 15px 15px 15px 35px;
    padding : 10px;
    clear : both;
    font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
    line-height:1.6;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-YcVqpgr8FOR62hee0Q8r-WF2Wgg3T0WWMoKngvMws0r2AR3DZK-Y0nNy7NlmnKkPN-wlJekmTNNw7m-54R0xo6Iu1UNBjbYeDbCXvetEUURGRaavoUkW8Lq_ccmok1UVYcqnwHHAMH7/') no-repeat scroll bottom right #EFFBF5; 
    border-top : 1px solid #eeeeee;
    border-right : 2px solid #cccccc;
    border-bottom : 2px solid #cccccc;
    border-left : 1px solid #eeeeee;
    }
    .codeview li {
    line-height : 24px;
    color : #333333;
    margin : 0;
    padding : 0;
    }
    ]]>
  6. Now save your template.
While creating any Post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create Div section and put your code in Div section like bellow and publish Your Post.
<div class="codeview">

<!-- Put Your Special code here -->

</div>
Note:- Before Putting code, Make it Friendly to post Using these tools

a sample preview
.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-YcVqpgr8FOR62hee0Q8r-WF2Wgg3T0WWMoKngvMws0r2AR3DZK-Y0nNy7NlmnKkPN-wlJekmTNNw7m-54R0xo6Iu1UNBjbYeDbCXvetEUURGRaavoUkW8Lq_ccmok1UVYcqnwHHAMH7/’) no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;

}
.codeview li {
font-size : 13px;
line-height : 24px;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

How To Add Facebook Like and Send Button To Blogs


Go To Blogger > Design > Edit HTML

Backup your template

Click Expand widgets templates box

Search for <data:post.body/>

To add the plugin just below your post titles then add the giant code below just above <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>

Hit save

How To Add Facebook Recommendations Bar To Blogger

Facebook Recommendations bar


















Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.
  1. Log into Facebook Apps
  2. Click on Create New App button towards Top-rightcreate new app
  3. In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.
app name
     4.   Enter the captcha security code. Click Submit
     5.  You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.
Site URL
         6.   You will see two strings of alpha-numerical characters. 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.
App ID
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search For this :
<html
Replace it with this code:
<html xmlns:fb='http://ogp.me/ns/fb#'
This will make the plugin compatible in older versions of  internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
     5.   Next search for <body>   and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar by http://bloggingtiptricks.blogspot.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=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.mybloggertricks.com' trigger='40%'/></div>
</b:if></b:if>
You are almost done. Make these changes:
  • Replace *************** with your 15 digit App Id that you saved in step1.
  • Replace http://www.mybloggertricks.com with your blog link
     6.   Save your template and you are all done!

More Widgets

How To Add A Header Image To Blogger or blogspot For A Dynamic Views

1.Go to template
2.Click customize than click background >background image
3. Upload your image
4.Hit done and adjust just your tile and if your image is fits the width than don't tile.
5.Select tile horizontally if it's  shorter than the width.
6.Adjust the allignment

If you ever want to remove the blog title on the header bar, do the following:


Back in the Template section, click on Edit HTML.
          
Look for ]]></b:skin> inside your template’s code using Ctrl+F.

Copy/paste the code below right before and above it.
 
  .header-bar {
   display: none !important;
   }     

Add Ribbon Style Type Navigatiob Bar to Your Blog

Adding a Modern Ribbon Style Navigation Bar

1. Go to template
2. Click Edit Html > Proceed Button
3. Find this code
    ]]></b:skin>
5. Copy the below code and paste it just below the above code

float: left;

margin: 1em 0.8em;

}

#navigation2 li a {

text-shadow: 0 2px 1px rgba(0,0,0,0.5);

display: block;

text-decoration: none;

color: #f0f0f0;

font-size: 1.6em;

margin: 0;

line-height: 28px;

}

#navigation2 li.active a:hover,

#navigation2 li a:hover {

margin-top: 2px;

}
#navigation2 li.active {

font-style: italic;

}

#navigation2 li.active a {

}

.rectangle {

background: #e5592e;

height: 62px;

position: relative;

-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;
z-index: 500; /* the stack order: foreground */

margin: 3em 0;

}

.l-triangle-top {

border-color: #d9542b transparent transparent;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: left;

top: -5px;

left: -50px;

}
.l-triangle-bottom {

border-color: transparent transparent #d9542b;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: left;

top: -45px;

left: -150px;

}

.r-triangle-top {

border-color: #d9542b transparent transparent;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: right;

right: -45px;

top: -107px;

}

.r-triangle-bottom {

border-color: transparent transparent #d9542b;

border-style:solid;

border-width:50px;

height:0px;

width:0px;

position: relative;

float: right;

top: -149px;

right: -145px;

}

Note: Before editing your template, be sure to make a back up of it first.
6. Go to Layout.
7. Click Add Gadget. Select HTML/Javascript.
8. Paste this code
 
 
<div id="navigation_container">
<!-- the left side of the fork effect -->

<div></div>

<div></div>
<!-- the ribbon body -->
<div>
<!-- the navigation links -->
<ul id="navigation2">

<li><a href="#"> Home</a></li>

<li><a href="#"> About</a></li>

<li><a href="#"> Downloads</a></li>

<li><a href="#"> Contact</a></li>

<li><a href="http://www.bloggertrix.com/"> Services</a></li>

</ul>

Replace it "#" with your own links
More Blogger Widgets 

How To Remove The Blogger Navigation Bar

  1. Go to layout > Edit HTML in your blogger dashboard
  2. Copy the code below, [Press “Ctrl + C” to copy & “Ctrl + V” to paste a code]

#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
    3.   Press Ctrl+F and search for Variable definitions
    3.   Paste the above code just before/above Variable definitions
remove-nav-bar
    4.    Save your Template

More Blogger Tips 

How To Create A Wordpress Subscription Form

  1. Go To Blogger > Design
  2. Select an HTML/JavaScript Widget
  3. Paste the code below into the widget
<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZsJ7K0Jja4B65HfP4yi9yj4cGmKaNTEr5aH-Uksy3NO2qg-NzBddi7-dJODeCY1w14Y6mqJw3TPy3t2bbnjcAIp4lN81926UyqOjTCT2l4JMbSiXl21UFFTjFk-foZ2eJHX8iRQw7zg/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMosRdEfzFtF4GDVBZNJVoWdbOzMrdFQlGFQKgudLCM8IS2FYNhxsvFqZf-9cpscwmp2KAmySXTHckllHUKYbDWTT3dclGpmJK10eJsTEABN_cRWvMHLMEN2VYOAOujoGAdtPfJ51fnw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl_CNmw7toL74btKq7UjUZVbeCKuHqErt8_XXzgjahghsvRB-E6EPAI6ejGJp79X6MTFhh2mmm33Cylfjq1GAmIdzYj7XJi9W7i-9t3-9KBrd5m1ZDvqjOmxiTrn4ukINx5L87cHrxfm8/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUrDZAq9vPsPOMn1oK6wkf7eFtI5LWmz-yYl8F1xLQVDtj5XTUz3VOAo6j1q_gkZwO7QFMxEKk-eOD0pT8vyFuROUDtQRzSz5N06aE8Pg0L5OPysvKVl-HKzpvVYrQC1R-MAal7P2uGM/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>
Save the widget
  • To Change the the Blue Colour of the Submit button Change #57ABFE to a Light shade and this #0080ff to a dark shade. Our Colour Generator Can help in this case.
  • Replace 1675+ with your Feed count and always update it manually once a week. To change its colour edit this #F17C18 
  • Replace http://www.mybloggertricks.com/feeds/posts/default with your feedburner RSS Feed link.
  • Replace http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744 with your Facebook profile  Link
  • Replace http://twitter.com/mybloggertricks with your twitter profile link
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your feedburner RSS Email Link
  • Replace tntbystc with the Feedburner RSS Email Title which is always written at the end of your FEED Email Link as shown below,
http://feedburner.google.com/fb/a/mailverify?uri=tntbystc

How To Add "Reply Link button" Or Read More Button to Blogger Comments

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand widgets Templates" Box
  4. Search For ]]></b:skin>
  5. and paste the code below just above it,

/*--------------BLOGTIP Reply Link --------------*/
.BLOGTIP-replycomments{
background:#ECEAEA;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:4px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:10px sans-serif;
}
.BLOGTIP-replycomments:hover{
background:#E7E7E7;
}

To Change the Link background on active mode edit #ECEAEA
To Change the Link Background color on mouse hover edit #E7E7E7  
Now Search for,
<dd class='comment-footer'>
or just this,
class='comment-footer'
and just above it paste the "Reply Link" Code below,
<div class='BLOGTIP-replycomments'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=*******************&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=650&quot;); return false;'>Reply..</a></div>

  • You can replace the text Reply.. with anything you like
  • Replace with your BLOG ID. If your are logged into your blogger account then look at your browser address bar. You can clearly see a 18-19 digit code. Just copy it and paste it in place of ************
  • *******
blog-id

How To track Downloads On your Website?

Track Donwloads in Blogger













Replace  PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.
<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>
<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

How To Create Floating Bar For Pinterest & Other Sharing Buttons

floating share bar for blogger 
Adding Floating Bar To Blogger
The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Then Click Expand Widget Templates
  6. Search for
<b:includable id='post' var='post'>
      7.   Just below it paste the following code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgan99z7cSkb_K_upYfK5eHObm8dJ7kdOOUZ0iPsiLMCUiSy2JAoelHYK4lpSOqfTiyxVcgQS8DBmaPltp8o43EcHd0_1sVz-IghNG3Q4pCzuADBeJZ-hupVkhMJnuWxfDJoXZfcDgEGXFr/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgan99z7cSkb_K_upYfK5eHObm8dJ7kdOOUZ0iPsiLMCUiSy2JAoelHYK4lpSOqfTiyxVcgQS8DBmaPltp8o43EcHd0_1sVz-IghNG3Q4pCzuADBeJZ-hupVkhMJnuWxfDJoXZfcDgEGXFr/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQmdcZ89ikOYxm40L189L2NYe6p5ibZUaPBFthr9IV9v3qQ6-UrAUopdCmPFwo5K717as9o6r9L2C_5pZr0rTgzdCWlaJsZPaDuHTeTGBpyomQdSjerlNIwvSYXPY8UFBLrNEfJ6ghH-0/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='mybloggertricks'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
   
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace mybloggertricks  with your twitter username.
   8.  Save your template and you are all done!

How To Create a Drop Down Menu In Blogger

image 








How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:
  1. Go To Blogger > Design > Page Elements
  2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,
drop down menu
<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>

        </li>
      </ul>
    </div>
Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>
To add another tab just paste this code above </ul>
<li>
          <a href='#'>Tab Name</a>
        </li>
       
    3.   Now Go to Design > Edit HTML
    4.   Backup your template and search for ,
]]></b:skin>
     3.   Just above it paste the code below,
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
Make these changes:
  • Change #060505 to change background color of the Main menu
  • Change  the yellow highlighted text to change font color, size and family
  • Change #BF0100 to change the background of a tab on mouse hover
  • Change #BF0100 to change the background color of the drop down menu
  • Change #060505 to change the background color of drop down menu on mouse hover
      4.    Save your template and you are done!

How To Add Facebook Activity Feed To blogger - Know What Happens In Your Facebook Id In Blogger


 facebook activity feed for blogger





Go To Blogger > Template  
Backup your template
click Edit HTML
Optional step: If you have a Facebook comments plugin or Recommendations bar installed on your blog then you may skip to step#5 instead.

Search for the following tag inside your template:

<body>

or simply search for
<body

  Just below this body tag paste the following JavaScript SDK code:

<div id="fb-root"></div>
<script>(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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

  Save your template.

      5.  Next go to Blogger > Layout

      6. Click add a gadget and choose HTML/JavaScript widget

      7. Inside your HTML/JavaScript widget paste the following HTML5 code:

<div class="fb-activity" data-site="http://www.MyBloggerTricks.com" data-width="300" data-height="450" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>



Make these changes:

Replace http://www.MyBloggerTricks.com  with your website URL. For BlogSpot blogs it should have the following structure: http://your-blog-domain.blogspot.com

I have set width to 300 pixels (300)and height to 450 pixels (450). Adjust them according to your blog layouts only if alignment changes are required. Increase height if you want to display more stories inside the plugin.

In order to hide the blue border across the plugin, I have set the border to white. If your sidebar has a different colored background then adjust the background color by editing: #ffffff    Tip: Use our color generator tool

Friends likes appear above and recommended posts appear below that as bolded titles. If in case you don't want the plugin to display recommended stories then you can turn off recommendations by replacing true with false