SeoWebStars

Tampilkan postingan dengan label JQuery. Tampilkan semua postingan

Home » Posts filed under JQuery

Email Popup Subscription Box For Blogger Blog

Diposting oleh Unknown

Everybody knows the importance of RSS feeds. So its better to give the readers an option to subscribe to your blog feed by email. Another JQuery Widget with beautiful look, as before I have also share Facebook Popup and Twitter Follower Popup Widget for blogger user. But today I bring in this post another beautiful widget with JQuery light box. In this widget visitors can subscribe you blog�s daily updates via RSS FEED. So here is the complete instructions for how to install the email subscription widget.

Live Preview

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

More about → Email Popup Subscription Box For Blogger Blog

Add Twitter Popup Follower Box To Blogger Blog

Diposting oleh Unknown

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/AVvXsEihPlxcwcv__SjkQqs0q-zoEL1Oj7eRm8frsWKHPw1OOK0cwEIJSH3exQppTHZuYJVm1R4sTKsw-CdVgbIS5eb88c_Q1viPUd-TQn0XXIkMsZKdxgw_7RrAQ7xWwZn8_OuKl08g5T0avvr5/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/AVvXsEjSxJ-idXCmuSXZqhfdNlvsdkpfyUZ_PeYB9XEigbJONoHHm5URiX_Xzv_jxKcQezxpTLXYoinawgpg7ci3SPRoYdFsGUb2o7DT3vq0UEYTVKoSkMMYexiWmk9JcSph48xNVGSONK-eDuTJ/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/AVvXsEjSxJ-idXCmuSXZqhfdNlvsdkpfyUZ_PeYB9XEigbJONoHHm5URiX_Xzv_jxKcQezxpTLXYoinawgpg7ci3SPRoYdFsGUb2o7DT3vq0UEYTVKoSkMMYexiWmk9JcSph48xNVGSONK-eDuTJ/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/AVvXsEjSxJ-idXCmuSXZqhfdNlvsdkpfyUZ_PeYB9XEigbJONoHHm5URiX_Xzv_jxKcQezxpTLXYoinawgpg7ci3SPRoYdFsGUb2o7DT3vq0UEYTVKoSkMMYexiWmk9JcSph48xNVGSONK-eDuTJ/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. .!!

More about → Add Twitter Popup Follower Box To Blogger Blog

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Diposting oleh Unknown

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.

Read More:
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery

SeoWebStars

Email Popup Subscription Box For Blogger Blog

How to install email popup subscription box

Add Twitter Popup Follower Box To Blogger Blog

How to add it to blogger

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Stylish Scrolling Recent Posts Widget For Blogger

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Stylish Animated Blogger Recent Posts Widget

Scrolling Recent Post Gadget For Blogger

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Tooltips Recent Post Widget For Blogger With Thumbnail

Add Multi Tabbed Navigation Widget To Blogger Sidebar

Popular Posts