Surprise, Blogger Launches The New Blogger Templates Designer. The Full Guide, And How To Use.

       Blogger Tricks and Hacks   6 Comments

Today i surprised by seeing blogger announcing the new great and amazing feature. Blogger templates designer, This feature is a revolution in blogger platform history, This option will make it easier for blogger users to make custom blogger templates in a very easy way and will save you the time to download and upload your template for your blog. and will make you customize your template exactly as you want,

This tool allow you to use the new 15 blogger templates at your blog and customize it’s Colors, background, fonts, and use hundreds of images as patterns, Change layout, Adjust width, Customize Links, Footer And Taps.
With a live preview for your changes, once you are satisfied with your new style, you can use it in your blogger blog.
To know more about this new feature please watch this video and then continue reading

The first thing you must have to know is that this feature is available only in draft.blogger.com
So you have to log in your account from this page draft.blogger.com .
Now navigate to Layout, And you’ll see a new tap appeared on the top menu, see the next image.

Once you click Template Designer You’ll go to a page that separated to 2 parts,the customization area and the preview area, please look at the following image.

The important part here is the customization frame,
From customization frame you can customize

• Templates.
• Background.
• Layout.
• Advanced Customization.

Blogger added new 15 blogger templates you can start Customizing from.
There are 4 main sections under each section you’ll find 3 or 4 templates, you can pick any on and start customize it.

Once you choose your template navigate to background section,
In background section you can choose your template main background and choose your template elements background colors,
blogger has added hundreds of backgrounds that suit all type of niches and users
the background images are well categorized in more than 20 categories. i’m sure you’ll find yours in this great collection,

This is very important section, from here you can customize your template layout,

• Body layout.

You can choose 1 column, 2 column, 3 column, or even 4 column, And you can choose the side bar location, Left Or Right.

• Footer layout.

You can adjust your footer layout from here, 1 column, 2 column, or three columns,

• Adjust Width.

You can adjust your footer layout from here, 1 column, 2 column, or three columns,

From here you can customize

• Page text.
• Background.
• Links Blog Title.
• Blog Title.
• Tabs Text
• Tabs Background.
• Post
• Gadgets.
• Footer
• Footer Links
• Add Css

For every element in the above list you can change colors, font type, font size, And More.

After Making all changes to your template, if you are satisfied with the result Click APPLY TO BLOG
To see a demo template that made by this new tool by max, please click here.
Please keep up with our latest updates so you can know all news and updates about this tool.

Add Google Buzz Button To Blogger.

       Blogger Tricks and Hacks   14 Comments

Google buzz is now so popular and most of google users use Buzz, using Google buzz allow you to share photos, posts, notes, videos, your latest updates, and even much more, and doing this alone will take long time, but you can add a small button to your blog to let all your visitors buzz your blog posts and photos on their accounts.

This is a very easy button to use, once you install it, you are ready to go. just click buzz this, and you won’t be taken a new window, this button opens a new j-query window on the same page that let you buzz the page and then continue reading the post, The good thing here is that this button let you to select any part of the page with your mouse cursor. text or even photo, and it’ll be added to your buzz description.

There are two options, a small button, and a large button, So what you have to do is to follow the steps below and choose your favorite button size.

Go to your blogger account and navigate to, Layout >> Edit html, And doing any thing you must check Expand Widget Templates box.
And find the next Code

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

And after it, paste your button code You can get the button code in the next step

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

The buttons codes.

The large button code,

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img alt='Buzz this' src='http://img2.pict.com/15/da/3e/2809374/0/googlebuzz.png'/></a>

The small button code

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img alt='Buzz this' src='http://img2.pict.com/9c/09/57/2854010/0/buzzthis.gif'/></a>

, That’s it, To see a demo for this button please click here.

Adding Social Bookmarking Buttons Widget To blogger And Customize It.

       Blogger Tricks and Hacks   15 Comments

If you are a regular user here on allblogtools.com you’ll notice that i posted many sharing and bookmarking widgets for blogger,
But a lot of users are contacting me asking to add a new one with customizable buttons and have tweet this button that working correctly with blogger.
Now lets see how to add it, then we’ll learn how to customize it to your own blog.

This is a very easy widget, It’ll be done in only one step, now lets go.
Go to your blogger account, Navigate to layout >> Edit Html, And make sure to check Expand Widget Templates,
And find the following code.

<data:post.body/>

And exactly after it, paste the next code,

<div align='left'>
  <span class='post-icons'>


<!-- Widget Title , Share This Start, Remove Or Leave-->
<p align='left'>
  <img alt='' border='0' id='BLOGGER_PHOTO_ID_5441163760466269298' src='http://3.bp.blogspot.com/_JwD5r652h00/S4LlnJNSFHI/AAAAAAAAAU8/b0CwEmD94jg/s400/share-this.png'/></p><!-- Widget Title , Share This Start, Remove Or Leave-->

 

