Blogger Plug n Play - Blogger in Need

How to Open popup in chrome without scrollbars, Disable Resize of popup and Auto resize according to content

2012-01-10T00:51:00.001-08:00

Today I am going to show a tutorials which is a deadly need for many webmasters these days.

Chrome is the most popular browser used by many users these days. Popup is a thing which is used by from Facebook to simple advertisers. Sometimes situations may arise when we want features in opened popup windows.

We Usually ask some Questions related to Popups specially for Chrome:

How to disable scroll-bars in chrome popup ?
How to prevent Re-size of popup window opened ?
How to Auto Re-size Popup window according to the content inside it ?

Is it possible to answer above Questions ?

Now its a YES.

Here we go ....

All changes or Additions will be done in the page which will open inside the Popup Window.

Step 1)

Go to This link [ http://www.ziddu.com/download/18166310/controll_popup.rar.html ]

and download a .js file naming controll_popup.js and upload it on your server or any free file hosting site you can file any by simple goggling.

use below code to add this file in page opening in Popup window

<script type="text/javascript" src="http://yourserver.com/controll_popup.js"></script>

change Red text with your server name where you uploaded file

Step 2)

Now add this simple script in Head of your page



<script type="text/javascript">

Bootloader.setResourceMap({"3qyfR":{"type":"js","src":"https:\/\/s-static.ak.facebook.com\/rsrc.php\/v1\/yD\/r\/BolR11s_Va_.js"}});

Arbiter.registerCallback(InitialJSLoader.callback, ["BOOTLOAD\/ROADRUNNER_READY"]);

Arbiter.registerCallback(function() {InitialJSLoader.load(["3qyfR"]);Arbiter.inform("BOOTLOAD\/ROADRUNNER_READY", true, Arbiter.BEHAVIOR_STATE);}, [OnloadEvent.ONLOAD_DOMCONTENT_CALLBACK]);

onloadRegister(function (){PopupResizer.init( { allowShrink : false });});

</script>

Now your page which will open in Popup window will have a code like this given below



 <HTML>

  <HEAD>



   <script type="text/javascript" src="
http://yourserver.com/controll_popup.js "></script>

   <script type="text/javascript">

   Bootloader.setResourceMap({"3qyfR":{"type":"js","src":"https:\/\/s-static.ak.facebook.com\/rsrc.php\/v1\/yD\/r\/BolR11s_Va_.js"}});

   Arbiter.registerCallback(InitialJSLoader.callback, ["BOOTLOAD\/ROADRUNNER_READY"]);

   Arbiter.registerCallback(function() {InitialJSLoader.load(["3qyfR"]);Arbiter.inform("BOOTLOAD\/ROADRUNNER_READY", true, Arbiter.BEHAVIOR_STATE);}, [OnloadEvent.ONLOAD_DOMCONTENT_CALLBACK]);

   onloadRegister(function (){PopupResizer.init( { allowShrink : false });});

   </script>



  </HEAD>

   <BODY>

     <<  TO SHOW WILL BE DISPLAYED OVER HERE >>



   </BODY>

 </HTML>

After applying all above changes I challenge you will not be able to hide any content from popup window :)

the script given for download is a part of Facebook

How to show link title in other local languages like punjabi, hindi etc which are not supported by windows title

2011-12-09T21:41:00.000-08:00

Some sites which use local languages can't use title attributes of anchor tag in some text as it starts showing BOXES in place of text.

So here is the solution

Use BELOW CSS code

<style type="text/css">
a.tooltip span {display:none; padding:1px 1px; margin-left:60px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #000000; font-size:12px; background:#FFFFE1; color:#000000; box-shadow: 2px 2px 1px #888888;}
</style>

And use below code Where we want to show tooltip

<a href="#"  class="tooltip";  > Hover Here  <span> Tool tip Msg HRERE </span> </a>

I hope this would be the best solution :)

How to download YouTube video direct in 3gp format on computer using firefox to play in mobile without any conversion. Secret reviled

2011-12-09T08:36:00.000-08:00

Ok YouTube lovers here is the trick to download 3gp good quality videos direct from YouTube to your computer ( pc ) so that they can run directly in your mobile without any conversion. Please comment your experience after trying this :)

Here i will explain this tut. in steps

Requirement : Here the most basic requirement is you must have Firefox installed.

Step 1) Download and install following two Addons from firefox addon store

a) User Agent Switcher

b) FlashGot

There working can be read from download pages so lets go further

Step 2) In Mozilla go to Tools >> Default User Agents >> Choose iPhone3.0

Step 3) Go to YouTube.com search the video you want to download then click the thumbnail then is will display that video in play box to top. Click the round play button image.

Same time you will see FlashGot (add on we downloaded in step1) blinking

will show that is has captured a video in 3GP format as shown in figure below just click the video you want then it will start downloading

Thats it ...

Please comment about your experience :)

Best PHP language editor with auto tag completion, simultaneous error correction and free ...

2011-07-28T04:13:00.000-07:00

How to Open and download ovi store applications on computer ( PC ) as on mobile

2011-07-27T22:46:00.000-07:00

Nokia ovi store is house of thousands of interesting applications, which can be used to download apps on mobile or send to mobile if opened through pc, but what if we don't have GPRS activated on our mobile, What if we want to download applications form ovi store directly on pc ?

Here is the hack to make this possible for the users for Mozilla Firefox

Step 1

Open Mozilla Firefox and download this Add on (User Agent Switcher) and then restart it

Step 2

Now create a new Notepad file, Paste below given code in it then save it as ovi.xml

<useragentswitcher>

<useragent description="5310" useragent="Nokia5310XpressMusic/1.0 Profile/MIDP-2.1 Configuration/CLDC-1.1" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>

</useragentswitcher>

(NOTE : Please change the Nokia mobile model in the code)

Step 3

In Mozilla go to Tools > Default User Agents > Edit User Agents.. > Click Import then open the ovi.xml file which we created in step 2 Then Click OK

Step 4

Go to Tools > Default User Agents and Choose your Mobile Model Now Open Ovi Store homepage

Its Done !

Horizontal auto Image strip Scroller/Slider with speed control based on jQuery

2011-07-08T22:44:00.000-07:00

After a long gap I today I am going to publish this post I hope you will like this very much as I was also searching such a thing for a long time

This is a cool horizontal auto scroll image slider whose speed changes with the movement of cursor this is very flexible as we can change every property very easily , In this post I will not give tutorial But I will redirect you to the page where I found this thing so enjoy using it .

Don't forget to comeback and comment :)

Visit This Link

How To See Which Process or Program is Using My Internet Bandwith

2010-08-05T23:09:00.000-07:00

There are some background processes like Updates, Which aromatically execute and waste our data transfer and slows-down the data transfer speed And also sometimes programs like Trojan Horses which creep into your system and turns it into hell .

There is small Software or program which lists all the processes which are using TCP/IP usage.

WHAT IT TELLS ?

Gives information about Programs using Data.
It gives location of that program.
You can terminate that program by simply right clicking it.

You Can Download that Program from Below Link

Download!

Software to Pick/Find/Select Colors anywhere from Screen and also Display color codes

2010-07-31T01:26:00.000-07:00

Color Mania is very special and useful software. We see many new colors on web-pages images and games but if we want that color we should know the color code also.We can apply that color in coding by using there codes.This software proves very useful.

It has a color picker by selecting that we can pick color and its code very easily.We can also select new colors as well.

This is very small but useful application download from below link :)

Download Here!

Download Oxford jar Eng-Eng Dictionary For Java Enabled Mobiles

2010-07-24T04:12:00.000-07:00

After searching a lot I found only these two fully loaded English to English dictionaries for my jave mobile.These are ad-ware Free and proves very useful on the go.

1) Oxford English Dictionary

Download!

Size ( RAR File ) 796KB

2) Dictionary (IMPORTANT : when it opens after installation on your mobile it only ask for ONCE to connect to internet you can cancel that operation)

Download!

Size ( RAR File ) 840KB

How To Use Two Classes Together in a Division

2010-07-24T00:43:00.000-07:00

Sometimes a situation may arise to use more then on class in attribute.But how can we achieve this during CSS coding ? In CSS we are allowed to do it.

If we have two Classes as

 class="slider"

 class="toggle"

Then We can apply these as

 <a class="slider toggle">.........</a>

The thing which is required is a Space between the classes we are using

Where To Upload Javascripts,Rar,CSS Files And Other Files To Use As Direct Link

2010-07-23T01:53:00.000-07:00

In blogger we can only upload images in any number or size, But what about other files like text files, Java scripts, CSS, RAR files etc

There are some sites which provides a special domain name and also a storage space for our files with extensions described above.But I prefer Below one Because It provides maximum storage spage with unlimited bandwidth.

110MB Homepage

Best Software To Compress Images In Bulk Of Any Type Retaining Original Quality And Dimensions

2010-07-19T00:21:00.000-07:00

Image Optimizer is a small size ( 1.22 MB) software. After Installation When ever you right click any image or a folder containing images, an option Optimize This will appear.After clicking it a new folder is created on the same location with optimized images.

Features

It is Fast
Optimizes images with a right click
9MB image optimizes to 60 KB retaining Dimensions and Quality Intact

Download !

Size ( RAR File 980KB )

Draggable Images With Message Pop Up On Click Using jQuery For Blogger

2009-11-25T06:43:00.000-08:00

My Previous Post on drag able images now looks a little bit older in version as this new widget is much more exiting and more flexible.By using this you will be able to drag images up to any extent even beyond web page limitations :)As this is more easy to install and appears more cool just have a look Demo

Demo

Installation :

Step 1:

JavaScript + CSS





<script src='http://bplugnplay.bravehost.com/dts/jquery.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src=' http://bplugnplay.bravehost.com/jqueryui-core-drag.js'/>

<style type='text/css'>


#images li {
float:left;
background:#ececec;
border:1px solid #ccc;
margin:10px;
width: 256px;
padding: 10px;
overflow: hidden;
}


#images li a {
float:left;
}


#images li div {
width: 512px;
overflow:hidden;
}
#images li .info {
width: 246px;
padding:0 0 0 10px;
float:left;
}

</style>

Step 2 :

HTML





<div id="container"><ul id="images"><li><div>
  


<a href="Link"><img alt="" src="Image Link"/></a></div></li>



</ul></div>

Please Comment below and Subscribe our Blog to get latest jquery widgets updates.

Credits : net.tutsplus

Message Box Like Wordpress With Close Button Using jQuery For Blogger Blogs

2009-11-15T22:30:00.000-08:00

We have seen many times a beautiful massage box in many Wordpress blogs.It appears between the title and body of post.It can be easily removed by simply clicking the close link.Here is a same massage box for blogger blogs also:) I want to clear here that this Massage box is More interesting then simple regular box.When we visit the page firstly it appears with fade in and fade out effect which easily attracts the attention of visitors.When after reading the massage he/she can make It runs out of the page .Just see the Demo Below ;)

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

Step 1:

Javascript + CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code



]]></b:skin>


<script src='http://bloggerplugnplay-files.bravehost.com/massegebox-byplug-jquery-1.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.close&quot;).click(function(){
 $(&quot;#info&quot;).animate({left:&quot;+=10px&quot;}).animate({left:&quot;-5000px&quot;});
});
blink();
});
function blink(){
$(&quot;#info&quot;).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$(&quot;#info&quot;).animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20)
.animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20);
}
</script>



<style type='text/css'>

#info{
border: 1px solid;
margin: 0px 0px;
padding:5px 5px 15px 5px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url(&#39;info.png&#39;);
}

</style>

Step 2:

HTML

Login your BLOGGER account And click on Layout in the sub menu click then nowEdit HTML Check Expand Widget Templates

Now Find <data:post.body/> Then Replace it with Below Code





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

<div style="" id="info"> YOUR MASSAGE HERE <a href="#" class="close"> CLOSE !</a></div>

</b:if>

<data:post.body/>

Then save your template !

Now your massage will only appear only on post page not on Homepage.

Please comment About this widget :)

New Cool Image Hover Slight Zoom With Little Fading Using jQuery For Blogger

2009-11-12T08:21:00.000-08:00

Changing Opacity on hover is very old and common now.Here is a new jQuery based image effect.This gives a new life to images just see the demo below:)

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation:

Step 1:

Javascript+CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML

Now Find ]]></b:skin> Then Replace it with Below Code



]]></b:skin> 

<script src='http://bloggerplugnplay-files.bravehost.com/jquery-1.3.1.min.js'/>




<script>

$(document).ready(function() {

//move the image in pixel
var move = -15;

//zoom percentage, 1.2 =120%
var zoom = 1.2;

//On mouse over those thumbnail
$(&#39;.zitem&#39;).hover(function() {

//Set the width and height according to the zoom percentage
width = $(&#39;.zitem&#39;).width() * zoom;
height = $(&#39;.zitem&#39;).height() * zoom;

//Move and zoom the image
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:width, &#39;height&#39;:height, &#39;top&#39;:move, &#39;left&#39;:move}, {duration:200});

//Display the caption
$(this).find(&#39;div.caption&#39;).stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:$(&#39;.zitem&#39;).width(), &#39;height&#39;:$(&#39;.zitem&#39;).height(), &#39;top&#39;:&#39;0&#39;, &#39;left&#39;:&#39;0&#39;}, {duration:100});

//Hide the caption
$(this).find(&#39;div.caption&#39;).stop(false,true).fadeOut(200);
});

});

</script>

<style media='screen' type='text/css'>


.zitem {
width:125px;
height:125px;
border:4px solid #222;
margin:5px 5px 5px 0;

/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
}

.zitem .caption {
width:125px;
height:30px;
background:#000;
color:#fff;
font-weight:bold;

/* fix it at the bottom */
position:absolute;
bottom:-1px; /* fix IE issue */
left:0;

/* hide it by default */
display:none;

/* opacity setting */
filter:alpha(opacity=70);    /* ie  */
-moz-opacity:0.7;    /* old mozilla browser like netscape  */
-khtml-opacity: 0.7;    /* for really really old safari */
opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
text-decoration:none;
color:#fff;
font-size:12px;

/* add spacing and make the whole row clickable*/
padding:5px;
display:block;

}

img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
}

.clear {
clear:both;
}



</style>

Step 2:

HTML

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE





<div class="zitem">
<a href="#"><img src="1.jpg" alt="Blogger Play n Play" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 1</a>

</div>
</div>

<div class="zitem">
<a href="#"><img src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 2</a>

</div>
</div>

<div class="zitem">
<a href="#"><img src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 3</a>

</div>
</div>

Please Comment If you liked this Effect =)

Credits : http://www.queness.com distributed and converted for blogger by Blogger Plug n Play

Auto Switch Horizontal Content Slider Tabs Using jQuery For Blogger

2009-11-10T23:28:00.000-08:00

Here is my First content slider with Tabs.The cool thing about this slider is that there is no need to click Tabs , Just hover with cursor to see content under that tab.Its Simple but powerful jQuery widget.Just see demo link below to see its working =)

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

Step 1 :

CSS + Javascript

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML

Now Find ]]></b:skin> Then Replace it with Below Code





]]></b:skin>




 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
 <script src='http://bloggerplugnplay-files.bravehost.com/tabbedContent.js' type='text/javascript'/>

Step 2:

HTML

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE






<div style="padding: 15px;">

<div class="content">
<div class="tabbed_content">
<div class="tabs">
<div class="moving_bg">
&nbsp;
</div>


<span class="tab_item">  Tab Name 1  </span>
<span class="tab_item">  Tab Name 2  </span>
<span class="tab_item">  Tab Name 3  </span>
<span class="tab_item">  Tab Name 4  </span>


</div>
   
<div class="slide_content">     


<div class="tabslider">

     
<ul>   Content 1   </ul>
<ul>   Content 2   </ul>
<ul>   Content 3   </ul>
<ul>   Content 4   </ul>



</div>


<br style="clear: both"/>
</div>
</div>
<br/>
<br/>
</div
></div>

Here's your new content slider :)

Credits : http://www.gayadesign.com distributed and converted for blogger by Blogger Plug n Play

Animated Horizontal Sliding Navigation Menu With Images Using jQuery For Blogger

2009-11-09T22:24:00.000-08:00

One of the best Sliding Horizontal Navigation Menu i have ever seen.It is so smooth to navigate.I myself played with it for about 10 minutes before clicking the link.It will make your blog more playable and sticky :) .And yes how i can forgot it also have images which also add more charm to it. Just view its demo below .Then its simple Installation.

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

Step 1:

Javascript + CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML

Now Find ]]></b:skin> Then Replace it with Below Code






]]></b:skin>

<script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/Source%285%29%5CSource/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script type='text/javascript'>
       $().ready(function() {
           $(&#39;.kwicks&#39;).kwicks({
               max : 200,
               duration: 800,
               easing: &#39;easeOutQuint&#39;
           });
       });
</script>

<style media='screen' type='text/css'>

div.kwicks_container {
width: 840px;
margin: 100px auto 0 auto;
}
/*-------------------------KWICKS--------------------*/
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
width:840px;
height:50px;
z-index:2;
}
.kwicks li {
display: block;
float: left;
overflow: hidden;
padding: 0;
cursor: pointer;
width: 100px;
height: 35px;
z-index:2;
cursor:pointer;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FF9933;
}
.kwicks li a {
background-image:url(http://1.bp.blogspot.com/_JUJEXEamsyU/SvkE7sIDaeI/AAAAAAAAAzE/Og3KYqRurMU/sprites_menu.png);
background-repeat:no-repeat;
font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial;
font-size: 14px;
letter-spacing: -0.07em;
color: #AA0000;
height: 40px;
outline:none;
display:block;
z-index:100;
cursor:pointer;
text-transform: uppercase;
font-weight: bold;
margin-top: -3px;
margin-left: 5px;
text-decoration: none;
}
.kwicks li h3 {
position: absolute;
width: 120px;
font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial;
font-size: 10px;
color: #FF6600;
letter-spacing: -0.02em;
outline:none;
z-index:0;
cursor:pointer;
text-transform: uppercase;
font-weight: normal;
margin-left: 5px;
text-decoration: none;
left: 0px;
top: 15px;
right: 0px;
bottom: 0px;
}
#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 {
margin: 0pt;
overflow: hidden;
position: absolute;
display: block;
width: 120px;
}
#kwick_1 {
left: 0px;
border: none;
}
#kwick_2 {
left: 120px;
}
#kwick_3 {
left: 240px;
}
#kwick_4 {
left: 360px;
}
#kwick_5 {
left: 480px;
}
#kwick_6 {
left: 600px;
}
#kwick_7 {
right: 0px;
}
#kwick_1 a {
background-position:0px 0px;
}
.kwicks a:hover, .kwicks #active {
color: #3399FF;
}
.kwicks li a:hover h3, .kwicks li #active h3 {
color: #999999;
}
#kwick_2 a {
background-position:0px -50px;
}
#kwick_3 a {
background-position:0px -192px;
}
#kwick_4 a {
background-position:0px -100px;
}
#kwick_5 a {
background-position:0px -150px;
}
#kwick_6 a {
background-position:0px -250px;
}
#kwick_7 a {
background-position:0px -300px;
}
</style>

Then Save Template!

Step 2:

HTML

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE




<div class="kwicks_container">

<ul class="kwicks">
<li id="kwick_1">
  <a href="http://aext.net/">Home
      <h3>Front page</h3>
</a>
</li>
<li id="kwick_2">
  <a href="http://aext.net/category/css/">CSS & XHTML
      <h3>Makeup web page</h3>

</a>
</li>
<li id="kwick_3">
  <a href="http://aext.net/category/java/">Java
      <h3>Learning Java</h3>
</a>
</li>
<li id="kwick_4">
  <a href="http://aext.net/category/others">Others
      <h3>In the other hand</h3>

</a>
</li>
<li id="kwick_5">
  <a href="http://aext.net/category/php/">PHP
      <h3>PHP Programming</h3>
</a>
</li>
<li id="kwick_6">
  <a href="http://aext.net/category/resources/">Resources
      <h3>Resources for Web Developers</h3>

</a>
</li>
<li id="kwick_7">
  <a href="http://aext.net/category/theme-layout/">Themes
      <h3>Bloggers - Wordpress Themes</h3>
</a>
</li>
</ul>
</div>

Now you will see a beautiful horizontal sliding navigation menu on your site.If you face any problem or you like this please comment :)

How to show adsense ads any where in Blogger posts

2009-11-06T22:44:00.000-08:00

I think you have seen many tutorials on placement of Adsense ad codes in between blogger posts.But their placement was limited to the starting or at the end of the post.But what if we want to add Adsense ads any where we want in between the post ? Here is simple effective and safe Hack.By using which you can past or make your Adsense Ads visible in any part or your post like in middle of your post :)

Installation :

Step 1 :

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find <data:post.body/> And Replace it With Below code




<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

<!-- Your AdSense code here -->

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/x3C!-- adsense --x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Now Replace  in above with your Adsense or any other Ad code

Now Save Your Template !

Problem: Some times it does not saves your template and gives Error. Then Parse your Adsense Code on This Site then paste it in Above Code.

Step 2 : Now where you want your Adsense code in the post Just Add this Code



This code will show Adsense Ad ! :)

Image Auto Scroller Horizontal In Both Directions Using jQuery For Blogger.

2009-11-03T21:32:00.000-08:00

Another Beautiful, clean Black Image Scroller.It scrolls your Image,Links,Text And Videos.It stops on hover.On hovering an image The Set of two Arrows appears in Right As well as Left direction.You can switch it on both directions.Just view its working and looks ! in Demo below : )

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

Step 1:

Css + Javascripts

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code



]]></b:skin>

<link href='http://bloggerplugnplay-files.bravehost.com/imageScroller.css' rel='stylesheet' type='text/css'/>

<script src='http://bloggerplugnplay-files.bravehost.com/scrollerjquery-1.3.2.min.js' type='text/javascript'/>

Step 2:

HTML

click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE





<div id="outerContainer">

 <div id="imageScroller">
     <div id="viewer" class="js-disabled">
         <a class="wrapper" href="http://www.apple.com" title="Apple"><img id="apple" alt="Apple" src="http://4.bp.blogspot.com/_JUJEXEamsyU/SvERMZfHaxI/AAAAAAAAAwk/efIaLaiJZ58/s200/apple.jpg" class="logo"/></a>
         <a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><img id="firefox" alt="Firefox" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SvERMl0BVhI/AAAAAAAAAws/p2InNB3lW88/s200/firefox.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jquery.com" title="jQuery"><img id="jquery" alt="jQuery" src="http://4.bp.blogspot.com/_JUJEXEamsyU/SvERMwOt1YI/AAAAAAAAAw0/q-1NCZ_mh1s/s200/jquery.jpg" class="logo"/></a>
         <a class="wrapper" href="http://twitter.com" title="Twitter"><img id="twitter" alt="Twitter" src="http://2.bp.blogspot.com/_JUJEXEamsyU/SvERNaOx8CI/AAAAAAAAAxE/FIcRUrS26hI/s200/twitter.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jqueryui.com" title="jQuery UI"><img id="jqueryui" alt="jQuery UI" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SvERNIpvqvI/AAAAAAAAAw8/UQvhQTsFnf0/s200/jqueryui.jpg" class="logo"/></a>
     </div>
 </div>

</div>

Now you will see a Scroller on your site.You can replace Images With Any Text,Videos Any thing you like it to have.As i always say...PLEASE DARE TO COMMENT ;)

Credits :Dan Wellman converted to ease for Blogger by Blogger plug n play

Drag To Share | Cool Social Widget For Blogger[ Easy Install] Like Mashable Using jQuery

2009-10-31T02:10:00.000-07:00

You may have seen on popular social news site Mashable,It uses a very cool Widget to distribute its post to social website.The user simply drags an image in the post and puts the image into a Social website icon.Here an easy tutorial blogger blogs.View its working on the Demo page given below.Just Drag the image.

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

Step 1:

Java Scripts + CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code





]]></b:skin>

<script src='http://bloggerplugnplay-files.bravehost.com/jquery-1.3.2.min.js' type='text/javascript'/>


<script src='http://bloggerplugnplay-files.bravehost.com/jquery-ui-1.7.2.custom.min.js' type='text/javascript'/>



<style type='text/css'>


#content { width:100%; }
#content img { float:; margin-left:0px; }

.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }

#targets { display:none; list-style-type:none; position:fixed; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(http://1.bp.blogspot.com/_JUJEXEamsyU/Suvi1Yd2GRI/AAAAAAAAAvY/osXxIObFl6w/s400/iconSprite.png) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }

#overlay { background-color:#000; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }

.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }


</style>

Then Click Save!

Step 2:

HTML(1)

These code will show the targets 1.e the twitter, facebook and delicious icon on image drag.

click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE



<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
</ul>


<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Step 3:

HTML(2)

The Power Tag <div id="content"> Images code here </div>

The images in Between the Above Tag Will be Activated and can be used to share

To apply on all images o your blog follow step

Step 4:

In your blogger Account Click Layout then Edit HTML now Check Expand Widget Templates

Find <data:post.body/> And Replace it With Below code



<div id="content"> <data:post.body/> </div>

Then Click Save Template !

Credits :Dan Wellman converted for Blogger by Blogger plug n play

Change Text Size or Resize Font size Widget Using jQuery For Blogger

2009-10-30T02:13:00.000-07:00

You may have seen many sites having a widget installed on their sites to change or increase,decrease the size of text in the post.This widgets proves very helpful as it provides flexibility to visitors to read text or long posts without facing much strain in their eye.As visitors are like our friends so we must take care of them.So I found this great widget which can re size or change font size in a beautiful way( Credits are give below this post ).I agree this widget was not for simple sites like blogger,But after a long experimental period now this is also compatible with blogger blogs :).See the demo below to visualize its working.

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

CSS+ java Script SECTION

Step 1 :

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code



]]></b:skin>

<script src='http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js' type='text/javascript'/>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/jquery.ui.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/cookie.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/Source%285%29%5CSource/textresize.js' type='text/javascript'/>

<style media='screen' type='text/css'>

.minus {
background: url(http://2.bp.blogspot.com/_JUJEXEamsyU/SuqULeeAvPI/AAAAAAAAAus/byssDZ2o4hU/s400/minus-trans.png) no-repeat;
height: 9px;
width: 25px;
overflow: hidden;
float: left;
cursor: pointer;
}

.slider_bar {
background: url(http://4.bp.blogspot.com/_JUJEXEamsyU/SuqUKk3REdI/AAAAAAAAAuc/PptaNl2gRcs/s400/bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}
.add {
background: url(http://3.bp.blogspot.com/_JUJEXEamsyU/SuqUKf_Z_TI/AAAAAAAAAuU/8vXa17tcklE/s400/add-trans.png) no-repeat;
height: 25px;
width: 23px;
float: left;
position: relative;
top: -5px;
cursor: pointer;
}
.slider_handle {
background: url(http://1.bp.blogspot.com/_JUJEXEamsyU/SuqULT5D5AI/AAAAAAAAAu0/pN7NAlG_qkI/s400/selector-trans.png) no-repeat;
height: 25px;
width: 12px;
position: absolute;
top: -8px;
}
#slider_caption {
background: url(http://2.bp.blogspot.com/_JUJEXEamsyU/SuqULLtBAFI/AAAAAAAAAuk/p0k1jB_f1XE/s400/caption-trans.png) no-repeat;
height: 45px;
width: 38px;
overflow: hidden;
position: absolute;
top: -50px;
margin-left:-10px;
padding: 5px 0px 0px 0px;
font-family: &quot;Myriad Pro&quot;;
color: #36665d;
font-weight: bold;
text-align: center;
}



</style>

For Compact Style Remove Below Code From Above Code




.slider_bar {
background: url(http://4.bp.blogspot.com/_JUJEXEamsyU/SuqUKk3REdI/AAAAAAAAAuc/PptaNl2gRcs/s400/bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}

.slider_handle {
background: url(http://1.bp.blogspot.com/_JUJEXEamsyU/SuqULT5D5AI/AAAAAAAAAu0/pN7NAlG_qkI/s400/selector-trans.png) no-repeat;
height: 25px;
width: 12px;
position: absolute;
top: -8px;
}
#slider_caption {
background: url(http://2.bp.blogspot.com/_JUJEXEamsyU/SuqULLtBAFI/AAAAAAAAAuk/p0k1jB_f1XE/s400/caption-trans.png) no-repeat;
height: 45px;
width: 38px;
overflow: hidden;
position: absolute;
top: -50px;
margin-left:-10px;
padding: 5px 0px 0px 0px;
font-family: &quot;Myriad Pro&quot;;
color: #36665d;
font-weight: bold;
text-align: center;
}

Step 2:

Now Find <data:post.body/> And Replace it With Below code



<div id="text"><p> <data:post.body/> </p></div>

Then Find <data:post.title/> And Replace it With Below code



<div id="text"><p> <data:post.title/> </p></div>

Now Click Save Template !

Step 3:

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE





<div id="header">
<div class="slider_container">
<div class="minus"></div>
<div class="slider_bar">
<div id="slider_caption"></div>
<div id="slider1_handle" class="slider_handle"></div>
</div>
<div class="add"></div>

</div>
</div>


<div id="font_indicator">Current Font Size: <b></b> </div>


<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Now the Resizing Bar will Work !

Credits : made by Connor Zwick
Distributed and converted for blogger by Blogger plug n play

Verticle Auto Scroll News Ticker Using jQuery For Blogger

2009-10-23T07:19:00.000-07:00

Simple but effective news ticker that can be put to use in a variety of ways. When using text, like in this example, defining the headings and associated content sections within a definition list makes sense from a semantics perspective, and it’s easy to add any additional elements we may need as we go.You can Show Text,Images,Videos and Links see in Demo Below

It stops on Hover

DEMO

Installation :

Step 1:

This is Java script part

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>

Open and Copy all text in the TXT file link BELOW and Paste Below]]></b:skin> code in your template

Bloggerplugnplay_scroltickertxt.txt

Step 2:

This is style giving part CSS

Copy below Code And Then Paste ABOVE ]]></b:skin>



#ticker {
 width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
 font:normal 14px Georgia; padding:0 10px 5px 10px;
 background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;
 border-bottom:none; border-right:none;
}
#ticker dd {
 margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
 border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
 border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;

you can change any thing above( colors and dimensions )

Click Save template

Step 3:

This is the HTML part

Click Layout Then page element Now Click Add a gadget Choose HTML/Java Paste below Code in it Click Save !



<dl id="ticker">
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt class="heading">Heading</dt><dd class="text">Text,Images,Videos or Links here</dd>
</dl>

Now you can see auto scroll news ticker on your page.

Auto Horizontal Image Slider[Style 1] Using jQuery For Blogger Blog

2009-10-21T08:00:00.000-07:00

Also visit

Horizontal auto Image strip Scroller/Slider with speed control based on jQuery

Image slider is a widget or a pluggin by using which we can show several images on a specified area.

Hi guys here is another beautiful jQuery widget .This is an auto + click able vertical scroll Image or picture slider in any direction ( right or left ) direction.Further by using jQuery we make it more beautiful and light.Author is very creative( Credits are given below) he has given us three type of such image sliders they are all very beautiful and i will definitely try to introduce tutorial; to install them in your blogger blog easily first of all see the demo page below

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Installation :

I have simplified the installation to a great extent.It is just a 2 step work :)

Step 1:

This is the HTML part use this to Display images which you want to show in your image scroll area.

<div id="content">

<div id="slider">
<ul>       
<li><a href="http://templatica.com/preview/30"><img alt="Css Template Preview" src="http://3.bp.blogspot.com/_9UnRubulkWQ/St2nkPL76fI/AAAAAAAAAAY/8PVUeYOzaMg/01.jpg"/></a></li>
<li><a href="http://templatica.com/preview/7"><img alt="Css Template Preview" src="http://4.bp.blogspot.com/_9UnRubulkWQ/St2nklUGGXI/AAAAAAAAAAg/zR-mtLaO7E8/02.jpg"/></a></li>
<li><a href="http://templatica.com/preview/25"><img alt="Css Template Preview" src="http://3.bp.blogspot.com/_9UnRubulkWQ/St2nlE0TBlI/AAAAAAAAAAo/YZ8KjYS5Guc/03.jpg"/></a></li>
<li><a href="http://templatica.com/preview/26"><img alt="Css Template Preview" src="http://1.bp.blogspot.com/_9UnRubulkWQ/St2nlsFPgfI/AAAAAAAAAAw/LBcS1zw3UcY/04.jpg"/></a></li>
<li><a href="http://templatica.com/preview/27"><img alt="Css Template Preview" src="http://2.bp.blogspot.com/_9UnRubulkWQ/St2nmLn2TFI/AAAAAAAAAA4/4SWp0QRF6d4/05.jpg"/></a></li>   
</ul>
</div></div>
<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Step 2:

This is Java script part

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>

Paste the below code Below ]]></b:skin> code

<script src='http://bloggerplugnplay-files.bravehost.com/jquery.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

<link href='http://bloggerplugnplay-files.bravehost.com/screen.css' media='screen' rel='stylesheet' type='text/css'/>

Save your Template !

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play

How to Show Random or Auto Rotate Display Links/Text Using jQuery CSS in Blogger

2009-10-17T04:06:00.000-07:00

In this post we are going to create a small place/space on our website which will display links or text one by one in a cute manner using jQuery and CSS.It can be used to display hot content of your site,links to popular posts or recent posts or blog rolls etc.We can add Simple text,Links,Images to it.Before Installation have a look its Demo.

View Demo

The text used in demo is bigger than tutorial(Its adjustable:)

Installation :

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

Download Scripts!

Step 1:(HTML)

This HTML part will be used where you want to show Thumbnails / Images .Just use Below Format of code where you want to shoe Image on link hover



<ul id="tips">
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/zoom-image-to-original-full-size-on.html">Zoom or Magnify Image to Original Full Size On Click Using jQuery In Blogger</a></li>
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/crt-disturbance-on-image-burn-that.html">CRT Disturbance on Image ? Burn That Entena - Image Effect</a></li>
<li><img src="http://2.bp.blogspot.com/_JUJEXEamsyU/StmpeCouhiI/AAAAAAAAAsk/BTBzDQRKXGw/s400/BLOGGER+PLUG+N+PLAY.png"/></li>
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/show-imagethumbnail-tooltip-popup-on.html">Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.</a></li>
<li>Signature Image Below Every Post of Blogger based Blog
</li>
</ul>

Step 2:(Javascript)

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>

Paste the below code Below ]]></b:skin> code



<script src='http://teckzest.bravehost.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>

this.randomtip = function(){
var length = $(&quot;#tips li&quot;).length;
var ran = Math.floor(Math.random()*length) + 1;
$(&quot;#tips li:nth-child(&quot; + ran + &quot;)&quot;).show();
};

$(document).ready(function(){
randomtip();
});

</script>
<script type='text/javascript'>

this.randomtip = function(){

var pause = 3000; // define the pause for each tip (in milliseconds)
var length = $(&quot;#tips li&quot;).length;
var temp = -1;

this.getRan = function(){
// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
// to avoid repeating
while (ran == temp){
    ran = getRan();
};
temp = ran;
$(&quot;#tips li&quot;).hide();
$(&quot;#tips li:nth-child(&quot; + ran + &quot;)&quot;).fadeIn(&quot;fast&quot;);
};

show(); setInterval(show,pause);

};

$(document).ready(function(){
randomtip();
});

</script>

Step 3:(CSS)

Now comes the CSS part

Find ]]></b:skin>

Paste below code ABOVE ]]></b:skin>



#tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:250px;
font-size:16px;
line-height:120%;
}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* hide the items at first only */
}

Now Save your template.

Its Done !

Please comment to say hi =)

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play

Scroll or Back to Top Button Using jQuery For Blogger Blogs

2009-10-14T07:20:00.000-07:00

Scroll to top button is a link which appears to bottom of the page on clicking it the webpage scrolls back to top in beautiful manner.The Best thing is that it floats with page.And only appears when you are in middle or at bottom of page.Obviously we are using jQuery to make it more interesting.

View Demo

Installation:

Step 1:

Login to your Blogger account Click Layout Then Edit HTML Now check Expand Widget Templates

Step 2;

Search for a code </head> And replace it with



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/scrolltopcontrol.js' type='text/javascript'>
</script>

</head>

Then save template! Its Done

Extra Info : )

1) You can change Back to Top Text

2) You can place </body><a href='#top'>Back to Top</a> Code any where on page