Google Banned all co.cc domains - A Step-Forward against Spam

This is a guest post by Bhavesh Mohanlal Pamecha from [a href="http://www.plentyofebooks.net/" target="_blank"]Plenty of Ebooks[/a]
[a href="http://lh5.ggpht.com/-SzqFKkGlvBY/ThAmDITkSqI/AAAAAAAAEGM/dXMvX3OUrSg/s1600-h/_co.cc-google-spam%25255B7%25255D.gif"]Google Banned .co.cc[/a]The title says it all. Google has banned and penalized all the sites which used a co.cc sub-domain. [a href="http://www.co.cc/" rel="nofollow" target="_blank"]Co.cc[/a] is a free domain name registrar which offers sub-domains in bulk.
Due to increase amount of web spam and poor quality sites and especially with all of the recent criticism towards its search engine Google was forced to take a serious action to fight against web spam and help protect its users with good quality links. Check the screen shot below for the proof. [a name='more'][/a]

 


.co.cc banned by Google

or this: You can see that not even their homepage is being indexed.

[a href="http://lh6.ggpht.com/-Oibw6EnqBc4/ThAmE2A2PqI/AAAAAAAAEGE/PdxU6ImodM0/s1600-h/image%25255B6%25255D.png"].co.cc banned[/a]

 

Matt Cutts, the Head of Google's Web Spam team, wrote on [a href="https://plus.google.com/u/1/109412257237874861202/posts/eanXpZKMDSf#109412257237874861202/posts/eanXpZKMDSf" target="_blank"]Google +[/a]

"First, a definition: a "freehost" is a domain that will let anyone register a site on that domain. There's lots and lots of high-quality freehosts out there (wordpress.com comes to mind)."
"We absolutely do try to be granular, but I wanted to mention that if we see a very large fraction of sites on a specific freehost be spammy or low-quality, we do reserve the right to take action on the freehost as a whole. I think most savvy search/SEO folks would understand this completely, but I figure it's better to over-communicate than under-communicate."


Matt Cutts also said,


"This is not a new webspam policy. Other parts of Google do similar things. For example, [a href="http://googleonlinesecurity.blogspot.com/2011/06/protecting-users-from-malware-hosted-on.html"]http://googleonlinesecurity.blogspot.com/2011/06/protecting-users-from-malware-hosted-on.html[/a] talks about "bulk sub-domain providers" (treat it as the same thing as a freehost) and they mention "To help protect users we recently modified those [malware scanning] systems to identify bulk sub-domain services which are being abused. In some severe cases our systems may now flag the whole bulk domain."


[a href="http://www.google.com/support/forum/p/Webmasters/user?userid=03856587199021041525&hl=en" target="_blank"]JohnMu[/a], Webmaster Trends Analyst, gave some advice on [a href="http://www.google.com/support/forum/p/Webmasters/thread?tid=10735eb11a40c0c8&hl=en_" target="_blank"]Webmaster Central[/a]  for legit webmasters owning a co.cc sub-domain.


"If you feel that your particular site is in line with our Webmaster Guidelines, I would recommend submitting a reconsideration request. Additionally, if you use a subdomain on a widely used domain name, and feel that your subdomain provider is not up to par with regards to preventing and handling abuse quickly - be it webspam, phishing, or malware - you may wish to look into ways of remedying that."

 

What should you do know if you are a .co.cc user?

The best is to sign up for a .com domain from a trusted domain hosting company like [a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=mustafastc-" rel="nofollow" target="_blank"]Hostgator[/a]. It will cost you less than $15/year but quality and reputation is guaranteed by them. Do give few bucks more but always go for quality. If you are really serious about blogging then choosing a .com domain is highly suggested.

What do you think?
Express your views in comments, whether this will be a boon or a curse according to you.

Source: http://www.mybloggertricks.com/2011/07/google-banned-all-cocc-domains-step.html

Custom Facebook Like Box With Mouse Hover Effect

Custom Like Box HTML and JavaScript Code

Place your like box anywhere you like by using this code,

<style>
    #mbtlikebox{
      color: #365899;
      font: bold 11px arial;
      background:#ECEEF5;
      padding:3px !important;
      margin:5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
      width:290px;
    }

#mbtlikebox:hover{
     border:1px solid #6383C1;
    }
</style>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
    <script type="text/javascript">FB.init("");</script>
    <fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0"   css="STYLESHEET LINK"></fb:fan>
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="LIKE PAGE URL">Visit the Like Page »</a><div style="float:right"><a href='http://www.mybloggertricks.com' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

Make these changes:

  • Replace LIKE PAGE ID with your Like Page User ID. Read the previous post for help.
  • Replace STYLESHEET LINK with the link of your CSS file that you uploaded as made clear in our previous post.
  • Replace LIKE PAGE URL with your Like Page link

That's it!

Credits

All customization credits goes to MBT blog and [a href="http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/" rel="nofollow" target="_blank"]DaddyDesigns[/a]. Web developers and bloggers are requested to link back to them if they wish to share the codes above with their readers.

Troubleshooting

