tag:blogger.com,1999:blog-21345853140160018982024-03-13T07:32:51.875-07:00Best Blog TricksBlogging Tips, Widgets, Templates, Tricks, Seo, Blogger, Wordpress, Plugins, Tutorials, Guides, ResourcesBBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-2134585314016001898.post-43858314751165618782013-11-05T11:14:00.000-08:002013-11-05T11:14:40.865-08:00Get Custom URL or Username on Google+<a href="http://4.bp.blogspot.com/-n7k1733wT_I/UnlDCrm04KI/AAAAAAAAAMc/yJ4Lbyk0sgs/s1600/gplus-profile.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: justify;"><img border="0" height="171" src="http://4.bp.blogspot.com/-n7k1733wT_I/UnlDCrm04KI/AAAAAAAAAMc/yJ4Lbyk0sgs/s320/gplus-profile.png" width="320" /></a><br />
<div style="text-align: justify;">
If your google + profile has a display picture, has at least 10 followers, and is at least 30 days old then you can have a custom username or URL of your Google + Profile. </div>
<br />
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span style="color: #990000; font-family: Courier New, Courier, monospace; font-size: x-large;">How?</span></h3>
<div style="text-align: justify;">
It's very simple!</div>
<div style="text-align: justify;">
All you have to do is visit your Google Plus profile (it's not your homepage, but your profile). Look for a notice there and hit "Got It"</div>
<h3 style="text-align: justify;">
Note : <span style="color: #990000; font-size: small;">If you don't see it then be patient because Google is rolling out the feature slowly and it will be available to most users very soon. </span></h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b>Next thing is to agree and select your username and Hit change URL like in picture below</b></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Ujk0i9BulZg/UnlBbZJ31lI/AAAAAAAAAMI/4P9q9IFLmFU/s1600/custom-url.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Ujk0i9BulZg/UnlBbZJ31lI/AAAAAAAAAMI/4P9q9IFLmFU/s1600/custom-url.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b>Now finally verify </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-JnlXCEgHUEE/UnlB9Beq8PI/AAAAAAAAAMQ/aUWVjM3V3so/s1600/verify-phone-number.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-JnlXCEgHUEE/UnlB9Beq8PI/AAAAAAAAAMQ/aUWVjM3V3so/s1600/verify-phone-number.PNG" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Enter your phone number and click Verify, Voila! You're through! Now you have your own google+ custom URL like google.com/+YourName!</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-29082856123199865292013-02-27T11:46:00.005-08:002013-02-27T11:50:35.701-08:00Wordpress Style Hovering Effect Social Media Widget For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Google Blogger without widgets? It cannot be! Many bloggers and developers or coders daily comes up with tons of widgets for bloggers but few of them are impassive enough to make their way to blogger's sidebar. </div>
<div>
<div style="text-align: justify;">
Today i am going to share with you guys a widget that i just created. It is a nice looking neat and beautiful widget adapted from wordpress theme. </div>
<div style="text-align: justify;">
It uses very well coded hovering effect with just one PNG image. So no there is no question about copying all the separate social media icons and saving them somewhere safe and then replacing each url one by one. So just sit back and relax just take the code and implement it in your website. You are good to go!</div>
</div>
<div style="text-align: justify;">
The best thing about this widget is that it goes with every theme</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: x-large;"><a href="http://bbtlab.blogspot.com/" rel="nofollow" target="_blank">LIVE DEMO</a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-qEa0-QB3eig/US5e8Q2zxuI/AAAAAAAAAJ8/Y-CuMhqgo6E/s1600/BBTSocial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-qEa0-QB3eig/US5e8Q2zxuI/AAAAAAAAAJ8/Y-CuMhqgo6E/s1600/BBTSocial.png" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
<br />
<h2 style="text-align: left;">
How to add this widget?</h2>
</div>
<div>
<b>1)</b> Go to : <b>Dashboard > Layout > Add a Gadget > HTML/JavaScript</b></div>
<div>
<b>2)</b> Paste the following code :</div>
<div>
<blockquote class="tr_bq">
<style><br />
/* Sidebar Widget BestBlogTricks */<br />
.sidebar .social_media { overflow:hidden; }<br />
.sidebar .social_media ul { padding:0; }<br />
.sidebar .social_media ul li { margin:0 5px 0 0!important; float:left; padding:0; }<br />
.sidebar .social_media .social_media_icon {width:64px; height:64px; display:block;}<br />
* social media for sidebar ------------------- */<br />
.sidebar .social_media .social_media_icon {}<br />
.sidebar .social_media .twitter_icon {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat 0 0 transparent;}<br />
.sidebar .social_media .facebook_icon {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -74px 0 transparent;}<br />
.sidebar .social_media .gplus_icon {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -147px 0 transparent;}<br />
.sidebar .social_media .rss_icon {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -221px 0 transparent;}<br />
.sidebar .social_media .twitter_icon:hover {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat 0 -70px transparent;}<br />
.sidebar .social_media .facebook_icon:hover {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -74px -70px transparent;}<br />
.sidebar .social_media .gplus_icon:hover {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -147px -70px transparent;}<br />
.sidebar .social_media .rss_icon:hover {background:url(http://4.bp.blogspot.com/-SGHT9lTmtao/US5RlmewMeI/AAAAAAAAAJk/vYWEbvGZdVg/s1600/BBTSocial.png) no-repeat -221px -70px transparent;}<br />
<br />
</style><br />
<div class="widget social_media"><br />
<br />
<ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><li><a class="social_media_icon twitter_icon" href="<span style="background-color: #6fa8dc;"><span style="color: white;">YOUR TWITTER URL HERE</span></span>"></a> </li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><li> <a class="social_media_icon facebook_icon" href="<span style="background-color: #0b5394;"><span style="color: white;">YOUR FACEBOOK URL HERE</span></span>"></a> </li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><li> <a class="social_media_icon gplus_icon" href="<span style="background-color: #e06666;"><span style="color: white;">YOUR GOOGLE PLUS URL HERE</span></span>"></a> </li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><li> <a class="social_media_icon rss_icon" href="http://feeds.feedburner.com/<span style="background-color: orange;"><span style="color: white;">YOUR FEED ID HERE</span></span>"></a> </li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
</div></blockquote>
</div>
<div>
<br /></div>
<div>
Replace <span style="background-color: #6fa8dc; color: white;">YOUR TWITTER URL HERE</span> with your Twitter ID URL</div>
<div>
Replace <span style="background-color: #0b5394; color: white;">YOUR FACEBOOK URL HERE</span> with your Facebook Page URL</div>
<div>
Replace <span style="background-color: #e06666; color: white;">YOUR GOOGLE PLUS URL HERE</span> with your Google Plus Profile URL</div>
<div>
Replace <span style="background-color: orange; color: white;">YOUR FEED ID HERE</span> with your FeedBurner ID<br />
<br />
<b>3)</b> Save your Layout<br /><b>4) Done! </b></div>
<div>
<br /></div>
<div>
Like us on Facebook and Follow us on Twitter , If you have any question regarding this widget you can ask in comments below</div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-78174314738560414392013-02-25T14:29:00.000-08:002013-02-25T14:29:59.232-08:00How to Insert Adsense inside Blogger Post & Triple Adsense Revenue<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Qwl8ZutstHw/USvlDQ9WuMI/AAAAAAAAAI0/iwMS32VZ5Qs/s1600/showing-adsense-blogger.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="154" src="http://2.bp.blogspot.com/-Qwl8ZutstHw/USvlDQ9WuMI/AAAAAAAAAI0/iwMS32VZ5Qs/s320/showing-adsense-blogger.jpg" width="320" /></a></div>
Different blogging platforms have different tools that help you to manage your blog as you wish, when talking about Google Adsense placement you have more flexibility especially in <a href="http://bestblogtrickz.blogspot.com/search/label/Wordpress" target="_blank">Wordpress</a> when compared to <a href="http://bestblogtrickz.blogspot.com/search/label/Blogger" target="_blank">Blogger</a> platform. You can use different plugins in wordpress that helps you put your adsense on different parts of your post even within the post after some paragraph or any where within the post. </div>
<div>
<div style="text-align: justify;">
But still don't underestimate the power of blogger you always have a way to do things on blogger as well. </div>
<div style="text-align: justify;">
Now i am going to explain you that how to insert google adsense between/inside/within blogger's post automatically. With help of this trick you will be able to post your adsense ad between post i.e after a first paragraph. </div>
</div>
<div style="text-align: justify;">
<div style="text-align: center;">
<span style="background-color: white; text-align: left;"><span style="color: white; font-size: x-large;"><b><a href="http://bbtlab.blogspot.com/2013/02/test-post.html" rel="nofollow" target="_blank">LIVE DEMO</a></b></span></span></div>
<span style="text-align: left;"><span style="font-size: large;"><b>Why is it important? </b></span></span></div>
<div style="text-align: justify;">
<b style="background-color: yellow;">It Triples Your Current Adsense Revenue!</b></div>
<div style="text-align: justify;">
Placing your ads strategically increases your revenue, if you have adsense placed well within or inside blogger's post it will triple your current adsense revenue at least because of its high click through rate and much better number of impressions. </div>
<div style="text-align: justify;">
Just do it and find out yourself. </div>
<div style="text-align: justify;">
<br /></div>
<span style="font-family: inherit; font-size: large;"><b>
How to do it?</b></span><br />
<b>1.)</b> Go to Blogger > Templates > Tick the "Expand Widget Templates" box<br />
<b>2.)</b> Find <b><head></b> and below it paste the following code<br />
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></blockquote>
<span style="color: #cc0000;"><b>Note :</b></span> If you are already using jquery you can leave the 2nd step and move on to step 3.<br />
<b><br /></b>
<b>3.)</b> Now below <b><head></b> paste following code as well<br />
<br />
<blockquote class="tr_bq">
<script type='text/javascript'><br />$(document).ready(function(){<br />$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#BBT-google-ad&#39;).html());<br /><span style="background-color: #cc0000;"><span style="color: white;">$(&#39;#BBT-google-ad&#39;).html(&#39;&#39;); </span></span><br />});<br /></script></blockquote>
<br />
<b>Note:</b> If you want to display Ad Unit at two places i.e. after Jump Break (Readmore) tag and also at the end of post then delete the <span style="background-color: #cc0000;"><span style="color: white;">highlighted red code</span></span>.<br />
<b><br /></b>
<b>4.)</b> Now find <b><data:post.body/> </b>and below it paste the following code<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='BBT-google-ad'><br /><br/><br /><center><br /><span style="background-color: #6aa84f;"><span style="color: white;">YOUR PARSED ADSENSE CODE HERE</span></span> </center><br /><br/><br /></div><br /></b:if></blockquote>
<br />
<b>5.) </b>Paste your Encoded or Parsed HTML code of Adsense by replacing <span style="background-color: #6aa84f;"><span style="color: white;">green highlighted text</span></span><br />
<br />
<b>7.)</b> Now when you are writing a post and want to insert adsense code within the post, just hit the Jump Break tag, adsense unit will be placed automatically after jump tag in post.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Cdw6SDC9dEA/USvWwGJuzhI/AAAAAAAAAIk/Viht3yndJRs/s1600/jump+break.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="http://3.bp.blogspot.com/-Cdw6SDC9dEA/USvWwGJuzhI/AAAAAAAAAIk/Viht3yndJRs/s320/jump+break.png" width="320" /></a></div>
<br />
<br />
<b>8.)</b> <b>Done!</b> Now you can insert adsense automatically in blogger/blogspot post.<br />
<br />
Hope you like this post please share it with your friends, and if you need any help regarding this you can ask me in comments below.</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-31572798678305850492013-02-25T11:43:00.000-08:002013-02-25T11:43:04.278-08:00Stylish 3D Email Subscription Widget for Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
Here comes an other widget to blogger. This widget is a stylish 3D email subscription form that quickly catches the attention of your readers and prompt them to subscribe to your email newsletters.<br />
<br />
<div style="text-align: center;">
<span style="color: white; font-size: x-large;"><b style="background-color: #cc0000;"><a href="http://bbtlab.blogspot.com/2013/02/bbt-3d-email-subscription-widget.html" rel="nofollow" target="_blank">Live Demo</a></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-haPO0GbH8eU/USuqaeNqNXI/AAAAAAAAAIU/T0_kjR7P8Ro/s1600/bbt+emlsub.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-haPO0GbH8eU/USuqaeNqNXI/AAAAAAAAAIU/T0_kjR7P8Ro/s1600/bbt+emlsub.PNG" /></a></div>
<div style="text-align: center;">
<span style="color: white; font-size: x-large;"><br /></span></div>
To add this widget to your blog<br />
<b>Go To Blogger > Layout > Add A Gadget > HTML/JavaScript</b><br />
<br />
<blockquote>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: #cc0000; color: white;">YOURFEEDID</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login"><br />
<h1>Subscribe To Us</h1><br />
<input type="hidden" value="<span style="background-color: #cc0000;"><span style="color: white;">YOURFEEDID</span></span>" name="uri" /><br />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus><br />
<input type="hidden" name="loc" value="en_US" /><br />
<input type="submit" value="Subscribe" class="login-submit"><br />
<p class="login-help"><a href="http://bestblogtrickz.blogspot.com?src=fbform" rel="nofollow">Powered By: BestBlogTricks</a></p><br />
</form><br />
<style><br />
::-moz-focus-inner {<br />
padding: 0;<br />
border: 0;<br />
}<br />
:-moz-placeholder {<br />
color: #bcc0c8 !important;<br />
}<br />
::-webkit-input-placeholder {<br />
color: #bcc0c8;<br />
}<br />
:-ms-input-placeholder {<br />
color: #bcc0c8 !important;<br />
}<br />
.input {<br />
font: 12px/20px "Lucida Grande", Verdana, sans-serif;<br />
color: #404040;<br />
background: #ebc9a2;<br />
}<br />
.input {<br />
font-family: inherit;<br />
font-size: 12px;<br />
-webkit-box-sizing: border-box;<br />
-moz-box-sizing: border-box;<br />
box-sizing: border-box;<br />
}<br />
.login {<br />
padding: 18px 20px;<br />
width: <span style="background-color: orange; color: white;">200px;</span> background: #3f65b7;<br />
background-clip: padding-box;<br />
border: 1px solid #172b4e;<br />
border-bottom-color: #142647;<br />
border-radius: 5px;<br />
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);<br />
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);<br />
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);<br />
background-image: radial-gradient(cover, #437dd6, #3960a6);<br />
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);<br />
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);<br />
}<br />
.login > h1 {<br />
margin-bottom: 20px;<br />
font-size: 16px;<br />
font-weight: bold;<br />
color: white;<br />
text-align: center;<br />
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);<br />
}<br />
.login-input {<br />
display: block;<br />
width: 100%;<br />
height: 37px;<br />
margin-bottom: 20px;<br />
padding: 0 9px;<br />
color: white;<br />
text-shadow: 0 1px black;<br />
background: #2b3e5d;<br />
border: 1px solid #15243b;<br />
border-top-color: #0d1827;<br />
border-radius: 4px;<br />
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));<br />
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));<br />
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));<br />
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));<br />
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);<br />
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);<br />
}<br />
.login-input:focus {<br />
outline: 0;<br />
background-color: #32486d;<br />
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);<br />
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);<br />
}<br />
.lt-ie9 .login-input {<br />
line-height: 35px;<br />
}<br />
.login-submit {<br />
display: block;<br />
width: 100%;<br />
height: 37px;<br />
margin-bottom: 15px;<br />
font-size: 14px;<br />
font-weight: bold;<br />
color: #294779;<br />
text-align: center;<br />
text-shadow: 0 1px rgba(255, 255, 255, 0.3);<br />
background: #adcbfa;<br />
background-clip: padding-box;<br />
border: 1px solid #284473;<br />
border-bottom-color: #223b66;<br />
border-radius: 4px;<br />
cursor: pointer;<br />
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);<br />
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);<br />
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);<br />
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);<br />
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);<br />
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);<br />
}<br />
.login-submit:active {<br />
background: #a4c2f3;<br />
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);<br />
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);<br />
}<br />
.login-help {<br />
text-align: center;<br />
}<br />
.login-help > a {<br />
font-size: 11px;<br />
color: #d4deef;<br />
text-decoration: none;<br />
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);<br />
}<br />
.login-help > a:hover {<br />
text-decoration: underline;<br />
}<br />
</style></blockquote>
<b>Note:</b><br />
Replace <span style="background-color: #cc0000; color: white;">YOURFEEDID</span> with your Feed ID<br />
You can also adjust width by changing the value of <span style="background-color: orange; color: white; font-family: 'normal sans-serif', 'Courier New'; font-size: 14px; line-height: 18.1875px;">200px;</span><br />
<span style="font-size: x-small;">Credit : </span><a href="http://www.bwidgets.com/2013/02/3d-subscription-box-widget-for-blogger.html" rel="nofollow" style="font-size: small;" target="_blank">Bwidgets</a><br />
If you like this post please share it with your friends and you can ask me questions in comments below.</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-91962707927611991082013-02-24T11:21:00.001-08:002013-02-24T11:21:34.186-08:00Add Horizontal Jquery Floating Sharebar Widget To Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<a href="http://1.bp.blogspot.com/-OmIcu9-uN6Q/USpnt4qaoVI/AAAAAAAAAH4/_I5zVi9bBAA/s1600/Floating+Social+Sharing+Bar+Widget.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="151" src="http://1.bp.blogspot.com/-OmIcu9-uN6Q/USpnt4qaoVI/AAAAAAAAAH4/_I5zVi9bBAA/s320/Floating+Social+Sharing+Bar+Widget.png" width="320" /></a>If you want a post or an article to be public then the main thing your blog need is good and attractive social media buttons widget embedded very well in your posts, above all it should be placed where it catches the attention of visitor and then it should allow your readers to share conveniently.</div>
<div style="text-align: justify;">
I am going to share with you guys a very neat and beautiful floating sharebar widget for blogger this widget uses jquery and the awesome thing about this widget is that it actually does what it is designed to do, it catches the desired attention of your readers and the next thing is clicking the share or like button which is then totally up to the reader whether he share your article or not. </div>
<br />
<div style="text-align: center;">
<span style="background-color: #990000; color: white; font-size: x-large;"><a href="http://bestblogtrickz.blogspot.com/2013/02/awesome-ways-to-increase-your-blog.html" target="_blank">Live Demo</a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-XdJs3uQsLe0/USpmqV6LGuI/AAAAAAAAAHw/6qVcmf3Qv0M/s1600/Jquery+Floating+Sharbar+widget.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-XdJs3uQsLe0/USpmqV6LGuI/AAAAAAAAAHw/6qVcmf3Qv0M/s1600/Jquery+Floating+Sharbar+widget.PNG" /></a></div>
<br />
<div style="text-align: center;">
<br /></div>
<b>How to add this cool floating sharebar widget to blogger?</b><br />
Just follow these simple steps below and you are done!<br />
<br />
<b>1.)</b> Go to <b>Dashboard > Template > Edit HTML > Click Expand Template Widgets checkbox</b><br />
<b>2.) </b>Now you need jquery plugin embedded in your blog template as this widget is jquery based,<br />
Now to add jqeury to your template find <b><span style="background-color: #e06666; color: white;"></head></span></b> and place the following code just above </head> tag<br />
<blockquote class="tr_bq">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script></blockquote>
<b>Note :</b> If you already have jquery plugin embedded in your template ignore Step 2 and move on to the next step<br />
<b>3.)</b> Now paste the following code before <span style="background-color: #e06666;"><span style="color: white;"><b></head></b></span></span> tag<br />
<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />/*<![CDATA[*/<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#w2bSocialFloat td{padding:4px;margin:0;border:none;}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}<br />/*]]>*/<br /></style><br /><script type="text/javascript"><br />/*<![CDATA[*/<br />// Set the Top Offset<br />$theOffset = 0;<br />jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});<br />/*]]>*/<br /></script><br /><script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script><br /><script type="text/javascript"><br />/*<![CDATA[*/<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>// Twitter<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>// Google + (plus)<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>// Stumbleupon<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>// Digg<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();<br />/*]]>*/<br /></script><br /></b:if></blockquote>
<b>4.) </b>The last step is place the widget code where you want the share buttons to appear, this widget looks great and designed to appear before post content and after title so we are going to paste it this way.<br />
Find <b style="background-color: #e06666;"><span style="color: white;"><data:post.body/></span></b> and paste the following code just before it<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id="w2bSocialFloat" class="w2bSocialFloat"><br /><table width="100%" class="w2bSocialFloat"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><tr><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><data:post.body/><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><script type="text/javascript"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>w2bPinItButton({<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>url:"<data:post.url/>",<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>thumb: "<data:post.thumbnailUrl/>",<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>id: "<data:post.id/>",<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>pincount: "horizontal"<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>});<br /><span class="Apple-tab-span" style="white-space: pre;"> </span></script><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></div><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><su:badge layout="1" expr:location="data:post.url"></su:badge><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><a class="DiggThisButton DiggCompact"></a><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></td><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></tr><br /></table><br /></div><br /></b:if> </blockquote>
<b>Note : </b>If you found<b style="background-color: white;"> <data:post.body/></b> tag more than one time then look for<br />
<span style="background-color: #e06666;"><span style="color: white;"><b><b:if cond='data:blog.pageType == &quot;item&quot;'></b></span></span><br />
<b style="background-color: #e06666; color: white;"><data:post.body/></b> and paste the given code between both tags.<br />
<br />
<div style="text-align: justify;">
<b>That's It!</b> Now look at your posts you have this amazing widget installed on your blog!</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Credit for this amazing widget goes to Way2Blogging do check them out.</div>
<div style="text-align: justify;">
I hope you like this post please share this with your friends and if you have any questions related to this widget you can ask me below in comments.</div>
<div style="text-align: justify;">
<br /></div>
<br />
<br />
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-32479505038514151802013-02-23T17:23:00.003-08:002013-02-23T17:23:45.941-08:00Add/Install Hex Color Code Generator & Wheel Tool to Blogger <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Bloggers are always customizing and modifying their templates just to keep the blog up to date with all the available latest widgets. Sometime they need to change colors of different widgets i would rather say most of the time blogger changes colors of widgets in order to match or blend widgets with their templates.</div>
<div style="text-align: justify;">
And for this purpose they need some color codes, though it is easy to google some color codes but i think finding the right color code on google takes a little longer especially when you have right tool for it. These color generating tools are really helpful for bloggers. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In this post i am going to explain how you can install few color code generating tools on your own blog. You can use it yourself and your visitors will find it easy finding code if they need one.</div>
<div style="text-align: justify;">
Installation of Hex Color Code Generator Tool on blogger and another similar tool with a little different style Color Code Generating Wheel is quite easy. All you need to do is just follow these simple steps below.</div>
<div>
<br /></div>
<h2 style="text-align: left;">
<b>Color Wheel :</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-J94ZZ_QHTXo/USllRgLd-2I/AAAAAAAAAHY/646I6GkMIbg/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-J94ZZ_QHTXo/USllRgLd-2I/AAAAAAAAAHY/646I6GkMIbg/s1600/Capture.PNG" /></a></div>
<div>
To install color code generating wheel on blogger/blogspot page or post just copy the following code and paste it in your post's [HTML] or page [HTML] mode </div>
<div>
<b>Code:</b></div>
<div>
<blockquote class="tr_bq">
<center><object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/col.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/col.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object><br />
</center></blockquote>
</div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
Hex Color Code Generator :</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-daUHFSmA7FA/USlmuOu5XaI/AAAAAAAAAHg/QswSR2eK-VM/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-daUHFSmA7FA/USlmuOu5XaI/AAAAAAAAAHg/QswSR2eK-VM/s1600/Capture.PNG" /></a></div>
<div>
<br /></div>
<div>
To install Hex Color Code Generator on Blogger/Blogspot page or post just copy the following code and paste it in your post's [HTML] or page [HTML] mode </div>
<div>
<b>Code:</b></div>
<div>
<blockquote class="tr_bq">
<center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center></blockquote>
<div>
If you like this post please share it with your friends on facebook and twitter, and if you have any question related this post you can ask me in comments below. :)</div>
</div>
<div>
<br /></div>
<div>
<b>You can try our color generating tool as well</b></div>
<div>
<a href="http://bestblogtrickz.blogspot.com/p/hex-color-code-generator-color-code.html" target="_blank">BBT Hex Color Code Generating Tools</a></div>
<div>
<br /></div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com3tag:blogger.com,1999:blog-2134585314016001898.post-68407967755736069702013-02-23T14:28:00.002-08:002013-02-23T14:28:52.925-08:00Add Cool Colored Hover Effects Social Media Widget To Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-JlsXwpIAsDE/USlB3EYQSeI/AAAAAAAAAHA/IcV-inWzP5c/s1600/social-icons-wordpress-blog-sidebar-copy.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="170" src="http://4.bp.blogspot.com/-JlsXwpIAsDE/USlB3EYQSeI/AAAAAAAAAHA/IcV-inWzP5c/s320/social-icons-wordpress-blog-sidebar-copy.png" width="320" /></a></div>
<div style="text-align: justify;">
Social Media widgets plays key role in getting good followers on twitter, fans on facebook and subscribers on RSS or no matter on what social media platform you plan to get followers social media has its importance. It is therefore much important for a blogger also to put up a nice social media widget that attracts visitors and engage them in following you on various social media platforms.</div>
<div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Keeping this in view i just have come up with a very nice, cool looking and much attractive social media widget for your Navigation bar or you can also add this to your sidebar with slight customization.</div>
<div>
<h2 style="text-align: left;">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<a href="http://bbtlab.blogspot.com/" rel="nofollow" target="_blank"></a><a href="http://bbtlab.blogspot.com/" rel="nofollow" target="_blank">LIVE DEMO</a></div>
</h2>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-uCGO8g-jWNU/USlCb6aX1rI/AAAAAAAAAHI/QavUcREnvMk/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-uCGO8g-jWNU/USlCb6aX1rI/AAAAAAAAAHI/QavUcREnvMk/s1600/Capture.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<h2 style="text-align: left;">
<b>How to add it</b></h2>
</div>
</div>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
<li>To add this widget to your navigation bar or sidebar follow these simple steps.</li>
<li>Go to <b>Templates > Edit HTML</b> (Make sure you create a backup of your template)</li>
<li>Find <b>]]></b:skin> </b>and paste the following CSS code just above it</li>
</ol>
</div>
<div>
<blockquote class="tr_bq">
ul#icon-socialmn{float:right}<br />
ul#icon-socialmn li{float:left;display:inline-block;position:relative}<br />
ul#icon-socialmn li a{background-image:url(http://3.bp.blogspot.com/-JWxzfuPXWDQ/ULykR51IjoI/AAAAAAAABfk/GUjrfkEH7hc/s1600/team-social-icons.png);background-repeat:no-repeat;display:block;width:40px;height:47px;text-indent:-9999px;-webkit-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;transition:background .2s ease-out}<br />
ul#icon-socialmn li.social-twitter a{background-position:4px 7px}<br />
ul#icon-socialmn li.social-twitter a:hover{background-color:#2DAAE1}<br />
ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}<br />
ul#icon-socialmn li.social-facebook a:hover{background-color:#3C5B9B}<br />
ul#icon-socialmn li.social-google a{background-position:-54px 7px}<br />
ul#icon-socialmn li.social-google a:hover{background-color:#F63E28}<br />
ul#icon-socialmn li.social-rss a{background-position:-85px 7px}<br />
ul#icon-socialmn li.social-rss a:hover{background-color:#FA8C27}<br />
ul#icon-socialmn li.social-linkedin a{background-position:-116px 7px}<br />
ul#icon-socialmn li.social-linkedin a:hover{background-color:#0173B2}<br />
ul#icon-socialmn li.social-dribbble a{background-position:-146px 7px}<br />
ul#icon-socialmn li.social-dribbble a:hover{background-color:#F9538F}<br />
ul#icon-socialmn li.social-pinterest a{background-position:-176px 7px}<br />
ul#icon-socialmn li.social-pinterest a:hover{background-color:#CB2027}</blockquote>
</div>
<div style="text-align: left;">
4. Save your template<br />5. Now Wherever you want to show the Social Media Widget paste the following code there</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<div dir="ltr" style="text-align: left;" trbidi="on"><br /><ul class="sociico" id="icon-socialmn"><br /><li class="social-twitter" style="background-color: <span style="background-color: black; color: white;">black</span>;"><a href="Your Link Here" target="_blank">twitter</a></li><br /><li class="social-facebook" style="background-color: black;"><a href="Your Link Here#" target="_blank">facebook</a></li><br /><li class="social-google" style="background-color: black;"><a href="Your Link Here" target="_blank">google</a></li><br /><li class="social-rss" style="background-color: black;"><a href="Your Link Here" target="_blank">rss</a></li><br /><li class="social-pinterest" <span style="background-color: white;">style="background-color: black;"</span>><a href="Your Link Here" target="_blank">pinterest</a></li><br /></ul><br /></div></blockquote>
</div>
<div>
<span style="text-align: justify;">For example i added this into navigation bar to show widget in navigation menu.</span></div>
<div>
<div style="text-align: justify;">
<b>Note:</b> Make Sure you have dark background to make widget look perfect You can change the background color to any color by changing <span style="background-color: black;"><span style="color: white;">black</span></span> in above code. If you don't want any background color just remove this <b>style="background-color: black;" </b> from above code <span style="background-color: white;">in all lines and if you removed it then widget will appear there fine but it will be all in white color and will be difficult for you to notice. So it is recommended to have dark background.</span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
If you like this widget then please share it with your friends on facebook and twitter and you can ask any question about this widget below in comments. :)</div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
</div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com2tag:blogger.com,1999:blog-2134585314016001898.post-46082877768819995362013-02-22T14:17:00.004-08:002013-02-22T14:17:54.477-08:00Awesome Working Custom Related Post Thumbnail Widget For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-9x_7g2YnPJg/USft4I-vHUI/AAAAAAAAAGU/31A7gEZuYX0/s1600/related-2-post-thumbnails.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="196" src="http://3.bp.blogspot.com/-9x_7g2YnPJg/USft4I-vHUI/AAAAAAAAAGU/31A7gEZuYX0/s320/related-2-post-thumbnails.jpg" width="320" /></a></div>
Related Post Widget was discussed recently and its importance in SEO, I already wrote about <a href="http://bestblogtrickz.blogspot.com/2013/02/easiest-way-to-add-related-post.html" target="_blank">easiest way of adding the related post thumbnail widget to blogger</a> , If you use third party related post widgets it would some how increase your page views and increase your ranking in search engines but if you compare it to the widgets that are customized and embeded in your template with some good midifications it will be more effective and significant in achieving good ranking and traffic, <div>
<br /></div>
<div>
<b>Wonder how? </b> If you take some time to notice, You will see that third party "Related post" widget i.e LinkWithin first takes you to a url then immediately redirects you to the post shown as related in the Widget. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7gt0ac29Qws/USfuL2iFAUI/AAAAAAAAAGc/QMlOxXjgQD8/s1600/related-posts.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="152" src="http://4.bp.blogspot.com/-7gt0ac29Qws/USfuL2iFAUI/AAAAAAAAAGc/QMlOxXjgQD8/s320/related-posts.jpg" width="320" /></a></div>
<div>
<br /></div>
<div>
<b>Why it is bad?</b></div>
<div>
It is not that bad after all logically the visitor comes back to your blog immediately, but if you see first the click generated was to another url, In case your blog already has good PageRank then it means it is taking the traffic juice out first then putting it back with less value. </div>
<div>
<br /></div>
<div>
<b>What to do now?</b></div>
<div>
Now is the time to add a "Related Post Thumbnail Widget" of your own, do some slight customization to your template and you are good to go. Now there will be no redirection involved no juice out and in!</div>
<div>
<br /></div>
<div>
<b>How to do it?</b></div>
<div>
Well in order to learn how to add Related Post Widget with thumbnail into blogger just follow few simple steps below</div>
<div>
<br /></div>
<div>
First of all make a backup of your template just in case if any error or problem occurs later</div>
<div>
<br /></div>
<div>
<div>
<b>Step 1.</b> Go To Blogger <b>Dashboard >> Template >>Edit HTML</b></div>
<div>
<br /></div>
<div>
<b>Step 2. </b>Check the "<b>Expand widgets template</b>" box; </div>
<div>
<br /></div>
<div>
<b>Step 3.</b> Search (CTRL + F) for <b></head></b></div>
</div>
<div>
<b><br /></b></div>
<div>
<b>Step 4. </b>Copy and paste the following code just before<b> </head></b></div>
<div>
<blockquote class="tr_bq">
<!--Related Posts with thumbnails Scripts and Styles Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#related-posts h2{<br />font-size: 18px;<br />letter-spacing: 2px;<br />font-weight: bold;<br />text-transform: none;<br />color: #5D5D5D;<br />font-family: Arial Narrow;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />border-right: 1px dotted #DDDDDD;<br />color:#5D5D5D;<br />}<br />#related-posts a:hover{<br />color:black;<br />background-color:#EDEDEF;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;<br /><b>var maxresults=<span style="background-color: lime;">5</span></b>;<br />var splittercolor=&quot;#DDDDDD&quot;;<br />var relatedpoststitle=&quot;Related Posts&quot;;<br /></script><br /><script src='http://bestblogtricks.googlecode.com/files/related-posts-with-big-thumbnails.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails Scripts and Styles End--></blockquote>
</div>
<div>
<br /></div>
<div>
<b>Step 5.</b> Now find the followingcode<span style="background-color: #ea9999;"> </span><b><span style="background-color: #ea9999;"><div class='post-footer'></span> a</b>nd just above it, place the following code:</div>
<div>
<blockquote class="tr_bq">
<!-- Related Posts with Thumbnails Code Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<b>max-results=<span style="background-color: orange;">6</span></b>&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --></b:if><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a><br /></b:if></b:if><br /><!-- Related Posts with Thumbnails Code End--></blockquote>
</div>
<h2 style="text-align: left;">
<b>Note:</b></h2>
<div>
Change the <span style="background-color: orange;">6</span> value from <b>max-results=</b><span style="background-color: orange;">6</span> with the number of posts you want to be displayed.</div>
<div>
For displaying more than <span style="background-color: white;">5</span> posts, replace <span style="background-color: lime;">5</span> value from "<b>var maxresults=</b><span style="background-color: lime;">5</span>;"</div>
<div>
<br /></div>
<div>
This is it! Now you have this amazing widget on your blog</div>
<div>
Hope you like my writing, please share it with your friends and blog about this and waiting for your opinion about this post in comments below :)</div>
<div>
<br /></div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com1tag:blogger.com,1999:blog-2134585314016001898.post-87331886516280378192013-02-22T12:41:00.001-08:002013-02-22T14:20:54.558-08:00Awesome Ways to Increase Your Blog Traffic<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7bO6K9WIFnY/USfXPOXAPGI/AAAAAAAAAGM/HeaN9ebnJXQ/s1600/high-traffic-of-blog.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="291" src="http://4.bp.blogspot.com/-7bO6K9WIFnY/USfXPOXAPGI/AAAAAAAAAGM/HeaN9ebnJXQ/s320/high-traffic-of-blog.jpg" width="320" /></a></div>
Every blog owner is hungry for traffic and one should be after all the hard work he or she puts in writing good blog posts. A blogger gets good amount of traffic for sure when you write up unique content but still there are always some ways to increase traffic and it somehow satisfy the need of blogger which ofcourse is a good amount of traffic. Anyway in today's post i am sharing with you is a trick about increasing your blog traffic. </div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: left;">
<b>Quick Tip :</b></div>
<div>
<div style="text-align: justify;">
First you should know a good blog is well managed blog and a well managed blog focus on interlinking the content. If you have a lot of content or posts interlinked in your blog your blog will have good reputation in search listings. It definitely improves your ranking. </div>
<div style="text-align: justify;">
So keep this basic rule in mind whenever you are writing on your blog don't forget to link the related content or posts on your blog. </div>
<div style="text-align: justify;">
It does have its other benefits as well for example stealing or copying of your content becomes difficult for others lazy bloggers and the might prevent them copying your stuff because they don't want to remove too much links in your content.</div>
</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: left;">
<b><span style="color: #cc0000; font-family: Georgia, Times New Roman, serif;">Now here is the real deal! </span></b></h2>
<div style="text-align: justify;">
Although you have much content interlinked on your blog , but what actually increase your blog's rating in Google searches and other search engines is your users/visitors clicking or browsing through those links. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>A question arise how do we get people to click that linked content or pages or posts?</b></div>
<div style="text-align: justify;">
Answer is, there are two ways,</div>
<div style="text-align: justify;">
<ol>
<li>The link you are creating between posts or content must be really of use or highly related to your current post, It should be like for example if you are reviewing a phone or device in your one post you must provide a link to a post where you have specification of that phone or device you are reviewing the visitor must be really interested in knowing the specs of that device.</li>
<li>The other way is to attract people by having good and stylish and attractive related posts widgets at the end of posts. There are many "Related Posts Widgets" the best one is with the thumbnail and a little description. A little responsiveness and good style would definitely attract the visitor to view from related posts.</li>
</ol>
<div>
One good related post widget is Linkwithin Related post widget, It is easy to embed and light to load on blog. You can find it <a href="http://www.linkwithin.com/" rel="nofollow" target="_blank">here</a></div>
<div>
<br /></div>
<div>
<a href="http://www.linkwithin.com/" rel="nofollow" target="_blank"></a>If you are a pro and can modify the template the It is recommended to use some custom "Related post widget" instead of third party widget like Linkwithin.</div>
<div>
<br /></div>
<div>
If you follow above mentioned tips then it would definitely help you increasing your blog traffic as visitors stays longer at your website browsing through, and also your page views will increase.</div>
<div>
I hope you like my writing, Please like and share this post with your friends and discuss and share your opinion about my writing in comments below :) </div>
<div>
<br /></div>
<h2>
Following two posts explains very well about how to add Related posts widgets</h2>
<div>
<ul>
<li><a href="http://bestblogtrickz.blogspot.com/2013/02/easiest-way-to-add-related-post.html" target="_blank">Easiest Way To Add Related Post Thumbnail Widget on Blogger</a></li>
<li><a href="http://bestblogtrickz.blogspot.com/2013/02/awesome-working-custom-related-post.html" target="_blank">Add Custom Related Post with Thumbnail Widget on Blogger Blog</a> [<b>For Better SEO</b>]</li>
</ul>
<ol>
</ol>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com1tag:blogger.com,1999:blog-2134585314016001898.post-59838974963079888072013-02-22T12:33:00.001-08:002013-02-22T12:43:31.834-08:00Easiest Way to Add Related Post Thumbnail Widget On Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-uAISZLEMgEQ/USfWYfKhjMI/AAAAAAAAAGE/Qkk0YYtPnmA/s1600/wordprses+related+post+widget.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="168" src="http://1.bp.blogspot.com/-uAISZLEMgEQ/USfWYfKhjMI/AAAAAAAAAGE/Qkk0YYtPnmA/s320/wordprses+related+post+widget.jpg" width="320" /></a></div>
Related Post Widget is very important and does have its benefits to bloggers as it is very helpful in increase blogs traffic and page views and keeps visitors longer on your website. We discussed it in "<a href="http://bestblogtrickz.blogspot.com/2013/02/awesome-ways-to-increase-your-blog.html" target="_blank">Awesome Ways To Increase Blog's Traffic</a>"<br />
<div>
<br /></div>
<div>
In this post i would explain the easiest way to to install Related post widget on blogger if you don't want to go into too much coding and complex template modification then the easiest way for you to have Related Post Thumbnail Widget on Blogger is LinkWithin Related Post Widget on blogger's blog, It is very easy to install it on blogger all you need to do is just follow few simple steps and you will have it on your blog within few minutes.</div>
<div>
<br /></div>
<div>
<div>
<b>1. ) </b>Go To <a href="http://linkwithin.com/" rel="nofollow" target="_blank">LinkWithin.Com</a></div>
<div>
You'll have following options there</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-887xIt6pY-Q/USfSCEUPAwI/AAAAAAAAAFs/h9EVc4yO2IE/s1600/related+post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-887xIt6pY-Q/USfSCEUPAwI/AAAAAAAAAFs/h9EVc4yO2IE/s1600/related+post.png" /></a></div>
<div>
<br /></div>
<div>
<b>2.) </b>Enter Your Information</div>
<div>
Enter your email</div>
</div>
<div>
<b>Blogger Link :</b> Enter your blog URL</div>
<div>
<b>Platform : </b>It can be installed on various platforms, choose blogger</div>
<div>
<b>Width : </b>Select number of stories or post with thumbnail you want to appear in related posts.</div>
<div>
<br /></div>
<div>
<b>3. )</b> Now Click on Get Widget! Then you'll be redirected to a page </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--XLNZCdMaYo/USfS9CH3nlI/AAAAAAAAAF0/10XA9McslDM/s1600/install.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="96" src="http://3.bp.blogspot.com/--XLNZCdMaYo/USfS9CH3nlI/AAAAAAAAAF0/10XA9McslDM/s320/install.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4. )</b> Click on Install Widget</div>
<div class="separator" style="clear: both; text-align: left;">
<b>5. )</b> On the next page it will ask your permission to add on blogger. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-9dQ9c9GzXH0/USfTyBH3n6I/AAAAAAAAAF8/0Yn1ajZa4Q0/s1600/1+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-9dQ9c9GzXH0/USfTyBH3n6I/AAAAAAAAAF8/0Yn1ajZa4Q0/s1600/1+(1).png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Click Add Widget</div>
<div class="separator" style="clear: both; text-align: left;">
<b>You are Done!</b> Now you have a related post widget on your blogger blog.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hope you like this post Please share this post with friends and discuss and share your opinion about this post in comments below :)</div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com1tag:blogger.com,1999:blog-2134585314016001898.post-10392785836789194022013-02-21T12:36:00.002-08:002013-02-21T12:36:58.157-08:00How to Customize Blockquotes in Blogger, Adding Rich Style to Blockquotes<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-WmSWUSQzK1c/USaE_K45RqI/AAAAAAAAAFY/WaQwGdHswnM/s1600/aside-blockquote.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-WmSWUSQzK1c/USaE_K45RqI/AAAAAAAAAFY/WaQwGdHswnM/s1600/aside-blockquote.jpg" /></a></div>
<div style="text-align: justify;">
Blockquotes or quotes are very important in blogging, Whenever you are quoting or highlighting something very important you need them, especially when i am blogging about tips and tricks or blogging about widgets codes it helps me and my readers a lot to grab codes quickly from quotes.</div>
<div style="text-align: justify;">
The typical or default blogger quote style are there but you can make it more attractive and beautiful by adding just few simple codes to your blog template.</div>
<div style="text-align: justify;">
Now let's quickly jump to doing it</div>
<br />
<br />
<br />
And here's how you do it!<br />
First of all you need is<br />
<ol style="text-align: left;">
<li>Go to Templates > Backup & Restore Make a backup</li>
<li>Now Click Edit HTML > Expand Widgets</li>
<li>Press Ctrl + F, search for <b>.post blockquote or </b><span style="background-color: white; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"><b>.entry blockquote</b></span>, you will have code like this:</li>
</ol>
<blockquote class="tr_bq">
.post blockquote {<br />
margin:1em 20px;<br />
}<br />
.post blockquote p {<br />
margin:.75em 0;<br />
}</blockquote>
Below is Best Blog Tricks' (BBT) blockquote style [<b>Example</b>]<br />
<blockquote class="tr_bq">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
<div style="text-align: left;">
If you want to have blockquote style like BBT just copy the code below and paste it before</div>
<div style="text-align: left;">
<b>]]></b:skin> </b>or paste it instead of the above code in step 3 (Remove code found in step 3 and paste the following code)</div>
<blockquote class="tr_bq">
blockquote {<br />
background: #F2F1F1 url(<span style="background-color: orange;">http://3.bp.blogspot.com/-SUk0mHmpphM/USXGUgTlegI/AAAAAAAAADI/L9qRkORYZsc/s1600/block-qoute1.png</span>)bottom left repeat-x;<br />
margin: 0 20px;<br />
padding: 7px 20px 50px 50px;<br />
border-top: 1px solid #DDD;<br />
border-right: 1px solid #666;<br />
border-left: 1px solid #DDD;<br />
border-bottom: 1px solid #666;<br />
font: 14px normal sans-serif,Tahoma;<br />
overflow:hidden;<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding: 0 0 15px;<br />
}</blockquote>
<br />
<br />
<br />
Replace <span style="background-color: orange;">image</span> with your own <br />
<u><br /></u>
<u><b>Here is another custom blocquote style with code</b></u><br />
<u><b><br /></b></u>
Style)<br />
<img border="0" src="http://3.bp.blogspot.com/-CcfbggDxHfo/TiZRbQjjNKI/AAAAAAAAAN8/0xET6nZfmxM/s1600/Next-icon.png" /><br />
Code<br />
<blockquote class="tr_bq">
.post blockquote {<br />
margin: 1em 3em;<br />
padding: .5em 1em;<br />
border-left: 5px solid #fce27c;<br />
background-color: #f6ebc1; }<br />
.post blockquote p {<br />
margin: 0; }</blockquote>
<br /></div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0tag:blogger.com,1999:blog-2134585314016001898.post-79498277359199323692013-02-21T11:34:00.001-08:002013-02-21T12:05:00.639-08:00Customize or Modify 404 Error Page in Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-BvsLJDI4e9Y/USZ2sTk_pmI/AAAAAAAAAFE/N_KuiArR2j8/s1600/404.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="158" src="http://2.bp.blogspot.com/-BvsLJDI4e9Y/USZ2sTk_pmI/AAAAAAAAAFE/N_KuiArR2j8/s320/404.jpg" width="320" /></a></div>
If you are new to blogger then you may have a question that What is 404 Error Page on blogger? Well the answer is whenever someone comes up looking for some page or content on your blogger website and its not there or missing then blogger redirects the visitor to default 404 error page which shows default error message or page missing message.<br />
If you already know what 404 Error Page on blogger is then you might want to modify or customize it. In this post i am going to explain it in very easy steps to customize or modify Blogger 404 Error page.<br />
<br />
<div style="text-align: center;">
<span style="color: #cc0000; font-size: x-large;"><b><a href="http://bestblogtrickz.blogspot.com/404" target="_blank">LIVE DEMO</a></b></span></div>
<b><br /></b>
<b>Default error message looks like this</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LlGgiQTDMx0/USZsLtfllpI/AAAAAAAAAE8/9jxmNZ0p_L8/s1600/custom-404-page-for-blogger%5B2%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-LlGgiQTDMx0/USZsLtfllpI/AAAAAAAAAE8/9jxmNZ0p_L8/s1600/custom-404-page-for-blogger%5B2%5D.png" /></a></div>
You can change the default message and to customize it you must go to <b>Settings > Search preferences > Custom Page not Found</b><br />
<div>
<blockquote class="tr_bq">
<br />
<div class='BBT-404-box'><br />
<p style='line-height: 30px'><strong><br />
<font color='#ff0000' size='5'><br />
You kidding me? </br><br />
</font> <font color='#666666'><br />
Looks like you clicked a broken link or a Page that no more exits. </br>Now all you can do is<br />
</font></strong></p><br />
<ol style='line-height: 25px'><br />
<li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li><br />
<li>Report the Problem to us by <a href='<span style="background-color: #93c47d;">http://bestblogtrickz.blogspot.com</span>'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li><br />
<li>Go To Homepage by <a href='<span style="background-color: #93c47d;">http://www.bestblogrtrickz.blogspot.com</span>'>Clicking Here</a><br />
<br/></li><br />
</ol><br />
<p><br />
<br/></p><br />
<p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p><br />
<p>&#160;</p><br />
<p align='center'/><br />
<p align='center'><font size='5'>Page Not Found!</font></p><br />
</div></blockquote>
Replace <span style="background-color: #93c47d;">http://www.bestblogrtrickz.blogspot.com</span> with your URL<br />
<br />
Click <b>Save Changes</b><br />
Last thing you need to do is add CSS code to template to make it look more beautiful and blend with your template.<br />
Go to <b>Template > Edit HTML</b><br />
Search for this<b> ]]></b:skin></b><br />
Paste the following code just belowe it<br />
<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><br />
<style type='text/css'><br />
.status-msg-wrap {<br />
font-size: 100%;<br />
margin: none;<br />
position: static;<br />
width: 100%;<br />
}<br />
.status-msg-border {<br />
display:none<br />
}<br />
.status-msg-body {<br />
padding: none;<br />
position: static;<br />
text-align: inherit;<br />
width: 100%;<br />
z-index: auto;<br />
}<br />
.status-msg-wrap a {<br />
padding: none;<br />
text-decoration: inherit;<br />
}<br />
.BBT-404-box {<br />
background:#FFFFFF;<br />
width:98%;<br />
margin:10px 0px;<br />
padding:20px 10px;<br />
border:1px solid #ddd;<br />
-moz-border-radius:6px;<br />
-webkit-border-radius:6px;<br />
border-radius:6px;<br />
box-shadow: 5px 5px 5px #CCCCCC;<br />
}<br />
</style><br />
</b:if></blockquote>
<br />
Now you can <b>Save your template</b> and can see the customized error page on blogger<br />
If you have any query or confusion about the above tutorial you are more than welcome to ask and i would love to answer.<br />
<br /></div>
</div>
BBThttp://www.blogger.com/profile/09187088582031503541noreply@blogger.com0