Best Urdu Training

Add a Popular Posts Gallery just above your Blogger posts

<div dir="ltr" style="text-align: left;" trbidi="on">
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3J1uEnrxEqr9Oh_SOrY3HLBQV4xpu5FFFiyJu3DcXKmG9pi4SeTByFy6N4-iTRfCGZTjR3zyp8kZiecY7Ax35NYU6TJoG2EOm0CJ7bAgyq1Me9rczy961eM2WJMkoCdSU9s4huaTJGyp7/s1600/popular+posts+blogger+blogspot+widget+with+jQuery+effect.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Let's start adding it Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps: 1. Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box</div>
<ul style="border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"></ul>
<div class="separator" style="clear: both;">
2. Type or paste this piece of code inside the opened search box:</div>
<blockquote class="tr_bq">
 ]]></b:skin></blockquote>
Note: you might need to click on the arrow next to it and after try to find ]]></b:skin> again.3. Just above/before it, add the following code:  
<blockquote class="tr_bq">
 #gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaU2p_ib4e1AkJ3VaR3oP8JuuVXYebIG4ZBb64pyi1nO-4D8gRnIIXHw94rbuzbDsUeeJrESCsnYKcjSAEkicdgrlATt7Yobppqai_tNurKk0rUaDJXufmYCbulyRV7aGq4yarcIeOpV-D/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}</blockquote>
 
Note: you can adjust the size of gallery, changing the values in red (590 and 126). 
 
4. Now search for the following piece of code: 
<blockquote class="tr_bq">
</head> </blockquote>
 
5. Just above/before it, add this code: 
<blockquote class="tr_bq">
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[stepcarousel.setup({galleryid: "gallery",beltclass: "belt",panelclass: "panel",autostep: {enable:true, moveby:1, pause:6000},panelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25S80aKQQ3ij2fkzY-XWRjcniCkbawAnQkP3-dXMwmuSnfL6iJmoIpBhrCH2aI1SHrw8qntLnKQH7POOxfPlgA3qPf83K0RVZ_M0dYxyztH_iWqSONPy6qaVPCcmMBL1b0tLx0VAahHb9/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhankRdMTmXqvRO2kbMOcr6fNunVkOX9mib_CRBBaNyA5rqnuGIFvcIef1-dZkqXiB1ykyrDHZOXC2gadfqet6Ns6bFrya9nLnoxwnCXLVUxQg-WL9nKnvAPZ6GzkHCsk7ywrTBzwrYVqbd/s1600/next.png", 2, 36]},contenttype: ["external"]})//]]></script> </blockquote>
 
Next thing to do is to place the widget just above the blogger posts. 
 
6. Search for this code: 
 
<blockquote class="tr_bq">
 <b:section class='main' id='main' showaddelement='yes'> </blockquote>
 
...or if you can'find it, search for this one: 
<blockquote class="tr_bq">
 <b:section class='main' id='main' showaddelement='no'></blockquote>
 
7. Just below it, add the following code: 
<blockquote class="tr_bq">
 <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>  <div id='gallery'>   <ul class='belt'>    <b:loop values='data:posts' var='post'>     <li class='panel'>      <b:if cond='data:showThumbnails == &quot;false&quot;'>       <b:if cond='data:showSnippets == &quot;false&quot;'>        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>       <b:else/>        <div class='item-title'>         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>        </div>        <div class='item-snippet'>         <data:post.snippet/>        </div>       </b:if>      <b:else/>       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>        <b:if cond='data:post.thumbnail'>         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>        <b:else/>         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIKaz4_TaDWHALYxWw3eEs_rCdA37RlwJe8dElR2vUquLBp8yOYmOzd_GlihRGYQK0JO5zhECxweDXm743yPdMlLez05p3wuhoSyPWng3E_Sf_MMICskWPmv3-34TnqqcPDQs7Z38wVRk/s1600/no-image.PNG'/>        </b:if>       </a>      </b:if>     </li>    </b:loop>   </ul>  </div></div></b:if> </b:includable></b:widget> </blockquote>
 
Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also. 
 
8. Preview and if everything is ok, Save the Template. 
 
 </div>

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. I...

How to add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.</div>
 
Demo 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1y0_W2z83yiwmyPjT5S0bESXWs6xGmgH3nAr4dcCO8OzAZutm0zNenLQZmH5iz60bNM-AbjhmLhdiSvJjpL39UVkQfjk0Q5WxE38dYL5apSklrjhszsE5XruSoXJARj2d6_DMa7itcjO/s1600/Capture.PNG" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
How to put Go Up and Go Down buttons using the jQuery slide effect</div>
 
Step 1. Go to Template, click on the Edit HTML button 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ-ObF0lH-QjjCxdvw33i8fleKhbxbGxKPup14HCFfhE7VnjA43wavF48sZFHswE8nj2mjnMEBeG3FmGKjrJQBvrLcFpbakl8dhSNarmjYpXLxpzVgWPBPJOqqvfrsVek04dfERqGO6MJ/s1600/blogger-template-edit-html.png" width="400" /></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; text-align: center;">
</div>
 
Step 3. Copy and paste the following piece of code inside the search box in order to find it: 
<blockquote class="tr_bq">
 ]]></b:skin></blockquote>
 
Step 4. Just above ]]></b:skin> paste this one: 
<blockquote class="tr_bq">
 /* Up and Down Buttons with jQuery 
----------------------------------------------- */ 
.button_up{ 
padding:7px; /* Distance between the border and the icon */ 
background-color:white; 
border:1px solid #CCC; /* Border Color */ 
position:fixed; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWVXSY419_SF1xfmYjd4yH9J7h6-MMj0oPhyQlU_5YqK-vR639NK0VxiIn-FamfI72uwlQgSoZ-eG-v9nXsXaJZfUMNB1pHslmeQK_JDA5S3QWslgplAgJyt2cc7rKF593QLDYeGRQ98/s16/arrow_up.png) no-repeat top left; 
background-position:50% 50%; 
width:20px; /* Button's width */ 
height:20px; /* Button's height */ 
bottom:280px; /* Distance from the bottom */ 
right:5px; /* Change right to left if you want the buttons on the left */ 
white-space:nowrap; 
cursor: pointer; 
border-radius: 3px 3px 3px 3px; 
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} 
.button_down{ 
padding:7px; /* Distance between the border and the icon */ 
background-color:white; 
border:1px solid #CCC; /* Border Color */ 
position:fixed; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikW9ImrIMVw7lHNMyxsUlM6mgvrdn9t38TG8xe1mtQqCVzlmvTzoM7uj-74S-JmtazM1ozHVWsRKWXr8YadUYSbNj5rkO40n7oEdnk2aVF6eL0leOcEjWpkWJvbHkXsh_gtIkcW2Oo2Ek/s16/arrow_down.png) no-repeat top left; 
background-position:50% 50%; 
width:20px; /* Button's width */ 
height:20px; /* Button's height */ 
bottom:242px; /* Distance from the bottom */ 
right:5px; /* Change right to left if you want the buttons on the left */ 
white-space:nowrap; 
cursor: pointer; 
border-radius: 3px 3px 3px 3px; 
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} </blockquote>
 
Note:  - in green are some annotations that explains what styles you can modify on their left side. 
           - You can change the arrows by changing the URLs in blue. 
           - To change the buttons background color of buttons, change the white text with your color  
 
Step 5. Now search (CTRL + F) for the following tag: 
<blockquote class="tr_bq">
 </body> </blockquote>
 
Step 6. And just above it, paste the code below: 
 
 
<blockquote>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<div class='button_up' id='button_up' style='display:none;'/><div class='button_down' id='button_down' style='display:none;'/> 
<script>//<![CDATA[(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); 
$(function() {var $elem = $('body');$('#button_up').fadeIn('slow');$('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){$('#button_up,#button_down').stop().animate({'opacity':'0.2'});});$(window).bind('scrollstop', function(){$('#button_up,#button_down').stop().animate({'opacity':'1'});});$('#button_down').click(function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);} );$('#button_up').click(function (e) {$('html, body').animate({scrollTop: '0px'}, 800);} );});//]]></script></blockquote>
 
Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. 
 
Step 7. Finally, Save your changes by clicking on the Save template button. Enjoy! 
 
 
 </div>

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many artic...

Making a gadget visible only to the blog administrator

<div dir="ltr" style="text-align: left;" trbidi="on">
And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready. 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBsVLug_J4OBxDxh0cSnt7TGHt_6Lx8hrVX7S4ddxcYN9Dwev-BJPvx27Pps0hEDtIbEqQWIv5n5k9FWGjbN7I9e7mrPudPxPyzCvjxYNV-slQq4dXvh5tDIZ9SnMEwprrF8mke9JXoku/s1600/blogger_widgets_visible_only_to_admin.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
The procedure is simple, we just have to add two lines to our gadget that we want to hide.</div>
 
First thing to do is to go to Template > Edit HTML and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget. 
 
For example, in a HTML/Javascript gadget, we will see a code like this: 
<div class="separator" style="clear: both; text-align: left;">
 </div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
 <b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div> 
<b:include name='quickedit'/><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"></b:includable></b:widget></blockquote>
<div id="adsmiddle19061515422989240128" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; margin: 10px auto;">
</div>
<div id="adsmiddle29061515422989240128" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red just after <b:includable id='main'> 
 
And the second red code just before </b:includable> 
Note: to look inside the widget's code, click on the sideways arrow next to the widget's id. 
 
And with that the gadget will be hidden for readers except you. 
 
 </div>
</div>

Making a gadget visible only to the blog administrator

And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Su...

Orbit - jQuery Image Slider Plugin For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
Today I'm sharing with you another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider called Orbit is a lightweight jQuery plugin for displaying multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some bullet icons indicating the current image that we are viewing and on the upper right side is the pause option and a timer letting the user know when the next image will be displayed.</div>
 
The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images. 
 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqilIquUrNsTINLSX9uQQphSzmfBSJM5pFhe7RoMbHnRLDXxC1l3X9ZpWwhk0k1rimQHRAm_iXUkguN8X0VP-_WWXRPSsm5icbw-CF9QSMBynEtFgT9OZvGAnYdxuDbfCUiqTrW3hBHVzk/s1600/Untitled.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<h3 style="background-color: #f9f9f9; border: none; color: #555555; font-family: 'Istok Web', sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
How to add the Orbit Image Slider to Blogger</h3>
<div class="separator" style="clear: both;">
Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere and press the CTRL + F keys to open the blogger search box. Paste or type the </head> tag inside the search box and hit Enter to find it.</div>
 
Step 2. Just above the </head> tag, add the following scripts: 
<div class="separator" style="clear: both;">
 </div>
<blockquote style="clear: both;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  <script type='text/javascript'>$(window).load(function() {$(&#39;#featured&#39;).orbit({advanceSpeed: 5000,&#39;bullets&#39;: true,&#39;timer&#39; : true,&#39;animation&#39; : &#39;horizontal-slide&#39;});});</script> <script type='text/javascript'>//<![CDATA[/** jQuery Orbit Plugin 1.1* www.ZURB.com/playground* Copyright 2010, ZURB* Free to use under the MIT license.* http://www.opensource.org/licenses/mit-license.php*/ (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"></div>');var j=e("div.timer"),p;if(j.length!=0){var C=a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav">RightLeft</div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);//]]></script></blockquote>
<div class="separator" style="clear: both;">
</div>
 
 
Note: You can change the transitions speed between each image by modifying the 5000 value from the line in blue - a higher number will make the pictures stay longer between each transition. 
 
Important! If you have already a version of jQuery in your template, remove the line in red, otherwise the slideshow might not work. 
 
Step 3. Now it is time to add the CSS... find this tag: 
 
 
<blockquote class="tr_bq">
 <span style="background-color: yellow; border: none; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> ]]></b:skin></blockquote>
 
Step 4. Just above ]]></b:skin> add this code: 
 
<blockquote>
 #featured {height: 1px; width: 1px; overflow: hidden;} 
div.orbit { 
width: 1px; 
height: 1px; 
position: relative; 
overflow: hidden; 
} 
div.orbit img { 
position: absolute; 
top: 0; 
left: 0; 
} 
div.orbit a img {border: none;} 
div.timer { 
width: 40px; 
height: 40px; 
overflow: hidden; 
position: absolute; 
top: 10px; 
right:10px; 
opacity: .6; 
cursor: pointer; 
z-index: 1001; 
} 
span.rotator { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: -20px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QK2auf3n3dmlvl0LT5oXY1hgokkbRYI0BKaf25Z-eG3k40tpO3dv7axCmmDjFKxPgj2WlLxCLZvMc0V3Aha8-9Kpy0MxJxCWx-utsDBmLE8LEcurQ_coBlRdFK50-v0X2cOfLQxZu5Fp/s1600/timer-icon.png); 
background-repeat: no-repeat; 
z-index: 3; 
} 
span.mask { 
display: block; 
width: 20px; 
height: 40px; 
position: absolute; 
top: 0; 
right: 0; 
z-index: 2; 
overflow: hidden; 
} 
span.rotator.move {left: 0;} 
span.mask.move { 
width: 40px; 
left: 0; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9zkd0tUCIPOUZQ_xTL8ai8vxV6JOo2y4BQrOsyNFRozDONBf_2IBDO6F4G5qIV1LIbCfUcxX8ysFWhSUNa81lzsvD793Ahrfe3avlOIDt0Z2mmCWRiLpcRcAy7UNcMWJG6qjW6aEH6pu/s1600/timer-right.png); 
background-repeat: repeat; 
background-position: 0px 0px; 
} 
span.pause { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: 0px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMnvC3mKzCp_kJl4CpLR1bimhDomh8annUasF3_0fbRlpPoD4Kck28G5jsNx8pgO72IUrYseNxSnTzqUNG-u6L6lyiUiK38W30ZXY5cnTPxA1KSAEO1T-v8sh6DlTpTeXaEXtpRpthKAy/s1600/pause-icon.png); 
background-repeat: no-repeat; 
z-index: 4; 
opacity: 0; 
} 
div.timer:hover span.pause, 
span.pause.active, 
div.timer:hover span.pause.active { opacity: 1; } 
div.caption { 
background: #000; 
background: rgba(0,0,0,.6); 
width: 100%; 
z-index: 1000; 
position: absolute; 
bottom:-100px; 
color: #fff; 
padding: 8px 0; 
text-align: center; 
} 
div.caption span { 
padding: 0 10px; 
font-size: 14px; 
text-shadow: 0px 1px 0px rgba(0,0,0,.8); 
margin: 0; 
} 
.orbit-caption { display: none; } 
div.orbit:hover div.slider-nav { display: block; } 
div.slider-nav { display: none; } 
div.slider-nav span { 
width: 33px; 
height: 33px; 
text-indent: -9999px; 
position: absolute; 
z-index: 1000; 
top: 43%; 
cursor: pointer; 
} 
div.slider-nav span.right { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajln0ZAc4Ani1FEIteEqZ-Q73IAAyEQlvsVdkLvo_jHJSQ8Av2aF1G3nlS-dHlDvPpYIQDMrAKt0eSxFbpWQOli4N4aW0HshTgDaaNMJGbUBxIySfkkpkYqfJeB8W-s0t4DjEL8gPGFnH/s1600/arrow-right.png); 
right: 10px; 
} 
div.slider-nav span.left { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumkkVQfRpx1fcqSVf3xhDPhTYdFW4XHdpkTgJw4DH7zeQQO35bGCLT8-pp1SqFsANbiHEWrP6u4ORACGsJ3TojtcQjjPJJX9hejdJCw_hYpy_slqB5mCxTL2FGV_MGz5Vg3Yf-kx8Kb2H/s1600/arrow-left.png); 
left: 10px; 
} 
.orbit-bullets { 
position: absolute; 
z-index: 1000; 
list-style: none; 
top: 10px; 
left: 7px; 
margin: 0; 
padding: 0; 
} 
.orbit-bullets li { 
float: left; 
margin-left: 5px; 
cursor: pointer; 
color: #999; 
text-indent: -9999px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkrzr5s92ObiOFrZk8wF4d8mJIel0t8X9La3tWkEdDR0IEWl_e1LCaOhkmobUo4rfXda5ktq26EG7pGVmfR4aj2in2sRNsK3pTpeZej64v11Dd7WxKBdTMIdtS1sydx9RB_DeQ-R9-t_4/s1600/bullets.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
width: 7px; 
height: 7px; 
overflow: hidden; 
} 
.orbit-bullets li.active { color: #222; background-position: -7px 0; } </blockquote>
 
<div id="adsmiddle15508894100442077280" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Step 5. Click on the Save template button to save the changes. 
 
Finally, we will use the code that displays the images. We have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog sidebar or below the header.</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; margin: 10px auto;">
</div>
If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post. If you want to add it in the blog sidebar/below the header, go to Layout, click on theAdd a gadget link > choose HTML/JavaScript from the pop-up window and paste the code inside the empty box: 
 
<blockquote>
 <div id='featured'> 
<a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. 
<a href="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL"><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo2' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo2'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">This is an example of description with links: <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Description Link URL' style='color: #09A7EA;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Helplogger</a> 
<a href="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL"><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo3' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo3' style='text-align:center;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. 
<a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo4' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo4'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">This is an example of description with links: <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Description Link URL' style='color: #09A7EA;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Helplogger</a> 
</div> </blockquote>
 
This code contains the images, links and descriptions for each image. In blue are the URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture which can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red.  
 
To add more pictures, add this HTML before the </div> tag: 
<blockquote class="tr_bq">
 
 <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo5' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo5'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. </blockquote>
 
Notice that each image and description has an identifier (id) - this identifier should be unique. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the rel attribute with the name of the id, that is rel="photo1". 
 
 </div>

Orbit - jQuery Image Slider Plugin For Blogger

Today I'm sharing with you another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. T...

ونڈوز ایکس پی کے خوبصورت تھیمز

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
1. "Embedded" Theme</div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CW-TZTUd4OeHYlY1VunG9O4AZ1o_kVMafKqFAstKYSOmuDI7ZkuXH8cKDaayoaVX0R-XxPMjMSX29pwAdOPXQlRII1wDyn8zdkYlrteh0DQJk6usHv8UT4BOoePcbPZLiT2fm8XP1QIE/s1600/Screenshot.png" /></div>
<div style="text-align: right;">
 </div>
<div style="text-align: right;">
 </div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gvdLh">Download</a> 
 </div>
<div style="text-align: center;">
 
2. "Zune" Theme 
 </div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYa0uIs65eg6bvPiRpJIxJifSpaaG16JVI1HTuxsSjrTlzHbP6krPEyLaHCjmocKKXYp2vTN5vPl4cz5GfbOEDEVinLok18WfyAV79r-GM0ZGHpdgEqXlzSiHm_gaqc6Tm0ymgA56PBpi/s1600/Microsoft-Zune-Theme_1.png" /></div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gvh1t">Download</a> 
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
3. "Royale Noir" Theme</div>
<div style="text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOff5U-W3IhLuOuIt-LbIqcV9EbaUIYQok_bPdK-nLcimxcX4UTjlMVebzto9QFGc1RiTWafWAHwUxOi5V9xz3WTGeh6u4O8fjH0fWoYjpIsALUA-ocwwFHROz0U6aHXVBDzI93mHHR2_z/s1600/royal01.jpg" /></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gviP3">Download</a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
4. "Royale" or "Energy Blue" or "Media Center" Theme</div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yZxQmf57q7KuA0caUJOcvl9xnYOcuH-MqrcJmx15a0iothyHsgYWs_DnpnHuTsDG7xrSTxFuC1NqF709x5E-HSOKiKjA1SLrSTe5HbVUAbaPAL0QTwgmyvpuCyCXetRtLstIcJvwH7-3/s1600/winxp-royale.JPG" /></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gvj0z">Download</a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="39" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOAILvH5U0FAVYBgahCCPog7edZ3HTAdl15W_T2u5zLAMa0QV_Pm4JB3-gjibgz8v8BBGJoUiLjRnaNZYWMTplvmaKFHHOxqoWTAaB0Eohw3e9JtR7ttr42Zip-pjZWA_oxPn-Q-9OA1v/s1600/xlu6ncek.gif" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
</div>

ونڈوز ایکس پی کے خوبصورت تھیمز

1. "Embedded" Theme Download 2. "Zune" Theme Download 3. "Royale Noir" T...

ون باس - Win Boss

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhDKOV52kEl9sBUh3isnPUIOUJf-kTJgRaCXoMuRehfdTLzE4MpTI8W9r-y5zOKG4QcHFjhlIl_q1XpeDscJlEpUGgs2UNoFapPylL6_b_BMIe8LtDk93_I6LBHaycU5K7p2ONVL5l3Ri/s1600/46335.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhDKOV52kEl9sBUh3isnPUIOUJf-kTJgRaCXoMuRehfdTLzE4MpTI8W9r-y5zOKG4QcHFjhlIl_q1XpeDscJlEpUGgs2UNoFapPylL6_b_BMIe8LtDk93_I6LBHaycU5K7p2ONVL5l3Ri/s1600/46335.gif" width="0" /></a></div>
<div style="text-align: right;">
ون باس - Win Boss</div>
<div style="text-align: right;">
اگر آپ کسی ایسے آفس میں کام کرتے ہیں جہاں یاہو مسینجر استعمال کرنا ممنوع ہے لیکن آپ پھر بھی اسے استعمال کررہے ہیں۔ اسی دوران آپ کے باس آپ کے پاس آکھڑے ہوتے ہیں۔ لو جی، آپ تو پھنس گئے....!! لیکن ٹھہریں، اگر آپ نے ہمارے بتائے ہوئے ون باس نامی اس سافٹ ویئر کو انسٹال کررکھا ہے تو پھر کوئی مسئلہ ہی نہیں۔ ون باس ایک باکمال ایپلی کیشن ہے جس کی مدد سے آپ چلتے ہوئے کسی بھی پروگرام کو پلک جھپکتے میں اسکرین سے غائب کرسکتے ہیں۔</div>
<div style="text-align: right;">
 </div>
<div style="text-align: right;">
دلچسپ بات یہ ہے کہ وہ پروگرام بظاہر بالکل بند ہوجاتا ہے لیکن درحقیقت وہ پروگرام صرف نظروں سے اوجھل ہوتا ہے جسے واپس ظاہر بھی کیا جاسکتا ہے۔ کسی پروگرام کو اسکرین سے اوجھل کرنے کے لئے آپ کو کی بورڈ سے چند کیز پریس کرنی پڑتی ہیں۔ بائی ڈیفالٹ یہ کیز CTRL + X ہوتی ہیں جنھیں تبدیل بھی کیا جاسکتا ہے۔ اوجھل ایپلی کیشن نہ صرف اسکرین، بلکہ ٹاسک بار، ALT + TAB سے ظاہر ہونے والی ایپلی کیشنز کی لسٹ ، حتیٰ کہ ٹاسک منیجر سے بھی غائب ہوجاتی ہے۔ جبکہ یہ سافٹ ویئر بذات خود سسٹم ٹرے میں ایک سبز رنگ کے آئی کن جیسا نظر آتا ہے جو ٹاسک منیجر کے آئی کن سے ملتا جلتا ہے۔ </div>
<div style="text-align: right;">
 
 </div>
<div style="text-align: right;">
 
 
 </div>
</div>
<div style="text-align: center;">
<a class="button big orange" href="http://adf.ly/gvXsV">Download</a></div>
<div style="text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="39" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOAILvH5U0FAVYBgahCCPog7edZ3HTAdl15W_T2u5zLAMa0QV_Pm4JB3-gjibgz8v8BBGJoUiLjRnaNZYWMTplvmaKFHHOxqoWTAaB0Eohw3e9JtR7ttr42Zip-pjZWA_oxPn-Q-9OA1v/s1600/xlu6ncek.gif" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
</div>

ون باس - Win Boss

ون باس - Win Boss اگر آپ کسی ایسے آفس میں کام کرتے ہیں جہاں یاہو مسینجر استعمال کرنا ممنوع ہے لیکن آپ پھر بھی اسے استعمال کررہے ہیں۔ ...