A Must Follow 3 Meal Diet Plan for Bloggers

1. Breakfast Plan

2. Lunch Time

3. Dinners is ready

From the Company:
[a href="http://3.bp.blogspot.com/-miSGEEZ8ktw/TfdP8ld_46I/AAAAAAAAAUA/MBQ3HDSgcVs/s1600/RICOH_Company_Head_Office_Building_2007-1.jpg"][/a]

  Hassam Ahmad Awan


About the Guest Author:

Hassam is a young A Level Student who loves to learn and share tech related stuff. He has an ambition to become a Software Engineer. He is a passionate blog author and publishes regular tutorials to newbie bloggers at [a href="http://bloggingehow.blogspot.com" target="_blank"]BLoggingeHow[/a].

You can always keep in touch with him at [a href="http://www.facebook.com/pages/BLoggingeHow/126203964129170" target="_blank"]@Facebook[/a]

Source: http://www.mybloggertricks.com/2011/06/must-follow-3-meal-diet-plan-for.html

Add LinkedIn Share Counter Buttons To Blogger

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

 

Horizontal Count

LinkedIn horizontal button

 

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>

 

 

No Count

LinkedIn button

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>

 

 

 

   5. Save your templates and you are done!

View your blogs to see it hanging. Have Fun! :)

You may also like these buttons:

  • [a href="http://www.mybloggertricks.com/2011/06/add-google-1-button-to-your-blogger.html" target="_blank"]Add Google +1 Button[/a]
  • [a href="http://www.mybloggertricks.com/2011/06/add-google-buzz-on-buzz-and-counter.html" target="_blank"]Add Google Buzz button[/a]
  • [a href="http://www.mybloggertricks.com/2011/05/add-facebook-like-and-send-button-to.html" target="_blank"]Add Facebook Like and Send Buttons[/a]
Source: http://www.mybloggertricks.com/2011/06/add-linkedin-share-counter-buttons-to.html

How to add an ICON IMAGE next to a Hyperlink?

 

 

You can also use icons of your preference and [a href="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" target="_blank"]save the Images on blogger[/a].

If you wish to use three or four icons simply keep on adding the same CSS code given above by changing only the digit number i.e. 1, 2 , 3 , 4 like this,

.mbt-hyperlink-1 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-2 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-3 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-4 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

and so on..........

    5.  Save your template and jump to the next part of the tutorial

How it works?

Now for example if you wish to provide a link to your user to download an Ebook, you simply need to add the CSS class to the link i.e class="mbt-hyperlink-1"  as shown below,

<a  class="mbt-hyperlink-1" href="http://xyz.com">Download SEO Guide Tips</a>

After you paste the above link in the HTML mode of your blogger editor and publish the post, you will see the Icon appearing next to your link as shown below,

Icon next to hyperlink

Hope this was clear. If you needed any help just let me know. Peace and blessings! :)

Source: http://www.mybloggertricks.com/2011/06/how-to-add-icon-image-next-to-hyperlink.html

Customize Blogger Navbar - Add It To Sidebar!

 

When users Log out of Blogger, they see this:

blogger custom navbar

On clicking the share link, readers can share your blog post on Twitter, Facebook, Google Buzz or Google Reader.

 

navbar share option

On clicking the follow button, you can follow the blog updates:

follow button on navbar

The following Navigation colours are available:

TAN:

tan navbar

BLACK:

black navbar

 

SILVER:

silver navbar

BLUE:

blue navbar

 

 

Add Blogger Navbar To Sidebar

You can use the code below to add the Navbar anywhere you want and not just the sidebar. You can add it to your blog posts also. To add the widget to your sidebar simply do this:

  1. Go to Blogger > Design
  2. Choose a HTML/JavaScript Widget
  3. and Paste the code below inside it,
<iframe 
src="http://www.blogger.com/navbar.g?targetBlogID=8193278726666811965&amp;
blogName=My+Blogger+Tricks&amp;publishMode=PUBLISH_MODE_HOSTED&amp;
navbarType=SILVER&amp;layoutType=LAYOUTS&amp;
searchRoot=http%3A%2F%2Fwww.mybloggertricks.com%2Fsearch&amp;
blogLocale=en&amp;homepageUrl=http%3A%2F%2Fwww.mybloggertricks.com%2F&amp;"
marginwidth="0" marginheight="0" scrolling="no"
frameborder="0" height="30px" width="237px" id="navbar-iframe"
allowtransparency="true" title="Blogger Navigation and Search"></iframe>



Make these changes:




  • Replace 7193277726666811965 with your BLog ID. Go To Blogger > Design and now look in your browser address bar, you find a long digit code. Copy it and paste it in place of this number 7193277726666811965


  • Replace My+Blogger+Tricks with your Blog Name. It is the name of your blog that you see in your blogger dashboard. Remember to separate each word with a plus sign (+)


  • Replace SILVER with your prefered colour scheme in capital letters. You can try four colour schemes which are : 1) BLUE    2) BLACK   3) SILVER    and  4) TAN


  • Replace www.MyBloggerTricks.com with your blog link (exclude http://) If your blog URL is http://xyz.blogspot.com then simply write xyz.blogspot.com



     4.  Save your widget and you are done!



View your blog and start playing with the official search box along with the free follow and share option. Have fun!

Source: http://www.mybloggertricks.com/2011/06/customize-blogger-navbar-add-it-to.html

How to add Blogger Poll Widget To Posts?

Interesting? Now lets learn how to do that.

Copy The Poll Widget Code From your Source File

  1. Visit your Blog and press Ctrl + U
  2. Next press Ctrl + F and search for this,

http://www.google.com/reviews/polls

   3.   You will find a code that starts with iframe and ends with iframe, something like this,

<iframe allowtransparency='true' frameborder='0' height='180' name='poll-widget-1533663100889025859' src='http://www.google.com/reviews/polls/ display/-1533663100889025859/blogger_template/run_app?hideq=true&purl=http%3A%2F%2F www.mybloggertricks.com%2F' style='border:none; width:100%;'></iframe>

 

    4.   Simply copy that code and paste it wherever you want in your blog post!

    5.   That's it!

Once you have copied the code from your blog's source file then you can happily delete the poll widget from the sidebar by going to Blogger > Design > Page Elements

Hope you find it useful and easy. If you faced any difficulty just shoot me a comment. Peace out brothers! =)

Source: http://www.mybloggertricks.com/2011/06/how-to-add-blogger-poll-widget-to-posts.html

Floating Google +1, Facebook, Twitter Buttons For Blogger



Floating buttonsUPDATE:- To add a floating widget to the left of all your posts like in this blog then please read: [a href="http://www.mybloggertricks.com/2011/08/add-floating-facebook-share-1-button.html"]Floating Counters Next To Posts[/a]





Finally the Sliding Counters! Till now we learned and created many [a href="http://www.mybloggertricks.com/2011/04/add-floating-facebook-like-and-retweet.html" target="_blank"]floating social share buttons[/a] but those button widgets in fact do not slide when the user scrolls the page up or down. The only thing I needed was a well constructed JavaScript code that could make the widget to float up and down synchronously with the webpage movement. Thanks to [a href="http://www.jtricks.com/javascript/navigation/floating.html" target="_blank"]Jtricks'[/a] Floating Menu code, we finally managed to bloggerize the floating effect and this widget is all ready to be added to your beautiful blogger blogs.  Kindly view the demo first,








[a href="http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html" target="_blank"]Live Demo [/a]







Adding Floating Social share Counters to Blogger




  1. Go To Blogger > Design



  2. Choose a HTML/JavaScript widget



  3. Paste the following code inside it,




<style>

/*-------MBT Floating Counters------------*/

#floatdiv {

    position:absolute;

    width:94px;

    height:229px;

    top:0;

    left:0;

        z-index:100

}



#mbtsidebar {

        border:1px solid #ddd;

        padding-left:5px;

    position:relative;

    height:220px;

    width:55px;

    margin:0 0 0 5px;

}

</style>





<div id="floatdiv">

<div id="mbtsidebar">

    <table cellpadding="1px" cellspacing="0">

    <tr>

    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>

    </td>

    </tr>

    <tr>

    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">

<g:plusone size="Tall" expr:href="data:post.url">

    </g:plusone></td>

    </tr>

    <tr>

    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </td>

    </tr>

    <tr>

    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">

<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p>

    </td>

    </tr>

    </table>

</div>

</div>

<script type="text/javascript">

// JavaScript Document



   <!--

/* Script by: www.jtricks.com

* Version: 20071017

* Latest version:

* www.jtricks.com/javascript/navigation/floating.html

*/

var floatingMenuId = 'floatdiv';

var floatingMenu =

{

    targetX: 0,

    targetY: 300,

    hasInner: typeof(window.innerWidth) == 'number',

    hasElement: typeof(document.documentElement) == 'object'

        && typeof(document.documentElement.clientWidth) == 'number',

    menu:

        document.getElementById

        ? document.getElementById(floatingMenuId)

        : document.all

          ? document.all[floatingMenuId]

          : document.layers[floatingMenuId]

};

floatingMenu.move = function ()

{

    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';

    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';

}

floatingMenu.computeShifts = function ()

{

    var de = document.documentElement;

    floatingMenu.shiftX = 

        floatingMenu.hasInner 

        ? pageXOffset 

        : floatingMenu.hasElement 

          ? de.scrollLeft 

          : document.body.scrollLeft; 

    if (floatingMenu.targetX < 0)

    {

        floatingMenu.shiftX +=

            floatingMenu.hasElement

            ? de.clientWidth

            : document.body.clientWidth;

    }

    floatingMenu.shiftY =

        floatingMenu.hasInner

        ? pageYOffset

        : floatingMenu.hasElement

          ? de.scrollTop

          : document.body.scrollTop;

    if (floatingMenu.targetY < 0)

    {

        if (floatingMenu.hasElement && floatingMenu.hasInner)

        {

            // Handle Opera 8 problems

            floatingMenu.shiftY +=

                de.clientHeight > window.innerHeight

                ? window.innerHeight

                : de.clientHeight

        }

        else

        {

            floatingMenu.shiftY +=

                floatingMenu.hasElement

                ? de.clientHeight

                : document.body.clientHeight;

        }

    }

}

floatingMenu.calculateCornerX = function()

{

    if (floatingMenu.targetX != 'center')

        return floatingMenu.shiftX + floatingMenu.targetX;

    var width = parseInt(floatingMenu.menu.offsetWidth);

    var cornerX =

        floatingMenu.hasElement

        ? (floatingMenu.hasInner

           ? pageXOffset

           : document.documentElement.scrollLeft) +

          (document.documentElement.clientWidth - width)/2

        : document.body.scrollLeft +

          (document.body.clientWidth - width)/2;

    return cornerX;

};

floatingMenu.calculateCornerY = function()

{

    if (floatingMenu.targetY != 'center')

        return floatingMenu.shiftY + floatingMenu.targetY;

    var height = parseInt(floatingMenu.menu.offsetHeight);

    // Handle Opera 8 problems

    var clientHeight =

        floatingMenu.hasElement && floatingMenu.hasInner

        && document.documentElement.clientHeight

            > window.innerHeight

        ? window.innerHeight

        : document.documentElement.clientHeight

    var cornerY =

        floatingMenu.hasElement

        ? (floatingMenu.hasInner 

           ? pageYOffset

           : document.documentElement.scrollTop) +

          (clientHeight - height)/2

        : document.body.scrollTop +

          (document.body.clientHeight - height)/2;

    return cornerY;

};

floatingMenu.doFloat = function()

{

    // Check if reference to menu was lost due

    // to ajax manipuations

    if (!floatingMenu.menu)

    {

        menu = document.getElementById

            ? document.getElementById(floatingMenuId)

            : document.all

              ? document.all[floatingMenuId]

              : document.layers[floatingMenuId];

        initSecondary();

    }

    var stepX, stepY;

    floatingMenu.computeShifts();

    var cornerX = floatingMenu.calculateCornerX();

    var stepX = (cornerX - floatingMenu.nextX) * .07;

    if (Math.abs(stepX) < .5)

    {

        stepX = cornerX - floatingMenu.nextX;

    }

    var cornerY = floatingMenu.calculateCornerY();

    var stepY = (cornerY - floatingMenu.nextY) * .07;

    if (Math.abs(stepY) < .5)

    {

        stepY = cornerY - floatingMenu.nextY;

    }

    if (Math.abs(stepX) > 0 ||

        Math.abs(stepY) > 0)

    {

        floatingMenu.nextX += stepX;

        floatingMenu.nextY += stepY;

        floatingMenu.move();

    }

    setTimeout('floatingMenu.doFloat()', 20);

};

