Multi Column Footer Widget For Blogger –The Hot!




Multi-Column-Footer Widget For Blogger

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.

See the widget at the bottom of the following Demo blog,

Live Demo

 

How To Add the Multi Column Footer Widget To Blogger?

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

  1. Go To Blogger > Design > Edit HTML
  2. Backup Your Template
  3. Search for ]]></b:skin>
  4. Just above ]]></b:skin> paste the code below,

/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

 

       5.    Now search for </body> and paste the following code just above </body>

 

<div id='lower'>
<div id='lower-wrapper'>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


<div style='clear: both;'/>
</div> </div>

      6.   Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

image

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

1.  In order to reduce or increase the overall width of the widget simply change width: 960px;

2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.

After you have added the fifth column then remember to change width: 23%; with width: 17%; 

You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

 

That’s it! Enjoy :D

Wishing you all a Happy New Year 2011 full of love, joy and just Happiness. Peace and blessings :)

Add Customized PayPal Donate Button Below Blogger Posts




donate Below every post at “MY Blogger Tricks” you have seen a PayPal donate button customized with some Author description next to it. It’s indeed a wizard tool that helps you tremendously with your Blog’s revenue. Some people are really generous and they do help new bloggers and keep them motivated with their precious donations. Some great people have even donated us $20-$25 just for making them smile. :) I had kept this little PayPal donation code for my premier services but I thought it would be nicer if I share it with all those who wish to go forward. See a screen shot below,

 

 

paypal-donate-button

How To Get the PayPal Donate Button Code?

Kindly follow these steps,

  1. Log into PayPal
  2. Click The Merchant Services Tab and then select Donate Option under Create Button

Paypal--1

 

    3.  Then Fill the form with relevant details as shown below. Leave step-2 and step-3 as default.

Paypal---2

     4. Hit Create Button

     5.  Click Remove code protection Link in order to simplify the code. Its completely safe even this way.

paypal--3

       6.  Copy the code and jump to the next part of the tutorial below.

 

How to add Customized PayPal Donate Button To Blogger?

Note:- Before adding the customized code shared below to blogger if you wish to try it on MBT HTML Editor and customize the look then its not a bad idea. :)

As usual I have tried my best to keep it simple. So here we go,

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Check the Expand Widget Templates box
  4. Search for data:post.body
  5. Just below it paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <table border='0' cellpadding='2' cellspacing='0' width='590'><tbody>
      <tr>
        <td><div style='border:5px solid #37BD07; padding:5px 10px; margin-right:5px;'>  <br/> PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE
</div> </td>

        <td>
          <p align='justify'><font color='#2FAA2F'><em><strong>Respected Readers:</strong></em></font>
                  <br/><em>WRITE YOUR SHORT REQUEST MESSAGE HERE</em></p>
       </td>
      </tr>
    </tbody></table>
</b:if>

Replace PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE with your PayPal code that you got earlier. And replace WRITE YOUR SHORT REQUEST MESSAGE HERE with something that may catch reader’s attention. You can get an idea from my request message.

  6. Save your template and visit your blog and see it hanging in action :)

How To Customize The Code?

  • To Change the width of the widget change the value width='590'
  • To Change the border size and colour change border:5px solid #37BD07

That’s it!

Please not that if PayPal is not available in your countries then you can use Donate button of any Online account that you may have. If you needed any help just let me know. If this tutorial helped you a little then kindly consider contributing a small donation. :)

How to Create a Table Of Contents Page For Blogger?





The hosting server where I saved the JavaScript is down. So I have updated the Last code so please use the updated one.




Table-of-contents-for-bloggger You have seen that I have created an automatically updated table of contents page that shows the links to all posts published so far at this blog. This widget displays all your posts category wise and really saves time. I was previously adding new links manually to the Blogger Tricks page but as soon as I came to know of this great widget from Abu Farhan I instantly converted to it. This widget will also tell visitors that which posts are new and which are old. I have modified the CSS in order to make it suit your blog appearance.


Please first see a Demo Table Of Contents Page and play with the widget to see what is so exciting about it.




Follow the steps below to create a TOC page for your blog



  1. Go To Blogger > Design > Edit HTML

  2. Back up your template

  3. Search for ]]></b:skin>

  4. And just above it paste the CSS code below,



/*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}

.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}

.list-ganjil{
background-color:#F6F6F6;
}

.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7#438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

     5.   Save your template and now create a New Page (not a new Post).

     6.    Give Your new Page a relevant title like “XYZ Table Of Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,

UPDATED CODE:




<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.themobilehub.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>



See a screenshot on how things will appear,

Table-of-contents

Now simply replace http://www.themobilehub.blogspot.com with your Blog URL and hit save. View your new page to see a beautiful Table Of Contents with a nice drop down effect.


Customize The TOC widget


By default I have kept the Category background in active colour mode to appear as blue and inactive as dark gray as shown below,

Customize-TOC



If you want to change the colour of the Active mode then simple change #9dc2e7 and #438cd2 . Here #9dc2e7   refers to a lighter shade and #438cd2 refers to a darker shade colour. So whatever colour you wish to use simply replace #438cd2 with your prefered colour and #9dc2e7  with the lighter shade of your prefered colour.

You will find our Colour Generator Tool useful in deciding a colour selection.


That’s it!

I hope you will find it really useful. If you find anything unclear then feel free to ask for my assistance. Peace out! :)

Add Drop Shadows to Images and Expand them on Mouse Hover




Image-Drop-Shadows CSS is a fun thing to play with. With the growing development of cascading style sheet and with the accepting compatibility of new browsers, web designing is becoming more and more creative. We once used Photoshop to manually add drop shadows to images but now thanks to CSS3 you can add drop shadows to all your images automatically. We will learn today how to minimize the size of large images and how can we make them expand to their original size on mouse hover. I am sure you will love it :)

Please see a demo first,

Live Demo

 

How To add Drop Shadows and Enlarge Images on Mouse Hover?

The methods are really simple.

  1. Go to Blogger > Design > Edit HTML
  2. Back up your template
  3. Search for ]]></b:skin>
  4. Just above ]]></b:skin> paste the following code,

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}

.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

 

If you wish to further decrease the image size then decrease 0.7 or if you wish to further fade the image then decrease 0.5

You are almost done. Now when ever you want the image to appear with this effect, simply use this code,

<div class="MBT-CSS3">
<img src="Image URL Goes Here" />
</div>

 

Upload your image to Blogger editor and replace Image URL Goes Here with your image link. You are done. Now visit your blog to see the effect working in action and yell out Bravo! :P

If you wish to add this effect to another image just keep on adding <img src="Image URL Goes Here" /> before </div>

This effect is compatible with latest versions of Mozilla, Safari, Opera, Chrome and as usual not that effective with boring IE. I just hope you liked it.

Add Facebook Like Button, Retweet, Stumble and Digg Counter Buttons To Blogger




social-media Ever expected to add the best social media buttons all at one go? Well today’s Widget is not just a smart one but it will surely increase your blog Traffic tremendously. The widget includes Facebook Like Button which is highly appreciated throughout the blogosphere and our favourite the retweet button, Stumble and Digg Counter Buttons. All these buttons are eye catching so the visitors would love clicking them and thus bringing you more and more traffic by sharing your tutorials with people in their social media networks. You can see these buttons in action just under my post titles. So how do we add them? Here we go –>

Demo Screenshot,

social-media-buttons

How to add Social Media Buttons To Blogger?

The method is as simply as throwing a peanut in air and swallowing it. =p Simply follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Check the Expand Widget Templates box
  4. Then click Ctrl + F and in the browser search box paste this,

data:post.body

    5. Just above this code paste the giant code below,

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>

<td>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</td>

<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>

<td>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px;  width:100px; height:20px;'/>
</td>
</tr>
</table> </b:if><br/>



 

6.  Save your template and see your blog decorated with some best social media buttons.

 

That’s All!

If you liked the tutorial then kindly be generous enough to liking it :)

Ps: Please Respect copyrights.

Create Slideshow In Blogger With Navigation - V2




A More Updated version can be found here -> jQuery Image Slider For Blogger - V3


 Blogger-Slideshow Last day I shared a simple tutorial which tells how to a create Slideshow For Blogger. Today we have yet another more advanced slider that has some awesome effects added to it. You can navigate between images and the slideshow has opacity plus slice image effects. All adds up just more spice to the slideshow. This slider is created by dev7studios.com and modified by us. Kindly have a look at the demo before we may start learning how to create this new Jquery slider.


Live Demo

 

PS: If you have slow network connection then kindly have patience till the slideshow loads.

How to add the Slideshow to blogger?

The methods as usual are more easy than you can imagine. Follow up,

  1. Go To Blogger > Design
  2. Choose Add a Page Element
  3. Then choose HTML/JavaScript widget
  4. Inside the widget paste the code below,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<style>
#slider {
    position:relative;
}
#slider img {
        position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fW5fpc0cTy3UrvNU_gwUdkt2xLJSJoX_jhft-kxwPPZuzxlX0RO_HV5ptJ5NiFSRgn4V29VzMNE98BUAwwmMQGBRfKOjr6BNDdVPdn_QAdgzIl-mqaW_YU7ZwUOiAZCh4-xTVmjmQlI/s400/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3kAao67nIQ_7M-Nm5_aKEVbvzAT5NT-6hx4n5uPT_DoemNcZUV9BuhL5nmaS0C83P-cMe6DvWgBvMyUeJqV0sS3_66h5NtnM2QxpaiUN3GASO8byeEfVIzt1M9Po-sBa1RKJMvI5Rns/s400/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size:16px;
    padding: 10px 0px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

.clear {
    clear:both;
}

.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}

.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}

.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
</style>

<div id="slider">


<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="Description Goes Here" />

<img src="URL Of Image" alt="" title="#htmlcaption" />

</div>

<!—Write Descriptoon With Links In this Part—>
<div id="htmlcaption" class="nivo-html-caption">
Cool na? :) Now Learn How to create one by <a href="http://wwww.themobilehub.blogspot.com">Clicking here</a>
</div>


<br/>
<br/>

How To Customize the Slider?

Of course its fun to customize it first using MBT HTML Editor :)

Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"

If you wish to add effects to text or use a link then use title="#htmlcaption"  instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.

Note:  Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial. Photoshop Image Editing Basics For bloggers

How To add More Images?

To add another image simply paste the code below just above </div>

<img src="URL Of Image" alt="" title="Description Goes Here" />

That’s it! Enjoy :)

How To Create Stunning Image Slideshows In Blogger? - V1




A More updated version can be found here -> jQuery Image Slider For Blogger - V3

Blogger-SlideshowWell this is surely gona cheer up us all. After a lot of struggle a simple coded Slideshow came across my eyes while reading Boban KariÅ¡ik’s article on Jquery Slideshow. The code that he created is in fact plausible and after tweaking a portion of the CSS and some HTML provided by him, I was able to create a compatible version of the Slide Show for Blogger. Kindly view the demo before we jump at the tutorial.


Live Demo

 

How To Add Jquery SlideShow To Blogger Templates?

I have tried my best to make the code installation as easier as possible. You just need to copy the code and paste it in the HTML/Javascript widget. Thats it!

  1. Go To Blogger > Design
  2. Choose Add a Page Element
  3. Then choose HTML/JavaScript widget
  4. Inside the widget paste the code below,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#MBT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>

<style>

#MBT-slider {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}

#MBT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}

.MBT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;

}

.MBT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}

.MBT-sliderImage span a {

text-decoration:underline;
color:#FE6602;
}

.clear {
   clear: both;
}

.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}

</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<div class="clear MBT-sliderImage"></div>
</ul>
</div>

<br/>

 

How To Customize The Slideshow Code?

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to bottom if you want the slider to appear from right then change it to right and so on. If you wish you can set all sliders to bottom or top or to any position you wish.

If you want to slow down the speed with which the slider come and go then set timeOut: 3000 to a higher value like 4000 or 5000.

The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes  width: 590px and height: 335px You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. You can play with this part and all other parts using our Magic tool i.e MBT HTML Editor

How To Add More Images Or Remove an Image From the Slider?

To add an extra image just above <div class="clear MBT-sliderImage"></div> add this code,


<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

Since you now know how to add an image then you will have certainly figured it out how to remove an image from the slide. I leave it on you. I know you guys are no less than Eienstein! =p

That’s All!

Click here to see a Demo at Boban KariÅ¡ik’s website 

I just hope you may find the tutorial useful and worth trying. If you find anything unclear then kindly do not hesitate to let me know. Peace out! :)

Nokia updates Ovi store: much appreciated




Well, finally Nokia updated the Ovi Store in a big way. Using the Ovi Store on my 5230 use to be a hassle. When I knew what I was looking for, there was no problem, but when I looked for something new.... well that was a challenge. You know when you look at the apps list and you press the "Load more items" button, then you scroll down, and press the same button again... Well let's say that after doing that a few times, you finally find some app that sounds good. So you want to check it out and you go into the description of that app and you either install it, or you don't... Well, when you press the Back button, SURPRISE!! You're on top of the apps list, and you have to scroll several screens down to get back where you were before. That's gone with the new Ovi Store update. Now when you press back you go exactly where you were when you decided to check that app out. So you can continue looking for more stuff.
Another thing is that now you get a 60 days offer to get some premium apps for free. I got Doodle Jump, Shazam Encore and Farm Frenzy for free, which is very cool.
Another thing I noticed is that many premium apps have now a Lite version which is free. They are pretty limited, but it's better that just a few days of trial.
Well, this update is certainly welcomed and long awaited.
Good job this time Nokia!

How to use Nokia N8 on holidays




First of all, I want to say that I use Ovi sync religiously, to synchronize everything(contacts, calendar, notes). The synchronization saved me when my phone had to be reflashed at Nokia care. I was up and running in a few minutes thanks to the synchronization features. Now on to the N8... I like to stay in touch with my friends trough Facebook, so in the holiday season, I roam the gift stores and take pictures of interesting gifts, and upload them to Facebook instantly using the official app. Then I post messages on the walls of my friends who are interested in these special findings. I send pictures to my wife and other people I know, if I know they're looking for something I find. I use my phone to take pictures and videos of my baby boy when he starts "acting up" :) and shared them via Facebook or upload them on Youtube so all my friends can see him. I also take videos of my colleagues playing various Wii or PS games during lunchbreak, Guitar Heros featuring programmers is a bliss :). I would fill the N8 homescreens with all the widgets that I'd like to use like communities, weather, rss feeds, phone notifications, because I'm the kind of person that doesn't want to miss anything that's happening. I use Nokia situations(best app I've seen this year) for any situation possible. I've setup a profile for when I'm at home (using the GPS locator, coolest thing ever), for overnight, meetings and for when I'm visiting someone.

That's how I'd use the N8, besides the daily Ovi Maps useage, Point and Find augmented reality and other God knows how many apps I use every day. I should tell you that I charge my phone almost twice a day :D because of this heavy usage, so the N8 would really come in handy, have more battery life than my Nokia 5230.

That's it :)