December 31, 2010

Multi Column Footer Widget For Blogger –The Hot!

77 Comments so far

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

December 29, 2010

Add Customized PayPal Donate Button Below Blogger Posts

52 Comments so far

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. :)

December 27, 2010

How to Create a Table Of Contents Page For Blogger?

156 Comments so far

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.mybloggertricks.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.mybloggertricks.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! :)

December 26, 2010

Add Drop Shadows to Images and Expand them on Mouse Hover

32 Comments so far

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.

December 24, 2010

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

74 Comments so far

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.

December 21, 2010

Create Slideshow In Blogger With Navigation - V2

82 Comments so far

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(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/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(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/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.mybloggertricks.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 :)

December 20, 2010

How To Create Stunning Image Slideshows In Blogger? - V1

72 Comments so far

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! :)

December 17, 2010

Google And DMOZ’s Warm Welcome And My Activities During The Long Break

27 Comments so far

hello-everyone! I offer my humble greetings to all loyal, valuable an highly motivating readers and contributors of MyBloggerTricks Blog. Its been a long time since I last posted and to be honest I was dying for this day to arrive. Its really tough to take all things along when you live in a world where you are surrounded with responsibilities from all corners. I started blogging in the year 2008 and my interest kept on increasing so much that I dedicated six hours daily to blogosphere and that was fun in its own. But today as I joined university and crossed my teenage, several responsibilities often slow down the posting process.

I opened my inbox after two months and was really shocked to have found so many unanswered queries and feedback. I humbly apologize all those who waited eagerly for a reply but could not receive any response from me side due to the most horrible and highly extended University Exams of my life! It was a 70 days long Preparation and Exams torture which I fortunately survived Alhamdulillah. :(

Keeping all things aside, what can be more shocking to an author than having lost valuable readership and ranking in the Online world. This was my biggest nightmare till last week but to our expectation I was shocked to have discovered everything the other way round! Amazingly not only did our readership have increased but the overall search engine ranking, blog traffic, blog publicity and not forgetting blog revenue have dramatically accelerated. MBT’s monthly page views, page bounce rates and number of daily unique visitors have increased. And I just don’t have words to thank all those who kept sharing our content with their fellow countrymen in different languages. I am thankful to Allah Almighty and then grateful to all of you who continuously kept me motivated with your amiable letters, emails and feedback. Thank you so much pals, it could have never been possible with you!

Do we have any Shocking Surprise?

Oh yeh we surely do. Just some months ago we announced that some pages of MyBloggerTricks blog have been finally added to the Largest human Edited Online Web Directory  and today to our amazement the homepage of My Blogger tricks has been finally added to DMOZ Directory in a category where only four blogs are listed along with the Mega Giant blogger and its an honour in itself. Search for “My Blogger Tricks” in the DMOZ search box and you will be driven to this,

 My-Blogger-Tricks-Listed-in DMOZ Directory

Google Gifted Us with A Hot Cheque!

Though I was not posting regularly but thanks to some loyal friends and readers the Traffic kept on increasing MashAllah and I just received a Cheque from Google through Western Union Cash and it felt really cool because I was running out of money and needed a better Computer to restart my blogging. Thankfully I have upgraded my system to Core 2 Duo now! :p

So What did we do during the Long Break?

Of course I can’t breath calmly unless I create or design something new and different. so during the Exam preparations and before it I was given the task of designing my University Department’s Annual Students Magazine. It was tough and hectic at first but as time passed, the experience turned really exciting. I designed around 50 pages out of 126. The Magazine includes my article and poem too. I have shared below a screenshot of my article on blogging,

what-is-blogging

If you want a readable version of the article above then kindly subscribe. The Article will be emailed to you instantly. Make sure you mention your Email ID in the comment box below once you subscribe. Current subscribers can simply mention their Email ID’s to receive the download copy.

Another project was designing a Premier Template with MBT’s copyrighted widgets, icons and goodies for a hacking blog i.e Rafay Hacking Articles The template was designed during EID Holidays and it turn out really interesting. To have a look at the template and read the author comments kindly visit this page –> Rafay Hacking Articles Redesigned

Now that was all for today. It was just a Hello post with little info about my activities during the long break that I took. I am back on duty and ready to share again some inspiring templates, Icons, goodies, widgets and some cool and useful CSS Tricks. Till then Prenez soin. Avoir un jour béni! (I am learning french BTW :p)