<!-- Stumbleupon Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/SnleiulEMVI/AAAAAAAABeU/kO09nNTlQeo/s200/stumbleupon.png'/></a>
  <!-- Stumbleupon Button End, Remove Or leave -->


<!-- Technorati Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
  <!-- Technorati Button End, Remove Or leave -->


<!-- Delicious Button Start, Remove Or leave -->
  <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Snld35mPSDI/AAAAAAAABds/ccrOpOmP9Zk/s200/delicious.png'/></a>
  <!-- Delicious Button End, Remove Or leave -->


<!-- Digg Button Start, Remove Or leave -->
  <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Snld_x-wXoI/AAAAAAAABd0/cTsGU_Y-zQ8/s200/digg.png'/></a>
  <!-- Digg Button End, Remove Or leave -->


<!-- Reddit Button Start, Remove Or leave -->
  <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleX1tMMtI/AAAAAAAABeM/gQSYdrmSc3k/s200/reddit.png'/></a>
  <!-- Reddit Button End, Remove Or leave -->

 

<!-- FaceBook Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/s200/facebook.png'/></a>
  <!-- FaceBook Button End, Remove Or leave -->


<!-- Yahoo Button Start, Remove Or leave -->
  <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlexsGX2QI/AAAAAAAABes/ai6zvzZKCgw/s200/yahoo.png'/></a>
  <!-- Yahoo Button End, Remove Or leave -->

<!-- Twitter Button Start, Remove Or leave -->
  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
  <script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
  <a expr:onclick='&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;' href='#'>
  <span style='display:none;'>I&#39;m reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>
  <!-- Twitter Button End, Remove Or leave -->

</span>
  </div>

Now Just Click Save Template and you are done.

You can delete or rearrange the buttons in this widget, and you can remove the Share this Big sign or leave it.
Lets see how.
In the above code you’ll notice that there are lines in red and blue colors.
For example Here is a part of it.

&<!-- Technorati Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
  <!-- Technorati Button End, Remove Or leave -->

This part of code is responsible for Technorati Button Can remove it, Move it to up or down to rearrange the widget buttons, And of curse you can do this with all the widget buttons in the same way.

Too see a live demo for this widget please click here. Please don’t hesitate to leave your comments, feedback, or your questions.

Add Stylish Menu To Your Sidebar And A Very Easy Way To Use And Customize It.

       Blogger Tricks and Hacks   9 Comments

Some people contacted me asking about how to add a beautiful menu to a blogger blog sidebar, Today i’ll learn you in a very easy way how to add a menu to your sidebar and how to customize it’s colors to blend with your blogger template colors.

Go to your blogger account, and go to Dashboard >> Layout >> and on your Page Elements page, click Add A Gadget and choose HTML/JavaScript Add then copy the next code and paste it in the HTML/JavaScript Content area.

<style type="text/css">

/* Made By AllBlogTools.com */

#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none; 
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="http://www.allblogtools.com/">Home</a>
<a href="http://www.allblogtools.com/about/">About us</a>
<a href="http://www.allblogtools.com/category/blogger-templates/">Blogger
templates</a>
<a href="http://www.allblogtools.com/category/tricks-and-hacks/">Blogger
Tricks</a>
<a href="http://www.allblogtools.com/blogger-tools/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://www.allblogtools.com/">AllBlogTools.com</a></font>

Now click Save And you are done, please check your blog.
Now we’ll learn how to customize the menu colors to me it looks perfectly with your blogger template Or you can just leave it as you see it.

Now please look at the code above, you’ll see some codes are written in colors. in the above code i described what each part responsible for. All what you have to do is to go to our Html hex colors generator And get your favorite color code then paste it instead of the color code in the above code.

For example if you want to change the background color for the menu.
you’ll find a line that says

background-color: #2175bc; /*Menu background Color */

Just change 2175bc to your favorite color code that you got it from our Html hex colors generator

If you find the above code confusing or can’t understand what in the elements names in the menu, please check out the next image.

To see demo for this menu please click here, And please don’t hesitate to leave you comment if you need any support.

Automatically Update Your Twitter And FaceBook Status When You Add A New Post On Blogger.

       Blogger Tricks and Hacks   10 Comments

Twitter, facebook, Laconica, Ping.fm and Hellotxt are now one of the biggest visitors sources for a lot of blogs, so you have to use this services to get more visitors,
So you have to update your status regularly each time you add a new post on your blog so your followers and friends keep receiving the latest updates from your blog.
But updating your status regularly taking a lot of time, specially if you post many posts daily.
Today we’ll learn a new way that`ll save us more time. by using this tool you wont need to tweet and update your status on Twitter, facebook, Laconica, Ping.fm and Hellotxt.
You will just need to Authenticate your Twitter, facebook, Laconica, Ping.fm and Hellotxt account .
After this add your blog’s RSS feed link there . and you are good to go.

Go to TwitterFeed.com, And click register now. Then fill the form and click Create account.

Then you’ll be taken to another page contain 3 steps.

You’ll need to enter your
- Feed Name
- RSS Feed URL, your default blog url should be the following. http://yourblogname.blogspot.com/feeds/comments/full
Or you can enter your feedburner url if you are a member of feedburner.
And click Continue to Step 2

In this step you will be able to Authenticate your accounts in Twitter, facebook, Laconica, Ping.fm and Hellotxt with your twitterfeed.com account,
For example click on Facebook, on the next page, click Connect with facebook, a new window will be opened, enter your facebook e-mail and password and click connect Then click allow access and click create service

And after you add and Authenticate all your accounts click All Done.

On this step just click Go to dashboard. From your dashboard you can add, edit or remove services from your account.

And now you are done.

Solving / Fixing The Undefined Date For blogger Time Stamp.

       Blogger Tricks and Hacks   3 Comments

Undefined Date, This is one of the most popular problems in all new blogger templates. I noticed that a lot of visitors commenting and asking about how to get ride of this problem, and today we’ll learn how to fix this problem in very easy way.To see how is this problem looks like see the following image.

To fix the time stamp error in blogger post you’ll need to do the following steps.
Go to your blogger account. And navigate to Settings >> Formating >> and Change the values to the following values.

Then click Save Template And you are ready to go. To see a demo for fixed date, please click here.

Google Translate Flags Widget For Blogger

       Blogger Tricks and Hacks   17 Comments

I’m sure that we are all not from the same country, and we all can’t read and understand all languages in the world, and as a blogger my self, sometimes i want to translate some blogs from various languages to English. The usual way is to copy the page url and then i go to google translate service and paste the url there then hit enter.
We can all short cut all this steps for our visitors by adding a great widget to our blog. it’s easy and one step trick.

This widget is a great one and the best translate widget ever and here are the features.

• This Widget Auto detect your blog language and translate it to the readers chosen language.
• Support 12 different languages, English, French, Germany, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.
• Auto Adjustment, No matter where do you add this widget, it’ll be auto adjusted with your blog template.

widget to our blog. it’s easy and one step trick.

It’s very easy to add this widget to your blog, just go to your blogger dashboard >> Layout >> and on page elements page, Click Add A Gadget and choose HTML/JavaScript
Leave the title empty or type any title for your widget, and in the content area paste the following code.

<style>

 .google_translate img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        border:0;
        }
        .google_translate:hover img {
        filter:alpha(opacity=30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
        .google_translatextra:hover img {
        filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
  </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>      </div> 
  <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

 <br/>
        <a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>

And click Save
The check your blog.

To see a demo for this widget please click here.

How To Add Recent Posts Widget And Recent Comments Widget For Blogger.

       Blogger Tricks and Hacks   9 Comments

I always mention that very large number of our readers leave their comments under some blogger templates asking about How To Add Recent Posts Widget And Recent Comments Widget For Blogger. And some of them wondering about how to add this widget that they see in the demo blog.
The good news is that it’s too easy to add it and it takes less than 1 minute, so lets do it.

Go to your dashboard >> layout, On your page elements page where ever you want to add the widget click add gadget and choose Feed. then enter : http://YOURBLOGNAME.blogspot.com/feeds/posts/default
and click Continue then save.

Go to your dashboard >> layout, On your page elements page where ever you want to add the widget click add gadget and choose Feed. then enter : http://YOURBLOGNAME.blogspot.com/feeds/comments/default
and click Continue then save.

Create a Customized Text Area In Blogger Using Simple CSS

       Blogger Tricks and Hacks   11 Comments

Summarized and precise posts are always appreciated by both visitors and search engines. Text Area or Text Boxes are indeed an easy way to share large bulk of codes with your readers. Bloggers who write tutorials in designing or development field, often share CSS, HTML, XML and JavaScript codes inside a BlockQuote. This method can surely be adopted but only for showing short codes or written text but if you want to share really long and bulky codes then the only way to keep your page load-time low and yet share such long codes is to use Text Areas.

See an example of a text area below to get an idea of what it actually is.

This is how the text will appear inside a Text Box or Text Area, whatever you may call it

I am sure you didn’t like the grayish look of the box above and wish to add some colors and effects to it. Now see this demo –> Customized Text Area

Lets now learn how to add this cool effect to our text areas. Follow the steps below to add a highly stylized and customized text area in your blogs,

Paste the code below just above

• Go To Blogger > Layout > Edit HTML
• Search for

  </b:skin>

• Paste the next code above it.

    .mbt-textarea {

    padding:0;

    margin:0;

    width:400px;

    height:40px;

    color:#0080ff;

    font:12px arial;

    background:#fff;

    border:1px dotted #289728; }

    .mbt-textarea:hover {

    color:#289728;

    border:2px solid #666; }

    .mbt {

    padding-top:3px;

    margin:0;

    color:#289728;

    font-size: 9px;

    font-family: sans-serif, verdana;

    }

Now click Save Template and you are done!

Now when ever you write a post use the HTML code below to display a text area,

<textarea class="mbt-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea>
  <p class="mbt" ><u>Press "Ctrl + A" to Select and "Ctrl + C" to Copy </u></p>

You just need to replace WRITE-TEXT-HERE with your bulky code or text. The bolded black text appears below your text area and it instructs your readers how to easily select and copy your codes. If you don’t want this text to appear below the text box then simply delete the code in blue and black

I am rewriting the CSS code above with explanation of each part,

.mbt-textarea {
    padding:0; 

margin:0; 

width:400px;
      height:40px; 

color:#0080ff; 

font:12px arial; 

background:#fff; 

border:1px dotted #289728; } 

.mbt-textarea:hover {
    color:#289728;
        border:2px solid #666; } 

.mbt {
        padding-top:3px; 

margin:0; 

color:#289728; 

font-size: 9px; 

font-family: sans-serif, verdana; 

}

1) If you want to decrease or increase the height or width of the text area, simply edit

width:400px;

height:40px;

2) To change the color of the text in active mode change the six digit code in this code,

color:#0080ff;       (Use our Color Chart to use a color of your choice)

3) To change the color of the text in Mouse hover mode, edit this,

color:#289728;

4) To change the border width, style and color in active mode edit this code,

border:1px dotted #289728;

where, width is 1px, style is dotted and colour is #289728

5) To change the border look in mouse hover mode edit this,

border:2px solid #666;

6) To change font size and family, edit this,

font:12px arial;

where 12px is the size and arial is the default family that I have used.

7) To change the color and font size and family of the text “Press "Ctrl + A" to Select and "Ctrl + C" to Copy “ edit this code,

.mbt {

padding-top:3px;

margin:0;

color:#289728;

font-size: 9px;

font-family: sans-serif, verdana;

}

I hope this tutorial will help you greatly in controlling and styling your text areas in a far better way. Kindly do not hesitate to ask any question. Your question is more than an honor for us. Take care! :>

How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.

       Blogger Tricks and Hacks   11 Comments

Hi all, few days ago i made and added here a new tool called Html Character EnCoder., For more info about this tool and to know more about how to use it please Check out this tutorial.
The previous tutorial let you know in general way how to add a code, for example HTML code. to blogger posts.
But today we’ll discuss and learn how to make you code box looks better and how you can make it looks very professional.

In the previous tutorial i told you how to add code to your blogger post but in this tutorial i’ll teach you how to style your code box and how to post the code in a professional way.
If you still don’t understand please click here to see a demo for the final result.

so please concentrate with me and lets do it.

In this step the first thing to do is to choose on of the following four styles for your code box.
Once you see your suitable one, please copy it’s code and continue reading.

The box style 1 code

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://3.bp.blogspot.com/_JwD5r652h00/Sz4Esk9Y2RI/AAAAAAAAATw/xFgoODUfT-o/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

The box style 2 code

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://4.bp.blogspot.com/_JwD5r652h00/Sz4NtBq_x2I/AAAAAAAAAUQ/Yhuy_jUjoGg/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

The box style 3 code

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4PoFSlT4I/AAAAAAAAAUg/OxL6lQ-En1I/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af

The box style 4 code

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

After you find your favorite codebox please copy it’s code and go to your blogger account. navigate to Dashboard >> layout >> edit html, and find the following code then paste your codebox code before it.

]]></b:skin>

Note that, you have to copy and paste your code box code before the above code.

In this step you can customize your code box style to give it your unique colors, And you can pass this step, it’s not a must to do step.

If you’ll pass this step please click Save Template
Now and move to step 3, Or just keep reading.

To customize your box first you have to open our html hex color codes generators.

Then if you have noticed that the box code have three values in red, green and blue color, you can change this values to your favorite by generating your color code using our color codes generator.
and here is what each value responsible for

Red : Box Main Background.
  Green : Text Color.
  Blue : Border Color.

After making you modifications Please click Save Template

This step explained in my previous Click here to see it, .
But the difference here is that you wont paste the generated code directly in your post, you have to put it between the following tags,

<div class="code">
  Your generated code should added here 
</div>

I hope you all got it and understood how is it work,

and Again here is the a demoblog to see it in action, and please don’t hesitate to leave your comments for any questions.