How To Drive Traffic To Your Blogs From Facebook?

---

This is a Guest Post by Rafay baloch. Follow him on Facebook @Hacking and Cracking

As we know that facebook has became the most widely used social networking site these days,its Alexa rank is 2,which means the second most popular website on web after Google,Hence bloggers are using it to drive a lot of traffic,but some of bloggers even after having all the resources struggle to drive traffic from Facebook,So i am writing this article for ones who are struggling to drive traffic using facebook. Below are some most important steps you need to take to drive traffic using Facebook:

Add a lot of Friends: 

Yes,you need to add a lot of fans friends in order to get traffic from facebook,i suggest you to make an individual Business profile,The more friends your status is seen by more people and hence more traffic.

Connect Facebook with twitter

As we know twitter is favorite micro-blogging tool,you can connect Facebook account with twitter for better productivity,Now whenever you will update your status on Facebook OR twitter it will appear on both Facebook and twitter and hence no need to individually update status of both Facebook and twitter Use Facebook notes applications:Follow the steps to interconnect Facebook with twitter:

1. Log in to your Facebook account
2. Now go to this url "http://apps.facebook.com/twitter/"
3. Add the 'Twitter' Facebook Application.
4. Choose your preferred settings and click on"Add twitter"
5. No log into your twitter account
6. Allow and Authorize Access for Twitter to Facebook.

   That's all! Every time you update your Twitter, your Facebook status will update automatically!

   Import your blog with notes application

   Notes application is a very useful application in blogger. It imports all your blog posts and post into your friends automatically when ever you update your blog, Follow the steps to add Note applications in your facebook account
   1. http://www.facebook.com/editnotes.php?import
   2. Agree to TOS
   3. And start importing!!

      Use Facebook fan Pages

      

      I recommend every blogger to use it,this method is the most powerful one,Bloggers are using fan page to drive huge amount of traffic.Facebook Fan Page helps you into Branding, Socializing and more over sending a message to all your Blog or service Fans. Follow the steps to Add Facebook fan page to your blog:
      1. Follow this url: http://www.facebook.com/pages/create.php
      2. Write down your category and name of your facebook fan page which must resemble with the category of your website
      3. And Click create and see your new facebook fan page
      4. Just add it into your website and invite your friends to join it!

         Use Facebook share button

         Like digg,twitter,stumble upon etc. Facebook has also a share button through which your readers can easily share with their friends. To add the Facebook Share button to your blog then follow these steps, 1. Log into Blogger > Layout > Edit HTML 2. Click the Expand Widget Templates box
         3. Now find this code,

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

         4. Now paste this code just below the code in step#3

         <b:if cond='data:blog.pageType == &quot;item&quot;'><span style="text-align: right;">
         <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
         </span></b:if>

   5. Save your template and see a beautiful button hanging at the top right of your posts,   I hope you liked this article!

   About The Author:
   Rafay Baloch is an engineering student. He is a techie Blogger, hacker and programmar. He loves to learn and share Ethical Hacking/Security Tips. He is the author of the blogs Learn how to hack and Make money online

Editing The Song or Track Title and Artist Name In Blogger-Wordpress Mp3 Player

Most of you requested a comprehensive tutorial which may let you easily edit the Track title and artist name that appears in the slide of the Wordpress Mp3 Player. I have already written two detailed posts on how to add this player in your blogger Blogs. If you haven’t read them then kindly read the details of adding this beautiful Mp3 player to your Blogger hosted blogs. The links below will take you to the respective pages.

1. Simple Wordpress Mp3 Player


2. Advanced and Customized Wordpress Mp3 Player

Kindly click the play button below and you will observe that when the slide opens, the Song Title and Artist name is displayed. We will learn on how to add this effect to any Mp3 Track whose title is not properly displayed in the Wordpress player.

The Music will start playing after 28 seconds (Not my fault –The audio is such! :p)

Follow These Simple Steps

1. Go To your hard drive where you have saved your Mp3 file


2. Right click on the Mp3 file and select “Properties”

• A new window will pop-up with two tabs entitled “General” and “Summary”


• Click the Summary Tab and in that page click the button that says “Advanced >>”

• Now carefully look at the screenshot below. The only areas you need to edit are,

1) Artist  2). Album Title  3). Title

• 
  To edit an area simply double click on the right side of the preferred area. For example if you want to edit Artist name then right click at the extreme right side of Artist and then a blank box will be displayed where you can enter whatever text you want. 
  
  

• After you edited the guided areas then simply hit Apply and Ok. You are done! The result will look something like this,

• 
  The green arrows are your edited areas and the text indicated by the blue arrow can easily be changed by simply right clicking the Mp3 file and renaming it. Though the text indicated by blue Arrow will not show up in the Wordpress Mp3 file.
  
  

Now simply upload your Mp3 file at a hosting service and start enjoying Music on your blog like never before! :>> Take care!

Note:- Questions are always welcomed!

Top 10 Widely Used Image Hover Effects In Blogosphere!

  You might have seen a roll over Image effect in many professional and commercial blogs. By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.

This tutorial uses a simple pattern for adding codes i.e First you will need to add a CSS code just above ]]></b:skin> and then you will need to add a small HTML code like class="xyz"  to the image code inside your posts. That’s it! :>

First and Foremost See them in action!

Live Demo :- 10 Amazing Image Hover Effects!

How To Add the Top 10 Amazing Image Mouse Hover Effects To Blogger?

To do this follow these steps,

1. Go to Blogger > Layout > Edit HTML
2. Search for ]]></b:skin>
3. And now paste any of your preferred CSS: code just above ]]></b:skin>

Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code <img and paste the HTML: code of your preferred Image effect just after <img as shown below,

Number #1

CSS:

.simple1 {
  padding:5px;
  border:1px solid #ccc;
  }
.simple1:hover {
  padding:5px;
  background-color:#ccc;
  }

HTML:

class="simple1"

Number #2

CSS:

.simple2 {
  padding:5px;
    background-color:#ccc;
border:1px solid #ddd;
  }
.simple2:hover {
  padding:5px;
   background-color:#eee;
border:1px solid #666;
  }

HTML:

class="simple2"

Number #3

CSS:

.black-white {
  padding:5px;
border:1px solid #ccc;
  }
.black-white:hover {
padding:5px;
  background-color:#fff;
border:10px solid #000;
  }

HTML:

class="black-white"

Number #4

CSS:

.dashed {
  padding:5px;
border:1px solid #ccc;
  }
.dashed:hover {
padding:5px;
  background-color:#fff;
border:2px dashed #000;
  }

 

HTML:

class="dashed"

Number #5

CSS:

.top-bottom {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.top-bottom:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="top-bottom"

Number #6

CSS:

.curtain {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.curtain:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="curtain"

Number #7

CSS:

.red {
  padding:5px;
border:1px solid #ccc;
  }
.red:hover {
padding:5px;
  background-color:#E71305;
border:10px solid #ddd;
  }

HTML:

class="red"

Number #8

CSS:

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HTML:

class="Fadein"

Number #9

CSS:

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

 

HTML:

class="Fadein2"

Number #10

CSS:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

 

HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

 

You can enjoy playing with these codes using MBT HTML Editor. I hope you will find this tutorial pretty useful in further enhancing your cool blogging experience :>>