February 10, 2010

How To Drive Traffic To Your Blogs From Facebook?

36 Comments so far


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

DRIVE-TRAFFIC-FACEBOOK 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: 

friendsYes,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

facebook-and-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

      facebook fan page icon

      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

        facebook-digg-twitter-butto 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, facebook-digg-twitter-butto  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

26 Comments so far

Blogger 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”
1
  • 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 >>
2
  • 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. 
3
  • After you edited the guided areas then simply hit Apply and Ok. You are done! The result will look something like this,

4

  • 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!

February 7, 2010

Top 10 Widely Used Image Hover Effects In Blogosphere!

24 Comments so far

 Image-Hover-Effect-for-blog 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,

image-hover-effects

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 :>>

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |