Showing posts with label WidGet. Show all posts
Showing posts with label WidGet. Show all posts

New SEO Friendly Sidebar Floating Widget for Blogger Blog For 2014

3 comments
Sharing the best tool to grow knowledge and friendship as per the blogger it works like a bit more than that by growing his/her blog. In the same context today I am sharing a Widget which i have created by manuplating some codes of addthis.com widget. So it is light and if you are on addthis.com it will automatically updates your stats. It look so beautiful with the urge of sharing this post will automatically get the attention of reader.


Read More...

Custom About the Author Widget for blogger Blog

Leave a Comment

About the Author widget is now a Day becoming very demanding and Social Active as in case of Blogging world. To Go with your Blog on a perfect platform. Author Have to Socially Active and indulge with their readers. That not only helping them that also help them grow.
Read More...

How to Add CoDerDesign Email Subscription Box to Blogger Blog

Leave a Comment
Well Subscriber plays an important role in any how giving meaning and life to blogger blog. For that you need a  gadget/Widget in your blogger blog through which the blogger can easily Subscribe to your blog. So Here Keeping in mind We come up with some Very Beautiful Subscription Box Widget.

How to Add CoDerDesign Email Subscription Box to Blogger Blog :

  • Go to Blogger Dashboard → Layout → Add Gadget → HTML / JavaScript Widget.
  • Copy And Paste any of the below code in HTML / JavaScript Widget and save it.
1. Form 1


<style type="text/css">
#CoDerDesign-searchbox{background:url(http://4.bp.blogspot.com/-JRgnVI-1t0A/UPWWZaCBQiI/AAAAAAAAHbc/7v4yTP-YSTM/s1600/coderdesign.blogspot.com-silver.png) no-repeat scroll center center transparent;width:368px;height:143px;display:block;}
form#CoDerDesign-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#CoDerDesign-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#CoDerDesign-searchform #sbutton{margin:-8px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="CoDerDesign-searchbox">
<form id="CoDerDesign-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=coderdesire', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="coderdesire" name="uri" /> <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

2. Form 2


<style type="text/css">
#CoDerDesign-searchbox{background:url(http://1.bp.blogspot.com/-d5Z4hPZt-Yc/UPWWZ2o7zAI/AAAAAAAAHbg/oX2s1qIv2ZE/s1600/coderdesign.blogspot.com-blue.png) no-repeat scroll center center transparent;width:368px;height:143px;display:block;}
form#CoDerDesign-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#CoDerDesign-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#CoDerDesign-searchform #sbutton{margin:-8px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="CoDerDesign-searchbox">
<form id="CoDerDesign-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=coderdesire', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="coderdesire" name="uri" /> <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

3. Form 3


<style type="text/css">
#CoDerDesign-searchbox{background:url(http://3.bp.blogspot.com/-t_KfQDl_bww/UPWWboApiUI/AAAAAAAAHbs/ki4QJOJ_0AE/s1600/coderdesign.blogspot.com-red.png) no-repeat scroll center center transparent;width:368px;height:143px;display:block;}
form#CoDerDesign-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#CoDerDesign-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#CoDerDesign-searchform #sbutton{margin:-8px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="CoDerDesign-searchbox">
<form id="CoDerDesign-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=coderdesire', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="coderdesire" name="uri" /> <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Customization :

Replace  coderdesire with your Feed Value/uri at as :
  • uri=coderdesire
  • value="coderdesire"
We are Done !

Read More...

Customized Related Post/ You Might Like This Widget to Blogger Blog Using nRelate

2 comments
Related post / You Might like This Widget always being helpful incase of Generating traffic by giving life the the old post by showing them in the list. Related post widget always bounce back to the related contant work on checking the similar post under the same label mentioned.
As there is no such Widget there is Blogger and it is hardly being Shown on any site earlier But Thanks to nRelate you can add such Customized widget in your blog. This will add it look attractive.

You Might Also Like :

You Can add it either in :

  • Test formate
  • Thumbnail formate.

