Showing posts with label Blogger Tools. Show all posts
Showing posts with label Blogger Tools. 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...

HTML Parse Tool

Leave a Comment

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...

Customize Your Blogger Template Using Blogger Tool : Blogger Template Designer

Leave a Comment

You can Customize the Blogger Template on your On By using the Tool Provided by the Blogger Itself whichis totally free of cost known as Blogger Template Designer. Font style, color,width of template, background of template are the basic element which decide the look of any template are easily get managed and arranged to give a suitable look as per your choice. Through this tutorial you can easily understand how to dealwith that customizations.
Before We Start Further you Must Know- Color, font family, font size, background image URL are variable which we used in CSS to give a different look as per our test.



Those Variable(values) are deffiend between :
 <b:skin><![CDATA[
and
]]></b:skin>
Variables are Defiend as :
Syntax :
<Variable name="post.title.font" description="Font" type="font" default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>

For that easy selection of font and colour blogger Template Designer itself provide a Colour Toolbox and Font Box.

  • FontValue Box Tool



  • For color,



default is default value which is unchangeable, this is used to reset the value of that variable.
value is current value.
Values for color is display HEX_Color_Code format and font in Font_Shorthand format.
Syntax for Font_Shorthand format,
<font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>
Where font-size and font-family is required, for other used their default value if missing.

Grouping Variables
Grouping variables is make also user friendly interface with template designer. By grouping you can access multiple properties for that element at one place. For example for post title you can group post title color and post title font together. Another example grouping together link color, visited link color and hover link color under the link.
Syntax :
<Group description="Group Title" selector="h1">
....
<!--Variable here-->
....

</Group
Where,

  • description is name of group title, used to categories variable in blogger template designer.
  • selector mention that which part is selecting from blogger template while this group is selected for editing. It is useful, when someone editing template via designer, it shows to user which part of template being edited.

Example,
<Group description="Blog Title" selector=".header h1">
     <
Variable name="header.font" description="Font" type="font" default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <
Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#ffffff"/>
</
Group>
Above code is the group of  font and color for blog title, having description "Blog Title" and selector is h1 tag inside class header. So when you select Blog Title for editing in template designer then where h1 tag under header class is highlighted. Type of variable provide a particular interface for editing values, here variable header.font having type font with description Font and variable header.text.color having type color with description Title Color. When you see this in template designer look like as,



How to use in CSS
In general, we are using css like this.

.header h1{
   
font-family:Verdana, Geneva, sans-serif;
   
font-size:12px;
   
font-style:italic;
   
font-weight:bold;
 
   
color:#00C;  
}
If you want to use an variable in CSS, use variable instead of value closed inside $( ). See following code.
.header h1{
   
font:$(header.font);  
   
color:$(header.text.color);
}
In this type value for font and color is taken from variable.

Example,
<?xml ... ?>
<html ....>
<head>
<b:skin>
<![CDATA[
/* Variable Defination    
<Group description="Links" selector=".main-outer">
    <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#c4005b"/>
    <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#909090"/>
    <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff13b8"/>
</Group>
*/
a:link {
  text-decoration:none;
  color: $(link.color);
}
a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
]]>
</b:skin>
</head>
<body>
....
</body>
</html> 
You can also use one variable value to define another variable so that changing the one variable value will reflect effect on all template.

Width of Blog and Sidebar
In template <b:skin></b:skin> used for enclosing an CSS, same as <b:template-skin> and </b:template-skin> is used to enclosed length factor of template means width of template, sidebar.
In this, variable syntax is same but type of variable is length.

<b:variable default='960px'  name='content.width' type='length' value='990px'/>  
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/> 

Example,

<b:template-skin>
  <b:variable default='960px'  name='content.width' type='length' value='990px'/>
  <b:variable default='310px' name='main.column.right.width' type='length' value='340px'/>
  <![CDATA[ body {
    min-width: $(content.width);
    }
    .main-inner .columns {    
    padding-right: $(main.column.right.width);
    }
    .main-inner .fauxcolumn-right-outer {
    width: $(main.column.right.width);
    } ]]>
</b:template-skin>
Hope You LIke it. If you Have any Problem Comment Box is Just Down There...!
Thanx to Digvijay  .
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...

Customized Popular Post Widgets to your Blogger Blog.

Leave a Comment
Popular Widget Plays an important role in getting the Readers attention. That they always try to find out what is interesting in that post that Rank it high to popularize. That help the reader to engage and spend extra time o your site. All is that Help the reader find out What good niche post you Deliver and that help them find best on that blog. And indirectly get your Traffic better. Well it is so popular post What if it is animated and get the Attention of reader that they might not stop to visit that post. Well its Cool :)

How to add Customized Popular Post Widgets to your Blogger Blog :

  • Go to Blogger Dashbord
  • Templates >> Back up Your Template
  • Template >> Edit HTML >> Proceed >> Expand Widget Template.
  • Now Using (Ctrl + F) find out the given code
]]</b:skin>
Now overriding the Default Popular Gadget code . Copy the Code given below and paste it just above ]]</b:skin>

  /*--- CD Popular Posts Widget Customized--- */
 
.popular-posts .item-thumbnail img:hover {
   opacity: 1;
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}
.popular-posts .item-thumbnail img {

    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 5px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 }
.popular-posts ul li {
margin: 12px;
    opacity: 0.8;
    border: 5px solid #eee;
 border-radius: 100px 100px 100px 100px;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    /*Reflection*/
}
.popular-posts a{
font-size: 13px solid;
}

  •  Save Template.
We are Done Hope You Liked it. We Love to Hear from You. :)

Read More...

Wild look Mashable Subscription Widget for Blogger Blog

Leave a Comment
As i Have posted before in the same series of Subscribe US Widget . This plays an Important Role for any New or old Blogger to Grow Over in the Filed of blogging. 

You may also like :


Read More...

Simple and Beautiful Subscription Widget for Blogger Blog

Leave a Comment
Subscribers plays an Important role for any blogger the are actually the real all time unique visitors. They plays an important role for the development of nay blog. 
Same way the a good blogger is that who can present such content and a widget plays a important role to attract the readers and transform them to a Subscriber. Here in this post i will provide you a beautiful looking Subscriber widget to attract your readers to transform them into a real time Subscriber.
Read More...

How to compress your Bloggger Blog

Leave a Comment
Any blogger want their blog to load faster. That help their reader to get the content faster and that to help the reader to attract and let them come back again. that indirectly help any blogger to build a trusted real readers.

How to compress your Bloggger Blog :
Before moving furter decide either you want to compress full CSS or some Portion of CSS Code.If you wish to compress full CSS code here you go :
  • Go to Blogger Dashbord >> Template
  • Template >> backup your template.
  • Edit HTML >> Proceed >> Expand Widget Templates
Read More...

Add New Mashable Drop Down MultiLevel Menubar to Website/Blog

2 comments
Mashable have the history of Producing lots and lots of Amazzing Widgets for both Blogger from Different platform and Website to. They have Made the Web Development easy and Web Developer Freely and Easily Prefer to use their Gadget Which are often competable to each and every design.

Read More...

How to Add Image of Author Before Blogger Post Title

2 comments
Blogger is having the largest Daily blogger Community and by default Blogger's post title is a plain text. In this tutorial, I'll show you how you can add an image beside your post title.

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...

The Top 10 Window 8 apps for Blogger !

Leave a Comment

Window bring a lot of new features to its new new product window 8 which is now used world wide after ists successful launch. 

Are you lacking if not try out Window 8 just do it now without loosing Window 7. There are Question in mind of many users and reader of our that why is window 8. Since there is now such problem with window 7 it is also a good option to use it still now. So remind you dear there is always a new things we get in every new launch by Windows . here are some reasons why we use Window 8. this time Window to have come up with some thing for Blogger's in the form of Application Here are they !
Read More...

How to Add Multi Colored Popular Widget For Blogger Blog

Leave a Comment

As we all know Popular widget enhance the productivity and so we usually show Popular post widget to our readers so that they can enjoy the most popular post of our blog. But this article is not for Normal popular post widget rather how you can add multi colored popular post widget in Blogger. The multi colored popular post widget looks really awesome. It has also three displaying modes: display title only, display title with image thumbnail. I hope you will enjoy the widget.

How to Add Multi Colored Popular Widget For Blogger Blog :

  • Go To Blogger Dashboard >>Design >>Edit HTML>> Proceed>> Expend Widget Template.
  • Now Find the following code using CTRL+F

/* Variable definitions
 ====================

  • Copy and Paste the Code the code shown below just after it

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

  • Now Find the code shown below using [ctrl+F]
]]></b:skin>
  • Now Paste the Code shown below just before or above it

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

  • Now Find the code shown below

<b:section class='sidebar' id='sidebar' preferred='yes'>

  • Now Paste the Code Shown Below just below/after it

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'>
 <h2><data:title/></h2>
 </b:if>
 <div class='widget-content popular-posts'>
 <ul>
 <b:loop values='data:posts' var='post'>
 <li>
 <b:if cond='data:showThumbnails == &quot;false&quot;'>
 <b:if cond='data:showSnippets == &quot;false&quot;'>
 <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
 <b:else/>
 <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
 </b:if>
 <b:else/>
 <b:if cond='data:showSnippets == &quot;false&quot;'>
 <b:if cond='data:post.thumbnail'>
 <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
 <b:else/>
 <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
 </b:if>
 <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
 <div class='clear'/>
 <b:else/>
 <b:if cond='data:post.thumbnail'>
 <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
 <b:else/>
 <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
 </b:if>
 <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
 <div class='clear'/>
 </b:if>
 </b:if>
 </li>
 </b:loop>
 </ul>
 </div>
 </b:includable>
</b:widget>

  • Now save the template and done

Customization :

  • Now got to Page Element/Design(in new interface) You will find out a popular widget
  • Click on the edit link of Popular Posts widget
  • Select “Display Up To 7 Posts”
  • Now Save the widget

Change Color :

  • Go To Design >> Template Designer >> Advanced>>PopularPostsBackground.

Read More...

Sticky Bar with Auto Recent Post for blogger with Marquee Feature

Leave a Comment
Another Sticky Bar Section for Blogger and Web site. You may like this. You have to place the widget at the header, if there is an option to your template because This widget does not get placed at sticky position itself. A sticky bar may irritate your readers. So there is a cancellation button on the widget.

View Demo first !

How to Add Sticky Bar with Auto Recent Post for blogger with Marquee Feature :
  • Go to Blogger.
  • Then Layout >> Add a Gadget >> Add HTML/javaScript widget.
  • Now copy and paste the code below in your widget box.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="https://rafiblog.googlecode.com/svn/trunk/recensticky.js"></script><script src="https://rafiblog.googlecode.com/svn/trunk/sticky2.js"></script><style>#md-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://www.coderdesire.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <noscript><a href="http://www.coderdesire.com/2012/11/sticky-bar-with-auto-recent-post-for.html">+ Grab this Widget</a></noscript><a href="#" id="mdclose"  onclick="return false;"><img src="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>
  • Save and you are Done !

Customization:
  1. Replace this feed http://www.coderdesire.com/feeds/posts/default url with your feed Url.
  2. You can change your background:#000000 backround color which suit your design.
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...

Add about the "Author The Author " Box below every Post/Article with in Your Blog/Website

Leave a Comment
You might have noticed in many blog or website there is a Author box which give the short description about the Author. Adding such widget below the Article/Post is fairly easy. It gives a professional look to the blog. You might have come across such widgets in WordPress blogs, but unfortunately there is non for blogger so we need to add some code in Edit HTML.

After working on it i have decided to make a post o it have a look on the snapshot how it look.


How to Add about the "Author The Author " Box below every Post/Article :
Follow the simple steps to Add this with in your Blog/Website.

  • Login to Blogger
  • Go to Template >> Edit Html >> Proceed >> Expand Widget Template.
  • Search for the following code using (Ctrl+F).


 ]]>

Now just above this code add the following piece of code.
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
  • After Adding the CSS code now move on to the HTML code.
For that you need to search these code first
Now copy the code below and paste it directly above the following code above.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Photo Link' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write Something About yourself<br/>

Follow Me on Twitter <a href=' Your Twitter Link '>Your Twitter link Anchor text</a>
<p style='margin:-8px 0'><br/><center>
<a href=' Your Blog link ' style='text-decoration:none;font-size:70%;'>Your Blog Name</a></center>
</p></div></p>
</div>
</b:if>

 
Customize the Author Area Code as per your need and requirement :

  1. Your Photo Link
  2. About the Author text ( In my case its About Ajay Chaudhary)
  3. Write Something About yourself
  4. Your Twitter Link
  5. Your Twitter link Anchor text
  6. Your Blog Link
  7. Your Blog Name 
  • Save your Template and Make a Preview !
  • Here you are Done. Hope you like it !

Read More...

How to Hide and Show Widgets/Gadgets in Home/post/static And Archive page in Blogger Blog

Leave a Comment

One of the problem you have probably observed, all the widgets/gadgets you add to your blog, will be displayed in all the pages by default, including your homepage too. And if you haven't heard about this already, Adsense can disable your account only for the reason you've put ad units on the content of your contact or privacy policy pages. Isn't that ridiculous? Well, if you ask me, the answer would be: yes and no. First of all, lots of widgets can make a blog/site to look unprofessional, increasing page loading time, therefore visitors will lose their patience.



To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

1. First of all, go to Blogger's Dashboard >> Design >> Page Elements and give a name for the HTML/Javascript gadgets you have already added. Doing this it will be easy for you to identify the widgets in your blogger template. Give it a unique title so that it does not match with any of the titles of other widgets added.

2. Then go to Dashboard >> Design >> Edit HTML and check the "Expand Widget Templates" box.

3. Find your widget in the HTML by using Ctrl+F and entering the widget's name in the search box. Let's say i have given the title for my widget as "Recent Posts". After searching you will find the below snippets:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>  

This code represents the widget/gadget that you have added in the Page Elements location. All you have to do is to add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. Let's see some examples:

To show the widget only in Homepage:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To show Blogger widget only in post pages 
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

*Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in static pages
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To hide widgets in Static Pages
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in Archive Pages
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

After you have added the conditional tags, Save Template and view your blog.
Read More...

Social Bookmaking Widgets For Blogger Blog

Leave a Comment
With the release of Cute Box blogger Template I also released some useful blogger widgets which includes a Bookmarking Widget For your blog’s homepage. This widget helps readers to bookmark your blog’s homepage on their favourite bookmarking services like Google bookmark, Stumbleupon, Delicious, Digg etc. It contains icons from  our Circular Style Social Media Icon Set. This is how this widget looks like,


To add this widget to your blogs, follow these steps:

  1. Go To Blogger > Layout
  2. Click Add a Gadget
  3. Choose HTML/JavaScript
  4. Inside HTML/JavaScript paste the code below,

<center><tr><td valign="top" width="50%"><table border="0" cellpadding="0" cellspacing="0" width="222"><tbody><tr><td width="28" height="30"><img border="0" width="25" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SpxXCHkYF9I/AAAAAAAABu8/3EIK9V5TGzY/s400/FACEBOOK.png" height="25"/></td><td height="30"><a href="http://www.facebook.com/sharer.php?u=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a></td></tr><tr><td height="30"><img border="0" width="25" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SpxfJT5jV0I/AAAAAAAABvU/vj-2FSGnJCY/s400/TWITTER.png" height="25"/></td><td height="24"><a href="http://twitthis.com/twit?url=http://YOUR-BLOG-NAME.blogspot.com">Share on Twitter</a></td></tr><tr><td height="30"><img border="0" width="25" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SpxfI9BoQqI/AAAAAAAABvM/sI_RGyM6Uxk/s400/STUMBLE-UPON.png" height="25"/></td><td height="30"><a href="http://www.stumbleupon.com/submit?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on StumbleUpon</a></td></tr><tr><td height="30"><img border="0" width="25" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SpxfKFaKnyI/AAAAAAAABvk/fezNFHWne9A/s400/DELICIOUS.png" height="25"/></td><td height="30"><a href="http://del.icio.us/post?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Delicious </a></td></tr></tbody></table></td><td valign="top" width="50%"><table border="0" cellpadding="0" cellspacing="0" width="222"><tbody><tr><td width="28" height="30"><img border="0" width="25" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SpxfIfVxSbI/AAAAAAAABvE/cp4RV60pZL4/s400/DIGG.png" height="25"/></td><td height="30"><a href="http://digg.com/submit?phase=2&url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Digg </a></td></tr><tr><td height="30"><img border="0" width="22" src="http://2.bp.blogspot.com/_dchgDUvjlTY/SP3dMy4TvuI/AAAAAAAAAFE/cStvZWKD5bY/s400/Google-icon.jpg" height="22"/></td><td height="30"><a href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></td></tr><tr><td height="30"><img border="0" alt="Email" width="21" src="http://4.bp.blogspot.com/_7wsQzULWIwo/SxMuFjn0BII/AAAAAAAACbE/GOTIEAtrU0I/s400/Email+Orange_128.png" height="22"/></td><td height="30"><a href="http://feedburner.google.com/fb/a/mailverifyuri=coderdesire&amp;loc=en_US" target="_blank" rel="nofollow">Receive Email Updates</a></td></tr></tbody></table></td></tr></center>
  • *Remember to replace YOUR-BLOG-NAME  with your Blog’s good name and

  • The Subscription Link i.e http://feedburner.google.com/fb/a/mailverifyuri=coderdesire&amp;loc=en_US with your own Feedburner subscription link. You can find your subscription link by going to the following location in your feedburner account, Publicize > Email Subscription . Just below Email Subscription page you will find a code as shown below,

     5. Finally save your widget and preview your blog to see the new change!
Read More...