Numan - Seo, Widgets ,Softwares , Making money , Adsense: Blogger Widgets

Showing posts with label Blogger Widgets. Show all posts

05 March 2013

How To add Stylish Read More Button To Your blogger/blog 2013

How to Add Animated Read More Button to Blogger

How To add Stylish Read More Button To Your blogger/blog 2013

_________________________________________________________________

Wright Click And copy Image URL

_________________________________________________________________

Top 10 Templates Premium Blogger Template FreeDOWNLOAD

Free Google Adsense Approval Trick 2013

Change the read more text with read more button image to customize your blog’s look and it also look like unique blogger read more button.

To replace read more text with one of this read more button image then just follow the simple steps !

1. Go to design > EDIT HTML

2. Backup your template

3. Select Expand Widget Templates

4. press ctrl+f and in search box write Read More. You know batter what you should search read more or continue reading.

Once you find Read more / Continue reading in your blogger template
Then just change it with simple code.

<img width="120px" height="59px" src="URL Of Your Read More Button Image"/>

120px by 59px. If you want a smaller one than you can use these proportions:

width=”100px” height=”27px”

width=”80px” height=”21px”

Hope you have enjoyed it....:)

Continue Read More →

03 March 2013

Top 10 Best Free Social Media Icons Sets Recommended For 2013

Sunday, March 03, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Blogger Widgets and plugins, Tips And Tricks No comments

Hello Friends Today We Will Discus:

Social media icons are the best part of a website when it comes to talk about the outlook and theme of a blog/website. They not only make your website appear fanciful and emphatic but also appealing and attention grabbing. I have previously been coming up with social media icons’ posts and they are pretty enough appreciated by you as well.

Today I have come along with 10 top best free social media icons sets which are highly recommended to you for 2013. These are indisputably great pick-ups for the year 2013. You can either use them in blogs/ websites having white, girly pink or black backgrounds. You can place these social media icons on the top header, footer or in the side bar as required.

Let’s just be more prudent to make the right choice of impressive social media icons for our websites or blogs. Social media icons are of course the essentials of a website. Scroll down and catch the excitement down here.

All the 10 best Icon Sets Includes:

Don’t forget to subscribe us for more free logos, free Vectors & Free Icons in future.

_________________________________________________________________

1. Free Simple Sleek Social Media Icons 2013 | Most Recommended

Free-Simple-Sleek-Social-Media-Icons-Pack-2013

_________________________________________________________________

2. Free Beautiful Social Media Icons In Ribbon Style | Free 256 PNGs

_________________________________________________________________

3. Free Hand Stitch Social Media Icons Set

_________________________________________________________________

4. Free Rough Old Style Retro Social Media Icons In 256 x 256 PNGs

Free-Retro-Rough-Old-Social-Media-Icons-256-x-256-PNG

_________________________________________________________________

5. Free Beautiful Ribbon Social Media Icon Set For 2013

Free-Beautiful-Ribbon-Social-Media-Icons-2013

_________________________________________________________________

6. Free Minimalistic Cute Social Media Icons 256 x 256 PNGs

Free-Cute-Minimalistic-Social-Media-Icons-256-x-256-PNG

_________________________________________________________________

7. Free Fat Social Media Icons 2013

_________________________________________________________________

8. Free Pink Girly Social Media Icons 2013

_________________________________________________________________

9. Free Vector Round Black Social Media Icons Suitable for Both White & Black Backgrounds

Free-Vector-Round-Black-Social-media-icons-2013

_________________________________________________________________

10. Free Vector 3d Social Media Icons Pack Including New Twitter StumbleUpon & Pinterest Icons

Free-Vector-3d-Social-Media-Icons-Pack-2013-New-Twitter-StumbleUpon-Pinterest

If You like This Post Please Subscribe And Comments Here

Continue Read More →

01 March 2013

How to Add 5 in 1 Slide Out Floating Social Subscribing Widget to Blogger 2013

Friday, March 01, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Blogger Widgets and plugins No comments

Yesterday I shared Pure CSS Expanded Social Network Widget with you. Today I'm going to share another Awesome blogger widget that contain all the 5 Big Social Network (Facebook, Twitter, Google Plus, Email Subscribe, YouTube) jQuery Slide Out Widget For Your Blog & Website To Increase Your Social Fans.

So we have five different Pop up Like Boxes which appears on hover on little image that are at right sidebar on you blog.
One of the best ways to increase your Social fans is to add the Jquery Pop-up Social Box to your Blog. Once this widget is installed on your blog, your visitors will be shown a slide out box with the option to like your Facebook Page, or want to follow on Twitter, or want to add you in there circle, want to subscribe your feedburner email whenever they visit your blog.

Advantages this widget is to free space on the page. Because if you add all of these widget on your site/blog, it will take a huge space that will make your visitor angry, It can prevent website normal as the box. Static widget as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. Let add this cool widget through below Widget Generator.

Features:

1.) J-Query/JavaScript Widget.
2.) Slide-Out On Hover.
3.) Awesome And Stylish.
4.) Facebook Like Box Included.
5.) Twitter Followers Box Included.
6.) YouTube Subscribe Box Included.
7.) Google Plus Add To Circle Widget Included.
8.) FeedBurner RSS Subscribe Through E-Mail Widget Included.
9.) Sliding Effect Enabled.
10.) Slide Out On Hove And Get Back On Mouse Out.

How To Add This Gadget To Blogger?

1. Replace my User name with yours in below widget generator
2. Click Generate Button
3. Check Live Preview by clicking Preview button
4. Now finally Click ADD TO BLOGGER to add this widget on your blog

5 in 1 Social Subscribing Slide Out Widget Generator

Select All And Copy this Code

<style>  img, a {  border: 0;  }  #on {  visibility: visible;  }  #off {  visibility: hidden;  }  #facebook_div {  width: 196px;  height: 340px;  overflow: hidden;  }  #twitter_div {  width: 246px;  height: 353px;  overflow: hidden;  }  #google_plus_div {  width: 290px;  height: 120px;  overflow: hidden;  margin-left: 5px;  margin-top: 1px;  }  #NBTfeedburner_div {  width: 300px;  height: 120px;  overflow: hidden;  margin-top: 5px;  margin-left: -4px;  }  #NBT_div {  width: 300px;  height: 97px;  overflow: hidden;  }  /* right side style */  #facebook_right {  z-index: 10005;  border: 2px solid #3c95d9;  background-color: #fff;  width: 196px;  height: 353px;  position: fixed;  right: -200px;  }  #facebook_right img {  position: absolute;  top: -2px;  left: -35px;  }  #facebook_right iframe {  border: 0px solid #3c95d9;  overflow: hidden;  position: static;  height: 360px;  left: -2px;  top: -3px;  }  #twitter_right {  z-index: 10004;  border: 2px solid #6CC5FF;  background-color: #6CC5FF;  width: 246px;  height: 353px;  position: fixed;  right: -250px;  }  #twitter_right_img {  position: absolute;  top: -2px;  left: -35px;  border: 0;  }  #google_plus_right {  z-index: 10003;  background-color: #F2F2F2;  border: 2px solid #006ec9;  border-top: 2px solid #0056a0;  border-bottom: 2px solid #0056a0;  border-right: 2px solid #0056a0;  border-left: 2px solid #0056a0;  width: 290px;  height: 120px;  position: fixed;  right: -292px;  }  #google_plus_right_img {  position: absolute;  top: -2px;  left: -33px;  border: 0;  }  #feedburner_right {  z-index: 10003;  background-color: #fefefe;  border: 2px solid #5b5b5b;  border-top: 2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-right: 2px solid #5b5b5b;  border-left: hidden;  width: 300px;  height: 97px;  position: fixed;  right: -303px;  }  #feedburner_right_img {  position: absolute;  top: -2px;  left: -33px;  border: 0;  }  #NBT_right {  z-index: 10003;  border: 2px solid #303030;  background-color: #fff;  width: 300px;  height: 97px;  position: fixed;  }  #NBT_right img {  position: absolute;  top: -2px;  left: -101px;  }  /* left side style */  #facebook_left {  z-index: 10005;  border: 2px solid #3c95d9;  background-color: #fff;  width: 196px;  height: 353px;  position: fixed;  left: -200px;  }  #facebook_left img {  position: absolute;  top: -2px;  right: -35px;  }  #facebook_left iframe {  border: 0px solid #3c95d9;  overflow: hidden;  position: static;  height: 360px;  right: -2px;  top: -3px;  }  #twitter_left {  z-index: 10004;  border: 2px solid #6CC5FF;  background-color: #6CC5FF;  width: 246px;  height: 353px;  position: fixed;  left: -250px;  }  #twitter_left_img {  position: absolute;  top: -2px;  right: -35px;  border: 0;  }  #google_plus_left {  z-index: 10003;  background-color: #006ec9;  border: 2px solid #006ec9;  border-top: 2px solid #0056a0;  border-bottom: 2px solid #0056a0;  border-left: 2px solid #0056a0;  border-right: 2px solid #0056a0;  width: 290px;  height: 120px;  position: fixed;  left: -292px;  }  #google_plus_left_img {  position: absolute;  top: -2px;  right: -33px;  border: 0;  }  #feedburner_left {  z-index: 10003;  background-color: #fefefe;  border: 2px solid #5b5b5b;  border-top: 2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-left: 2px solid #5b5b5b;  border-right: hidden;  width: 300px;  height: 97px;  position: fixed;  left: -303px;  }  #feedburner_left_img {  position: absolute;  top: -2px;  right: -33px;  border: 0;  }  #NBT_left {  z-index: 10003;  border: 2px solid #303030;  background-color: #fff;  width: 300px;  height: 97px;  position: fixed;  }  #NBT_left img {  position: absolute;  top: -2px;  right: -101px;  }  .box-title1 {  border: 1px solid #ddd;  /*border-radius*/  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  /*box-shadow*/  -webkit-box-shadow: 5px 5px 5px #CCCCCC;  -moz-box-shadow: 5px 5px 5px #CCCCCC;  box-shadow: 5px 5px 5px #CCCCCC;  padding: 10px;  margin: 10px 0;  }  .enteryouremail {  background: #fff !important;  border: 1px solid #d2d2d2;  padding: 0px 8px 0px 8px;  color: #a19999;  font-size: 12px;  height: 25px;  width: 165px;  /*border-radius*/  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  margin: 0px;  }  .submitbutton {  background: #FF8000;  border: 1px solid #F66303;  /*box-shadow*/  -webkit-box-shadow: 3px 3px 3px #666;  box-shadow: 3px 3px 3px #666;  font: bold 12px Arial, sans-serif;  color: #000000;  height: 25px;  padding: 0 12px 0 12px;  margin: 0 0 0 5px;  /*border-radius*/  -webkit-border-radius: 5px;  border-radius: 5px;  cursor: pointer;  }  #youtube_right {  z-index: 10001;  background-color: #fefefe;  border:2px solid #ff0000;  border-top:2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-right:2px solid #5b5b5b;  border-left: hidden;  width:301px;  height: 106px;  position: fixed;  right: -303px;  }  #youtube_right_img {  position: absolute;  top: -2px;  left: -33px;  border:  </style>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function () {  jQuery("#facebook_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#facebook_right").stop(true, false).animate({  right: -200  }, 500);  });  jQuery("#twitter_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#twitter_right").stop(true, false).animate({  right: -250  }, 500);  });  jQuery("#google_plus_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#google_plus_right").stop(true, false).animate({  right: -292  }, 500);  });  jQuery("#feedburner_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#feedburner_right").stop(true, false).animate({  right: -303  }, 500);  });    jQuery("#youtube_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  },    function () {  jQuery("#youtube_right").stop(true, false).animate({  right: -303  }, 500);  });  });  </script>      <br />  <div id="on">  <div id="facebook_right" style="top: 10%;">  <div id="facebook_div">  <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10pDYMgZSRHfN0eaAf_cHWjo3s2HEGOfd-VCh01_9nksr1TMLUmMOkb1l22hXNgKYZKV2ytmG9yYx_Jfu0CvvsRTOnhb8WvMzdCGa9kCxc-kiQsFiimBfjJD_wj3PtFBfRR51lwfhv4MX/s1600/NBTfacebook_right.png" />  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fitsimtiazforum&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"  style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>  </div>  </div>  </div>  <div id="on">  <div id="twitter_right" style="top: 25%;">  <div id="twitter_div">  <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDM-PACuNZbkoonF2Y4VJfbQKlnfacx2vAge_nh8CLCpGc50OJmWSPi-O7lpcHCdwKGX3BR1tDrn_PvLjW_P-EwTpWqTgI5WJ_S6MJ273WBbUb4iuGGiYNTWcnTXr9QNkIKWMg2NohgxOn/s1600/NBTtwitter_right.png" />  <script src="http://widgets.twimg.com/j/2/widget.js"></script>  <script src="http://widgets.twimg.com/j/2/widget.js"></script>  <script>  new TWTR.Widget({  version: 2,  type: 'profile',  rpp: 4,  interval: 1000,  width: 246,  height: 265,  theme: {  shell: {  background: '#63BEFD',  color: '#FFFFFF'  },  tweets: {  background: '#FFFFFF',  color: '#000000',  links: '#47a61e'  }  },  features: {  loop: false,  live: true,  scrollbar: false,  hashtags: false,  timestamp: true,  avatars: true,  behavior: 'all'  }  }).render().setUser('itsimtiazforum').start();  </script>  </div>  </div>  </div>  <div id="on">  <div id="google_plus_right" style="top: 40%;">  <div id="google_plus_div">  <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ibe3FEqzijCp120DzKLe4KVf_qqAlqrHfBWJLvxUr9M9wiII52Psq0rlUT-NaugHo-lDrtP9bT1ONzMoY70diA1FwljLkqvx0JKMSILv_ajAX2DWOeWgE5hyphenhyphenPe0NuX9JVnSmuvNDQyU4/s1600/NBTgoogle_plus_right.png" />  <div style="float: left; margin: 10px 10px 10px 0;">  <div class="g-plus" data-width="280" data-height="69" data-href="//plus.google.com/106844825834010436910" data-rel="author"></div>  <div class="g-plusone" data-annotation="inline" data-width="280"></div>  </div>  </div>  </div>  <div id="on">  <div id="feedburner_right" style="top: 55%;">  <div id="NBTfeedburner_div">  <center>  <h4 style="color: #f66303;">  You can also receive Free Email Updates:</h4>   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=itsimtiazforum', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">  <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..."  />  <input name="uri" type="hidden" value="itsimtiazforum" />  <input class="submitbutton" type="submit" value="Submit" />  </form>  </center>  <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGI3oHyViVOX3HNygVqu15sA4Ks6EYByiJ57g0GUjq_XpN1Tu72h4Yl78J9Q_wAvUtRgQibQXvBfca2Vp3q9zsHttvrDqkQau6Tw7tQo209hHQlVYD8_y4uE7e3xC1gXlIoEzW6-fZWES/s1600/NBTfeedburner_right.png" />  <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://newbloggertips.com/">NBT</a></span><span style="font-size:8px;"></span>   </div>  </div>  </div>  </div>  <div id="on">  <div id="youtube_right" style="top:70%;">  <div id="youtube_div">  <img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeqR6Dgj2mb59-N63vRCkBv985XYHgvB-CnN3yiVrvaeJECrpvFstJwNckSgOQPJ50dF9-O0fktg47UavX5SD0i7z8OUikKVcedcu0zhEAK8xN-XcjqI92IoYuvsT-e7lFUytrnS0drg/s1600/NBTyoutube_right.png " />  <div style="float:left;margin:1px 0px 0px 2px;">  <iframe src=http://www.youtube.com/subscribe_widget?p=itsimtiazpk style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe>  </div>  </div>  </div>  </div></div>

Note:

Please Replace Highlight"106844825834010436910" Code Red Color Codes

Please Replace Highlight"Itsimtiazforum" Code Red Color Codes

Hope you like this widget. If you need any help then drop your comments below.Happy Blogging.

Continue Read More →

26 February 2013

How To Add Related Posts Widget To Blogger/blog with Thumbnails 2013

Tuesday, February 26, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Blogger Widgets and plugins, Tips And Tricks No comments

Display Thumbnails Of Posts Having Same Labels, Tag Or Categories At The Under Of Each Blog Post Using The Blogger Related Posts Thumbnails Widget Is A Great And Best Way To Increase Your Blog Visitor And Your Page Views. Related Posts Are Always Accessible At The End Of The Post, So The Visitors Won’t Feel Any Break As Reading The Article. Moreover, After Reading Out The Article/Post Users Can Feel Free To Visit Some Related Posts. But, It Is A Great Problem Blogger Doesn’t Have Built-In Related Post Functionality. So, We Have To Depend On External Sources Like Linkwithin, nRelate Etc... Don’t Worry After Releasing The Fixed Floating Vertical Social Share Counters Buttons / Bar for Blogger, Today We Will Reveal Our Related Posts Thumbnail Widget For Blogger Enabled Platform. You Can Add Related Posts Widget Just Under Of the Every Blog Post. It Also Shows Thumbnails Because It Attracts Your Blog Visitors. This Widget Thumbnail Are Arranged In Columns Under The Post With Related Posts Title/Excerpt Under Each Post Thumbnail. Colors Of Background, Border, Text, Text Sizes, Background On Mouse Over, Title. You Can Also Specify Number Of Related Posts To Display.

This Widget Designed And Customize By MBB. We Have Attached A Screenshot Below So Anyone Can Easily Understand How Well-Crafted This Widget Is. Even I Am Also Using This Widget For My Blog. See Screenshot Below…

Related Posts,Blogger Related Posts,Related Posts Thumbnail

How to Add This Widget in My Blogger Blog?

Go To Blogger Dashboard
Click On Template Tab
Now Click On Edit HTML>>Proceed.
Check the "Expand widgets template"
Now Find ]]></b:skin>
And Then Paste Below Code Above ]]></b:skin>

#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; }

Now Find </head> And Paste Below Code Above it

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPyIfRtYCQ_V1PLeTIOV4pNE04dXd_1OIh3L-PWZsF7SbESAs_dLtRhrtWk9MaJSFIxTiOEf7hainGggo48qL2rMgO6Y5SAo7qP6N7-IQeGecsD8v4yWS8NQTMIi-fLBXQChPxfwd4IQj/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script> </b:if>

Now Find <div class='post-footer'>
And just above it, copy and paste the below code

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='www.mybloggerblog.com'></a> </b:if></b:if>

Finally After Code Just Click On Save Template Button.

Settings:

If You Feel Like To Specify Number Of Related Posts To Display As Related Post In Your Blog Then Simply Find The Code Var Maxresults=5; From The Java-Script Part And Replace 5 With The Number You Want.

If You Face Any Difficulty Feel Free To Ask.

Continue Read More →

21 February 2013

6 Easy Ways To Customize Heading Style In Blogger & Wordpress – Customize Heading Tags

Thursday, February 21, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Tips And Tricks No comments

You must have observed the style of headings in my posts, it’s usually surrounded by two sky blue borders and have a text colour in sky blue. Styling the Headings gives an interesting and attractive look to your blog content. Readers find it more easy to locate a certain portion of your topic with the help of properly customized Headings. Further it will increase your search engine ranking because heading tags produces a really good impression on search engine robots. This tutorial is mainly for Blogspot users but some interesting styling can surely be added to Wordpress. Lets Start!

Customizing Heading Style Using Simple CSS – For Blogspot Users

Now to add one of the above Heading Style to your blogs, do the following,

Go To Blogger > Layout > Edit HTML

Search For ]]></b:skin> (Tip:- Press Ctrl + F )

Just above ]]></b:skin> paste one of the codes below,

For Heading Style with a bottom border, use this code,

.post h3{
color:#0080ff;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:2px;
}

For Heading Style with a border at top and bottom, use this code,

.post h3{
color:#0080ff;
border-top:1px solid #289728;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:3px;
}

For Heading Style surrounded by borders, use this code,

.post h3{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}

For Heading Style with Hover Effect, use this code,

.post h3{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
} .post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}

For Heading Style surrounded by a Box, use this code,

.post h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}

For Heading Style with a side Image & Hover Effect, use this code,

.post h3 {
background: #fff url(URL OF Side Image) top left repeat-y;
font-size: 12pt;
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}

Make Sure you replace URL OF Side Image with Image Link of your preferred side image. This image can be 45px by 45px in size or even smaller. I have used the following image in the video above –>

4. Now Finally save your template.

Customization and Implementation Of The CSS Code For Headings

Customization:-
All the CSS codes above use simple properties which are described below,
1.   For Changing border width, style and colour edit codes like this one,
border:1px solid #0080ff
Here 1px refers to border thickness/width and solid refers to border style and the six digit number refers to border colour. You can change border style from solid to dotted or dashed. I like border style to be dotted because it gives a light appearance.
You can use our CSS Colour Chart for getting the six digit number for your desired colour
2.    For Changing Font Size, edit codes like this one,
font-size:12pt
If you want the text size to increase or decrease than respectively increase or decrease this value 12pt
3.    To Change Font Colour, edit similar codes like this one,
color:#0080ff
You can use our CSS Colour Chart for getting the six digit number for your desired colour
Implementation:-
Now Whenever you write a heading in your post inside blogger editor, simply add the following pieces of codes next to your heading,

<h4> Your Heading Goes Here </h4>

See a screen shot below,
Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively.
example-image-for-heading-style

This can be done both in compose or HTML mode.
For Heading Style Surrounded By a Box you will need to add slightly different code as shown below,

<h4><span> Your Heading Goes Here </span></h4>

We only need to add an extra span tag (i.e:- <span>) for the box to appear.
That’s All!
Note:- Changes Will Not Appear inside Blogger Editor or on previewing. You will only see a bolded black text inside blogger editor. The styling will take effect only when the post is published.

Customizing Heading Style Using Simple CSS – For Wordpress Users

To be honest I really hate wordpress because it has nothing interesting for new web designers like me. It uses complex php script that few understands and also has a complex CSS editing option that has never went through my throat. If you are an expert wordpress user then you can use the blogspot method above to style headings in your wordpress template but if you find it difficult to edit wordpress style sheet like me then you can adopt a simple way as described below.
We can only apply three out of six Heading style methods to wordpress which are,
To apply any of the heading style above, do this in your Wordpress Editor,

Heading Style with a bottom border

Heading Style with a bottom border and top border

Heading Style surrounded by borders

In the visual mode of your Wordpress editor first write a heading

Now switch to the HTML mode and enclose your heading with the following code,

For Heading style with a bottom border, use this code,

<h3><div style="color:#0080ff; border-bottom:1px solid #289728;
font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

For Heading style with a bottom border and top, use this code,

<h3><div style="color:#0080ff; border-top:1px solid #289728;
border-bottom:1px solid #289728; font-size: 12pt; padding:3px;">Your Heading Goes Here</div></h3>

For Heading style surrounded by borders, use this code,

<h3><div style="color:#0080ff; border:1px solid #289728; font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

The green text is where your heading must lie and the bolded black text is the code that should surround your heading. Now once you have added the codes correctly, simply switch to the visual mode and you will see the heading style in action! See some screen shots below for heading style surrounded by borders,
First enclose your heading with html codes above in the html mode,
Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively.

wordpress-editor---html-mod

Then press the visual button to see the effect live!

wordpress-editor--visual-mo

Hope it was clear :>>

Continue Read More →

15 February 2013

How to Add Thumbnails Related Post widget for Blogger

Friday, February 15, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Tips And Tricks No comments

Don't increase visitors/readers bouncing rates of on blog. If visitor finds your Article is enjoying let remain on your blog by adding some of spicy related post widget to blog. Simple liks type Related post widget we've discussed eariler now, here BlogTariff educate you how to add "Thumbnail related posts widget for blogger. By displaying Thumbnails Related posts widget on your blog visitor/readers attracts easily and clicks on posts reader find useful. This widget displays not only Related posts links also thumbnails according to the category wise which you've added under Label/category. Let's begin the tutorials.

How to Add Thumbnails Related Post widget for blogger

Step One:

Sign into your blogger account
Click on "Design (Layout in the new blogger interface)
Click on "EDIT HTML" link tab
Mark the "Expand widget template" box

Step Two:

Now, Search the code

</head>

After finding the code copy the below code and paste above to it

Step Three

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTmrFKsCf3nHjFv5MHcEdkB0dz5y2McWJPxLKew3LM2tTOQZlBu2pGrTGBtIV-mUQSy_hvEYz5dFDNAsXlWwZ7EenFlctyVzdd2xfM4SFShTj06hXSx-D6bTCc4o0hJakkVof0xqEyTI/s660/noimage-blogtariff.com.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogtariff.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
</b:if>

Step Four

Cutomization

If need replace "5 posts" with your own value under "var maxresults=5;" number of posts to be displayed
If need to display Thumbnail Related post widget to be displayed in Home page Delete it Code color in "Pink"

Step Five:

Search for code

<div class='post-footer-line post-footer-line-1'>

If you can not find the above code then try this code to search

<p class='post-footer-line post-footer-line-1'>

Or Else

<data:post.body/>

After finding the code copy the below code and paste it below the code

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.blogtariff.com'><img alt='Blogger tricks and Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fPsrVrBjVKe0R9Kp751tIuueQFFZ7i8hjntdNvhj2ED2krd1hKb0YTuFCbq2BNmNR3ZDdygDOTzOOH7R2mIgDPhU08gP36MmWwOog3mNBXDEk-7YMbYtyhkS0qFq1a1hR0oRbZztI4RZ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

After sucessfully adding the above code now, if you need change the below tags/value

Customization:

If need replace "6 value" with your own value under "var maxresults=6;" number of posts to be displayed
If need to display Thumnail Related post widget to be displayed in Home page Delete it Code color in "Pink"
After successful and necessary modifications now, "Save the Template"

Continue Read More →

How To Add Recent Comments Widget With Avatar For Blogger & Blogspot

Friday, February 15, 2013 By Imtiaz Ahmed Blogger Tips, Blogger Widgets, Blogger Widgets and plugins, Tips And Tricks No comments

Hello!
This is the tutorial for adding Recent Comment with Avatar Widget to your blogger or blogspot blogs. This is a simple method, adding some html codes to your blog layout. This is a popular widget which increases your visitors comments. This widget looks like above image.

First Go to your blogger Dashboard

Go to your Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript.

Add this HTML/JavaScript code

Add this Code to HTML/JavaScript Box and Name Recent Comments.

    <style type="text/css">
    ul.w2b_recent_comments {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .w2b_recent_comments li {
        background: none !important;
        margin: 0 0 6px !important;
        padding: 0 0 6px 0 !important;
        display: block;
        clear: both;
        overflow: hidden;
        list-style: none;
    }

    .w2b_recent_comments li .avatarImage {
        padding: 3px;
        background: #fefefe;
        -webkit-box-shadow: 0 1px 1px #ccc;
        -moz-box-shadow: 0 1px 1px #ccc;
        box-shadow: 0 1px 1px #ccc;
        float: left;
        margin: 0 6px 0 0;
        position: relative;
        overflow: hidden;
    }
    .avatarRound {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
    }
    .w2b_recent_comments li img {
        padding: 0px;
        position: relative;
        overflow: hidden;
        display: block;
    }
    .w2b_recent_comments li span {
        margin-top: 4px;
        color: #666;
        display: block;
        font-size: 12px;
        font-style: italic;
        line-height: 1.4;
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
        // Recent Comments Settings
        var
     numComments = 5,
     showAvatar = true,
     avatarSize = 60,
     roundAvatar = true,
     characters = 40,
     showMorelink = false,
     moreLinktext = "More »",
     defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
     hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
    <script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Change : http://your-blog.blogspot.com with your blog address.
    Replace the value 5 for numComments = 5, and max-results=5 with the number
    of comments that you want.
    Change your Anonymous avatar by changing http://www.gravatar.com/avatar/?d=mm.

You have complete all! Success or Not ???

Continue Read More →

05 March 2013

How To add Stylish Read More Button To Your blogger/blog 2013

How to Add Animated Read More Button to Blogger

03 March 2013

Top 10 Best Free Social Media Icons Sets Recommended For 2013

1. Free Simple Sleek Social Media Icons 2013 | Most Recommended

2. Free Beautiful Social Media Icons In Ribbon Style | Free 256 PNGs

3. Free Hand Stitch Social Media Icons Set

4. Free Rough Old Style Retro Social Media Icons In 256 x 256 PNGs

5. Free Beautiful Ribbon Social Media Icon Set For 2013

6. Free Minimalistic Cute Social Media Icons 256 x 256 PNGs

7. Free Fat Social Media Icons 2013

8. Free Pink Girly Social Media Icons 2013

9. Free Vector Round Black Social Media Icons Suitable for Both White & Black Backgrounds

10. Free Vector 3d Social Media Icons Pack Including New Twitter StumbleUpon & Pinterest Icons

If You like This Post Please Subscribe And Comments Here

01 March 2013

How to Add 5 in 1 Slide Out Floating Social Subscribing Widget to Blogger 2013

Features:

How To Add This Gadget To Blogger?

5 in 1 Social Subscribing Slide Out Widget Generator

Note:

26 February 2013

How To Add Related Posts Widget To Blogger/blog with Thumbnails 2013

How to Add This Widget in My Blogger Blog?

21 February 2013

6 Easy Ways To Customize Heading Style In Blogger & Wordpress – Customize Heading Tags

Customizing Heading Style Using Simple CSS – For Blogspot Users

Customization and Implementation Of The CSS Code For Headings

,

and

Customizing Heading Style Using Simple CSS – For Wordpress Users

,

and

15 February 2013

How to Add Thumbnails Related Post widget for Blogger

How to Add Thumbnails Related Post widget for blogger

Cutomization

Customization:

How To Add Recent Comments Widget With Avatar For Blogger & Blogspot

First Go to your blogger Dashboard

Add this HTML/JavaScript code

Stay!

Labels

Popular Posts

Recent Post

Recent Comments

Contributors

Total Pageviews

Receive all updates via Facebook. Just Click the Like Button Below?

You Can also Receive Free Email Updates:

Receive all updates via Facebook. Just Click the Like Button Below
?