How to Add the Customized Related Post/ You Might Like This Widget to Blogger Blog Using nRelate:

  • Create your New Account in partners.nrelate.com 
  • Now Click on Install and select Blogger as your Platform and Submit your Blog URL.

Install >> Blogger >> Enter Blog URL

Installation on Blogger :

  • Go to blogger Dashboard >> Layout >> Add a Gadget 

  • Selact HTML/javaScript as a  Gadget Type.


  • Leave the Title Empty and Select your preferences for Appearing of Gadget on Your Blog and copy the code Accordingly and paste in your widget Box :
  1. Display Widget on Post page.
  2. Display Widget on Post and Homepage both.
  • Save your Widget.

Customization :

Customization is very Simple just just visit Manage Setting >> Blogger and Customize the gadget as per your Desire.
Hope You Find it Helpful . We like and love to Hear from you . Good Luck. :)
Read More...

Add Post Titles To Older Post Newer Post Links On Your Blog

Leave a Comment
The above is the Screenshot of how to Add Post Titles To Older Post Newer Post Links On Your Blog!

Add Post Titles To Older Post Newer Post Links On Your Blog

  • Blogger Dashboard Click Design > Edit Html
  • Now find the following code using (Using Ctrl and F)
</head>
  • Copy and Paste the following code Directly Above / Before </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
  • Find the following piece of code in your blogs Html : (Using Ctrl and F)
</body>
  • Now Copy And Paste This Code Directly Above / Before </body>
<!--Start post title code http://www.coderdesire.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if><a href="http://www.coderdesire.com/">Gadgets By CoDer..Desire...!!!</a>
<!--End post title code http://www.coderdesire.com -->
  • Find the following piece of code in your blogs Html : (Using Ctrl and F)
]]></b:skin>
  • Now Copy And Paste This Code Directly Above / Before ]]></b:skin>
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
  • Save your template.
Read More...

Count Down Widget To Blogger

Leave a Comment

(The Above is the Screenshot of the Count Down Widget To Blogger ! )

How to Add Count Down Widget To Blogger :

  1. Login To Blogger > Design
  2. Click on  " Add a gadget"
  3. Choose HTML/Javascript widget
  4. Copy and Paste the following code given below inside it,
<style style="text/css">
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;
border:5px solid #333333;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;
}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}
</style>
<script type="text/javascript">
function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}
cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}
cdtime.prototype.showresults=function(){
var thisobj=this
var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2011 18:25:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
}
return displaystring
}
</script>
<table><tbody>
<tr>
<td>
<img style="float:left; " src="http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.png" width="125px"/>
<h1 style="color:#289728; padding-top:40px;">Counting Till 2012 »»</h1><br/>
</td></tr>
<tr><td>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>
</td></tr>
</tbody></table>

Customizations: Use our Color Code Generator For hexadecimal codes :

  • Change font color of the clock edit color:#289728; 
  • Change border color edit border:5px solid #333333;
  • Change the text color edit color:#289728
  • The purple texts can be easily edited to any message you wish to write.
  • Put the Widget Where you like over your blog. 
"You can edit this Widgets and Use it for other Special Events to. Use our HTML Editor to edit the code. "

   5. You are Done ! Visit your blog to look the Widget live over there !
Read More...

How to Create a Contact Form with File Upload Option

Leave a Comment

(The above is the Screenshot of the Contact Form with File Upload Option !)

How to Create a contact Form With Upload Option :

  • SignUp with a Free Account at emailmeform
  • Once Your Resgistration Complete Click on "Add a Form" and Choose your appropriate Form Builder Option.
  • Form Better Understanding and Readers and Visiters attraction Try to keep your Form Simple By not putting So many Filds. Put Some important filds Like Name, Website Url, Email, Country, Subject Message.
(After Selecting your Form Builder option The Form Builder Appear like This)

Step To Build a Form :

  1. Click the Name Button in Advance Section.
  2. Next Click on Email Button.
  3. Then Click Web Site Button.
  4. Then Click on File Upload from the Same Section.(if you dont need to Submit any file any via email form You can leave this option).
  5. Now For Message Field Click on Paragraph Text button from Basic Section and Click on the Section to Rename it to Message.
  6. If you want to make some Fields Must Fill You can simply select that Row and select required as shown below.


       7. Now Your Form Will Appear something like this


     8. Click on the Form title to Edit the Title and Add some Message for your visitors. You can Write the message like:


We love to hear from you.
Fell free to ask for any help. We catch you soon as soon as the time allows us !
If you dont want to remove this. You can simply uncheck the check box and remove the Message from the Description Box.

     9. Now When you look out on the Form Setting Conformtion option Either you can Write Success Message or You can Simply redirect to Some Link Url.



I suggest you can Prepare some Post. It is better if you can prepare some page i.e Confirmation page and Put that Post/page link in That Redirct Url.

    10. Now Some Setting Regarding Label Placemnt, Header/Footer and Form Width That you can set as per requiremnt for your blog.

     11. Next is Captcha Setting this is used to protct from spamming. I simply recommend this to protect your self from spamming But for the descent and simple look of your form you can simply remove this by selecting None from the Form Setting.


     12. Now Edit the Submit button to either Send Email or you can leave as it is. You can also set its placement over the Page. (You can have a look given below i have selected the Middle one)




     13. Well Now Hit the Save Form Button and you can see the window will appear similar to that shown below.

     14. Now choose the second option and add yor recipient email Id where you want the message to deliver.

     16. Leave the other option as default and Hit the save Button ! And Now Select the Third option.


     17. Now in Form Manager Click on Code

   
     18. Select the Html Only option and copy the code and Paste the code in Your Desired post/ page Where you want to embed this Contact form Code.


How to Remove the EmailMeForm Logo :

  • To remove the emailmeform logo simply look the similar code given below from the code that you just copied and delete it.
<div id='emf_advertisement'>
    <font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=
    "http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"
    target="_blank"><font face="Verdana" size="2" color="#000000">Survey</font></a>
  </div>
  <div>
    <a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/3AO1RXFLyef079t9qB5" target=
    "_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>
  </div>
  • Now Publish the post/page and here you are done with is. Congrats you got a contact Form on your Blog.
Hope it is very helpfull for you submit your doubt and problem if any in the form of comment below !

Read More...

Mashable Social Bar Widget For Blogger BlogSpot

1 comment
The above is the Screenshot of the Mashable Social Bar Widget for Blogger blog !

How to Add Mashable Social Bar to Blogger Blogspot :

  1. Go To Blogger > Design
  2. Click on "Add a Gadget"
  3. Choose HTML/Javascript widget
  4. Paste the following code inside it
<style>
    /* Social Widget */
    #CD-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}
    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
    </style>
    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="CD-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/112694454818544249586" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/112694454818544249586" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/coderdesire&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=coderdesire&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=coderdesire', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="coderdesire" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/coderdesire" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/coderdesire"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/112694454818544249586 target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.coderdesire.com" target="_blank" >Blogger Widgets »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget--> 

Customization (Make these important changes) :

  • Replace coderdesire with your Facebook username
  • Replace coderdesire with your twitter username
  • Replace coderdesire with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/coderdesire
  • Replace http://feeds.feedburner.com/coderdesire with your feedburner  link.
  • Replace https://plus.google.com/112694454818544249586 with your Google Plus profile link
       5.  Next search for this ]]></b:skin>   Paste the following code just below it
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
       6. Now save the Widget and you are all done!

Visit your blogs to see it working just perfectly. :)
Read More...

Mashable Social Bar Widget for Blogger

Leave a Comment


The above is the Screenshot of the Mashable Social Bar Widget for Blogger blog !

How to Add this Mashable Social bar to my Blog/Website : 

  1. Go To Blogger > Design
  2. Click on "Add a Gadget"
  3. Choose HTML/Javascript widget
  4. Paste the following code inside it
<style>
/* Social Widget */
#CD-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
        width:300px;
}
.fb-likebox {
    background: #fff;
    padding: 10px 10px 0 10px;
    border: 1px solid #D8E6EB;
    margin-top: -2px;
        height:80px;
}
.googleplus {
    background: #F5FCFE;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #D8E6EB;
    border-left: 1px solid #D8E6EB;
    border-image: initial;
    font-size: .90em;
    font-family: "Arial","Helvetica",sans-serif;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;}
.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    display:inline-block;
    margin: 9px 70px;}
.g-plusone {    float: left;}
.twitter {
    background: #EEF9FD;
    padding: 10px;
    border: 1px solid #C7DBE2;
    border-top: 0;}
#mashable {
    background: #EBEBEB;
    border: 1px solid #CCC;
    border-top: 1px solid white;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration:none;}
#email-news-subscribe .email-box{
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-right: 1px solid #C7DBE2;
    border-left: 1px solid #C7DBE2;
    border-image: initial;
   height:35px;}
#email-news-subscribe .email-box input.email{
    background:#FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;}  
#email-news-subscribe .email-box input.email:focus{color:#333}  
#email-news-subscribe .email-box input.subscribe{
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:7px 14px;
    margin-left:3px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
    background: #ff9b00;
    background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline:0;-moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}  
#other-social-bar {
    background-color: #D8E6EB;
    box-shadow: 0 1px 1px #FFFFFF inset;
    padding: 0px;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight:bold;
    overflow: hidden;
    border: 1px solid #B6D0DA;
       height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
    float: left;
    color:#1E598E;
    overflow: hidden;
    height:20px;
    padding:5px;
    width: 270px;}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;}
#other-social-bar .other-follow ul li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}  
#other-social-bar .other-follow ul li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
    background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;
        margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
    background: url('http://4.bp.blogspot.com/-ht4UMG88lvM/TwHZFFgc-1I/AAAAAAAAFvs/BBmINSJhUsk/s400/linkedin-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
    background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
    line-height: 1;
    width: 60px;
    padding: 0px 3px 1px 20px;
    margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
    background: #FFCA00;
    }
</style>
<![endif]-->

<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="CD-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/coderdesire&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=100px&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=coderdesire&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=coderdesire', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />      
        <input type="hidden" value="coderdesire" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
    </form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/coderdesire" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LINKEDIN PROFILE LINK" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/112694454818544249586" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.coderdesire.com" target="_blank" >Blogger Widgets »</a></span></div></div>
<!-- End Widget --> </div> <!--end of social widget-->

Customization(Make these important changes):

  • Replace coderdesire with your Facebook username
  • Replace coderdesire with your twitter username
  • Replace coderdesire with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/coderdesire
  • Replace http://feeds.feedburner.com/coderdesire with your feedburner  link.
  • Replace LINKEDIN PROFILE LINK with your Linkedin profile link
  • Replace https://plus.google.com/112694454818544249586 with your Google Plus profile link

      5. Hit save and you are all done!

Now Visit your blogs to see it working just perfectly. :)
Read More...

How to Add Disqus Recent Comment widget to blogger Blog

Leave a Comment
Yestarday I have Posted about How to add Disqus comment Box Manually Which help in case Plugin doesn't work. The Same Way the Widget I am Provising Today they Do provide Plugin for that earlier But Now when i have decided to add that gadget that are not there i have find out the way out for that that show recent comment. 

How to Add DisQus Rescent Comment Widget to Blogger blog :
  1. Go to Blogger
  2. Layout >> Add a Gadget
  3. Now Select HTML/JavaScript Gadget and Paste code given below in it.
<div id="recentcomments" class="dsq-widget">
<script type="text/javascript" src="http://yourshortname.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=100">
</script>
</div>
Customization Before Saving Gadget :
  • Replace yourshortname with your site's disqus id.
That you can find Here go to DisQus >> Edit Profile >> Account
  • 5 indicate how much recent comments display in your widget, replace as you want with number.
  • 0 is for displaying avatars in widget for comment, to hide avatar replace 0 with 1.
  • 32 size of avatar, replace according to  your widget size in blog.
  • 100 is for how much character from  comment is showing in that widget for each comment.
    4.  Now Save the Gadget.

Read More...

How to Install Disqus Comment Widget Manually to Blogger website

Leave a Comment

Disqus is one of the Largest Comment management site of about 800000 website connected with them. They are fisible and provide plugin for all the different platform they support. Sometime it happens that their plugin do not work they to have mentioned it on their website. So in case that plugin not work I have prepared a Tutorial on how you can manually add this widget in your blogger blog.
Read More...

Random Post Widget for Blogger Blog

Leave a Comment

Random Post Widget will help you derive more traffic. Since it fatch out different post each time when page get refreshed. when viewers refresh the page they come out witch different post on the role that made them the availiblity of large no. of choices. 

This widget will help You and your blog any how More Since it is a Fixed Widget that will appear on each and every page.
Read More...

New Advanced Featured Drop Down Menu with Link Logos for Blogger

Leave a Comment
Menu Bar Plays an important role in displaying the look of the blog/website in the same moto we have been Sharing Drop down menu bar before and Here is a new to that Drop Down Menu Bar Series. This is elegant and look very amazing by displaying logo of the Link just beside the every link.


How to Add this to Blogger Blog :
Read More...

How to Add Merry Christmas Wish Slogan On Top of your Blog

Leave a Comment
Making Attractive is one of the great tool of increasing Traffic and making trusted Reader around the World Which is free of cost and Which never goes in vain. on the mind set of that i have prepared a new Widget for the Blogger and Wordpress Blog. Before Moving further Wish you a Merry Christmas to all of our readers. This Tutorial will teach you how you can add this Widget which will appear on each and every page of your blog.
Before trying you can check live Demo on every page of our Blog.
Read More...

How to Add An Elegant Subscription/ Signup Widget to your Blog/ Website

Leave a Comment
Subscription to you Post or Blog is one of the unique way to get the Real visitor and have a long term viewer author relation my getting their Email Subscription. This will let you distribute your Article.
I have prepared a Widget which enhance your Email Subscription. This is totally amazing Widget which we have tested and Found working we have to Applied this widget on our Blog you can see this by scrolling down.


We have putted this in just above Footer. For better result you can put this just below nav-bar(menu bar). Where the reader first look at. 

Now you know how must effective role this widget can play for your blog in terms of traffic. let us know now how to put this in your blog.

How to Add An Elegant Subscription/ Signup Widget to your Blog/ Website :
  • Log in to Blogger
  • Then Layout >> Add a Gadget >> HTML/javaScript widget.
  • Now copy the following code below and Paste it with in the HTML/javaScript widget box.
/* CoDer Desire..!!! Email Subscription Widget*/
<center>
<div id="feature_box">
          <div id="sleek-subscribe">
                  <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</div>


<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
            <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />      
            <input type="hidden" value="Your Feed Burner Feed Name" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
        </form>

    </div> </div>

      </div>    
</div></center>
<style>
/*---:[ feature box ]:---*/
#feature_box { background: #eee; border-style: solid; border-color: #ddd; }
/*---:[ home page teasers ]:---*/
.teaser a.teaser_link:hover { text-decoration: underline; }
.teaser .teaser_author { font-style: italic; }
    .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
.teaser .edit_post { letter-spacing: 1px; }
    .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; }
    .teaser .teaser_author a { font-style: normal; }
    .teaser .format_teaser a { text-decoration: underline; }
    .teaser .format_teaser a:hover { text-decoration: none; }
/*---:[ border package ]:---*/
#header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }
/*Featured Box*/
.custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;}
       
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;}
    .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
    .newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }
#email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:34px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  
    #email-news-subscribe .email-box input.email:focus{color:#333}  
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:57px;
    }
</style>
<!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->

Customization :
  1. Add Your Feed Burner Feed Name Here.
  2. Add Your Custom Text Goes Here Here.
  3. Re-Adjust the Widget width as per your requirement of your blog needed.
  • Save and you are Done !

Read More...