Best Urdu Training

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">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;">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.</span></div>
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;"><br /></span>
<b style="background-color: #f9f9f9; color: #3d85c6; font-family: 'Istok Web', sans-serif;"><span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Demo</span></b><br />
<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;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; border: none; color: #3d85c6; font-family: 'Istok Web', sans-serif; list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>How to put Go Up and Go Down buttons using <span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">the</span> jQuery slide effect</b></span></span></div>
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;" />
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 1.</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;"> Go to Template, click on the Edit HTML button</span><br />
<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>
<b style="background-color: #f9f9f9; color: #3d85c6; font-family: 'Istok Web', sans-serif;"><span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></b>
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 2. </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;">Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box</span><br />
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; text-align: center;">
</div>
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;" />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;"><span style="border: none; color: #0b5394; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 3.</span> </b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;">Copy and paste the following piece of code inside the search box in order to find it:</span><br />
<blockquote class="tr_bq">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> ]]></b:skin></span></blockquote>
<br />
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 4. </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Just above ]]></b:skin> paste this one:</span><br />
<blockquote class="tr_bq">
 /* Up and Down Buttons with jQuery<br />
----------------------------------------------- */<br />
.button_up{<br />
padding:7px; /* Distance between the border and the icon */<br />
background-color:white;<br />
border:1px solid #CCC; /* Border Color */<br />
position:fixed;<br />
background: white url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWVXSY419_SF1xfmYjd4yH9J7h6-MMj0oPhyQlU_5YqK-vR639NK0VxiIn-FamfI72uwlQgSoZ-eG-v9nXsXaJZfUMNB1pHslmeQK_JDA5S3QWslgplAgJyt2cc7rKF593QLDYeGRQ98/s16/arrow_up.png</span>) no-repeat top left;<br />
background-position:50% 50%;<br />
width:20px; /* Button's width */<br />
height:20px; /* Button's height */<br />
bottom:280px; /* Distance from the bottom */<br />
right:5px; /* Change right to left if you want the buttons on the left */<br />
white-space:nowrap;<br />
cursor: pointer;<br />
border-radius: 3px 3px 3px 3px;<br />
opacity:0.7;<br />
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />
}<br />
.button_down{<br />
padding:7px; /* Distance between the border and the icon */<br />
background-color:white;<br />
border:1px solid #CCC; /* Border Color */<br />
position:fixed;<br />
background: white url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikW9ImrIMVw7lHNMyxsUlM6mgvrdn9t38TG8xe1mtQqCVzlmvTzoM7uj-74S-JmtazM1ozHVWsRKWXr8YadUYSbNj5rkO40n7oEdnk2aVF6eL0leOcEjWpkWJvbHkXsh_gtIkcW2Oo2Ek/s16/arrow_down.png</span>) no-repeat top left;<br />
background-position:50% 50%;<br />
<span style="color: #38761d;">width:20px; /* Button's width */</span><br />
<span style="color: #38761d;">height:20px; /* Button's height */</span><br />
<span style="color: #38761d;">bottom:242px; /* Distance from the bottom */</span><br />
<span style="color: #38761d;">right:5px; /* Change right to left if you want the buttons on the left */</span><br />
white-space:nowrap;<br />
cursor: pointer;<br />
border-radius: 3px 3px 3px 3px;<br />
opacity:0.7;<br />
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />
} </blockquote>
<br />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note:</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">  - in </span><span style="background-color: #f9f9f9; border: none; color: #38761d; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;">green </span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">are some annotations that explains what styles you can modify on their left side.</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">           - You can change the arrows by changing the URLs in </span><span style="background-color: #f9f9f9; border: none; color: blue; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;">blue</span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">.</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">           - To change the buttons background color of buttons, change the </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">white</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> text with your color </span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 5. </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Now search (CTRL + F) for the following tag:</span><br />
<blockquote class="tr_bq">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></body></span> </blockquote>
<br />
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 6. </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">And just above it, paste the code below:</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<br />
<blockquote>
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></span><br />
<b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div class='button_up' id='button_up' style='display:none;'/></b><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div class='button_down' id='button_down' style='display:none;'/></b><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><script></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">//<![CDATA[</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">(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))}}})();</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$(function() {</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">var $elem = $('body');</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_up').fadeIn('slow');</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_down').fadeIn('slow'); </span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$(window).bind('scrollstart', function(){</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_up,#button_down').stop().animate({'opacity':'0.2'});</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">});</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$(window).bind('scrollstop', function(){</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_up,#button_down').stop().animate({'opacity':'1'});</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">});</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_down').click(</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">function (e) {</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('html, body').animate({scrollTop: $elem.height()}, 800);</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">} );</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('#button_up').click(</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">function (e) {</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">$('html, body').animate({scrollTop: '0px'}, 800);</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">} );});</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">//]]></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></script></span></blockquote>
<br />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note:</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> 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.</span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<span style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 7. </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Finally, Save your changes by clicking on the </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Save template</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> button. Enjoy!</span><br />
<br />
<br />
<br /></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">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif;">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.</span><br />
<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;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">The procedure is simple, we just have to add two lines to our gadget that we want to hide.</span></div>
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">First thing to do is to go to </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Template > Edit HTML</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> 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.</span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">For example, in a HTML/Javascript gadget, we will see a code like this:</span><br />
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <b:widget id='HTML1' locked='false' title='' type='HTML'></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><b:includable id='main'></span><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;"><span class='item-control blog-admin'></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><b:if cond='data:title != &quot;&quot;'></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><h2 class='title'><data:title/></h2></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></b:if></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div class='widget-content'></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><data:content/></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></div></span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><b:include name='quickedit'/></span><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;"></span></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></b:includable></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></b:widget></span></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 <u>just after</u> <b><b:includable id='main'></b><br />
<br />
And the second red code <u>just before</u> <b></b:includable></b><br />
<b>Note: </b>to look inside the widget's code, click on the sideways arrow next to the widget's id.<br />
<br />
And with that the gadget will be hidden for readers except you.<br />
<br />
<br /></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">
<b>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.</b></div>
<b><br /></b>
<b>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.</b><br />
<br />
<b><br /></b>
<br />
<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;">
<br /></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;">
<b><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">How to add the Orbit Image Slider to Blogger</span></b></h3>
<div class="separator" style="clear: both;">
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 1.</span></b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> From your Blogger Dashboard, go to </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Template</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> > </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Edit HTML</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> > click anywhere and press the CTRL + F keys to open the blogger search box. Paste or type the </span><span style="background-color: yellow; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"></head></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> tag inside the search box and hit Enter to find it.</span></div>
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 2.</span></b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> Just above the </span><span style="background-color: yellow; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"></head></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> tag, add the following scripts:</span><br />
<div class="separator" style="clear: both;">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span></div>
<blockquote style="clear: both;">
<span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><br /></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><br /></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><script type='text/javascript'></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">$(window).load(function() {</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">$(&#39;#featured&#39;).orbit({</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">advanceSpeed: 5000,</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">&#39;bullets&#39;: true,</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">&#39;timer&#39; : true,</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">&#39;animation&#39; : &#39;horizontal-slide&#39;</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">});</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">});</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"></script></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><br /></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><script type='text/javascript'></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">//<![CDATA[</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">/*</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">* jQuery Orbit Plugin 1.1</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">* www.ZURB.com/playground</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">* Copyright 2010, ZURB</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">* Free to use under the MIT license.</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">* http://www.opensource.org/licenses/mit-license.php</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">*/</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"><br /></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">(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&&</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">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},</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">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"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">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;</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></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},</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></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);</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">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);</span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;">//]]></span></span><span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="font-size: 14px;"></script></span></span></blockquote>
<div class="separator" style="clear: both;">
<span style="color: #333333; font-family: Istok Web, sans-serif;"><span style="background-color: #f9f9f9; font-size: 14px;"></span></span></div>
<b><br /></b>
<b><br /></b>
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note:</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> You can change the transitions speed between each image by modifying the </span><span style="background-color: #f9f9f9; border: none; color: blue; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>5000</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> value from the line in blue - a higher number will make the pictures stay longer between each transition.</span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Important! </b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">If you have already a version of jQuery in your template, remove the line in red, otherwise the slideshow might not work.</span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 3.</span></b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> Now it is time to add the CSS... find this tag:</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><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></span></blockquote>
<br />
<b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 4.</span></b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> Just above </span><span style="background-color: yellow; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;">]]></b:skin></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> add this code:</span><br />
<br />
<blockquote>
 #featured {height: 1px; width: 1px; overflow: hidden;}<br />
div.orbit {<br />
width: 1px;<br />
height: 1px;<br />
position: relative;<br />
overflow: hidden;<br />
}<br />
div.orbit img {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
div.orbit a img {border: none;}<br />
div.timer {<br />
width: 40px;<br />
height: 40px;<br />
overflow: hidden;<br />
position: absolute;<br />
top: 10px;<br />
right:10px;<br />
opacity: .6;<br />
cursor: pointer;<br />
z-index: 1001;<br />
}<br />
span.rotator {<br />
display: block;<br />
width: 40px;<br />
height: 40px;<br />
position: absolute;<br />
top: 0;<br />
left: -20px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QK2auf3n3dmlvl0LT5oXY1hgokkbRYI0BKaf25Z-eG3k40tpO3dv7axCmmDjFKxPgj2WlLxCLZvMc0V3Aha8-9Kpy0MxJxCWx-utsDBmLE8LEcurQ_coBlRdFK50-v0X2cOfLQxZu5Fp/s1600/timer-icon.png);<br />
background-repeat: no-repeat;<br />
z-index: 3;<br />
}<br />
span.mask {<br />
display: block;<br />
width: 20px;<br />
height: 40px;<br />
position: absolute;<br />
top: 0;<br />
right: 0;<br />
z-index: 2;<br />
overflow: hidden;<br />
}<br />
span.rotator.move {left: 0;}<br />
span.mask.move {<br />
width: 40px;<br />
left: 0;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9zkd0tUCIPOUZQ_xTL8ai8vxV6JOo2y4BQrOsyNFRozDONBf_2IBDO6F4G5qIV1LIbCfUcxX8ysFWhSUNa81lzsvD793Ahrfe3avlOIDt0Z2mmCWRiLpcRcAy7UNcMWJG6qjW6aEH6pu/s1600/timer-right.png);<br />
background-repeat: repeat;<br />
background-position: 0px 0px;<br />
}<br />
span.pause {<br />
display: block;<br />
width: 40px;<br />
height: 40px;<br />
position: absolute;<br />
top: 0;<br />
left: 0px;<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMnvC3mKzCp_kJl4CpLR1bimhDomh8annUasF3_0fbRlpPoD4Kck28G5jsNx8pgO72IUrYseNxSnTzqUNG-u6L6lyiUiK38W30ZXY5cnTPxA1KSAEO1T-v8sh6DlTpTeXaEXtpRpthKAy/s1600/pause-icon.png);<br />
background-repeat: no-repeat;<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
div.timer:hover span.pause,<br />
span.pause.active,<br />
div.timer:hover span.pause.active { opacity: 1; }<br />
div.caption {<br />
background: #000;<br />
background: rgba(0,0,0,.6);<br />
width: 100%;<br />
z-index: 1000;<br />
position: absolute;<br />
bottom:-100px;<br />
color: #fff;<br />
padding: 8px 0;<br />
text-align: center;<br />
}<br />
div.caption span {<br />
padding: 0 10px;<br />
font-size: 14px;<br />
text-shadow: 0px 1px 0px rgba(0,0,0,.8);<br />
margin: 0;<br />
}<br />
.orbit-caption { display: none; }<br />
div.orbit:hover div.slider-nav { display: block; }<br />
div.slider-nav { display: none; }<br />
div.slider-nav span {<br />
width: 33px;<br />
height: 33px;<br />
text-indent: -9999px;<br />
position: absolute;<br />
z-index: 1000;<br />
top: 43%;<br />
cursor: pointer;<br />
}<br />
div.slider-nav span.right {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajln0ZAc4Ani1FEIteEqZ-Q73IAAyEQlvsVdkLvo_jHJSQ8Av2aF1G3nlS-dHlDvPpYIQDMrAKt0eSxFbpWQOli4N4aW0HshTgDaaNMJGbUBxIySfkkpkYqfJeB8W-s0t4DjEL8gPGFnH/s1600/arrow-right.png);<br />
right: 10px;<br />
}<br />
div.slider-nav span.left {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumkkVQfRpx1fcqSVf3xhDPhTYdFW4XHdpkTgJw4DH7zeQQO35bGCLT8-pp1SqFsANbiHEWrP6u4ORACGsJ3TojtcQjjPJJX9hejdJCw_hYpy_slqB5mCxTL2FGV_MGz5Vg3Yf-kx8Kb2H/s1600/arrow-left.png);<br />
left: 10px;<br />
}<br />
.orbit-bullets {<br />
position: absolute;<br />
z-index: 1000;<br />
list-style: none;<br />
top: 10px;<br />
left: 7px;<br />
margin: 0;<br />
padding: 0;<br />
}<br />
.orbit-bullets li {<br />
float: left;<br />
margin-left: 5px;<br />
cursor: pointer;<br />
color: #999;<br />
text-indent: -9999px;<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkrzr5s92ObiOFrZk8wF4d8mJIel0t8X9La3tWkEdDR0IEWl_e1LCaOhkmobUo4rfXda5ktq26EG7pGVmfR4aj2in2sRNsK3pTpeZej64v11Dd7WxKBdTMIdtS1sydx9RB_DeQ-R9-t_4/s1600/bullets.png);<br />
background-repeat: no-repeat;<br />
background-position: 0 0;<br />
width: 7px;<br />
height: 7px;<br />
overflow: hidden;<br />
}<br />
.orbit-bullets li.active { color: #222; background-position: -7px 0; } </blockquote>
<br />
<div id="adsmiddle15508894100442077280" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
<b><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 5.</span></b> Click on the <b>Save template</b> button to save the changes.<br />
<br />
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>
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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</span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Layout</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">, click on the</span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Add a gadget</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> </span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">link > choose</span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">HTML/JavaScript</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> </span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">from the pop-up window and paste the code inside the empty box:</span><br />
<br />
<blockquote>
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <div id='featured'></span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href='</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><img rel='</span><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;"><b>photo1</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' src="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">" style='height: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px; width: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;'/></a></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span class='orbit-caption' id='</span><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;"><b>photo1</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'></span><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.</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">"><img rel='</span><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;"><b>photo2</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' src="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">" style='height: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px; width: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;'/></a></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span class='orbit-caption' id='</span><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;"><b>photo2</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'></span><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: </span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href='</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' style='color: #09A7EA;'></span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></a></span></span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">"><img rel='</span><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;"><b>photo3</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' src="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">" style='height: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px; width: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;'/></a></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span class='orbit-caption' id='</span><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;"><b>photo3</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' style='text-align:center;'></span><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.</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href='</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><img rel='</span><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;"><b>photo4</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' src="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">" style='height: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px; width: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;'/></a></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span class='orbit-caption' id='</span><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;"><b>photo4</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'></span><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: </span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><a href='</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' style='color: #09A7EA;'></span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></a></span></span><br />
<span style="background-color: yellow; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></div></span> </blockquote>
<br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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 (</span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">) and height (</span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">) values. To add the description for your pictures, replace the text in red. </span><br />
<br style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">To add more pictures, add this HTML before the </span><span style="background-color: yellow; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"></div></span><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> tag:</span><br />
<blockquote class="tr_bq">
<br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <a href='</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><img rel='</span><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;"><b>photo5</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">' src="</span><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</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">" style='height: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">348</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px; width: </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;'/></a></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span class='orbit-caption' id='</span><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;"><b>photo5</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'></span><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.</span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></span> </blockquote>
<br />
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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</span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> id="<span style="border: none; color: #38761d; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1</span>"</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> and within the image code is the rel attribute with the name of the id, that is </span><b style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">rel="<span style="border: none; color: #38761d; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1</span>"</b><span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">.</span><br />
<br />
<br /></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;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;">1. "Embedded" Theme</span></strong></div>
<div class="separator" style="clear: both; text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: large;"><br /></span></strong></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;">
<br /></div>
<div style="text-align: right;">
<br /></div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gvdLh">Download</a><br />
<br /></div>
<div style="text-align: center;">
<br />
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;">2. "Zune" Theme</span></strong><br />
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: large;"><br /></span></strong></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>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/gvh1t">Download</a><br />
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;">3. "Royale Noir" Theme</span></strong></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></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;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></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;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;">4. "Royale" or "Energy Blue" or "Media Center" Theme</span></strong></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></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;">
<br /></div>
<div style="text-align: center;">
<strong style="background-color: whitesmoke; color: #333333; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height: 22.399999618530273px; margin: 0px; padding: 0px;"><span style="font-size: x-large;"><br /></span></strong></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;">
<br /></div>
<div style="text-align: center;">
<br /></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;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></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;">
<b><span style="font-size: large;">ون باس - Win Boss</span></b></div>
<div style="text-align: right;">
<b><span style="font-size: large;">اگر آپ کسی ایسے آفس میں کام کرتے ہیں جہاں یاہو مسینجر استعمال کرنا ممنوع ہے لیکن آپ پھر بھی اسے استعمال کررہے ہیں۔ اسی دوران آپ کے باس آپ کے پاس آکھڑے ہوتے ہیں۔ لو جی، آپ تو پھنس گئے....!! لیکن ٹھہریں، اگر آپ نے ہمارے بتائے ہوئے ون باس نامی اس سافٹ ویئر کو انسٹال کررکھا ہے تو پھر کوئی مسئلہ ہی نہیں۔ ون باس ایک باکمال ایپلی کیشن ہے جس کی مدد سے آپ چلتے ہوئے کسی بھی پروگرام کو پلک جھپکتے میں اسکرین سے غائب کرسکتے ہیں۔</span></b></div>
<div style="text-align: right;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: right;">
<b><span style="font-size: large;">دلچسپ بات یہ ہے کہ وہ پروگرام بظاہر بالکل بند ہوجاتا ہے لیکن درحقیقت وہ پروگرام صرف نظروں سے اوجھل ہوتا ہے جسے واپس ظاہر بھی کیا جاسکتا ہے۔ کسی پروگرام کو اسکرین سے اوجھل کرنے کے لئے آپ کو کی بورڈ سے چند کیز پریس کرنی پڑتی ہیں۔ بائی ڈیفالٹ یہ کیز CTRL + X ہوتی ہیں جنھیں تبدیل بھی کیا جاسکتا ہے۔ اوجھل ایپلی کیشن نہ صرف اسکرین، بلکہ ٹاسک بار، ALT + TAB سے ظاہر ہونے والی ایپلی کیشنز کی لسٹ ، حتیٰ کہ ٹاسک منیجر سے بھی غائب ہوجاتی ہے۔ جبکہ یہ سافٹ ویئر بذات خود سسٹم ٹرے میں ایک سبز رنگ کے آئی کن جیسا نظر آتا ہے جو ٹاسک منیجر کے آئی کن سے ملتا جلتا ہے۔ </span></b></div>
<div style="text-align: right;">
<br />
<br /></div>
<div style="text-align: right;">
<br />
<br />
<br /></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;">
<br /></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;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
</div>

ون باس - Win Boss

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

ہلکا آپریٹنگ سسٹم ۔ Windows XP - 75MB Edition

<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: left;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBButpzRbLXtThhJjnZ0OCWRmRh-rlmEGami7mSNndLrj57or0-IoOn05IY_AQm3pHNHiBFxQCL9mYG267p8soVI6p63zXJolpBbR3qRRMtHWbh7JcjDLSSAzQOot5vPWiJmAXm3MV5RdN/s1600/XP-75-MB-Edition.jpg" width="320" /></div><div style="text-align: right;"><b><span style="font-size: large;"><br />
</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">السلام علیکم ورحمتہ اللہ وبرکاتہ ۔</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">حاضر خدمت ہے ۔۔۔۔ ہلکا آپریٹنگ سسٹم ۔ Windows XP - 75MB Edition</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">بغیرکسی سیریل نمبر</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">بہت ہی کم وقت میں انسٹال ہونے والا ۔</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">انسٹالیشن کے دوران صرف 24 ایم بی ریم استعمال کرتا ہے ۔</span></b></div><div style="text-align: right;"><b><span style="font-size: large;">بعد انسٹالیشن حجم صرف 610 ایم بی ۔ </span></b></div><div style="text-align: right;"><b><span style="font-size: large;">تیزترین بوٹ اپ۔ </span></b><br />
<br />
<br />
</div><div style="text-align: right;"><b><span style="font-size: large;"><br />
</span></b> <b><span style="font-size: large;"><br />
</span></b></div></div><br />
<article id="default-usage"><br />
<br />
<div class="to-lock" style="display: none;"><br />
<br />
<br />
<br />
<div style="text-align: center;"><a class="button big blue" href="http://adf.ly/gvVel">Download</a></div><div style="text-align: center;"><br />
<br />
</div></div></article><br />
<br />
<div id="dhiunlocker"></div><script src="https://googledrive.com/host/0BzveqKwnIGy8VFg3NTNnNEpSZDg" type="text/javascript"></script><br />
<br />
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
 
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
 
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
 
// twitter options
twitter: {
url: "http://besturdutraining.blogspot.com/2014/03/windows-xp-75mb-edition.html",
text: "ہلکا آپریٹنگ سسٹم ۔ Windows XP - 75MB Edition"
},
 
// facebook options
facebook: {
url: "http://besturdutraining.blogspot.com/2014/03/windows-xp-75mb-edition.html",
appId: "561288347311326"
},
 
google: {
url: "http://besturdutraining.blogspot.com/2014/03/windows-xp-75mb-edition.html"
}
});
});;;;
</script><br />
<br />
<div style="text-align: center;"><br />
</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;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div></div>

ہلکا آپریٹنگ سسٹم ۔ Windows XP - 75MB Edition

السلام علیکم ورحمتہ اللہ وبرکاتہ ۔ حاضر خدمت ہے ۔۔۔۔ ہلکا آپریٹنگ سسٹم ۔ Windows XP - 75MB Edition بغیرکسی سیریل نمبر بہت ہی کم وقت میں انس...