If you faced any problems or received Facebook rendering errors then you may kindly read this post:

  • [a href="http://www.mybloggertricks.com/2011/06/fixing-facebook-like-box-rendering.html" target="_blank"]Fix Like Box errors[/a] 

If you needed any help with regard to customizing the colors and look of Like box then feel free to post your query. Would be a pleasure to help you. Peace and blessings.

Source: http://www.mybloggertricks.com/2011/07/custom-facebook-like-box-with-mouse.html

Facebook Comments Box: How To Enable 'Comment Using' Option?

The [a href="http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html" target="_blank"]Facebook comments box[/a] plugin has started attracting many of you and some of you still had problems in understanding its settings. The comment box also allows your visitors to comments using other login providers but some of you have this option missing. In order to enable your visitors to leave a comment using either their Yahoo, Hotmail or AOL accounts then kindly follow the easy steps below,

[a name='more'][/a]

Enable Third Party Login Providers in Comment Box

1. Log into your Facebook account

2. Now visit your Blog

3. At the Top right corner of your Facebook comment box you will find a "Settings" Link

[a href="http://lh3.ggpht.com/-sZ7_U94yKJ0/ThDXV3NvLUI/AAAAAAAAEGc/gxICGf_WipU/s1600-h/image%25255B3%25255D.png"]Facebook settings link[/a]

4. Click it and then check the box that says " Allow users to post using other login providers."

[a href="http://lh3.ggpht.com/-9xd6Q0P1hUA/ThDXYvbMjbI/AAAAAAAAEGk/yB13vL0qEwM/s1600-h/image%25255B7%25255D.png"]Commnet box settings[/a]

5.  Hit the save button and you are done!

Source: http://www.mybloggertricks.com/2011/07/facebook-comments-box-how-to-enable.html

Add Custom Drop Down Menu To Templates by Josh Peterson

You just need to remove the comment quote from the top i.e.

*/

and add it to the bottom as shown below:

/* Tabs
-----------------------------------------------

.tabs-inner .widget ul {
  padding: 0;
display:none;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
display:none;}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);
display:none;
  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;
display:none;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
display:none;
  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

*/

 

3. Save your template and you are done! You can reactivate the above coding anytime you want by reversing the step.

Now add your drop down menu happily by reading this tutorial -> Drop Down Menu

The only thing you need to do extra is to use the CSS code below instead of the one I shared in the earlier tutorial. Rest all steps are exactly the same.

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 100%; 
    color: #FFF;
        margin: 10px 0;
        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:34px;
}
#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;
}

 

 

If you needed any further help feel free to ask. Peace out.

Source: http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html

Create a Drop Down Menu In Facebook Style With Rounded Borders

The [a href="http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html" target="_blank"]Drop Down Menu[/a] code that I provided earlier can be used as a structure to design any navigation menu you like. I have designed a drop down menu using Facebook as inspiration. You can fully customize this menu and can add colors and fonts of your preference too. The new thing about this menu is that it also contains a sub drop down menu and all menus have rounded borders. So now you organize your pages even more beautifully. I have made the installation even more easier. If you use the watermark template or any other Blogger Designer Template then you must read the post below after applying this tutorial,

[a name='more'][/a]
  • Adding Drop down menu to New [a href="http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html" target="_blank"]Blogger Designer Templates[/a]

[a href="http://lh3.ggpht.com/-GOBscacXaXA/ThEW2x5eb5I/AAAAAAAAEG0/b-t2hetp8yU/s1600-h/image%25255B11%25255D.png"]Facebook Drop down menu[/a]

[a href="http://zailab.blogspot.com/" rel="nofollow" target="_blank"]Live Demo[/a]

Adding The Drop Down Menu To Blogger

     1.   Go To Blogger > Design and select a HTML/JavaScript widget

      2. Paste the following code inside it,

<style>
#mbtnavbar {
    background: #3B5998;
    width: 100%;
 
    color: #FFF;
        margin: 10px 0;
        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;
      
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 11px 12px;
        text-decoration: none;
        border-right:0px solid #627AAD;

}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 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: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;

-moz-border-radius:4px;
-webkit-border-radius:4px;

  
}
#mbtnav li li a:hover, #mbtnav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
  
}


#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
    margin: 1px 0 0  -14px;
  
  
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}

</style>
<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>
               
   <ul>
                    <li><a href='#'>Sub Sub Page #1</a></li>
                    <li><a href='#'>Sub Sub Page #2</a></li>
                    <li><a href='#'>Sub Sub Page #3</a></li>
                  </ul>

</li>
                  </ul>
            </li>

          </ul>
        </div>

 

The colors and font family and size can be changed in the same way as in the previous post. The only thing you need to understand is how to control the number of link lists. The code in purple is responsible for the appearance of the first drop down menu and the highlighted yellow code controls the sub drop down menus. If you wish to increase or decrease the number of tabs then simply add or remove a code like this,

<li>

<a href="#">Tab Name</a>

</li>

Where # should be replaced with Page Link and the corresponding text should be replaced with the Tab name.

I will creating more menus using the same HTML structure. The above code is created without using any Jquery, Images or scripts. It is pure CSS and html and it will help you [a href="http://www.mybloggertricks.com/2011/06/compress-css-and-html-to-reduce-site.html" target="_blank"]speed up your website[/a] load time too. Feel free to ask for any help if needed.

Source: http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html

Create MP3 Music Playlist With Dewplayer For Blogs

Add Dewplayer Playlist to your Websites and Blogs

You will need three things here,

  1. The Flash File for the playlist i.e. dewplayer-playlist.swf
  2. The xml File for the playlist i.e. playlist.xml
  3. and most importantly the Mp3 file links

 

1)   First thing first, upload your selected Mp3 files on a free hosting site. I recommend [a href="http://www.mdn.fm/register/?r=7971" rel="nofollow" target="_blank"]mydatanest[/a]

2) Next download and upload the Flash file also: [a href="https://sites.google.com/site/mybloggertricks/Home/dewplayer-playlist.swf?attredirects=0&d=1" rel="nofollow" target="_blank"]Download SWF File[/a]

3) Copy the code below and save it in a notepad by giving the .xml extension,

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="[a href="http://xspf.org/ns/0/""]http://xspf.org/ns/0/"[/a]>
    <title>Ounage Playlist</title>
    <creator>Dew</creator>
    <link>[a href="http://www.blup.fr/"]http://www.blup.fr/[/a]</link>
    <info>The Best Playlist for Testing</info>
    <image>covers/tracklist.jpg</image>

    <trackList>


        <track>
          <location>MP3 LINK #1</location>
          <creator></creator>
          <album></album>
          <title>WRITE SONG TITLE HERE</title>
          <annotation></annotation>
          <duration></duration>
          <image></image>
          <info></info>
          <link></link>
        </track>


        <track>
          <location>MP3 LINK #2</location>
          <creator></creator>
          <album></album>
          <title>WRITE SONG TITLE HERE</title>
          <annotation></annotation>
          <duration></duration>
          <image></image>
          <info></info>
          <link></link>
        </track>

 


        <track>
          <location>MP3 LINK #2</location>
          <creator></creator>
          <album></album>
          <title>WRITE SONG TITLE HERE</title>
          <annotation></annotation>
          <duration></duration>
          <image></image>
          <info></info>
          <link></link>
        </track>

                
 


    </trackList>
</playlist>

Before saving make these changes:

  • Replace MP3 LINK #1, 2, 3 with the Direct URLS of your uploaded mp3 files.
  • Replace WRITE SONG TITLE HERE with the song name
  • To add another track simply paste the following code just above </trackList>

        <track>
          <location>MP3 LINK #4</location>
          <creator></creator>
          <album></album>
          <title>WRITE SONG TITLE HERE</title>
          <annotation></annotation>
          <duration></duration>
          <image></image>
          <info></info>
          <link></link>
        </track>

Now save your notepad file by giving it the .xml extension. To save the file go to File and then choose Save as.. See the screenshot below,

[a href="http://lh3.ggpht.com/-ZaJzkTsASio/ThHudW98lyI/AAAAAAAAEHE/Rn54XKg353s/s1600-h/image%25255B3%25255D.png"]giving extension in notepad[/a]

 

4)  Now upload the xml file on a free hosting site in similar manner as you did for uploading the swf and mp3 files.

 

5) Finally use the code below to add the Playlist anywhere on your website:

<object type="application/x-shockwave-flash" data="ADD SWF FLASH FILE LINK HERE" width="240" height="200"> <param name="wmode" value="transparent" /> <param name="movie" value="ADD SWF FLASH FILE LINK HERE" /> <param name="flashvars" value="xml=ADD XML FILE LINK HERE" /> </object>
  • Replace ADD SWF FLASH FILE LINK HERE with the playlist swf link that you uploaded in step#2
  • Replace ADD XML FILE LINK HERE with the XML file link that you uploaded in setp#4
  • To change the height edit the yellow highlighted text.

Apply all steps carefully and find a beautiful Mp3 Playlist Player on your websites just like this one:

Credits:

All code rights are strictly reserved by MBT blog. This tutorial is shared for the first time with the Playlist details and if you wish to share the playlist creation guide with your readers then you may kindly attach attribution to this page.

Source: http://www.mybloggertricks.com/2011/07/create-mp3-music-playlist-with.html

Create a Custom Flash Video Player For Your Blogs

[a href="http://lh6.ggpht.com/-9rfcmRkJPA8/ThIhinzl46I/AAAAAAAAEHM/P5r67tcG514/s1600-h/flash-video-player%25255B13%25255D.gif"]flash-video-player[/a]Yes you heard it right, a Custom video Player to let you feel more confident while sharing your videos with visitors. You don't need [a href="http://www.mybloggertricks.com/2011/05/how-to-make-video-popular-in-youtube.html" target="_blank"]youtube[/a], dailymotion, metacafe or any other video player with Brand name on it because now you can create a video player which can be all yours for free thanks to [a href="http://www.alsacreations.fr/dewtube.html" target="_blank"]Dewtube[/a]. After sharing the [a href="http://www.mybloggertricks.com/2011/07/create-mp3-music-playlist-with.html" target="_blank"]music player[/a] created by alsacreations its now time to learn how to embed the video player created by them in blogs and websites. The steps this time are far more easy. You just need to upload the flash file and flv file on a free hosting site  and there you get a beautiful flash video player like the one below,