// addEvent designed by Aaron Moore

floatingMenu.addEvent = function(element, listener, handler)

{

    if(typeof element[listener] != 'function' ||

       typeof element[listener + '_num'] == 'undefined')

    {

        element[listener + '_num'] = 0;

        if (typeof element[listener] == 'function')

        {

            element[listener + 0] = element[listener];

            element[listener + '_num']++;

        }

        element[listener] = function(e)

        {

            var r = true;

            e = (e) ? e : window.event;

            for(var i = element[listener + '_num'] -1; i >= 0; i--)

            {

                if(element[listener + i](e) == false)

                    r = false;

            }

            return r;

        }

    }

    //if handler is not already stored, assign it

    for(var i = 0; i < element[listener + '_num']; i++)

        if(element[listener + i] == handler)

            return;

    element[listener + element[listener + '_num']] = handler;

    element[listener + '_num']++;

};

floatingMenu.init = function()

{

    floatingMenu.initSecondary();

    floatingMenu.doFloat();

};

// Some browsers init scrollbars only after

// full document load.

floatingMenu.initSecondary = function()

{

    floatingMenu.computeShifts();

    floatingMenu.nextX = floatingMenu.calculateCornerX();

    floatingMenu.nextY = floatingMenu.calculateCornerY();

    floatingMenu.move();

}

if (document.layers)

    floatingMenu.addEvent(window, 'onload', floatingMenu.init);

else

{

    floatingMenu.init();

    floatingMenu.addEvent(window, 'onload',

        floatingMenu.initSecondary);

}

//-->

</script>


Make these changes:



  • Replace mybloggertricks with your Twitter username




     4.  Save your widget and you are almost done!


PS: If you have already added the [a href="http://www.mybloggertricks.com/2011/06/add-google-1-button-to-your-blogger.html" target="_blank"]Google +1 Button[/a] somewhere in your blog then you may skip step5.


    5.  Now Go To Blogger > Design > Edit HTML   and search for this,



</head>



Just above it paste the following code,



<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>



     6.  Save your template and say Bingo!


Visit your blog to find it hanging to the left. I hope you liked it as much as MBT had fun creating it. Peace and blessings! :)



Credits:


Web designers, developers and Blog owners are requested to attach attribution to MBT blog if they wish to share this tutorial with their readers. Any copyright violation will be reported straight to DMCA. Kindly respect the efforts.
Source: http://www.mybloggertricks.com/2011/06/floating-google-1-facebook-twitter.html

Disadvantages Of "Blogger Template Designer" Templates

 

 

The above class is the CSS code for styling the Header.  You can clearly see the variables indicated by the dollar sign ($) Now suppose if you wish to edit the background image of your header or change the border colours, font style etc. then how can you set the values when everything is in variables? Of course you can do that if you have some prior knowledge of web languages but this would be difficult to new bloggers.

  • The widget code is also programmed differently using Macro:param tags. See this code,

<aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='0'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>

 

This is the new way of adding dynamic tags to your widgets so that they could be edited directly using "Template designer". Previously the widget <b:section> tags were used which was easy to understand and replace as compared to this.

  • Further simple tags like <body> has been messed up into something like this,

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In all blogger tutorials we always mention <body> tag and it will now turn a headache for new bloggers to find the same <body> tag in the new template designs.

Conclusion:

In a nut shell as a web designer myself I can only advise you all to kindly stick to custom templates which are far better coded and optimized compared to blogger templates. With custom templates you have complete command over your layout coding and doesn't have to reply on the template Designer tool. You can apply all blogger tutorial tricks to your custom templates easily and can better implement them. I felt it important to discuss this topic as most of you were facing problems in applying the tuts and tricks. Hope this make things clear.

Source: http://www.mybloggertricks.com/2011/06/disadvantages-of-template-designer.html

Change Author Comments Color Style In Blogger

   6.    Next search carefully for this code in your template,

Tip: Press Crtl +F and search for one line at a time

      <data:commentPostedByMsg/>
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

 

     7.     Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>

<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>

 

     8.    Save your template and you are done!

Visit your blogs and see that the author comments now look something like this,

image

Let me know if you faced any problem. Would be a pleasure helping you. In my next post I will share several ways of customizing author comments. Have Fun! :)

Source: http://www.mybloggertricks.com/2011/06/change-author-comments-color-style-in.html

Happy Birth Day To AdSense! 18 June 2011

adsense-happy-birthdayGoogle AdSense Team will celebrate its [a href="http://adsense.blogspot.com/2011/06/happy-birthday-adsense.html" target="_blank"]eighth birthday[/a] just after 1 hour i.e. 18th June, 2011. AdSense was launched in 2003 and since then this great marketing and advertising company has served more than Two Million publishers all around the world. AdSense is the biggest income source for GOOGLE Inc. Just this year in 2011 Google earned $2.34 Billion dollars which is 28% of their total Annual revenue i.e. 9.36 Billion Dollars! Its eight years non stop success does surely mean a lot to them.

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

Goggle AdSense enable web owners to display text, image and video advertisements on their websites and blogs. All blogger blogs are equipped with AdSense ad integration by default. The revenue generated depends on page impressions and clicks.

 

 

Adsense team said:

Growing to over two million publishers worldwide since our [a href="http://www.google.com/press/pressrel/adsense.html"]launch in 2003[/a], we want to thank all of you for helping us expand and thrive.
As we celebrate AdSense, we want to share our appreciation for all the AdSense publishers whose innovation has made the last eight years so successful. The Google Display Network is comprised of many AdSense publishers like you: those who offer useful and engaging content for your community and serve as an effective channel for advertisers to connect with audiences.
For the last eight years, we’ve relied on your product feedback to help us improve, your success stories to inspire us, and your content to enhance the ecosystem of the world wide web. We look forward to growing older and wiser with all of you for many more years to come!

Source: http://www.mybloggertricks.com/2011/06/happy-birth-day-to-adsense-18-june-2011.html

Free Blogging Apps for iPhone / iPod Touch

[a href="http://1.bp.blogspot.com/-rWEx34xRqO8/Tfn1-EUM5AI/AAAAAAAAAU0/3GNhoPOnVa8/s1600/penmyblog4.jpg"][/a]

[a href="http://3.bp.blogspot.com/-vvrlGdMYjv0/Tfn18BASxeI/AAAAAAAAAUo/960uZWD_XzU/s1600/penmyblog.jpg"]pen my blog[/a][a href="http://1.bp.blogspot.com/-rWEx34xRqO8/Tfn1-EUM5AI/AAAAAAAAAU0/3GNhoPOnVa8/s1600/penmyblog4.jpg"]pen my blog[/a]




[a href="http://4.bp.blogspot.com/-UE6-ka2ZXzE/Tfn1873spgI/AAAAAAAAAUs/vCcWvKuFFB0/s1600/penmyblog2.jpg"]blogging app[/a][a href="http://2.bp.blogspot.com/-1UlTWevRUcE/Tfn19t3zV8I/AAAAAAAAAUw/0zavkdZcObM/s1600/penmyblog3.jpg"]iphone blogging app[/a]

A really simple and user friendly app i must say. I have used it for couple of days. It works but its not the best. You can view your posts, write a new one easily. But the big draw back is that you cant see images within your post. Thats simply awful. Also the layout doesn't have much to offer. It would be better if there was some option to view the stats, revenue and stuff. 
But still in the end its a free app. So what we want more.

Blog Write (Lite):

Requirements: Compatible with iPhone, iPod touch, and iPad. Requires iOS 2.2 or later
This app is my personnel favorite among these two. At least you get to view the images in your post. Also it supports other blogging platforms like WordPress, self hosted WordPress.

[a href="http://2.bp.blogspot.com/-sE7Jn13K_T8/Tfn6FdgWwjI/AAAAAAAAAU8/Yv6kV3bO9KI/s1600/blogwriter.jpg"]blog write blogging app[/a][a href="http://4.bp.blogspot.com/-bhvJ3_blcic/Tfn6GJ5t9cI/AAAAAAAAAVA/q7Jdgi7ls3Y/s1600/blogwriter2.jpg"]blog write feeds[/a]

[a href="http://4.bp.blogspot.com/-HbD4P9bs3_g/Tfn6GzVEM_I/AAAAAAAAAVE/7iLQ43wAPo8/s1600/blogwriter3.jpg"]blog write Editor[/a][a href="http://4.bp.blogspot.com/-wIpQXE9KHK4/Tfn6IME-jcI/AAAAAAAAAVM/lKBuoL1PJ0g/s1600/blogwriter5.jpg"]blog write Image[/a]

[a href="http://4.bp.blogspot.com/-A0CudsfdZw8/Tfn6JVjWzhI/AAAAAAAAAVU/zGy4PLNedVc/s1600/blogwriter7.jpg"]blog write post list[/a]

Final Judgement :

"Blog Writer" is definitely my hero as it has low system requirements and offers more then "Blog My Pen". Now you can work on your blog more than before. So try both of these apps and start using which best suites you. Until then, me going to play with those apps :)

  Hassam Ahmad Awan


About the Guest Author:

Hassam is a young A Level Student who loves to learn and share tech related stuff. He has an ambition to become a Software Engineer. He is a passionate blog author and publishes regular tutorials to newbie bloggers at [a href="http://bloggingehow.blogspot.com" target="_blank"]BLoggingeHow[/a].

You can always keep in touch with him at [a href="http://www.facebook.com/pages/BLoggingeHow/126203964129170" target="_blank"]@Facebook[/a]

Source: http://www.mybloggertricks.com/2011/06/free-blogging-apps-for-iphone-ipod.html

My Favorite 100 Fonts - Free Download

FAVOURITE-100-FONTSMost of you asked what fonts I use to create my intro images on Photoshop or the fonts I use while designing blogger templates. I have compressed and gathered the complete list of all my fonts I had on my PC  for free download. I just hope you will enjoy using them for your design works and make your blogs even more eye catching.

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

 

Download The Best 100 Fonts

Since we share resources with subscribers only therefore current subscribers are requested to post their Email Id's in the [a href="#comments"]comment box[/a] in a spam protected way and new readers are requested to kindly subscribe by submitting your Email address below:

 


name="loc" type="hidden"/>
type="submit"/>

 

After subscribing you will get an email to activate the Feed updates, please do that and then post the same Email address in the comment box below.

Source: http://www.mybloggertricks.com/2011/06/my-favorite-100-fonts-free-download.html

Make Clickable Images In Blogger with Fade Effect

You will see that the image is no more clickable. and the code I used this time is the same one but without the href tag,

<img src="IMAGE LINK" width="240px" height="180px"  alt="unclickable Koala image" title="unclickable Koala image" border="0" />

 

unclickable Koala image

 

How to make an image fade in and fade out?

For this you will need to add a tiny CSS3 code to your template. So kindly follow these steps,

  1. Go To Blogger> Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Add the code below just above it

 

/*---MBT FADE OUT CODE ----*/

.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.3;
border:0;
}
.Fadeout:hover img {
filter:alpha(opacity=30);
opacity:1.0;
border:0;
}

/*---MBT FADE IN CODE ----*/

.Fadein img {
filter:alpha(opacity=30);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=100);
opacity:0.3;
border:0;
}

 

 

 

    5.  Save your template.

 

Now whenever you wish to add the fading effect to your image then simply insert an additional code to the same [a href="#clickable"]Clickable image code[/a] that we discussed above.

To make the image Fade out simply insert class="Fadeout" to your image code like this,

<a class="Fadeout" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example below. (Hover your mouse cursor on it)

Koala fade out

 

To make the image Fade in simply insert class="Fadein" to your image code like this,

<a class="Fadein" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example,

Koala fade in

 

 

I hope you find it useful. If you wanted to know where to save your images or to get IMAGE Links then read this post,

  • [a title="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" href="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" target="_blank"]Learn how to save images and get image links[/a]

If you want to learn more image effect then I am sure you would love these tuts,

  • [a href="http://www.mybloggertricks.com/2010/12/add-drop-shadows-to-images-and-expand.html" target="_blank"]Add Drop shadows to images[/a]
  • [a href="http://www.mybloggertricks.com/2010/02/top-10-widely-used-image-hover-effects.html" target="_blank"]Top 10 Widely Used Image Hover Effects![/a]
Source: http://www.mybloggertricks.com/2011/06/make-clickable-images-in-blogger-with.html

Macbook Pro - Every Bloggers Dream

Connectivity

Other Basic Features

 

 

 

 

Cost

In short MacBook Pro is a must for every blogger to enjoy the best blogging experience anywhere, anytime. You can get it at $1199 from [a href="http://store.apple.com/us/browse/home/shop_mac/family/macbook_pro?aid=AIC-WWW-NAUS-K2-CONFIGURE-MACBOOKPRO-15-INCH&cp=CONFIGURE-MACBOOKPRO-15-INCH" rel="nofollow" target="_blank"]here[/a].
 6074322513670103934Fahad 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/" target="_blank"]My C Snippets[/a]. You can always contact him at [a rel="nofollow" href="http://www.facebook.com/fahd92" target="_blank"]Facebook[/a]

Source: http://www.mybloggertricks.com/2011/06/macbook-pro-every-bloggers-dream.html

700+ Smashing Web2.0 Icons For Web Designing- Free!

web2-icon-setFree Icons, buttons or any blogger goody is something that is always welcomed by all. I am sharing some of my Freeware Icon collection that I have collected over the recent years for my designing projects. This web2.0 icon set contains everything you may need, from blog icons, forums, iphone, social media networks till RSS icons. All packed in one jumbo magic set! To get a free png copy of the this great collection, kindly submit your Email ID below in order to become a valuable MBT reader and avail tons of such resources for free.

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

 

 

 

 

 

 


name="loc" type="hidden"/>
type="submit"/>

After subscribing, activate your feeds and then post your Email ID with which you subscribed in the [a href="#comments"]comment form below[/a], so that I could send you the banners immediately

Source: http://www.mybloggertricks.com/2011/06/700-smashing-web20-icons-for-web.html

Optimize Blog Post Titles Using H2 Tag - Increase Traffic

OPTIMIZE-POST-TITLESHeadline tags start from H1 and go up to H6 in decreasing order of size. They play immense importance in your blog template optimization. Just as I earlier explained that a [a href="http://www.mybloggertricks.com/2011/01/how-to-write-search-engine-friendly.html" target="_blank"]search engine robot reads your content[/a] just the way a human reads it. Headlines, bolded and highlighted texts draw attention. By default all blogger templates are designed such that the H1 tag is given to Homepage Main Title, H2 is given to Blog Description or Header dates, sidebar headers and H3 is assigned for post titles. Whilst the fact is that your Post titles are second most important part of your blog after the main title. Sidebar titles and Post description are peanuts in comparison to your post titles.

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

Its your post titles that ping search engines on an update and are indexed and crawled by search engine robots. In SEO the post title is referred as the KING whiles post content is referred as the QUEEN. So if the king is treated with H3 tag instead of H2 tag then I guess you must re-plan your Traffic campaign.

Changing Post Tiles Heading Tags In Blogger

To change post titles default H3 tag to H2 heading Tag then follow the steps below,

  1. Go To Blogger> Design > Edit HTML
  2. Backup your template
  3. Search for .post h3
  4. and replace it with .post h2  (keep replacing that for all occurrences of .post h2)
  5. Then search for,

<h3><data:title/></h3

and replace it with this,

<h2><data:title/></h2>

 

    6.  Save your template and Congratulations for the smart change! :>

 

In my next post I will discuss what heading tags you should use for headlines that you use inside the post body. I am sure this change will bring a positive change in your web Traffic inshAllah. Peace! :>

Source: http://www.mybloggertricks.com/2011/06/optimize-blog-post-titles-using-h2-tag.html
 
Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger