Earn Money Online: jquery

Showing posts with label jquery. Show all posts

Wednesday, January 21, 2015

Add jQuery Page Loading Effect to Your Blogger Blog

Adding page loading effect to your blogger blog will reduce your readers get boring. Its main purpose is to tell your readers that "your content is loading, please be patient". Today let me explain you how to add a jQuery page loading effect to your blogger blog/website. This effect works with jQuery. I hope it can help your visitors to stay for a while till it gets loading.

Sunday, January 18, 2015

Add Apple Like Retina Display for Blogger Blog

Each and every one know whats Retina Display when Apple released MacBook Pro with this feature. Today in this tutorial I would like to tell you about how to add Apple like retina display effect to your blogger blog by using simple jQuery and CSS. I hope it will definitely increase your Email subscribers. Its originally created by Tutorialzine and I just re-shared in my blog.

Sunday, March 9, 2014

Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default Lightbox set up by Blogger, here's another amazing way to show off your pictures. If you've missed out, I have already shown in one of my posts how to customize the Blogger Lightbox by changing the background color, borders or the text color, but this tutorial will show you how to replace it entirely with a cool jQuery Lightbox plugin that is very popular among bloggers.

What this Lightbox does, is to display larger versions of the images that will pop-up into a larger box once we click on them, and allows us to easily navigate through that set of photos by using the previous and next buttons.

To see it in action, please visit the following demo blog and click on any picture to enlarge it.

Demo Blog

Adding jQuery Lightbox to Blogger

Step 1. From your Blogger Dashboard, click on Template > Edit HTML

Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. Paste the following tag inside the search box and hit Enter to find it:

]]></b:skin>

Step 3. Choose one of the Lighbox styles from below and paste the CSS code just above the aforementioned ]]></b:skin> tag:

Custom Blogger Lightbox with White Background

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

Custom Blogger Lightbox with Dark Background:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

Step 4. Now find the following tag and just above it, add the below scripts:

</head>

Script for Lightbox with White Background:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/>

Script for Lightbox with Dark Background:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/>

Step 5. Click on the "Save template" button to save the changes.

Finally, we need to disable the original Blogger Lightbox so that it doesn't interfere with this one that we just added: go to "Settings" > "Posts and comments" and on the right side, you will see the "Showcase images with Lightbox" section > select "No" and click on the "Save settings" button on the upper right side.

Now, view your blog and click on any image to see this Custom Blogger Lightbox in action. Enjoy!

Monday, February 17, 2014

Orbit - jQuery Image Slider Plugin For Blogger

In this tutorial, you will see how to add 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 that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed.

If you want to see this cool image slider in action, please visit this demo blog:

Demo Blog

Related:
Photo Gallery with Thumbnails using Javascript and CSS
Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery
Image Slider that Displays Pictures on Mouse Hover using only CSS

The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the span tags of these images.

How to Add the Orbit Image Slider to Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys to open the blogger search box. Paste or type the below tag inside the search box and hit Enter to find it.

</head>

Step 2. Just above </head> add the following scripts:

Note: You can change the transitions speed between each image by modifying the 5000 value from the line in blue - a higher number will make the pictures stay longer between each transition.

Important! If you have already a version of jQuery in your template, please remove the line in red, otherwise the slideshow might not work.

Step 3. Now it is time to add the CSS. Find (CTRL + F) this tag:

]]></b:skin>

Step 4. Just above ]]></b:skin> add this code:

#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWQnm0y9UEXmWTKwaDqpmWZjq1oRJxsOV0Cxzv8akHAyr8L5CdRD2NN-QWkG6HBnqUPmkvZGxT1gJmGX01nkGClLqIVDhWJU3qibyFYZM0aUoaGWIg5A8oE0BWGt1zIIXc7tpoO1KNLyG/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6nJ4QpZFrxboNNQv-Hw2jybuJRbLZelU3S7mSyorbck1_KnPEqzWjozSzSQZ7ya2F2itNR2Z7bpeq8t1vWt9CE-KCbh6RzKleiRzxvihLFlC9IhtD9GsTN7JizJz8QcW4NB3zbGIaQRw/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9BGnU7vNuNQz-sbZcWItYUh-bkKD2ffg4LWWVwA2t-vhxB9ErM9ArdSIQocL3Knky3EicqPny7Z485Iq8CDv-j5lAOjCbFjgWMGfvehFE798cFKdM0IUkDa4R-G1snPJPSg-cb3CCf3W/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zi7bwBKqhkUV6T1pD5M76_N3ZhWXvU7AIs4ApzUdT26on39vxj6GeE5TTZ4egjpmWjYLQe5kKP_wXfdkb0ZnbVqTvM683i8zeZo34aIJ0HK4tfo0r9cJm4I_845BAGuC7AES-raPoAd1/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Qw1hTUx64JJNaHnZ59rN7cyezHRJeA14yuSphyphenhypheniFTd257VbWjhWNGuL3phjYrbezgTI2MRSjuHTMCFxcnhLuHVQhM8hs0HfVPM3zLHlGNfPWTCej5CDScFBE_mBM5eX6P_Rxi9sjvjDu/s1600/arrow-left.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWALnRbWe1BHv6StqGms1n1tFUQFWLxV7bYV-xM3Sw-OvWJRpSDgNLaY_AfinQiIt9TVURDwB661IMzM7PhtRcOdecnn4NXQNdXlXRM2ZWiaLCw2ha5D5YJ91hBdpNg0z_sTIzrwbRICT/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Step 5. Click on the "Save template" button to save the changes.

Finally, we will use the HTML 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.
If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post.

If you want to add it in the blog sidebar/below the header, go to "Layout", click on the "Add a gadget link" > choose "HTML/JavaScript" from the pop-up window and paste this html inside the box:

<div id='featured'>

<a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo1'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>

<a href="Link URL"><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo2'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span>

<a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>

<a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo4'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span>

</div>

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 that can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red.

If you want to add more pictures, add this HTML before the </div> tag:

<a href='Link URL'><img rel='photo5' src="image URL" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo5'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span>

Notice that each image and description has an unique identifier (id) and shouldn't be repeated. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the "rel" attribute with the name of the id, that is rel="photo1".

After you added your images, click the "Save" or "Publish" button and that's it! Now you can enjoy this cool Orbit Image Slider for Blogger.

Saturday, February 15, 2014

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it.

Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc.

You can find a demo of this panel in this blog - just click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag:

Step 1. From your Blogger dashboard > go to Template > click on the Edit HTML button:

Step 2. Click anywhere inside the code area and search by pressin the CTRL + F keys for the <head> tag

Step 3. Below the <head> tag, add this script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$("#open").click(function(){
$("div#panel").slideDown("slow");
});

$("#close").click(function(){
$("div#panel").slideUp("slow");
});

$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});</script>

<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

Step 4. Now search (CTRL + F) the </head> tag and add the CSS styles just above it:

<style>
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTeT_ozY17QXyKQBvTgfj434P6b6pI5DQ5iqr1fggutyDLL8Pj4z711mq4tHrX80MEtOviAvEWrdNY6Z2viwNZWKwl3M2bGCFiyjNMjGK1uHcnqdIOI_zzM5EnChADgVBbeuIEuIFiY_1/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUB2Oojztrrpy_pmzi292llmLuhU3wQ0Ciyqk4cDNnDZqsyCUZO3KMrs6b0t-xe5nn0kOUHYlRdXUKUeKflK-iNS8T-QMQAw945PIu8OnWFpd31YMXbTL9ZdAs_oZTd_xwOvx_UWjRkA8/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisj0mf3mDjrdYoFe4PVRVP69tsTLKxkous3NYGxGhlAO_b2cmuSCtq4bajALMKyI_kL9pt8ziXpncBvZYzenFe8XT0-lwEgGEwtogSSlWBp6Sulc0LarMs4XmuCR2l2O7CJcZije5E5c-f/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy6p4yfTbu8n2Xgqzdir_8wyQY_fAWJm10XXop5TGcJjs_aozlPApLlf0CK0l__a0EAxX7uGqiL5W2vuP__1-uAgRrdxljum0umIE2ljfDQrBLPnTxCQE3GWu8pjJIBdQlz8gqZZ50wBnD/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCdkDDum1uqbFEAv3OZxsKM6Q3-X3GyVRF3P1HfgixmKVp_JIvt8-w61QZ3Z3Glaix3sPWHaQSFa58wNGzCeoLgWMBtO8dZtz4F0X3JZv8j2AxVheHLoMBNvnwLkyi7Ai1jmgF7hpTrEL/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzJFlbstDdxOdRmLWYxy5xQyJC-2BLM7w5pHniQzdZZynPJWM0TWTJ5dAsd4baOF5F8tZq7J77L6qm9rnyDhA0u9Uh6Ichx9jEUY4op5kAOPQa0gyBdrSDS-vVYjoeD0V93bGHjoNOF7V/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCdkDDum1uqbFEAv3OZxsKM6Q3-X3GyVRF3P1HfgixmKVp_JIvt8-w61QZ3Z3Glaix3sPWHaQSFa58wNGzCeoLgWMBtO8dZtz4F0X3JZv8j2AxVheHLoMBNvnwLkyi7Ai1jmgF7hpTrEL/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzJFlbstDdxOdRmLWYxy5xQyJC-2BLM7w5pHniQzdZZynPJWM0TWTJ5dAsd4baOF5F8tZq7J77L6qm9rnyDhA0u9Uh6Ichx9jEUY4op5kAOPQa0gyBdrSDS-vVYjoeD0V93bGHjoNOF7V/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbtjh3XBkHWIatbUD7AiQrrQ_7qyQAAn9nm-ECYBQRiDmcacHpra1OG6tLsyB65pXJkbuwUrtR9AzxXowiORrMxwCkWxZwDshdUi_GJsOPbSG78VpA_HzKRCMucAfBPm5A3uq5SYeyipB/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMnJT5f8TElsYLHiJbZmttx1Ct8_ei9HXizLPAV3GpDzQ7ZP2MKB4eO_ZRuA0O1rOF8JJ1WVLSRzvB6facPwR7abXQpHEssm0RHMk-Zo67F5OblVnJ6Kj4YBJwNB4O15W_4rzaeAoZlsD/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
</style>

Note:
- in case you need more space for your widgets, the height of the entire container can be changed by modifying the 230px value from height: 230px;
- To change the background color, change this color value: #272727

Step 5. And finally, we will place the HTML structure of it - right after the <body> tag, add this code:

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>


<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
<div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPMr_zCB2R8Fl_jLo2eUY_S1QQsyY7_VMkm_oEW-pHW80JEett_aoAHU9fIFXJe7NjlKErunjIFqaB2wT7x6QBbeF8lfer7gBmA7TnCFkvX7W4l9cL4wsT9zARlfMBfb0c3xO0QiDwI7d/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>


<div class='left' style='width:320px !important'>
<h4>Categories</h4>

<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>


<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>

<div align='center' style="clear: both;">
<a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRmE09neHTMVkp_DekD1MeWiuOQq32jxq7qUCw4nr78jLbQEJ4EO0B31-CtlX7jryPCPWeckcb6pAqlMSSBsv0IY-q5H_OCYQ-jI-YUoECLC-AD0SjiRRt-n314L1DrHWPds5wOPian7q/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5oBZMHaAiBxGLW4DBkeBfGVrKBTicctMUjLwVj9eIDGESFW2RKrDQeqrbl7DHLpXxSxjqLyb7Xiy2Zfc7_0h6lMmB-4ytnrDp9qMpM_kdYJmLKaPNCYgSO9ru11FmJMst4U_U5QjEvhM/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFq-TTnIdeIPrrYpYLnZZet2XMlPYC6GwjXZd4eTE1vRD9sfoH6ucG0MfLfJxasszIgUtG5-0JCnedvh0Xfl6rTbPq_ZkCPCdAMNQKYCTf1sIYfSeFga-jcSBH1IZBpO6QjcW6ORLDrv1W/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtm-xkQLRDxYBlzCCC2OKvC7LDmGLQfcQwOUhlT6guKL0sh6QpDckvxOn7XzhllOyenQzZYq8qgC7voAcjB5z8IOE12idsPHeC_aMn1OCh9-8K7zqVYkadFGqxPzVgPeam4hizXp9T_gDZ/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Note: if you can't find the <body> tag, then try to find this one:

<body expr:class='"loading" + data:blog.mobileClass'>

Here we have added the content in the sliding panel which will be hidden and will show on mouse click. In green are the names of each section so to make it easier to recognize them.

Note:
- In the first section, you can change the welcome message, "Meet the author" title and add your description by replacing the text in bold. To add your own picture, replace this URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPMr_zCB2R8Fl_jLo2eUY_S1QQsyY7_VMkm_oEW-pHW80JEett_aoAHU9fIFXJe7NjlKErunjIFqaB2wT7x6QBbeF8lfer7gBmA7TnCFkvX7W4l9cL4wsT9zARlfMBfb0c3xO0QiDwI7d/s1600/profile-pic.png

- In the second section you have the categories - there add the URLs of your links by replacing the addresses in blue and replace Category 1, 2, 3... with the titles that you want to appear for the links.
- In the third section is the email subscription - you must have enabled this option in your Feedburner account - just replace the text in blue with the name of your blog's feed. As for the social icons below, change the URLs in blue with your Facebook and Twitte and add the URL of your blog's RSS feed address.

Basically, those are the main sections that can be customized, though, we can take some parts and paste something else instead.

Step 6. Save the template and that's it! Note that this menu works with jQuery, so if you are already using Scriptaculous, Prototype or Mootools, then it will not work.

I hope you'll enjoy this elegant menu with sliding effect, which will look way better if we remove the Blogger navbar.

Sunday, January 12, 2014

How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the selected picture, thus making it easier for you to pick different images on mouse click.

With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.

Related:
Image Slider with Mouse Hover Effect using only CSS
Possibly the Most Simple jQuery Slider
Spacegallery: A Time Machine-like Slideshow/Image Gallery

How to Add Image Gallery with Thumbnails to Blogger

Step 1. Log in to your Blogger account, select your blog and go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Type the following tag inside the search box and hit Enter to find it:

</head>

Step 4. Now pick one of the styles below and copy the code below it:

Style 1

<style type='text/css'>
#image-gallery {display: none;}
#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
#jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;}
</style>

Style 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;}
</style>

Note: The display: none; of the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to count the width of the thumbnail (80px) plus the margins between them. The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails.
Step 5. Paste the code of the chosen style just above the </head> tag.

Step 6. Now above the same </head> tag, add this script:

<script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Basically, what this script does, is to look if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do when they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in the larger container.

Step 7. Finally, save the changes by clicking the "Save template" button.

And here's the HTML code providing a normal list with the image-gallery ID, enclosed within a DIV with a relative position, so that it will avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to Layout and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post/page in the HTML section.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Note: if elements on your page overlap with this gallery, you might need to add the height declaration after the "position: relative;" The value of height depends on the size of your gallery.

Example:

<div style="position:relative; height: 500px;">

Change IMAGE-URL1 with the image URL. If you don't know how to get the address of an image, see this tutorial: How to Upload Images and Get the URL

In case you need to add links to your images, add this HTML structure instead:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Again, here you need to replace the page-URL text with the URL of your page/post.

Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div>
</div>

Save your widget or publish your page and you're done!

Thursday, December 19, 2013

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is one way to make your site more interactive so that readers can "play" with certain elements of the page being able to drag from one side to another within the container in which they are, i.e. can drag the images with a script that will allow them to move from one place to another within the blog.

Demo

You can see an example in this test blog

To create this effect on images

Click anywhere inside the template's code and press the CTRL + F keys to search for this tag:

</head>

Just before </head> paste the following scripts:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.easydrag.js' type='text/javascript'/>

Note: If you already have jquery, please remove the code in red.

Now when you want to drag an image, use this code inside the HTML of your post or of your page:

<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

Change the URL of the image where is indicated, and furthermore, it is important that each image has a unique ID, in this example the ID is called easeydrag1, that ID must be twice.

If you have another picture with this effect, then you should put a different image with other ID, for example easydrag2, otherwise it will not work:

<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
<img id="easydrag2" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
$(function(){ $("#easydrag2").easydrag();});
</script>

And how do you do if you want to put a link to the image?

We will set one Javascript function, so that when we will double click on it to open the page we want.

In this case, the code you would use, would be this:

<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('link-URL')" src="image-URL" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

With this the picture can be without any problems dragged around and can be activated by double clicking on its link.

Monday, October 28, 2013

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out. There is nothing complicated about using this type of carousel, however when it's about customizing it, we need to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

To see it in action, please visit the below demo blog and just drag the red dot:

Tiny jQuery Circleslider Demo

Adding the Tiny CircleSlider to a Blogger Blog

In order to make it work, first task is to add the javascript jQuery library in the template:

Step 1. Log in to your Blogger account > select your blog

Step 2. Go to "Template" and hit the Edit HTML button:

Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:

</head>

Step 4. Just above the </head> tag, add the following scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>

Please note that if you already have another version of jQuery, you will need to remove the line in red.

Step 5. Now, let's add the CSS styles above the same </head> tag:

<style>
#rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
}
#rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
#rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT7NhUWGGJcRa2LfvoQyNbMeo90sKo8TtX7atfYHYI7hNPWJ62CeCK_Vv4EQqr4iyzoUhAjzRSrODsysuPv7MbDgzISo8PXR9DYJfbZ3nZROEDlF_srRykBiS8DM00w1wLmIHX2_dtc2sX/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikykY0E8-_kdIaHPhs5mxvPBIpVKM8WGi-u-m0dXkgS7kEaCkTiSlTtUu7iBR1HxFNrst-x39UyTl5ARdnsPaKI3w7ZsY8_sd-WiNZ0pFL6He3Z5k0UMWTTFnNfJXh4Q5s5QHbq31NXTh/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
}
#rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xCoM1rONXx_P1WCxXSsZReS9i1bvZwliKyu2ccGi6VGdCsfi8qtWHJYR6xuVkG56N8H5op-mPIvY95paMYMLqwxTZauzopc1_joq8G1CopXM-ZyiYZLQvGG8RtWq5gRAO7PnJfVxF0gJ/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
}
#rotatescroll .dot span { /* are hidden by default */
    display: none;
}
#rotatescroll .viewport ul.overview li img {
   width: 100%;
   min-height: 260px;
   margin-top: 20px;
   padding:0;
   border:0;
}
</style>

Screenshot

Step 6. Save the changes by clicking the Save Template button

And here's the HTML that has to be added to where we want to display the carousel. To add it inside a post, click the "New post" button on the left side of your dashboard and paste the below code in the "HTML" box of your post:

<div id="rotatescroll">
<div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>

Adding HTML inside a Blogger post

Replace the imageURL text with the URL of your images.

Some other options that could be added, separated by commas:
1) snaptodots: false if you want no dots to be shown when dragging them
2) hidedots: false if you want to display the internal points (by default is true)
3) intervaltime - is the time between slides (by default 3500)
4) radius - defines the size of the circle (by default is 140)

To add it to your sidebar, simply go to "Layout" > click the "Add a Gadget link" > from the popup window, choose "HTML/Javascript" and paste the code inside the empty box.

Sunday, October 27, 2013

Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

You can test it on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements active again, just click the "Turn on the lights" link:

Turn Off the Lights DEMO

How to add the "Turn off the Lights" Feature to Blogger/Blogspot

Step 1. Log in to your Blogger account and click on your blog > go to "Template" and hit the "Edit HTML" button

Step 2. Click anywhere inside the code area and search for the following tag by pressing the CTRL + F keys (hit Enter to find it)

</head>

Step 3. After you found it, paste the below scripts just above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Note: if you already have one version of jquery in the template, please remove the line in red.

Step 4. Now search for the following tag:

]]></b:skin>

Step 5. Just above ]]></b:skin> add the following CSS:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgyt6EiTNqqLsFtIAcZLklYCInvxMcYfZs0jY1WhuZqXQMznKpPsOS5-NLq8ACBeOlhR96IgJKb5kvvXd0TNjv1R6Swbb3AkeWF_v15G5u75JgFPRugBQP5K8RdYa3iUbNVA_7u93quMi/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHkUQC4Thjq5RkHFjzn4A6_T6RqM94KzqRR3ZQWpq8c1LJWkxoW9Q8YNdYnBUKzn_NH5fISJNiD6ZETSA1EisrjNyUhgkBkgw7L3zIlA3z0X617rgutE0tF7YaU7tGPMqcwoz78KeUw2T/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 6. Try to find this tag:

</body>

Just above the </body> tag, add this HTML code:

<div id='lightsoff'/>

Step 7. Click the "Save Template" button and that's it!

Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

Add the code of your video instead of the blue text and "Save" or "Publish" your gadget / post. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery and if you use another version of jQuery, you must check to have only one, otherwise it might now work.

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery to display two pictures dynamically for comparing them at the same time.

To see it in action, please click on the demo link from below - by dragging sideways the small bar, you'll see both images that are being compared:

Before & After Demo

Implementing this script is really easy. We just need jQuery, the Before/After script, and the two images to compare.

How to add Before/After Effect on Blogger Images

Step 1. Go to Template > Edit HTML and click anywhere inside the code area. Now press the CTRL + F keys and search for the following tag - hit Enter to find it:

</head>

Step 2. Right before </head> paste the following scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
});
</script>

Step 3. Click the Save template button to save your changes.

Note: if the above script doesn't work for you, add it above the </body> tag. Also, please see if you have added jQuery in your template (if you did so, then remove the line in green)

Step 3. To add it as a gadget - go to "Layout" > click on the "Add a gadget" link > choose "HTML/Javascript" option in the pop-up window and paste this code inside the empty box:

<div id='beforeafter1'>
<div><img alt='before' src='URL of the first image' width='500' height='291'/></div>
<div><img alt='after' src='URL of the second image' width='500' height='291'/></div>
</div>

Add the URL of the first image that is the "Before" image, and the URL of the second image that should be the "After" image. Also, don't forget to specify the width and height of each picture, so that they work on all browsers (see the part in orange and just add the height and width of your images).

If you want to add more images, you will need to change the ID of the container. In my example, the container is called beforeafter1, so you will need to change it to beforeafter2 and so on, although, you can choose any name as long as all are different.

Then, add another line, like the blue one from below, in the first code that you added in step 2:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
$('#beforeafter2').beforeAfter({showFullLinks : true});
});
</script>

You can add as many before/after images as you want, as long ass all containers have a different ID and the corresponding lines are added in the script.

Below each image /photo container are the "Show only Before" and "Show only after" links that, once you click on them, will display the "before" or "after" picture. If you want to hide these links, then just change "true" to "false" in the first code (step 2) and they will not be displayed anymore.

Note: if you see white space around the drag icons, then search for this code in your template:

<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>

And change the #ffffff value to transparent. That's it!

Autor: Catch my fame