Stylish Rss Feed, Facebook, Twitter, Email Subscription Widget to Blogger

Posted by Pcworldtutorial Posted on 6:28 AM with No comments
Do you want to add Excellent/Stylish Rss Feed, Facebook, Twitter, Google Plus, Email Subscription Widget to Blogger? By this widget visitor can subscribe to your blog and get update easily. To do it just follow the below steps:


1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

<style>
#topbox{width:250px;border:1px solid #a1a1a1;background-color:#ffffff;padding-bottom:15px;padding-top:5px;}
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIsBTG9AptP5oy_FFUoF1_y-oWEQUHPzhFYx2dtj7Es90PnSMvQm5Axmgv9m_L9r0P_yaRzPr4Cr95QSH2m68Qoex8Y-r2SU4YwuwZH0ELB6NoHHd1EiGKi_n4-WRW45cxeibQCcP_Gtw/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 18px;padding-bottom:10px;font-weight:bold;}
</style><br />
<div id="topbox">
<center>
<div class="news-headline" color:="color:">
Get Free Email Updates
</div></center>
<center>
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/sr-site" target="_blank" title="Follow Me On Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2FfTBhwXdAxXUC69SVmiCOLaowD1MnqsIV-MFqIPJfU3s9xcQQIaHKAvG9bacPQJs4y-q8_r3Qb3jD6O7Jza40ZQzNXB3DsEJX5UbNeLTa-dndTXQzROzxLfdMwx2BwgjEtvhIay2g_k/s1600/sr-site.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/sr-site" target="_blank" title="Subscribe Via RSS">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMGtwZNkxcKcMoGTEbCY97iujNfm-vxnMaF17hXbJKk3Nmbn-hRdaipOcOmdTtz0moFlysun0w_Yl88jh5TpDdGA2kndOpYxxcxTZ7BgvstLULzuRuFcmQzjloJ7IPZw4qT4UuiLt6iv0/s1600/sr-site.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/sr-site" target="_blank" title="Find Us On Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT28pb55Fwhjo8oE4myB24DZphrsstE4upF5GCtIdvvmTa8V7NofjJkVcU01FxrebUlImTNJEEg9D0Ayy1FCrdVRdK_JZMwwbl8-a0RHKyYUFeUCyx9lBuDy_yOLk7hjiZDq_QmM0tQd8/s1600/sr-site.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/107955298793879607964" target="_blank" title="Add me on Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dkRMi-VMAZuYB9vxCSvdxMofBt2oMDfMBYa-2E4xD0f-lJ4VYRJtZgqq5zbjYfKEvkO7f_l2R__G9QI1W72mG6xEO6_nw-Apa1vEHA7LNK9TKgj_WwEdDTMH9wh5LkyH-SteJZupESY/s1600/sr-site.com-google-plus-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/username" target="_blank" title="Add To Technorati">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5RedCb3zNsVIf4W9ipXv5GSChVHZjGue8PpfCKghNHk0AY6s46Q6FeD9lq1a-tsNgoJJM4d4NImaJxjnMRryfiZNeoCGYb0S4QbGreAz1O6oJmx7ja2eaCoQtv_uvBTrcbYjAXcAKSfU/s1600/sr-site.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</center>
<div id="news-letter">
<span class="msg-box"></span>
<b>Sign up for newsletter</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sr-site', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
<input name="uri" type="hidden" value="sr-site" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
</form>
</div>
</div>
<div class="clear">
</div>
<br />
<div class="clear">
</div>
Read more »
Labels:

How to Make Blogger Blog Post Title SEO Friendly

Posted by Pcworldtutorial Posted on 8:07 PM with 4 comments
Do you want to make your blogger post title seo friendly? If your post title be seo friendly you will get more visitor from search engine. Post Title increase visitor so that improve your page rank. But the blogger templates are not search engine optimized that is they are not simply compatible to boost up your page rank. Do make your blogger template post title seo friendly just fulfill below steps:




1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Then search for this tag   <data:blog.pageTitle/>

Normally it is located in "head" section.

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

6. Replace the above code with the following code:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

I hope this trick will help you to drive more traffic to your Blogs or Websites. It also increases SEO of your Blogger Blog. Post a comment if you have any query. Thanks a lot !!!!
Read more »
Labels: ,

Social Media Sharing Buttons with Pure CSS

Posted by Pcworldtutorial Posted on 2:36 AM with No comments


Share your content with some stylish css sharing buttons. All six buttons are well coded and absolutely beautiful. All credits goes to CSS Deck.


View Demo
Download
Read more »
Labels:

Switch between Mobile View and Desktop View using Dropdown Box in Blogger

Posted by Pcworldtutorial Posted on 2:32 AM with No comments
Blogger supports Mobile template that allows the visitor to view the blog posts in Mobile compatible blogger template. This can be done by activating Show mobile template on mobile devices.
In Blogger Dashboard > Template.
When user visits the site using Mobile devices like Android, iPhone. The template automatically changes to Mobile Template. In some cases if the Template doesn't changes or the visitor wants to switch to Desktop View or Mobile View, we can add a Drop down Box that will have the Options to Select which View is to be displayed. This can be done easily by adding the below code to the HTML Widget.


CODE 

 Preview


Read more »
Labels:

How To Add Fresh And Beautiful Search Boxes To Blogger

Posted by Pcworldtutorial Posted on 11:43 PM with No comments
How To Add Fresh And Beautiful Search Boxes To Blogger                                                           


Fresh And Beautiful Search Boxes To Blogger
Blogger does not give a search box by default. We have to add the search box by our self. Every blog should have a search box. By this way your readers can find anything on your blog easily. Blogger only give the Google Search Box which is not the right search box for Blogger blogs. In this article I am giving a designed and perfect search box for Blogger blogs which only searches your blog. To add a search box to your blog follow the steps below.



1. Login to Blogger Dashboard -> Design tab -> Page Elements .
2. Click on Add a Gadget where you wish to place Search Box.
3. Choose HTML/JavaScript from the List.
4. Place any one Search Box code in to it and Save the Gadget.

Fresh And Beautiful Search Box Style 1

Fresh And Beautiful Search Box Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1AR5H3meH053axz6jKykEVQxjuZwRekbzhZEw3h3RzEoD28wm3qXnGmPGyVcXefBXx1H8-E6lpyP0LLR31ANjMJRsn7ysNMOzEbOLLfpBlpT1nx3zqagncLlL-UK7sirybLzt8oCnSAv/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Fresh And Beautiful Search Box Style 2

Fresh And Beautiful Search Box Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlyZAFEpmXP9uOrxpxis8ikctTUQUrdF_KyjxPGYHHcQ35vx5Z3Qncw9WSiRryNO2KooK2BXnxhYv-ymAQTtggVUbNEeQzlDRqTe8EY_GdjKoi8b59zv0kdiJtDFObdZ615fmFQqSrpQi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Fresh And Beautiful Search Box Style 3

Fresh And Beautiful Search Box Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjomqlQ1UtHVWy-3lU15NTUtVx15xL6jgQfsHaF07RcAoGTFPxClF7iPrhzIEUxxJzq76RtMplBB7f4o5Oc2ZfZpPaOFf3X3VHlg0i7DGdFYQVbWLZxNYs3Q1xyOmP3xaCQr6liVjUOGWAi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Fresh And Beautiful Search Box Style 4

Fresh And Beautiful Search Box Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeBonznsY47u8_QfiJ0Ks5S80YKHsctV5H_5qaQQK0hUjn2kEhF3DbkYmei-0zulnUHnp0HOBqO5AFAvNjDuC5kYu8E4z3WiNP-VfPIdN11_d1F84m_3f6-AJInY0R9TJ2CKOnEIObVcp/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Fresh And Beautiful Search Box Style 5

Fresh And Beautiful Search Box Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqMpresrXBpl5xVyBOzvQ7KnYu_q8YkOHJ8RMHLhi8aTighRjQD21Hc79CspubkRzHhlYa9-1JtZTb_1Tr5nmwsixDSjFPRLMJOa2mxgw1d5g5uCIUP8F4bjyOilG7AOEPhLZJV-XRF6e/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Fresh And Beautiful Search Box Style 6

Fresh And Beautiful Search Box Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtML7LkbLeisoYpibS8CUzd8jhnQXz1NWnHbdhdXc270dP-R7Za3UzK6YDwCq-TzI7Ij_Fm2vGFjZw8hhhN70pbWdftY2WJMc1QEdVtIVzYNeR6cnjrvgizxZympnT0FA7S19eDFWcmCjj/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Enjoy!
Read more »
Labels:

Stylish Popular Post Widget with 3D Effect for Blogger

Posted by Pcworldtutorial Posted on 11:40 PM with No comments
Stylish Popular Post Widget with 3D Effect for Blogger                                                                         

Hi guys,DO you Want to add stylish popular post for blogger. So this post is for you. Today I share 3D effect popular post widget. To add 3D effect popular post widget follow below steps:-



Live DEMO



1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget and Choose Popular Posts (If you already have this gadget skip this step)

4. After adding Popular Post Gadget Add a Gadget again Select HTML/Javascript widget.

5. Paste the following code and Save.


<style type="text/css">
.cube { width: 300px; height: 400px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://sr-site.googlecode.com/files/sr-site-image.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script src="https://sr-site.googlecode.com/files/popularpost.js" type="text/javascript"></script>

6. You are done. :)
Read more »
Labels:

Stylish Popular Post Widget with 3D Effect for Blogger

Posted by Pcworldtutorial Posted on 10:17 AM with 1 comment
Stylish Popular Post Widget with 3D Effect for Blogger                                                                         

Want to add stylish popular post for blogger. So this post is for you. Today I share 3D effect popular post widget. I have posted moving popular post widget before. To add 3D effect popular post widget follow below steps:-



LIVE DEMO

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget and Choose Popular Posts (If you already have this gadget skip this step)

4. After adding Popular Post Gadget Add a Gadget again Select HTML/Javascript widget.

5. Paste the following code and Save.

<style type="text/css">
.cube { width: 300px; height: 400px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://sr-site.googlecode.com/files/sr-site-image.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
$(function () {
$('.popular-posts ul').abupopularcube();
});

</script>
<script src="https://sr-site.googlecode.com/files/popularpost.js" type="text/javascript"></script>
Read more »
Labels: