Smashing Notes

Tuesday, March 27, 2012 -

Why A Blogger Should Use In-text Ad Network

We can't say that all bloggers starts to blog because he or she just want to earn income from it but eventually a blogger will come to a time where he/she wants to monetize his/her blog. And that's where advertising comes in. a very popular ad network known is the google adsnese but a very sensitive one. You can be a publisher today and loss it by the next day if your not careful enough in handling your account. They are very strict when it comes to clicks. That is why bloggers find other ways to monetize their blog aside from ad networks and google adsense. Sometimes a banner ad slot could be useful to invite advertisers to advertise in your blog.

Here comes In-text Ad Network, an advertising that utilizes the keywords you have in your posts. Some blogger says that this kind of advertising annoys the log readers and viitors because of the pop-up window every time the reader mouse over a certain word that was used by the ad network. but this mentality was change when it was proven that In-text Ad Network is a good or shall I say a great way of monetizing a certain blog.

Adsense is very compatible with In-text Ad Network and also other advertising network. One of the most popular In-text Ad Network before was Kontera, it is still popular these days but they now have a very competitive rival, Infolinks.

Most bloggers use Kontera before but after trying Infolinks, they now use it permanently in their blog since they found out that Infolinks has better payout per number of clicks. If you didn't notice, ExpertsColumn also use In-text Ad Network and obviously it is Ifolinks.

Haven't use In-text AD Network in your blog? Signup for Infolinks HERE!

read more

Thursday, March 22, 2012 -

Comment Box

0 comments

Add A Facebook Comment Box On Your Blogger Blog

Adding a Facebook Comment Box on your blogger blogs is a great idea. Visitors will have an option to use the common blogger comment box or use the Facebook Comment Box in the case that they are online in Facebook. This is really a great plugin created by Facebook and was launched last 2009.

So lets get going!

Adding A Facebook Comment Box On Your Blog

I. Get a Facebook Application ID

1. Go to Facebook Developers Page.

2. Type your "Blog Title" on the App Name and click continue.

3. Now your finish making your application. The digits inside the red rectangle is your Application ID.

II. Adding The Facebook Comment Box On Blog

1. Go to Dashboard >> Design >> Edit HTML.

2. Click on "Expand Widget Templates".

3. Search for <html and just after it give a space and add this code,

xmlns:fb='http://www.facebook.com/2008/fbml'

4. Next search for <body> and after it add this code,

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'YOUR_APP_ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml : true // parse XFBML
    });
};
    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

IMPORTANT: Replace "YOUR_APP_ID" with you Application ID that you made earlier.

5. Next search for </head> and just above it paste the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Smashing Notes' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/jai.cuizon' property='fb:admins'/>
<meta content='article' property='og:type'/>

IMPORTANT:   You have to make the changes below:
Smashing Notes    - your blog title.
BLOG-LOGO-IMAGE-LINK    - your blog logo image link.
YOUR_APP_ID    - your Application ID.
http://www.facebook.com/jai.cuizon     - your Facebook user profile link.

6. Now search for the code below,

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

7. Add this next code after the code in step 6,

<b:if cond='data:blog.pageType == "item"'>
<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.smashingnotes.blogspot.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://smashingnotes.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>smashingnotes.blogspot.com</a></b></div></div>
</b:if>

IMPORTANT:

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='480' then set footer-size to width:470px

8. Save your template and your done! Check out you new comment box.

read more

Saturday, March 17, 2012 -

0 comments

Create A Zoom Effect Photo Gallery Using jQuery

This tutorial will show you how to create a Photo Gallery using jQuery which has a Zoom Effect. This is a pretty nice galley which you can implement in all your posts or adding a HTML/JavaScript gadget on your blog. This can also be implemented on your blog pages if you want. You only have to follow some simple steps below to implement this Zoom Effect Photo Gallery Using jQuery on your blog.

Implementing A Zoom Effect Photo Gallery On Your Blog

1. Go to your Dashboard >> Design >> Edit HTML.

2. Find ]]></b:skin>. Before it paste the code below. (Ctrl+F and paste the code on the search bar to find it easily.)

/* Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5UFtWCoLJ0eMJQV4YOLJS3FnDxzLcXkLms2oFf9Fc90B5A8148gvEvIUE9TNsNsIvECLQZs0JBl_3ZW-rzfAbipYy05l39VKqVw8rX-EbJdrDPIt8sTIukGHbcdOfN0mcingimjuYq61/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

IMPORTANT: You can change the value of this line "width: 360px;" to change the width of the gallery.

3. Then go and find the "</head>" tag and before it paste the next code:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

IMPORTANT: If you have jQuery already installed on your template delete the rel line in the start of the code.

4. Now save your template.

CONFIGURATION: In the place where you want the gallery to appear just paste the next code:

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Replace the blue line with the URL of your images,and if you want to make the image link to another page or url instead of # add the target url.

IMPORTANT: In order for the image to be not distorted, you have to make the dimensions of the image the same as the dimensions in the code. Find this code "ul.thumb li img {width: 100px; height: 100px;" if you want to change the image dimensions.

If you want to add a new image just add a new line of code like the upper ones.

read more

Thursday, March 15, 2012 -

Blogger Tutorial, SEO

0 comments

Optimizing Your Blog Title Tags

Blogsot blogs Title Tags by default shows the blog title first then the post title. This is not good for SEO (Search Engine Optimization). It is very important to show the post title fist then the blog title especially on Google search engine. This is because Google put more weights on optimized tile tags. But don't worry because this can be resolve by changing just a single code in your blog template HTML. Just follow the steps below on how to change your title tags for SEO.

Optimizing Your Blog Title Tags

1. Go to your Dashboard >> Design >> Edit HTML.

2. Find the code below. (Ctrl+F and paste the code below in the search bar to find it right away.)

<title><data:blog.pageTitle/></title>

3. Replace the code in step 3 by the codes below.

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save your template and you should see the result by checking your web browser.

It may take a few days for the changes to show up on the Google search results. But don't just rush things and have patience because SEO isn't that easy.

read more

Wednesday, March 14, 2012 -

Blogger Tutorial

0 comments

How To Simply Add Your Own Favicon On Blogger

Boggers want to build brand for their blog and one easy way to do it is adding a unique Favicon. By default, a blogger blog has Blogger Logo as the favicon. You can change the default favicon easily of the blog on your blog design panel. The favicon on the upper left of the panel is editable, which gives you the option of uploading an image from you desktop or from the web as your blog favicon. But the change in favicon will be seen after a day. You don't want to wait that much time just to see a blog favicon right? So here's a way on how to change your blog favicon by just adding a code on your blog template HTML and that will show your new blog favicon just after you save the changes.

Adding A Favicon On Your Blog

1. First, you need to make you own unique favicon. You do it on image editors or directly from the web. (I have some list of sites where you can make your favicon after this tutorial.)

2. Now, go to your Dashboard >> Design >> Edit HTML.

3. Find the code below. (Ctrl+F and paste the code on the search bar to find it easily.)

<b:include data="blog" name="all-head-content"/>

4. Copy and paste the code below right after the code in step 3.

<link href="YOUR FAVICON IMAGE URL" rel="icon" type="image/vnd.microsoft.icon"/>

IMPORTANT: Change "YOUR FAVICON IMAGE URL" in the code above with the URL of your own unique favicon.

5. Now save the template and check your new blog favicon.

Favicon Editor Sites

Comment below if your having problem implementing this tutorial. ^^

read more

Tuesday, March 13, 2012 -

Blogger Tutorial, Navigation Menu

0 comments

Add A Nice CSS-jQuery Mega Menu On Blogger

Menu bar is a very important part of a blog. This is where we can find important links regarding the blog posts or about the author itself. Usually, categories or major labels of the blog posts are located on this part of the blog. But some bloggers wants to show all their categories and further show sub-categories from the main categories which is not possible using the simple menu bar.

Now, this post will show you a nice Mega Menu using CSS and jQuery. This will make your visitors navigate your blog easily and find what they are looking for.

Adding A Nice CSS-jQuery Mega Menu On Your Blog

1. Go to your Dashboard >> Design >> Edit HTML.

2. Find the code: ]]></b:skin> and paste the codes below before or above it:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul.ldd_menu{
        z-index:999;
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{

 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
        z-index:999;
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        z-index:999;
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        z-index:999;
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{

 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{

 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{

 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}

3. Now find the "</head>" tag and before it paste the following codes:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
    /**
     * the menu
     */
    var $menu = $(&#39;#ldd_menu&#39;);
    
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children(&#39;li&#39;).each(function(){
     var $this = $(this);
     var $span = $this.children(&#39;span&#39;);
     $span.data(&#39;width&#39;,$span.width());
     
     $this.bind(&#39;mouseenter&#39;,function(){
      $menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
       $this.find(&#39;.ldd_submenu&#39;).slideDown(300);
      });
     }).bind(&#39;mouseleave&#39;,function(){
      $this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
     });
    });
            });
        </script>

If you already have jQuery installed on your template, just delete the red line above.

4. The next step is to find "<div id='footer-wrapper'>" or similar (might be different in your template) and before it paste the next code:

<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>Vacations</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Equipment</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Locations</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>

   </div>
    </li>
    <li>
     <span>Tourists</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
   </ul>

Save the template and see the result.

IMPORTANT: You may not follow step 4 in the tutorial and you may copy and paste the codes where you want the Mega Menu to appear on your blog (in the header perhaps).

read more

Monday, March 12, 2012 -

Nuffnang

0 comments

Summer Is Hotter With Banana Boat Sunscreen Lotion, Shick, & Nuffnang

My ideal Nuffnang summer is an adventure through Island Hopping. I want feel the heat of the sun on this outdoor activity on summer and see the beauty of every island I am going to step on. Wew, this would be a great activity with friends. I should go invite my friends to do island hoping this summer and we'll have a good and happy time as we go on the adventure.

Cebu or Bohol might be a good place for Island Hopping this summer. See if I make this happen! ^^

Of course we don't want to be grilled by the heat of the sun and want to look clean. Good thing there's the two summer must-have - "Shick. Free your skin. And Banana Boat Sunscreen Lotion. We've got you covered".

read more

Friday, March 9, 2012 -

Blogger Tutorial, Gadget and Widget

0 comments

Adding A 3D Spherical Animated Tag Cloud On Blogger

Tag Cloud, Labels, Category widget or whatever you call it. This widget is very important in your blog. This helps the visitors to navigate further your blog easily. The usual widget shows the list of the labels you have in your posts which is kinda normal to a blog. Some bloggers are experimental in nature and want some new stuff running in their blogs and this widget fit them most.

This widget is a 3D Spherical Animated Tag Cloud Widget known as Blogumus. As the name implies, this is animated so the labels or categories that it shows have a special effect. If a visitor hover his mouse to the widget then the labels will start rotating in a spherical pattern. Just follow the steps below to have it on your blog.

Adding A 3D Spherical Animated Tag Cloud On Blogger / Blogumus:

1. Go to your Dashboard >> Design >> Edit HTML.

2. Find the code below (just press Ctrl+F and paste the code on the search bar to find it easily)

<b:section class='sidebar' id='sidebar' preferred='yes'>

if you can't find the code above the finding the code below

<b:section-content id='sidebar-right-1'>
or
<b:section-content id='sidebar-left-1'>

3. Copy the code below and paste it directly after the code in step 2

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus</div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;160&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x800060&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Preview your blog. If you see the widget running completely then you can save your template.

IMPORTANT: You can change some of the variables on the code to fit the widget to your theme.

Find the digits below and change it the same as your theme.

Text color: 800060 (purple as default in the code above)
Height: 200 px
Width: 160 px
Font size: 12

Drop your questions on the comment box if you have problem implementing this widget. Good day!

read more

Blogger Tutorial, Gadget and Widget

0 comments

Add A Beautiful Slide Out Heart Bookmarking Gadget On Blogger

This post will show you how to implement a beautiful and awesome Slide Out Heart Bookmarking Gadget on blogger/blogspot blogs. The gadget looks great and the slide effect is very cool. When the heart opens, it shows icons from several social networking sites like Facebook, Twitter, LinkIn, Stumble Upon. Sharing through email is also there and lastly the ShareThis Icon that offers a hundreds of more bookmarking choices. This gadget is fixed on the lower left corner of the blog if your just implementing it as is in the code. But you can change the position of the gadget which is to be learn on the tutorial below.

Adding The Slide Out Heart Bookmarking Gadget To Your Blog

1. Go to your Dashboard >> Design >> Edit HTML.

2. Find the below on your template HTML. Just use Ctrl+F and copy paste the code on the search bar to find code easier.

</head>

3. Copy and paste the code below directly above or before that "</head>" tag.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Now find this piece of code on your template HTML.

</body>

5. Then copy and paste the codes below directly above or before that "</body>" tag.

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>

IMPORTANT: The gadget is set to be in the bottom left corner of your blog but you can easily change the code in color red "bottom: 2%; left: 2%;". Change bottom to top for it to be at the top of the page and left to right for it to be on the right side of the page. You can also change the percentage to move the gadget from the bottom/top and left/right.

6. Finally you can save your template.

Check it out! And you will be amazed by this great gadget. Drop your questions on the comment box below.

read more

Thursday, March 8, 2012 -

Blogging, Earn Online

0 comments

3 In-Text Ad Networks A Blogger Must Try

There's a lot of In-Text Ad Network to try with. This kind of advertising may annoy some of the visitors of your site but it is a good way of monetizing your site traffic. Some say it's not good to have In-Text Advertising on blogs because visitors might end up leaving your site without checking it out. but in my opinion, it does not cause any problem as long as your content is what the visitors are looking for. They don't give attention to this small pop-up when the mouse hover the text. So I as well us In-Text Ad Network in this blog.

Try some of the In-text Ad Networks looking for publishers like you!

Infolinks.com

Infolinks In-Text Ad Network is the most reliable and proven to be giving a good rate for clicks. They're one of the leading In-Text Advertising company known among bloggers. Easy to apply as publisher and prompt payments via your selected payment process.

Kontera.com

Kontera is another In-Text Ad Network to try. They're are one of the pioneers in the In-Text Ad Networks if I'm not mistaken as I heard a lot about them when I started blogging. Have also good rates on ad clicks and pays on time.

Intectclick.com

Intentclick In-Text Ad Network is relatively new in the industry. It is a must try among bloggers who focus on blogging topics about coupons, discounts, sales and whatsoever because of the $0.07 flat rate they give per click. Isn't that a great deal? Just imagine to have a thousand clicks per day and how much will you make from Intentclick Ad Network is an easy $70 per day. Try it out!

read more

Blogging

0 comments

Making Your Blog Load Faster

Blog load time is one of the problems among blog owners. As much as possible we want o load pages on our blog faster to please blog visitors s they browse those pages. But unfortunately we can't avoid this thing to happen. What we can only do is minimize or lessen the blog load time by considering some factors.

How To Make Your Blog Load Faster?

One of the factors to consider in making your blog load faster is your blog widgets. Widget makes a contribution on the slow blog load, specially those widgets which has external links on it. This kind of widgets are customized not like the "easy install" widgets available in your blog platform. Usually, people who customized these widgets includes their links on the codes which makes the blog load time slower because they are external links to crawl. So as much as possible, remove the unnecessary widgets on your blog.

Another factor is blog advertisements. Of course bloggers want to monetize their blogs that's why they put ads on it. But as what I've said, external links slows blog load time and advertisements and banner ads are some of those. So better choose an advertising network that does not slow our blog load time.

And lastly, you can enhance your blog load time by compressing the CSS codes of your blog template. The bigger the size of the CSS codes, it contributes more on blog load time. That's why simply blog design loads faster than that of a customize and premium looking ones.

There are more factors to consider like your blog hosting and platform and the same time there's a lot of software to remedy this problem out there but of course you have to spend some for that.

read more

Tuesday, March 6, 2012 -

Blogger Tutorial, Page Navigation

0 comments

Add A Stylish Page Navigation Feature On Blogger

A Page Navigation Feature is very important for every blogger or wordpress blog user, and we can create it easily with stylish and attractive design. Page navigation for wordpress blog is vital, the navigation links allow search engine to crawl more links to the site interior thoroughly. So this is good for Search Engine Optimization. And for blogger, even though blogger use different kind of site navigation - by searching method, but the page navigation provides easy way for user to access site contents. By this point, page navigation for blogger has a quite important role to make the site User Friendly.

This tutorial is about adding a stylish page navigation feature on blogger. It's quite simple to add page navigation for blogger, just follow the easy steps below.

Adding Stylish Page Navigation

1. Go to your blogger Dashboard >> Design >> Edit HTML.

2. Find the code below

'data:label.url'

and replace the code in step 2 with the code below

'data:label.url + "?&max-results=6"'

Note: If you found more than one code in step 2, you may replace all codes found so it should limit contents in search navigation, archives, and labels. The number 6 shows limitation of how many contents per page will show, then you may change it to your liking.

3. Now this next step is adding the codes for the style of your stylish page navigation. You can found the code below corresponding with the style of navigation page.

Find the code below

</body>

and just above the code in step 3, paste the codes of your selected stylish page navigator.

Graylite Stylish Page Navigator

Get Code

BlackMamba Stylish Page Navigator

Get Code

DarkBlue Stylish Page Navigator

Get Code

SweetOrange Stylish Page Navigator

Get Code

GreenRuby Stylish Page Navigator

Get Code

Configuration: In the downloaded codes you have to change numerical values the same as the maximum post you want to show on every page. See the codes below.

<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

in the code, the numerical value 6 is the same as the max results you can see in the code in step 2.

Your done! Check out your new page navigator now.

read more

Sunday, March 4, 2012 -

Blogger Tutorial, Gadget and Widget

1 comments

How To Add Google Translate Widget On Blogger

Not every blog visitors can understand or read "English" or they can read but not that much. That's why Google made a service on translating any online document in English to a certain language. Google translate feature has been out for quite some time and a variety of tutorials are also out there for you to have this Google service. This post is about a Google Translate widget for bloggers. An easy set-up widget intended for your blog readers.

Adding Google Translate Widget On Blogger

1. Go to your Dashboard >> Design.

2. Click on "Add a Gadget" and select HTML/Javascript on Sidebar or Footer Widget.

3. Copy and paste any of the codes below which will fit to your blog need. And your done.

Single Row Widget Codes:

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:235px; margin: 5px 0 5px 0;">


<div align="center" style="width:auto;">



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.smashingnotes.blogspot.com" target="_blank">?</a> <a href="http://smashingnotes.blogspot.com/2012/03/how-to-add-google-translate-widget-on.html" target="_blank">Grab this Widget</a></small><br/>

</div>

Double Row Widget Codes:

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:180px; margin: 5px 0 5px 0;">

<div align="center" style="width:auto;">



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a><BR/><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>




<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.smashingnotes.blogspot.com/" target="_blank">?</a> <a href="http://smashingnotes.blogspot.com/2012/03/how-to-add-google-translate-widget-on.html" target="_blank">Grab this widget</a></small><br/>

</div>

Single Column Widget Codes:

<strong> Google Translate</strong>™<br/>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>


<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>



<BR/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>



<br/>


<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.smashingnotes.blogspot.com/" target="_blank">?</a> <a href="http://smashingnotes.blogspot.com/2012/03/how-to-add-google-translate-widget-on.html" target="_blank">Grab this widget</a></small><br/>

</div>

Hit the comment box if your having any problems implement the widget.

read more

Blogger Tutorial, Subscription Box

0 comments

Adding A Stylish Subscription Box On Blogger

I know you would love to see your blog readers rise to a certain number. This would only be possible and encourage visitors subscribe on your blog if they can see a stylish subscription box somewhere on your blog. Subscription box is mostly located on blogs sidebar or somewhere under post body. But I would suggest putting it under every post so that readers will directly see the stylish subscription box after reading a certain blog post of yours.

This stylish subscription box is designed for bloggers that don't like adding the default blogger subscription box which is quite very simple. The instruction will leads you on putting the subscription box under every blog post.

Adding Stylish Subscription Box

1. Go to Dashboard >> Design >> Edit HTML.

2. Click on the Expand Widget Templates.

3. Find the code below

<data:post.body/>

and paste the codes below just after the code in step 3 ..

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=SmashingNotes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VxQ7AnaDm1IVJ-EVom277RTr_zYGclwEkl0921Sc-qDz8oJPEzZHbWUf1Uu3biB0bm4uOAqlsXo95yxOgpYiaD_AT1tjZ5J_aeqVkeFdpQMAuXJNBsmzVai03lD_0CqdkDVvmjphmy0/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' style='width:176px;height:18px; background: #ffffa0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEQJt6_3Um119ZUr3ptolZLXyJ39qxNDjJzYBkRFEut5yiOyIjWy22cttnWfeKH8YsgeQ2apvPjeu7RsXmDaJF-EACEpOW63qDrPgjrmRkgZhZc0n79pFu_R2kUv9nmY5kaSpiJ5fQ7_V/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='SmashingNotes'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/>
<center><i>*Please click on the confirmation link sent in your Spam folder of Email*</i></center>
</form>

IMPORTANT: You have to change "SmashingNotes" in the code above with your feed ID.

Your done! Check your stylish subscription box now. Take note that you can put this anywhere on your blog. If you wish to put the subscription box on the sidebar, you just have to copy the code and paste it on a HTML/JavaScript Gadget. And you have to change the width of course to fit your sidebar width.

If your having problem implementing this on your blog template HTML, just hit the comment box and we'll find a way to that problem.

read more