[a name='more'][/a]

 

data = "http://www.mdn.fm/files/318969_uwur4/dewtube.swf" width = "400" height = "300">
PS: This player is compatible with all browsers except IE.

Embed Dewtube To your Blogs and Websites

Paste the following code anywhere you want for the player to appear:

<object type="application/x-shockwave-flash" data="dewtube.swf" width="400" height="300"> <param name="movie" value="dewtube.swf" /> <param name="flashvars" value="movie=video.flv" /> </object>

 

Make these changes:

  • Upload this file -> ([a href="https://sites.google.com/site/mybloggertricks/Home/dewtube.swf?attredirects=0&d=1" rel="nofollow" target="_blank"]Download Flash File[/a]) on a [a href="http://www.mdn.fm/register/?r=7971" rel="nofollow" target="_blank"]free hosting[/a] service and replace dewtube.swf with the Direct Link of the file you just uploaded
  • Replace dewtube.swf with the direct URL of your uploaded flv video file.
  • To adjust the width and height change width="400" height="300"

That's all! your player is already. You can make all these

 

How to convert a Video File into Flv

You can use youtube downloader for doing this. It is a free software that will help you download videos from youtube and normally most of the videos on youtube are in flv format. Other then this you can google for flv video convertors to fetch a free tool.

Source: http://www.mybloggertricks.com/2011/07/create-custom-flash-video-player-for.html

Facebook comments Box Instead of Blogger Comments Form



facebook-commnets-boxThe previous post on [a href="http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html" target="_blank"]Facebook comments box[/a] did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.


Replace Blogger Comments Form With FB Comments Box



All the steps are exactly the same as mentioned in the earlier tutorial except step#7


1.  Instead of searching for this code,



<b:includable id='comment-form' var='post'>



Search for this code,



<data:post.body/>



  2.  Just after it, paste the same code we used earlier as shown 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




     3.  Save your template





Hide or Pop-up Blogger Comment Form



Here you have two options. Either you can,



  1. Hide the comments box but not the comments. The box will appear only when visitors will click the Post comment link. or



  2. Hide both Blogger comments and comments box







For the first option:


A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below, [a href="http://zailab.blogspot.com/2011/05/facebook-bookmarking-widget.html" target="_blank"]SEE DEMO ALSO[/a]


FACEBOOK-COMMENTS-FORM





To do this go to Blogger > Settings > Comments   and in the comment form placement option choose the pop-up option as shown below,


pop up blogger form








Save and you are done!


For The Second Option:


If you wish to hide both blogger comments and the comment box? In that case, set comments to hide


hide blogger comments





As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.


Hit save and you are done again!


What to Do Hide or Popup the form?



The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short the popup option is the best. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.


With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.


You must know:



  • 7 [a href="http://www.mybloggertricks.com/2011/06/10-advantages-of-using-facebook.html" target="_blank"]advantages of facebook[/a] comments Form



Source: http://www.mybloggertricks.com/2011/06/facebook-comments-box-instead-of.html

Releasing The Priceless "MONOP TEMPLATE"



[a href="http://lh3.ggpht.com/-OeUbsQ7DwGI/TgU0bmRf-jI/AAAAAAAAD9Q/gWQrZT6QHIU/s1600-h/image%25255B37%25255D.png"]Monop Template[/a]UPDATE: All templates and resources can be download for free without waiting from our [a href="http://downloads.mybloggertricks.com/"]download page[/a]





Whether it is EID, Christmas, New Year or Summer Vocations, I have always tried to gift my loyal friends and readers with the best resources possible. Since 60% of you requested a two Column Blogger Template, I therefore kept the word and designed a highly MONetized and  OPtimized template. Joining the starting few letters of both these words will coin up MONOP and that's how it took its name! This template can become the best turning point of your blogging careers and revenue. My main focus this time was to code it as search engine friendly as possible so that search engine spiders may love to crawl it and advertisers may love to buy an Ad spot on it.


The navigation menu is specially designed for high CTR AdSense earning by providing a beautiful section to 728 by 15 AD Link unit. I wont keep your awaiting any further, please see the Demo below,


[a href="http://lh3.ggpht.com/-tbHtb8XjyBw/TgVBMjwPc7I/AAAAAAAAD9g/2ctWTF1dy54/s1600-h/image%25255B42%25255D.png"]compatible[/a]



[a href="http://monop-template.blogspot.com/" target="_blank"]Live Demo[/a]






What are the new Features?



As usual keeping alive the "Be Unique motto" following are the new features:



  1. The Template is coded using familiar Blogger CSS classes and HTML Tags using the minima template as the structure.



  2. It is compatible with all browsers including IE



  3. It is highly Optimized making it smoother for search engines to crawl your content



  4. It is highly monetized keeping High Click Through rate and Advertisers Likes and dislikes in mind. A [a href="http://www.mybloggertricks.com/2011/03/how-to-create-random-468x60-ad-banners.html" target="_blank"]468 by 60[/a] Banner next to Header and Adsense Link unit above navigation are the best Ad placements of this theme.



  5. It is equipped with all widgets that any blogger would wish for. May that be the beautiful [a href="http://www.mybloggertricks.com/2010/01/30-horizontal-navigation-menus-for.html" target="_blank"]Drop Down Menu[/a], Split Header, [a href="http://www.mybloggertricks.com/2011/01/add-wordpress-style-menu-tabs-widget-to.html" target="_blank"]Multi Tabs widget[/a], [a href="http://www.mybloggertricks.com/2010/01/add-customized-three-column-footer.html" target="_blank"]Three Colum Footer[/a], Customized [a href="http://www.mybloggertricks.com/2009/12/customize-blogger-comment-form-make-it.html" target="_blank"]Comment Form[/a], Customized [a href="http://www.mybloggertricks.com/2011/06/change-author-comments-color-style-in.html" target="_blank"]Author Comments[/a], Flapper [a href="http://www.mybloggertricks.com/2009/12/add-css-based-social-bookmarking-widget.html" target="_blank"]Social Share[/a] Widget, [a href="http://www.mybloggertricks.com/2011/06/related-posts-widget-for-blogger.html" target="_blank"]Related Posts[/a], [a href="http://www.mybloggertricks.com/2011/06/add-link-to-blogger-comments.html" target="_blank"]Reply link[/a], [a href="http://www.mybloggertricks.com/2009/09/attractive-read-more-button-images-for.html" target="_blank"]Read More Link[/a], [a href="http://www.mybloggertricks.com/2009/12/change-newer-posts-older-posts-and-home.html" target="_blank"]Newer Older Home Links[/a], comment count, WordPress style [a href="http://www.mybloggertricks.com/2011/05/create-wordpress-subscription-form.html" target="_blank"]RSS Form[/a] etc. etc. etc.....



  6. The header title uses Google Fonts so you don't need Photoshop any more to create a nice logo.



  7. All tutorials published on this blog or anywhere else, can easily be applied to it without getting any error




Download MONOP



We serve resources to subscribers only. If you are a current subscriber then kindly post your Email ID in the Comments Box, else if you are new a MBT reader then kindly submit your Email ID below to receive all such useful resources for free,











After submitting your Email ID, kindly check your inbox and activate the feeds, then submit the same Email ID in the [a href="http://www.blogger.com/blogger.g?blogID=8193278726666811965#comments"]comments box[/a] below to receive the download copy instantly.


Respect Copyright



This Template is not for sale and should not be redistributed without permission from MBT. Kindly respect the hours of hard work put in coding this template and providing it for free. The template contains a link to MBT Blog as attribution. Kindly do not remove it. In case of any violation I would be compelled to report that Blog URL to [a href="http://www.dmca.com/Protection/Status.aspx?id=bfbdb466-185b-40d8-9159-782e5e3d9ed2" target="_blank"]DMCA[/a]. The violator will be ignored as a reader and deleted from the subscription list. No question of the violator will be answered on any tutorial published so far.


Customization


Below are some simple important changes that you must make:

Navigation:

[a href="http://lh4.ggpht.com/-3xoxEK9zLh4/TgU0eB4as5I/AAAAAAAAD9Y/PR9xnDIKWTU/s1600-h/image%25255B34%25255D.png"]drop down menu[/a]

To change the navigation menu links find and edit this code,


<div id='subnavbar'>
      <ul id='subnav'>
        <li>
          <a expr:href='data:blog.homepageUrl'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap  <img src='http://1.bp.blogspot.com/-XNaxBUcw4I8/TgPihF-_wlI/AAAAAAAAD8A/Qw4kloU7oOQ/s400/arrow-down.png'/></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>
  <li>
          <a href='#'>Download This Theme</a>
        </li>
      </ul>     </div>


Replaced the bolded black texts with your link titles and the # sign with link URLs



You can also add more menu tabs by adding this code as many times as you want just above </ul>


<li><a href='#'>Title</a></li>

If you wish to add a drop down menu to any tab then simply add the code below before the </li> tag of any tab (for example see carefully how I added it to the Sitemap tab),


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



AdSense:


This part is the most important reason behind designing this template. I will discuss its customization and integration method on my coming post because I want to explain it in detail.


Multi Tab:


To change the titles of tabs simply find them in your template and replace them with whatever title you like. For more details on this read the [a href="http://www.mybloggertricks.com/2011/01/add-wordpress-style-menu-tabs-widget-to.html" target="_blank"]Menu Tabs[/a] tutorial


RSS Form:


To add the rss form paste the code below inside a HTML/Javascript widget,


<style>

    .mbtbar{width: 100%; float: left; padding:0; margin:0;}

    .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: none;  line-height: 35px; vertical-align: middle; width: 300px; padding: 0 10px 0 4px;}

    .mbtbar .count span.bigcount{color:#BF0100; font-size: 24px; font-family: Helvetica, Arial; line-height: 35px; 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(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/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(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/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(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/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(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/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,#bf0100 0%,#ac0100 100%); background:-webkit-gradient(linear,left top,left bottom,from(#bf0100),to(#ac0100)); border: 1px solid #ac0100; 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:#AC0100; border: 1px solid #AC0100; 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">1807+</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>

To customize the above code with your twitter, facebook and Feed links then read this tutorial: [a href="http://www.mybloggertricks.com/2011/05/create-wordpress-subscription-form.html" target="_blank"]Create RSS Form[/a]


Let me know how you liked it!



Please let me know if this new design came up to your expectation. What suggestions can you give for the next design and what ideas do you have that you wish to add. It would be a pleasure answering all your queries and customization questions related to this template. Download and install it now! Start blogging with a new zeal and enjoy happy earnings as a reward. Peace and blessings buddies. :>

Source: http://www.mybloggertricks.com/2011/06/releasing-priceless-template.html

Good News! Facebook Like Box Can Now Be Customized

After the beautiful [a href="http://www.mybloggertricks.com/2011/06/surprise-mbt-developed-its-first.html" target="_blank"]Facebook Iframe tabs[/a] experience, I started understanding on how to customize Facebook plugins. Due to tons of helpful online support from forums and blogs, MBT blog is proud to announce that the new Facebook Like Box can now easily be customized using pure CSS. Detail Info on this will be shared on my next post. For the time being see it appearing in action at the top with complete custom look and feel. Thanks for being a great support and motivation.

[a name='more'][/a]

I must mention here that so far all these developments are made possible without the support of Facebook [a href="http://developers.facebook.com/" target="_blank"]Developers Page[/a] authors. The info guides provided by these authors on Facebook Developing pages are worth to be called unhelpful irritating details.

Source: http://www.mybloggertricks.com/2011/06/good-news-facebook-like-box-can-now-be.html

Zoom In/Out Images On Mouse Hover With Single Image



[a href="http://lh6.ggpht.com/-IYDW6Kz1aG0/TgeAekNsfaI/AAAAAAAAD9s/dBPq6EYoLfg/s1600-h/zoom-images%25255B10%25255D.png"]zoom-images[/a]There are many tutorials online which show users how to achieve a hover effect on their buttons and other images using mouse hover and they often instruct to use a second, larger image.  Another method used is using jQuery to enlarge the size of the image. But with a little bit of trickery, this can be done solely using Css3 and normal html.

Here is a demo:



[a href="http://www.blogger.com/post-edit.g?blogID=8193278726666811965&postID=4960894755779778317&from=pencil#demo"]Live Demo[/a]




Note : This trick is best viewed in the latest version of any browser other than IE.

This tutorial has been split into two parts:


  1. CSS implementation

  2. HTML Implementation





CSS implementation:


1. Go To Blogger > Design > Edit HTML

2. and search for


]]></b:skin>


3. Now right above it, paste this code:


/*------- MBT ZOOM-OUT ZOOM-IN -------*/

.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
}

.mbtzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}



Same procedure as the other option, edit the values to your picture, and change the zoom to how big you want the picture after the transition.




HTML Implementation:


Now whenever you wish to apply the zoom effect to any image you want simply use this code,


<a href="URL OF PAGE" class="mbtzoom"><img  width="60px" height="60px" src="IMAGE LINK" alt="back to top"  /></a>


  • Replace URL OF PAGE with the page link. On clicking the image the user will be taken to that page

  • Replace IMAGE LINK with the link of the picture

  • Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px"




That’s it! Your image should be zooming/enlarging beautifully on your blog/website!


DEMO


As a [a href="" name="demo"]DEMO[/a] simply paste this code on MBT HTML Editor




<style>
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
}

.mbtzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
</style>

<a href="#" class="mbtzoom"><img  width="60px" height="60px" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SmofuiB8WDI/AAAAAAAABjg/brSrpcfyBf0/s800/rss-128.png" alt="back to top"  /></a>






Anims



About the Guest Author:

Anims is freelance web designer and enjoys playing around with and learning coding in his free time. He likes to write about Web Technologies such as HTML, CSS and SEO.



Source: http://www.mybloggertricks.com/2011/06/zoom-inout-images-on-mouse-hover-with.html

PageRank or Alexa Rank? Which One Is Important?



[a href="http://lh3.ggpht.com/-aiMEcbl1zuI/TgeGHKZPwaI/AAAAAAAAD90/Fg8H3aaVmkE/s1600-h/alexa-or-Pagerank%25255B4%25255D.png"]alexa-or-Pagerank[/a]


Google Page Rank and [a href="http://www.mybloggertricks.com/2011/05/alexas-top-ten-websites-2011.html" target="_blank"]Alexa ranking[/a] are two different ways determine your site's performance. Here is a little description of the two,











Google Page Rank




Google Page Rank is a rank from 0 to 10. It is the way Google observes a website. It is mostly dependent upon how many quality backlinks the site has. However there are many other features that also count. Sometimes Google ban people from the ranking due to several reasons like copied content and black hat SEO tactics. . It is calculated from an algorithm (can be seen here :[a href="http://en.wikipedia.org/wiki/PageRank"]Wiki PageRank[/a]. )


Positive Aspects:





  1. A good way to observe sites performance as it uses quality backlinks as a major factor. Follows an algorithm (attach algorithm link here [a href="http://en.wikipedia.org/wiki/PageRank" target="_blank"]Wiki[/a]).



  2. Can ban websites with copied content.



  3. Ranked by the biggest search engine in the world i.e GOOGLE



  4. Mostly Page Rank is considered a major factor when buying or selling a site.



  5. Calculated by Google itself which is major site that sends traffic.



  6. Offers a toolbar named 'Google Toolbar' to check the Alexa ranking of a site





Negative Aspects:
Updated very late (3-4 months)
People can buy quality backlinks and get good Page Rank.
They do not provide a toolbar for their own Google Chrome.


 


Alexa Ranking




[a href="http://www.alexa.com/" target="_blank"]Alexa[/a] is a web directory and  provides free traffic metrics, search analytics, demographics, and more. Alexa ranking depends upon how many visitors you get daily.
Positive Aspects:



  1. Updated sooner



  2. Calculation is based on a dependable factor i.e visitor count.



  3. Offers a toolbar named 'Alexa Toolbar' to check the Alexa ranking of a site.




Negative Aspects:
You can use a software and get as robot visits to your site and increase your hit count.


Conclusion:




Observing both the two factors it is seen that none of them actually is a perfect way to describe the success of a website. Both of them have their pros and cons. However PageRank gives an idea of how popular a website is in internet in building reputation and Alexa gives an estimate idea of how much traffic a website is receiving. In short both are important to receive handsome sponsorship and attract tons of Advertisers.




Fahad Uddin



About the Guest Author:

Fahad is an Undergraduate Student, pursuing his B.E Degree in Computer and Information System Engineering. He is an excellent programmer and part time blogger. He Writes at [a rel="nofollow" href="http://mycsnippets.blogspot.com/"]My C Snippets[/a]. You can always contact him at [a rel="nofollow" href="http://www.facebook.com/fahd92"]Facebook[/a]



Source: http://www.mybloggertricks.com/2011/06/pagerank-or-alexa-rank-which-one-is.html

Customize Facebook Like Box With CSS



[a href="http://lh6.ggpht.com/-qybk3rwwyqs/Tge57Wl9jXI/AAAAAAAAD98/9rYc_fja70s/s1600-h/custom-like-box%25255B6%25255D.png"]custom-like-box[/a]Styling Facebook plugins is unfortunately not an easy job because very limited details are shared on the Facebook [a href="http://developers.facebook.com/docs/reference/plugins/like-box/" target="_blank"]Developers page[/a]. Custom plugins help you to stand out as a brand and promote your business well. In April 2010, [a href="http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/" target="_blank"]Daddydesigns[/a] published a tutorial on how to style and apply modifications to Facebook Fan box. Their tutorial was well entertained but with the introduction of Facebook Like Box instead of Fan Box, the change in algorithms made it difficult to modify the plugin using the same guide. After several trials and errors, we managed somehow to make the necessary small changes made by DaddyDesigns to fully customize the Like box with custom flavors of fonts and colors. This would surely have not been possible with their brilliant help.


I have made this tutorial as easy to implement as possible. You just need to carefully follow the easy steps below. I have divided the tutorial in two parts:


  1. [a href="http://www.blogger.com/blogger.g?blogID=8193278726666811965#css"]Creating The style sheet for Like Box[/a]

  2. [a href="http://www.blogger.com/blogger.g?blogID=8193278726666811965#code"]Creating a custom Like Box code[/a]






1. Creating the Stylesheet For Like Box


[a href="http://lh3.ggpht.com/-kxrwqlfWvq0/Tge5_XVWOLI/AAAAAAAAD-E/sH0vRmFmSkw/s1600-h/image%25255B4%25255D.png"]Custom like box[/a]

Creating a style sheet is really easy. Just do this,

    1.  Copy and paste the code below inside a notepad


/*---------------MBT's Custom Like Box Start--------------*/

.fan_box a:hover{

  text-decoration: none;

}



.fan_box .full_widget{

  height: 200px;

  border: 0 !important;

  background: none !important;

  position: relative;

}



.fan_box .connect_top{

  background: none !important;

  padding: 0 !important;

}



.fan_box .profileimage, .fan_box .name_block{

  display: none;

}



.fan_box .connect_action{

  padding: 0 !important;

}



.fan_box .connections{

  padding: 0 !important;

  border: 0 !important;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;

  font-weight: bold;

  color: #666;

}



span.total{

  color: #0080ff;

  font-weight: bold;

}



.fan_box .connections .connections_grid {

  padding-top: 10px !important;

}



.fan_box .connections_grid .grid_item{

  padding: 0 10px 10px 0 !important;

}



