Hello!
Can i help you?
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
JQUERY: Simple Accordion Drop Down Menu With Jquery & CSS
JQuery Plugin: Social Subscription Sliding Bar
Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over. jQuery Custom Image Lightbox
Well here I will try to share the lightbox with a different look than the default lightbox blogger, you just need to add the jQuery and CSS code.
How To Add Flat Scrolling “Back To Top” Button Into Blogger Blog
Performs a smooth page scroll to an anchor on the same page using JQuery, it is very cool way to attract your readers and maker your web site navigation easy.Today in this tutorial we will share a awesome JQuery smooth scrolling back to top button, It appears on the right side bottom only when the user scrolls down the page and disappears as he scrolls up. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.Email Popup Subscription Box For Blogger Blog
How to install email popup subscription box
You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup. So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"395px", height:"435px", inline:true, href:"#email-popup"});
}});</script>
Note:- *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must annoying your Blog regular readers. So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. ( Note:- Click the black arrow to expand the code. )
#subscriptionwrap {
width: 600px;
background: #e9e9e9;
padding: 15px;
margin: 14px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}.subscriptionbox h4 {
font-size: 30px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow: 1px 1px 5px #333;
text-decoration: none !important;
}.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}.emailbutton1 {
background: #f7f8f9;
background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
top: 0px;
margin: 10px 0 0 -15px;
cursor: pointer;
padding: 18px 15px 15px 15px !important;
font-size: 14px;
font-weight: bold;
text-decoration: none !important;
}.emailbutton1:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
text-decoration: none !important;
}.emailinput1 {
width: 490px !important;height: 37px; padding-right: 30px !important;
float: left;
margin: 10px 0 0 0px;
padding: 8px 40px 8px 10px;
border: 1px solid #d2d2d2;
background: #fff;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #949494;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none!important;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
</div>
</div>
8. Now you need to make these changes in html code.
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Now replace bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>
9. Save your template and you are all set!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong Twitter Followers growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
Image Credit:- FreeDigitalPhotos.net
Add Twitter Popup Follower Box To Blogger Blog
Now a days every blog owner thinks to increase his/her blog's traffic and the most popular way to increase blog's traffic is to Share your post on social media Sites like Facebook, Twitter, DiGG etc. So today i have come with Twitter Follower Box Widget for blog owner who run their blog on blogger. It works like and is closely based on Facebook fan/Like box algorithm. The widget designed for get more Twitter Followers. This box has also a close button at the top right corner. Visitor can close this widget by clicking on close button. Popup box widgets really annoy your visitors when they appear again and again, but they help you in developing your blog well when you use them properly. Twitter is a major source of traffic which can send your blog a good traffic flow when you have enough Followers on your Twitter page. To expand your Twitter network and to increase your Twitter Followers, I have brought a very stylish Onetime Twitter Follower Popup Widget for your blogger blog which will appear onetime only and thus it will increase your Twitter Followers dramatically without annoying your visitor. We are again Say Thanks to jacklmoore for providing a juqery light box.
Live Preview
How to add it to blogger
You can Install This Widget Easily in your Blog By Following These Simple Steps....Before you edit any template it's better to keep a Backup.. So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"395px", height:"435px", inline:true, href:"#twitter-popup"});
}});</script>
Note:- *7 Setting this value will effect cookie refreshment. I have set the Follower box to appear once to the visitor and Follower box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must annoying your Blog regular readers. So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. Click the black arrow to expand the code.
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 20px;
background: #000;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
border: 5px solid #000;
background: #fff;
box-shadow: 3px 3px 3px #fff;
}
#cboxTitle {
position: absolute;
top: -20px;
left: 0;
color: #ccc;
}
#cboxCurrent {
position: absolute;
top: -20px;
right: 0px;
color: #ccc;
}
#cboxLoadingGraphic {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1e07ZypPNOkyGU50DNJKhLh0IcQdNECq0k239P2gQwojYyImttsKuri6vFYUeu8VOreB619ew9xMNRNrUOSPT1-LAqpM6VRTG_J3kG-UVWgU7TywvvPVThcDPLGkZFltYO4gJPAKXvKk4/s32/loading.gif) no-repeat center center;
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
width: auto;
background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: none;
}
#cboxSlideshow {
position: absolute;
top: -20px;
right: 90px;
color: #fff;
}
#cboxPrevious {
position: absolute;
top: 50%;
left: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top left;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxPrevious:hover {
background-position: bottom left;
}
#cboxNext {
position: absolute;
top: 50%;
right: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top right;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxNext:hover {
background-position: bottom right;
}
#cboxClose {
position: absolute;
top: 5px;
right: 5px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top center;
width: 38px;
height: 19px;
text-indent: -9999px;
}
#cboxClose:hover {
background-position: bottom center;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='twitter-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;'> <h3 style='background: #000; color: #fff; margin-bottom: 20px; font-family: Verdana; Font-size: 18px; font-weight: bold; padding: 10px;'>Receive All Updates Via Twitter</h3>
<div id='twitter-box'/>
<script>
var tw_user = 'mybloggertriks';
var tw_width = 342;
var tw_height = 315;
var no_face = 18;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//50.63.179.86/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
</div>
</div>
</div>
8. Replace mybloggertriks with your Twitter username.
9. save your template and you are all done. .!!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong Twitter Followers growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
add Facebook Popup like box with jquery to your blogger blog
Add It To Blogger
You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", height:"430px", inline:true, href:"#facebook-popup"});
}});</script>
- *7 Setting this value will effect cookie refreshment. I have set the likebox to appear once to the visitor and likebox will appear again after 1 week. If you want to display likebox to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.
4. Now Search for </b:skin>. Click the black arrow to expand the code.
5. and paste following css code before above </b:skin>
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1e07ZypPNOkyGU50DNJKhLh0IcQdNECq0k239P2gQwojYyImttsKuri6vFYUeu8VOreB619ew9xMNRNrUOSPT1-LAqpM6VRTG_J3kG-UVWgU7TywvvPVThcDPLGkZFltYO4gJPAKXvKk4/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgPfasoLZVIrmHbA2-b8OXdRILcWGvs-joYbt8gHKr0b3VpcvKs6YETt90SWoQg4PkIhh4TD_ALpVG-OC0lhWkBstc0di6agKocJ7ero3McIJ-fTfnq2J65cFCvDkomofSDKSp7pESDMl/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }
6. Save your template and you are done second last step! Visit your blog to see it working just perfectly.
7. Now finally find following code.
</body>
8. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: 'Source Sans Pro', Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmybloggerstricks&width=342&height=300&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
</div>
</div>
</div>
- Replace mybloggerstricks with your facebook fan page username.
save your template and you are all done. .!!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.
I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong facebook fan growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
add Lazy Load Plugin to your image gallery blog
Add Load Lazy Plugin To Your Blogger Blog
Note:- Practically everyone has JavaScript enabled. However there are cases when you want to show the real images even if request come from client which does not support JavaScript. Google crawlers are one good candidate. Google crawlers do not execute JavaScript but also seem to ignore noscript content. To degrade gracefully when JavaScript is not enabled you can include the real image tag inside <noscript> block. More Documentation This is only for advance user.(Not A Beginner)
It improves your website’s performance by loading your website images lazily. This includes:
1. Post images
2. Post Thumbnails
3. Gravatar images and
4. iframe content
These images will loaded only when your visitors scroll closer to them.
Plugin has been tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.
1. Go to your Blogger Dashboard>> Template>> Edit Html
2. and find the following code
</head>
3. paste following code before/above “</head>”
<script type='text/javascript'>
//<;
self.loaded = true;/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.data(settings.data_attribute));
}
});/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function(event) {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});/* Check if something appears when window is resized. */
$window.bind("resize", function(event) {
update();
});
/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
return this;
};/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
var fold;if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}return fold >= $(element).offset().left + settings.threshold + $(element).width();
};$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() or */
/* $("img").filter(":below-the-fold").something() which is faster */$.extend($.expr[':'], {
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});//]]>
</script><script charset='utf-8' type='text/javascript'>
$(function() {$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMO_eynt3sTu3mDw9A-OQL6qQQ_ZdAQqTXUyEk45CtPwIPSrPcj8mWZMliYGskeRq1HQ1oKEg5hOFnlg-_d-H93mWM8SloxLGxp8PUrA8qS91UDnwBvbTdNPblPM53YKKuPcI6okyEXjQ/s1600/grey.gif",threshold : 200});
});
</script>
Credit
A Plugin Created by Mika Tuupola. We are thank full to mika for this great effort. This plugin very useful for Image Gallery and also for your portfolio websites.
Attention
The number of internet users are turning into publishers at a fastest rate, therefore you must be careful when applying a tutorial to your blog and extra careful when the tutorial talks of Jquery and SEO. I am observing baseless SEO tips coming from new bloggers that causes more harm to blogs at long term then a short term relief. Almost every new blogger has started sharing his own ideas of SEO and writing codes. This is surely encouraging but on the other side incorrect knowledge has caused several blogs to be hit by Google penalties such as Panda and Penguin.
Need A More Help
Please let me know if you want any help here. I hope this technique would further help developers to create more interesting blogger templates and contribute further to the blogosphere community. I would love to hear your feedback on this. Please let us know of your precious views so that we could improve it further if needed. Thanks for reading our post. and don’t forget to subscribe our blog by using email notification, Facebook page or by following our twitter page. Thanks for reading our post.
add Awesome infinite Scroll to your blogger blog
Infinite scroll has been called autopagerize, unpaginate, endless pages. But principally it is pre-fetching content from a Consequent page and adding it directly to the user’s current page. Infinite Scroll is a popular way to dynamically load fresh content into a site as a user scrolls down through it. The uninterrupted attention a user maintains when more content is provided automatically is at the core of the attraction of the infinite scrolling. The reader will not have to stop to think where to find the next button or which number of pages should come, following an improved attention. In psychosomatic terms, infinite scrolling seems to trigger automatic responses based on interest and the alleviation of the expectation produced while waiting for new information, which causes a kind of excitement and willingness to continue scrolling to see what comes up. So i think we need to stop discussion and start tutorial. Here’s a quick walkthrough of how to do it. In the Live Preview I have the set home page to show 3 posts, scroll to the end of the posts you will see the link to "Load More Posts". If you continue scrolling posts will load automatically.
Add it to blogger
1. Go to your blogger dashboard>>template>>edit html
2. Press CTRL+F and Find the following .
</body>
3. Copy the code below and paste it right before/above </body> tag in your template.
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/40233106134/infinite-scroll.js"></script>
4. That’s it you're done! Save it and view your blog.
Credits
This Smart Feature script Written By Manki's Weblog, Visit Manki’s Blog say thanks and if you want reshare this article Please give a link back to this page. Thank You in advance.
Having More Trouble
For any further help please feel free to post your queries in the comment box below. Peace and blessings buddies. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post. Keep up to date with new features and opportunities by subscribing to our blog via email Notification, adding our Google+ page to your circles or like us our page on facebook. Thanks for reading our posts.
How to Make Widget or element sticky in your blogger blog.
Now time to make widget sticky
1. Go To blogger dashboard>>template>>edit html
2. paste the below jquery script before/above </body> tag.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#mbtsticky").sticky({topSpacing:0});
});
</script>
Now If you want to make blogger official widgets sticky you need to edit widget code in your blogger template. For example. we add blogger official follow me by email widget and make this widget sticky. Follow the steps below.
1. Go to your blogger>> dashboard>> layout and select Follow By Email Gadget.
2. and click on save. widget is added successfully.
3. Go to your blogger dashboard>> template>> edit html and find the following text ( your widget title)
4. in our case we find “Follow by email” our widget code look like this.
<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <b:if cond="data:title != """><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit=""window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable> </b:widget>
5. add div tag with your sticky id. final code look like this.
<b:widget id="FollowByEmail1" locked="false" title="Follow by Email" type="FollowByEmail"> <b:includable id="main"> <div id='mbtsticky'> <b:if cond="data:title != """><h2 class="title"><data:title/></h2></b:if> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" expr:onsubmit=""window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"" method="post" target="popupwindow"> <table width="100%"> <tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text"/> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit"/> </td> </tr> </table> <input expr:value="data:feedPath" name="uri" type="hidden"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div> </div> <span class="item-control blog-admin"> <b:include name="quickedit"/> </span> </b:includable>
6. That’s it your done!! save it and take a new look of your blog.
7. If you want to make any other widget or element use id “mbtsticky” with div.
<div id=”mbtsticky”>
Your widget code goes here.
</div>
Remember: The ID of your widget should be unique. For example, if you are using id='followbyemail' in any of your widget then you cannot use the same ID for others.
Sticky sidebar Elements, widget can bring a lot of growth Making Your subscribers. They help in increasing user engagement. You can also use multiple sticky widgets in sidebar. However, this act might Aggravate your Readers. Make sure you have a equal design, so that it don't Irritate your Readers.
Please let us know of your precious views so that we could improve it further if needed. Peace and blessings buddies. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post.
Add Awesome Google style search to blogger blog
Google is the best search Engine in the world. Google update there home page in June 2011, New Google homepage with smaller logo and links moved to the top and bottom edges of the browser for a cleaner look, I think this look much better than older look. I'm sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog. when see Google Style search box tutorial on http://www.Queness.com I am very happy and add this search bar on my blog. The new search bar has a more modern minimalist look with rounded corners and hover effect. you can create Google Style Search widgets with some HTML, CSS & JQuery Combination. in this tutorial I’ll also show you how to re-create Google style new search button with some simple CSS Codes. I edit this search button with Green color which compatible with my template style sheet. you can also edit button style with your template colors. so Read all steps and make a beautiful Search button. Special thanks for this tutorial goes to Awesome Queness.Com design blog again & again. You Can See Live Demo on this Blog.
Subscribe to:
Posts (Atom)