Force to Subscribe Widget for Blogger Blog

After another busy weekend,I returned with another cool post.I was mentioned that how to attract readers to your blog and make them stay.Now Im going to tell about how to force your visitors to subscribe to your blog updates.
Its really nice to get more subscribers to our blog.You already know that subscribers are the returning wealth of a blog.If you have a good amount of subscribers,you don't worry about the traffic(I mean,it never down).Its not so easy to get much subscribers to your blog because most of the subscribers are lazy to subscribe.So sometimes we have to force them to subscribe.
Adding the below widget is a good way to force the people to subscribe to your updates.check the screenshot:

Now how to add this subscription widget to your blogger blog.Follow the steps to make it easy:
Step 1 : Login to your blogger account >> Design(Layout) >> Add a Gadget
Step 2 : Choose html/JavaScript


Step 3 : Paste the below code inside it
<style type='text/css'>

.wb a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.wb a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wb a:active {
    color: #000;
    border-color: #444;
}


.wbbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.wbbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.wbbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.wbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.wbbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}



.wbbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.wbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}



.wbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.wbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style>


<!--[if IE 8]> <style>
.wbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.wbbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}





</style> <![endif]-->





<div class="wb" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr>

<td>
<a   href="ADD-FEEDBURNER-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA94PIIy78SO8_ZiiNhxmgyd0o8LjcfCyBymPZgqu0qUecSKavnk4jd2ESI311KpdDVexCgc66a7DT2KPudvbQMUWy7p1BROGK2duVlWU6t_y1g-NNqJRyg-pEwcdkx0PJj0-UgmK74eY/s1600/rss.png" border="0"></a>
</td>

<td>

<a style="margin-left:5px;"href="ADD-TWITTER-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGIUDVj-AWtKY4bCo8bYE5sJbutLj_DoxWqV4ZZ6E1nIH-iDBB3P5CVmACbKF47vo3kt9axCjRxZWhwt0uBJXmOg27TKYknXV-dMO0OwhCdR456eTC5zXbnEhRejUpBq16PB8Xv8TL2U0/s1600/twitter.png" border="0"></a>
</td>

<td>
<a style="margin-left:5px;"href="ADD-FACEBOOK-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTUzuUO1GX_a-0Q92lG9UZ7VdEgzTs3hU_d2dzu9Jvi4umDBLROCDVXBvVt420C9vQ7ZHssQ3kmsASg7y6BXH0cp30CO92NSXIInuc1cet0QKnEQI__o2hYViQCptdooBK44j214V1RE/s1600/facebook.png" border="0"></a>
</td>

</tr></tbody></table>
<div class="wbbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Submit email...&#39;;}" onfocus="if (this.value == &#39;Submit email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>

</div>
Make some changes:
* Change tntbystc to your feedburner RSS name.
* Replace the bolded text to your feedburner,twitter and facebook links.
Step 4 : Give a title to your widget.
Step 5 : Save and view your blog.
Continue Reading...

10 Web Design Mistakes You Must Avoid

There are millions of Websites in the world till today.One of the most important factor in website is its Design.There is no site in the world without designs.Every site had design,different types of designs.
There are a lot of mistakes found on website designs.Mistakes are the part of our life because we are human beings,not robots(sometimes even robots also!). Avoiding mistakes is the lesson that we get from our life.In this article Iam sharing some web design mistakes that you must avoid.
#1: User must know about the site in seconds
              From my own experience,visitors are not watch a site for long time to know what the site is about.They want to know about the site in seconds,otherwise they will leave.Your site must speak what the site is about to your visitors.
#2: Avoid tiny fonts
              Make your fonts easily readable and attractive.I mentioned attractive because even nice fonts can hold visitors in your site.I recommend to avoid tiny fonts and use Google fonts to get an awesome font as your wish.
#3: Do not use Blinking text
              I found some sites are using blinking text.Its really unnecessary because this is 2012.
#4: Make sure to include Contact details
             Visitors love to see a complete website.when iam reading articles on a website,i also check the contact details,if i cant find contact details surely I skip that site.There are a lot of people on internet checking sites like me.!! so its better to include contact details.
#5: Use a simple Navigation structure
            Almost everyone in the world loves the word 'simple' and I love it too.There is an application 'sometimes less is more' .Yes! Make sure to apply this rule to your site and make it simple and easy navigation.
#6: User can understand what the link is about before click
             Visitor must know which link is useful and which is not before clicking,easily.Make sure that the links had the standard colour(Most sites had standard blue colour,some had red too).
#7: Colour of links must change after click
            I think you already saw this from many sites.After we clicking,the link changes to another colour.If the link colour is blue,it will changes to light violet(Almost every sites had this change). I didn't recommend you to change colour from blue to light violet(the colour must change after clicking on the link,no problem even it is any colour,but the colour must be visible).
#8: Do not use penetrating colours
           Use simple colours for your site.If a visitor getting blur for his eyes after visiting your site,remember he will not visit again.! Mixing of high penetrating power colours make your site boring and  bad looking.
#9: Make the content scannable
           Before reading an article completely,i just glance the entire content 2 times and make sure that the content is good and worth to read.Most visitors are reading an article before glance the entire content.So the headings,subheadings,links,theme of the article must understand for visitors even if they reading at a glance.
#10: Do not play music on your site
           Most sites are managing or holding this rule.Playing music is a waste and it slows your site as it needs some script.   

The list doesn't completes yet.I just shared what i found mostly when iam searching.You also found enough mistakes on internet.let me know what you found through comments.
Enjoy!
Continue Reading...

Floating Tweet,Facebook Share &+1 Widget Next to Posts in Blogger

Sharing your posts is really a fantastic way to get more attention on people.But i found that most peoples are lazy to share posts.we cant force them to share our posts,we must encourage them to share. Its somehow risky to walk behind and tell them to share.So There is a nice way to encourage any lazy visitor,it is floating sharing widget.Floating sharing widget had a viral power and it can walk with the article..!!
In this article iam sharing how to add a Floating share widget for blogger blog next to the posts.Follow the steps:
Step 1 : Login to your blogger account >> Design(Layout) >> Add a Gadget
Step 2 : Choose html/JavaScript

 Step 3 : Paste the Below code in it
<style>

/*-------Welblogs Floating Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#wbsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.welblogs.blogspot.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>
Step 4 : Save and Drag it below to the posts
 Remember: Give a temporary name to the widget for the upcoming customization.

Step 5: Save and view your blog.

Customization
Change margin-left:-70px; to your wish.Decreasing the numeric value will shift the widget to the right and Increasing will shift to the left.
Change background:#fff;  to change the background colour of the widget.


If you wish to see the widget only on post pages,then do this:
Step 1 : Go to Blogger >> Design >> Edit HTML (old interface)
                       Blogger >> Template >>Edit HTML >>Proceed (new interface)
Step 2 : Backup your template and check Expand Widget Templates Box
Step 3 : Press ctrl+F and Search for the title of the widget
Step 4 : You can see the code like this
<b:widget id='HTML3' locked='false' title='WIDGET-TITLE-HERE'  type='HTML'>
<b:includable id='main'>
bla bla bla bla
</b:includable> </b:widget>
Step 5 : Once you find it,add the orange bolded codes just below or after the black bolded text,see below
<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
bla bla bla bla
</b:if>
</b:includable> </b:widget>
Step 6 : Save and view your blog,then you can see the widget is only on post pages.
Enjoy!
Continue Reading...

Awesome One Time Pop up Facebook Like Box for Blogger

After the busy week, i was returned with a new cool post.I was told you about the importance of facebook in many of my posts.So you already know that facebook is a great source of traffic.your traffic will increase when you get more likes for your facebook page.Iam not explaining more about that.
You already saw that when you opening some blogs,there is a window appearing to like their facebook page or subscribe to their RSS feed etc.That is the pop up window and now I'm sharing how to add such window with facebook like box of your page.check out the screen shot below:
 So lets start the work.Follow the steps and make it easy:
Step 1 : Login to your blog and navigate to Dashboard.
Step 2 : Click Design >> Add a Gadget  >> Choose html/JavaScript(old interface)
                       Layout >> Add a gadget  >> Choose html/JavaScript(new interface)
Step 3 : Add the below code

<style>

/*
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;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiHCTgALicoDJAs2U3mw7uD8ZUcMWAlYlJRbb6X54MblW1oxmePah-DVCAaq1ojD8tjTgNjWVq_2z-HREVfRWB3_zqxpOupPK4svPAYYnPKAnNzrf-unkhGKebt6ewHPG85G3sASUTjKw/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiHCTgALicoDJAs2U3mw7uD8ZUcMWAlYlJRbb6X54MblW1oxmePah-DVCAaq1ojD8tjTgNjWVq_2z-HREVfRWB3_zqxpOupPK4svPAYYnPKAnNzrf-unkhGKebt6ewHPG85G3sASUTjKw/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16lLgN-McOB5HCR6AwpBI_XxlGakKy6cLmEpmoSqeKt83Q3vKc-f-n4_FVIN52o0bQjfiPVSvMC0YI8g0GBPbgMPaEIWRGBGv9ppEoJSFF55lVMhNnZUxk53GaldXGTjJsh00wB8qsiNc/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoxrIu15-qKQWNMNUuGI5UfwULa0NjadUXyZ4TTaPTYYs5NwMknIz0pFrEJKE5X1qM6WoB6EzD38BwpPfb1ZHZ3Q8kBUKQ6qhKdq5ETYnl7z9JFyz-ohEZKi-7qI7D894rPIfBQztxDgFs/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWelblogs&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.welblogs.blogspot.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://welblogs.blogspot.com/">Blogger Widgets</a></p>
</div>
</div>
Step 4 : Change Welblogs to your facebook page name.
Step 5 : Save and view your blog.

                   If you had any doubt,please comment below
Continue Reading...

 

Copyrights

Protected by Copyscape DMCA Takedown Notice Checker

About the Author

My Photo
Mohamed Naseef
Naseef is a Freelance writer and Blogger with several years Experience.In his Spare time,he enjoys his busy school days and write for top websites.
View my complete profile