.fan_box .connections_grid .grid_item .name{

  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

  font-weight: normal;

  color: #289728 !important;

  padding-top: 1px !important;

}



.fan_box .connect_widget{

position: absolute;

bottom: 0;

left: 0px;

margin: 0 !important;

}



.fan_box .connect_widget .connect_widget_interactive_area {

margin: 0 !important;

}



.fan_box .connect_widget td.connect_widget_vertical_center {

padding: 0 !important;

}



/*---------------MBT's Custom Like Box End--------------*/

To keep it simple make these changes:


  • To change the font size edit font-size: 11px;

  • Replace the heading color ( #0080ff ) with a color of your choice. You can use our color generator tool

  • Replace the Profile Nick Names text color ( #289728 ) with one of your choice.


      2.   Now save the file by going to File > Save as

Save the file with the extension FB.css as shown below,

[a href="http://lh6.ggpht.com/-JFihMMpHQ0g/Tge6CSG5MnI/AAAAAAAAD-M/nbhtjvyyl-Q/s1600-h/image%25255B9%25255D.png"]css extension[/a]

      3.   Finally upload the file on your hosting server or you can try any other free hosting service. I recommend [a href="http://www.mdn.fm/register/?r=7971" rel="nofollow" target="_blank"]mydatanest[/a]

      4.   Once you have uploaded the stylesheet file, you will be provided with a direct link to it. Keep it safe as we would need it later.

     5.    You are done!



2. Creating a [a href="http://www.blogger.com/blogger.g?blogID=8193278726666811965" name="code"]Custom Like Box Code[/a]


Instead of using the new code provided on the developers page, we will use and modify the code provided by daddydesigns. This is the modified code you need to use:


<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>

<script type="text/javascript">FB.init("");</script>

<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0"   css="STYLE SHEET LINK"></fb:fan>

The above code structure consists of 4 important sections which must be filled properly.


  1. Like Page ID

  2. Connections i.e. Number of Profile Faces/pics

  3. Width and Height Dimensions

  4. Stylesheet link


Make these changes:


  • Replace  with the 12-15 digit numeric ID of your Facebook Like Page. You can find this ID inside your Like Page URL. For example: The URL of my like Page is,



https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744


  • I have kept the number of profile pics denoted by connections equal to 10. You can reduce it if you want.

  • Replace STYLE SHEET LINK with the link of the stylesheet your previously uploaded. I will mention later how to create



Your Custom Facebook Like Box is now ready to be served! That's All. Paste this code anywhere you want and your personalized and styled box will show up just perfectly. If you face any problems just let me know. I will publish more designs and tutorials on this topic within this week.





Credits


Readers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors. It's the only tutorial published after daddydesigns tut which provides a modified solution.
Source: http://www.mybloggertricks.com/2011/06/customize-facebook-like-box-with-css.html

Add Facebook Like Button Below Post Titles - New

[a href="http://lh5.ggpht.com/-Ba3y0yLSW_c/Tge9KcGg21I/AAAAAAAAD-U/19gDMCEBwcQ/s1600-h/image%25255B3%25255D.png"]Like button[/a]I previously shared a [a href="http://www.mybloggertricks.com/2011/05/add-facebook-like-and-send-button-to.html" target="_blank"]Facebook Like button[/a] that included a [a href="http://www.mybloggertricks.com/2011/05/add-facebook-send-button-to-blogger.html" target="_blank"]send button[/a] by default. One of the problems I noticed with it was the load time. I then shifted to this new like button which loads like a flash at my internet connection speed. If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

[a name='more'][/a]

Adding Facebook Like Button To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Templates" Box
  4. Search for this,

<data:post.body/>

    5.    Just above it paste the code below,

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&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:100px; height:20px;'/>

     6.   Save your template and you are done!

 

Visit your blog to see it working just fine just below post titles. Feel free to ask any questions you may have. 

Source: http://www.mybloggertricks.com/2011/06/add-facebook-like-button-below-post.html

Google PageRank Update June 2011

[a href="http://lh4.ggpht.com/-sbyo8WuJiX8/TgiEX1aQx6I/AAAAAAAAD-c/LEAxsOS3Q6I/s1600-h/pr-pump%25255B2%25255D.gif"]Pagerank update[/a]Google PageRank updated just an hour ago and thanks to all my loyal and highly valuable readers MBT BLog is now a PR 4.0 Blog with 24K Alexa Rank Alhamdulillah!. I am thankful to Allah Almighty for all His support and blessings. I wish and pray that you guys may too hear a good news day and night for the hard work that you do. It's a day to celebrate! Spent every day of my summer vocations trying to bring something new to blogosphere and a gift like PR and Alexa is a wish come true. [a name='more'][/a]Without your motivation and consistent feedback this would have never been possible. I thank all guest posters for being an immense support to mbt blog and all the readership. This blog is yours and it will remain yours. Peace and blessings! =d

I saw the PageRank shocking news at 6.15 PM GMT+ 27th June 2011.

Source: http://www.mybloggertricks.com/2011/06/google-pagerank-updated-2011.html
 
Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger