PC TRICKS

Showing posts with label Blogger tricks. Show all posts

Monday, 7 April 2014

Add Flipper Sharing Widget Below Every Post In Blogger

How To Add Flipper Sharing Widget Below Every Post In Blogger?

First for All Go To Blogger.com > Design > Edit Html
Find <data:post.body/> Using CTRL+F
Copy the code below and paste it just after <data:post.body/> tag

<style>

/*--------Flipper Sharing Widget ------*/

.flipper a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu1g08DLRFDIW3LIJ9nSVLTGA3Ia0lDpXmFa6CQqqO0bMrhn-9XawWxejBXR_xFekZOTVLWtKG1qilDeSqXNwiCAvFeLZqny5wPDFUnrx3Z2bI1SnrS2iLEZsC9T22rcRRSdu5Ie1FYbz/s1600/flipper.png) no-repeat;

-webkit-transition: ease-in 0.15s all;

-moz-transition: ease-in 0.15s all;

-o-transition: ease-in 0.15s all;

-ms-transition: ease-in 0.15s all;

transition: ease-in 0.15s all;

cursor:pointer;

}

.flipper a.googleplus {

background-position: 0px -348px;

}

.flipper a.googleplus:hover {

background-position: 0px -406px;

}

.flipper a.pinterest {

background-position: 0px -464px;

}

.flipper a.pinterest:hover {

background-position: 0px -522px;

}

.flipper a.delicious {

background-position: 0px 0px;

}

.flipper a.delicious:hover {

background-position: 0px -58px;

}

.flipper a.digg {

background-position: 0px -116px;

}

.flipper a.digg:hover {

background-position: 0px -174px;

}

.flipper a.stumbleupon {

background-position: 0px -812px;

}

.flipper a.stumbleupon:hover {

background-position: 0px -870px;

}

.flipper a.technorati {

background-position: 0px -928px;

}

.flipper a.technorati:hover {

background-position: 0px -406px;

}

.flipper a.twitter {

background-position: 0px -928px;

}

.flipper a.twitter:hover {

background-position: 0px -986px;

}

.flipper a.facebook {

background-position: 0px -232px;

}

.flipper a.facebook:hover {

background-position: 0px -290px;

}

.flipper a.reddit {

background-position: 0px -580px;

}

.flipper a.reddit:hover {

background-position: 0px -638px;

}

.flipper a.rss {

background-position: 0px -696px;

}

.flipper a.rss:hover {

background-position: 0px -754px;

}

.Pleaseshare{

margin:10px 0px;

color:#333333;

font-weight:bold;

font-size:20px;

font-family:sans-serif;

}

</style>

<div class='flipper'>

<b:if cond='data:blog.pageType == "item"'>

<div class="Pleaseshare">

Please Share it! :) </div>



<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>



<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>



<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>



<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>



<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>



<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>



<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>



<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>



<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>

</b:if></div>

<div style="clear:both"/>

To Change The Color Of The Text That Appears On The Top Of The Widget Edit #333333

Add Simple Subscribe Via Email Box Widget To Blogger

How To Add Simple Subscribe Via Email Box ?

First for All Go To Blogger.com > Design > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

<style>
.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9130zUL5GCwmEatrdzG5kC0rI2Zr9tYnyiUnHlfj19WeoKMa6pnuEC3fiNHH2uBTlVOaHv3jij9zqCh_joWlf2cdGFgreHs-l_z3al2elwLPmJsD4VXWR7Siw7hyI0wIyfxn1MAE8_ZWU/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.rb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="rb-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Yaqoobzone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here...";}" onfocus="if (this.value == "Enter email address here...") {this.value = "";}" value="Enter email address here..." type="text" />
<input type="hidden" value="pctrickstou" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Replace pctrickstou with your feed title/username

Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger

Adding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.

How To Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger ?

First for All Go To Blogger.com > Design > Edit Html
Find <data:post.body/> Using

CTRL+F

Copy the code below and paste it just after <data:post.body/> tag

<b:if cond='data:blog.pageType == "item"'>

<style>

form.feedburner{

margin:20px 0 0;

display:block;

clear:both;

}

.RBstyle{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyuQgPVzpoHb3WJHg8rzpIq73-kVnbSBcl91A_QKQqH6I4LYeWp4RmCZ0i5-OYXIrpXJgr6RaNTgJcArQqnPipiwc90X4kpfQEn7RT_Unv44B4XPZCk7LheJ-SaWqdoWwGjjLJ7NWYzC7/s400/email_icon.png) no-repeat scroll 4px center transparent;

padding:7px 15px 7px 35px;

color:#666;

font-weight:bold;

text-decoration:none;

border:1px solid #D3D3D3;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

.RBsubmit{

color:#666;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

cursor: pointer;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-goog-ms-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

#emailwidget-outer {

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

-goog-ms-border-radius: 10px 10px 10px 10px;

border-radius: 10px;

background: none repeat scroll 0 0 transparent;

border: 1px solid #D3D3D3;

padding: 8px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

width:480px;

}

#emailwidget-outer:hover{

background: none repeat scroll 0 0 #FFF;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

#emailwidget-outer td{

padding:3px 0;

}

</style>

<center>

<div id='emailwidget-outer'>

<div id='emailwidget'>

<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>

<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='Realcombiz'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>

</form>

</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbLYQ39A3GBbaTHvmYAluV0SZx-ZFMFvBd2tGNuoBve5gtlQDIrramGsVeu3WHA1FKNYXzZM-O9ks_PdFwQ8nByIm_Q8NeScSuXLXqaJv6Vezc_paizqH83Owk4Jp3BvIYzWMdyzXksw/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/poornagollakoti' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwqMD6NhHYLEkmbSewBsIo_bbhyphenhyphensPTqGqYRaAaUPPqfDTZBZ2Mx_xDUFR0qY7eGtsQAuypb-kEFGRpUsxwQQyDqBghd5WI3LRuP1Dm51IwFKcgM5BfgrUoSTWJ6lkzcU8tT1d7AWeWZE/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/HashmiWorld4U' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43PEMS40bNvdBJuDOAeY635qFAj4ToiASKua6tuT5gI6crMqe_Pj9BondMu4FSFlDkvQI8BSaiZfGOd5MlswWbnaerhDEsAloj2K8ErZMShUB438NKQ9eXPZnVBnv0U5GCg1FbYBDL5Y/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/104283015279880391921' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOHdG33evhgc0LZNj-f-R7cvsknk9Y11JL-g1H9fRQSpCZhhvOw1bcHuQeSNG9HLMQoZfWfZXU10sATMu5yG76P0VfaaPWK-PsTB3WxHm695gHXueMUPoQBvOhplg-I9NMIZhHT20U4o/s1600/googleplus-30×43.png'/></a>

</td>

</tr>

</tbody></table>

<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://yaqoobzone.blogspot.com/2012/10/how-to-add-stylish-subscription-box.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>

</div></div>

</center>

</b:if>

Please Make These Changes :

Replace pctrickstou,pctrickstou with your feedburner username.
Replace pctrickstou with your Twitter username.
Replace pctrickstou with your Facebook Page username.
Replace https://plus.google.com/104283015279880391921 with your Google+.

Add Beautiful Social Subscription Widget To Blogger

How To Add Beautiful Social Subscription Widget To Blogger

First for All Go To Blogger.com > Design > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqSHRn-LwkJtOuhCqQ-4UG6Wx_Hw-B4c91uLK17ND29sDChwm9hLRLRoavGkVx7MwslC0-i4PWLN5yKWaBgs5ujuMvM6kXhNxO-Jxpll_KW8QoAwLdfkibx7grg3eev8dtCnTvkRHCyzE/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cNor59igFNSaqjW-HbVPe9PZPvVtc8RmYAIsUwQ9BVrqDb1uAfBrFQ2-AQtShnab9zfcfA7pHp2yPRsSNZo85gSLn0MAVZs0Tn48FzFE6IMZhQ1TcqCPrdd9gMR4rwSqYWa2GxiPJI8/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

a.social-icons{margin-right: 5px;height:45px;width:45px;}

a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

</style>

<div id="sidebar-subscribe-box">

<div class="sidebar-subscribe-box-wrapper">

<br/>

<a class="social-icons" href="https://www.facebook.com/SoftTechSpot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmTXHopN7_sn_hXZ-AVTxuEmfjdOk_odQ0HMukTwObJpULTQJFflJRs1QJdvnmM3Yhp1JOmMKinuBKj3mWjrgWe_dLozBS4rsh1g5C_c-bcxOKK8_j9mbpbNHF-lLufHl26tM3fj1BYlj/s1600/Bloggertrix-facebook.png" /></a>

<a class="social-icons" href="https://twitter.com/poornagollakoti"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qMHHVr4e48cdiUkJ7PMApwt-FIKf1FExK9njlZBIHkayqEOPoaNeWea1iySB7io-KoyOS_Wv4Uw-_TWcIkvUif61-sAyJmVKSvRcQWqe07e0mCe861F-DCJhNOYwtQoLaOWrSfPPRBet/s1600/bloggertrix-twitter.png" /></a>

<a class="social-icons" href="https://plus.google.com/b/100702882701565711888/100702882701565711888/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOeCCabhyzLf8FQ5Ya6SF8QYDgOrWWAZz2vCHxCV3wpAzBKChXTGroE8j84wer1rA-lL2sXONKCk_mHNVc13Vb5mpYKGGsO5ujBZ_eK2O6IxL02EaGx-JaSzBMEVdXglkA7oihlveV0nvd/s1600/Bloggertrix-Googleplus.png" /></a>

<a class="social-icons" href="http://feeds.feedburner.com/SoftTechSpot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKr4jVinpOAQ4Lb-b4NMA_ZVP_a92oXRgYZlqfFDfWNKsERzInhW6epqldRZ_K4EfSQb4215szVOSOUO3AbtAxC8QDipv-IpTJgjfCWoqFUC_Vuo6z4Wh6L8allZtgfYFKQQBq5BeIZqZ2/s1600/Bloggertrix-Rss.png" /></a>

<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>

<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="way2usefulinfo" />

<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>

</div></div></div>

Replace all highlighted colors.

Add Simple Recent Posts Widget In Blogger

How To Add Simple Recent Posts Widget In Blogger?

First for All Go To Blogger.com > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

1: Recent Posts Widget With Snippets

<div id="hlrpsa">

<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">

</script>

<script>

var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">

</script></div>

<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">

<a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks World</a></div>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7MQ3WVL73468mAPmc1UDoEMHHHyVBjpLiOAcQ0ZU6O4s9XzY6xwRWOhcK31XdlBmaDIDViBXjPnV1iMqYU_pmtdcAoVI3wv6wCzQi5k11gax_xGcTRsPszShfpsQ7vmIoaV0AYIlTX-P/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#rpdr, #rpdr a {color:#808080;}

#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

.hlrps a {font-weight:bold; }

.hlrpssumm {}

</style>

2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>

<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>

<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks Worlds</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7MQ3WVL73468mAPmc1UDoEMHHHyVBjpLiOAcQ0ZU6O4s9XzY6xwRWOhcK31XdlBmaDIDViBXjPnV1iMqYU_pmtdcAoVI3wv6wCzQi5k11gax_xGcTRsPszShfpsQ7vmIoaV0AYIlTX-P/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#rpdr, #rpdr a {color:#808080;}

.bbrecpost2 {

padding-top:6px;

padding-bottom:6px;

border-bottom: 1px #cccccc dotted; }

</style>

Change 5 (option 1) and 10 (option 2) with the number of posts you want to display.
Change false to true if you want the posts dates to appear
Change 100 (option 1) if you want more characters to be displayed.
To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
To change the style of posts summary, modify the values in green (color) and orange (font size)
Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

Well Done!

Add Floating Share Buttons Widget in Blogger

How To Add Floating Share Buttons Widget in Blogger

First for All Go To Blogger.com > Design > Edit Html
Find <b:includable id='post' var='post'> Using

CTRL+F

Copy the code below and paste it just after <b:includable id='post' var=post'> tag

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbDQi8B7EUyYOlXUA6lNPIaiu2KrhaOfLir3MA9vJe-m4F4TlrjtGQLbW0e8L5H_fWWwd-Nne4cZq3TiI8s9I-sxI72Z7BE5vmcAdM6RnnLItQ37TiewP8dhlUBI1yiao8jYPkc6kzgVV/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbDQi8B7EUyYOlXUA6lNPIaiu2KrhaOfLir3MA9vJe-m4F4TlrjtGQLbW0e8L5H_fWWwd-Nne4cZq3TiI8s9I-sxI72Z7BE5vmcAdM6RnnLItQ37TiewP8dhlUBI1yiao8jYPkc6kzgVV/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='pctrickstou'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "MY BLOGGER TRICKS",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.pctrickstou.blogspot.com/2013/07/add-floating-share-buttons-widget-in.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Replace poornagollakoti With Your Twitter Username..

Add Css Social Widget In Blogger

How To Add Css Social Widget In Blogger

First for All Go To Blogger.com > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

<style type="text/css">
.btnt-chronicl-social { width: 320px; margin: -10px; }
.btnt-chronicl-social ul { margin: 0; padding: 0; }
.btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a { color: #fff; display:block; }
.btnt-chronicl-social ul li a:hover { color: #c9c9c9; background-color: #333; }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/pctrickstoU">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/poornachandra">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/pctrickstoU">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/104283015279880391921">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/YourUserName">Connect with me on LinkedIn</a></li>
</ul>
</div>

Change all Bold Red words with your Url's.

Replace pctrickstoU with your feedburner Feed ID
Replace pctrickstoU with your facebook Page ID
Replace poornachandra with your twitter ID
Replace https://plus.google.com/104283015279880391921 with your Google+ ID
Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL

Add SpiceUpYourBlog Style Social Widget In Blogger

SpiceUpYourBlog is a Popular blog which covers topics like Blogging Tips, SEO etc. You must have visited this blog before and if you did, you must have noticed its awesome social widget. The Social widget has a nice spinning effect on mouse hovering.this is very cool widget.Its main feature is it covers all major social links facebook, twitter, feedburner feeds, google+, Pinterest.It changes your blog look attractive.

How To Add SpiceUpYourBlog Style Social Widget In Blogger?

First for All Go To Blogger.com > Page Elements > Add a Gadget
Choose HTML/JavaScript from the list of the gadgets
Copy and paste the code below in the content box.

<style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
--></style>
<center><div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/pctrickstou" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJomSuhAq2Fd9QzGOd9w2adRNfAfv6iuflyyaR_OqKT_wFJg7Uv8LO1dx1EWg-TEu0nMBjyBKaaCN531PMO2e4fI1XlCtRCxZLj9mbsywPmMx0PbfEEZu8rLkkVaqm4Y3rYYLeRDVYh_u6/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou&loc=en_US" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyQAr0GogN4yxjxo-HP2YxzGMkAFXykhhLQ8iZ8nRdwEV1FLSR_pkVU5VDDzynTGPIG2GB3hyJXpXOx8o59d7G6WdK-i0ATnylbc82JqI6a-OUd0wnLiJRwGh9ORdVpS5Oq9LugzSPp3l/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/pctrickstou" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaVvHfHHzjfcQdIcRzxGgOCPjoa6nzenKeW-8Oa3dDaSET3eKVteVD9cJJCtonUsIAiZ_xB2XOsD9gw8Cwf-vFAbV-GD6vQtD1IT_zLMrSwMoYQ8ZBMe7mJbpRoWf3nmdTSVsfpKLwGtR/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/poornachandra" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOCKnXVw7ufH0NvyhGc3LqjZiv0KN31b0ycXQuqv10EKPVKuxPgDm1LsTLJpkuo6RGQ4Oixu_lcLselChsP6kTPq-C2daK0hS2XavYg8yIxTSq77J0QkvbXds5sLRf0lGhLnZnnFeL4r2/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/104283015279880391921" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3_L81T3z5pDJAYCAWwYxJU1ibXKoq0OBTVkrAFsKyq7o_iWp3r2Rs9TVoIXEVTgtiJUYbrhLhK7ppMFriP5Yz4aVLAYAqkmwKRQwbLhxqOKAib-VTDDDFZ9L-hnjF9jKFY71pe4-9mg9/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/YourUserName" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhMadJ6JX7gGeF0KDjp9uiHMtlXz2Z1EZzcYZ23OuwovVGQ7QKrN-8n1ylCxuTxXCBSUecE4w2968gpaxrqOUBw7iUjZzu4JLY2OqZIyNmv2-0rlQraLa_lDRgz8o-XRdmDbQxBjhzWOz/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center>

Change all Bold Red words with your URL's

Replace pctrickstou with your feedburner Feed ID
Replace pctrickstou with your facebook Page ID
Replace poornachandra with your twitter ID
Replace https://plus.google.com/104283015279880391921 with your Google+ ID
Replace http://pinterest.com/YourUserName with your Linkedin URL

Well Done!

How To Show Adsense Ads Between Post Title In Blogger ? Two Methods

How To Show Adsense Ads Between Post Title In Blogger ?

Method no 1:

First of all goto this link and convert your adsense code: http://htmlentities.net/
Find <data:post.body/> using CTRL+F
Now paste the following code above "<data:post.body/>"

<div style ="float: left; margin 10px 10px 10px 0px;">

YOUR ADSENSE CODE HERE</div>

Replace "YOUR ADSENSE CODE HERE" to your converted code

All done!

If this method is not working try Method No 2:

Method No 2:

First of all goto this link and convert your adsense code: http://htmlentities.net/
Find <div class='post-body entry-content'> using CTRL+F
Now paste the following code above "<div class='post-body entry-content'>"

<b:if cond='data:blog.pageType == "item"'>

<div align='left'>

YOUR ADSENSE CODE HERE

</div>

</b:if>

Replace "YOUR ADSENSE CODE HERE" to your converted code

All done!

Add Related Posts Widget For Blogger With Thumbnails

Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

How To Add Related Posts Widget For Blogger With Thumbnails

First for All Go To Blogger.com > Design > Edit Html
Find </head> Using CTRL+F
Copy the code below and paste it just after </head> tag

<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/AVvXsEiruFUGvay_KGvzOT2rKkItwDDDfVH_ECGLrjSHvSRcrLlnlKkdglMWT4JFpax0ZKBXJX9jRgG5VZ3FXCi1cQ1zEFPZ0t7WptHcdKf5A7HM-NKFXomkphsheLxjb5tCquZjxwoYyYVjB58/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if>

Now find the following code:

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

If you can't find it, then search for this one:

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

OR:

<data:post.body/>

Copy the code below and paste it just after <data:post.body/> tag and save your template.

<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://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fmb8qzibTpfK2ZwPmyx8J1XtF92xzdsdeTcUHozU9sUUi879yHy1dOkJrB5WopapXI3Wn5Uo0yNJtXY1_LARTq3h0SiZW6zXdpbO7ZeeG2rSz4jX4TW13FDpPrvwHkI9PukkpoC3s7jJ/s1600/blogger-widgets.png" /></a>
</b:if></b:if>

Change the 6 value from max-results=6 with the number of posts you want to be displayed.

Wednesday, 26 March 2014

Tips For Fast Google AdSense Approval

Google AdSense is a program by google which pays it's publishers for advertising google ads on their websites. If you have a blog or website with nice content and traffic then you can earn a handsome amount from google AdSense. But it is really very difficult to get your website approved by google. Most of the times, google rejects AdSense applications saying that the website doesn't comply with google policies. So, I'm going to tell you some things to keep in mind before applying for Google AdSense.

1. Add A Privacy Policy Page In Your Blog
Privacy Policy is a very important thing for any website. It tells your visitors how your website uses their online data, what they should do and what they should not. It makes your website working transparent and helps visitors to know clearly about your website policies. It may not be a major issue for Adsense Approval but you should give it a try.

2. Add An About Us Page:
Adding an About Us page also makes it clear for visitors that who are you and what are you doing on your website. It gives details about your website, tells it's background and hence builds trust between you and your visitors.

3. Add A Contact Page:
AdSense may look for your contact details for application approval because it proves that there is a real person behind the website. Contact page helps the visitors to contact you and do inquiries and send feedback.

4. Clearly Visible Name and E-Mail:
Make sure that your full name and email address (or contact details) are clearly visible on contact page or any other suitable place. This makes your presence valid.

5. Your Age Must Be At Least 18 Years:
While entering your date of birth in the adsense application, make sure that your age becomes 18 years or more, otherwise your request will be rejected.

6. Minimum Number of Posts:
There is no limit of posts for applying for AdSense, but for better results, you must apply for AdSense after 70+ posts. The length of each post must be of 500+ words.

7. Design And Navigation:
The design of your site must be professional or easy to navigate. Don't use lots of javascript effects or lots of images. Make the design simple and clear and use navigation bar to make the navigation easy. Always try to include a search bar in your site so that the visitors can search what they are looking for.

8. Content Is King:
The most important thing is the content of the site. Never copy any other site's content and always try to write unique content for your site. If your content is unique and valuable for the visitors, the traffic of your site will increase day by day and this is what google looks for. Never use abusive or pornographic content and don't publish cracked softwares and copyrighted material. So make your content easy to understand and useful.

9. Provide Value To Your Readers:
Never say that you are blogging for money or just for time pass. Try to build a relationship with your readers and provide value to them. Be interactive with them and be humble and honest for your readers. Say that you are trying your best to help your readers and will keep it on.

10. Use A Top Level Domain:
Instead of using free domain like xyz.blogspot.com, use a top level domain like .com, .net and .org. These domains are given preference by search engines and will improve search results which will drive more traffic to your site.

11. Never Use Other Ad Networks With AdSense:
Before applying for AdSense, remove ads from other Ad Networks like Clicksor, Chitika etc. Google doesn't allows any publisher to use any other network's banner ads with AdSense. Although you can't use banner ads, but you can use In-Text ads, such as Infolinks with google AdSense.

12. Don't Use Paid Traffic or Paid To Click Sites:
Google hates paid clicks because these clicks are not valuable for google Advertisers and they don't get any response. So google cancels those accounts which use paid clicks.

How to Boost Alexa Rankings of Your Blog

How to Boost Alexa Rankings of Your Blog, it is another most searched keyword in search engines. Generally bloggers don't pay attention towards their alexa rank and look for advertisers to get advertisements for their blogs. But what actually an advertiser looks about a blog is Traffic, Quality and quantity of the content and Alexa rank of the blog. So you should not avoid working on your alexa rankings also. Alexa ranks each website according to their traffic and backlinks and updates the rankings daily. So you may notice increase or decrease in your alexa rankings on different days.
Well, I'm going to tell you some tips to boost your alexa rankings:

1. Register An Account On Alexa And Add Your Website/Blog

To register an account, visit alexa.com and register for a free account (later, you can upgrade your account as alexa pro and claim your site to verify ownership of the domain). Now login to your account and add your website and update its details.

2. Use Alexa Widgets In Your Blog

Putting alexa widgets in your blog is also a good idea to increase the alexa rankings. If the visitors will click on the widget, the hit is recorded in the alexa server which may cause boost in alexa ranking for your site.

3. Increase Traffic on Your Blog

Promote your blog in social media, reply to the questions of users in different forums and include your blog's link with your answers, write guest posts on other blogs etc to increase traffic and if you get nice traffic, you will notice boost in your alexa rankings.

4. Write Some Quality Articles Daily

Try to write a few quality articles daily. This will make your blog an active blog and visitors will return to your blog daily which will make them loyal readers and will cause increase in traffic, hence increase in alexa rank.

5. Use Alexa Toolbar And Create Alexa Toolbar For Your Site

Install Alexa toolbar in your browser and create your own alexa toolbar from your alexa account. Encourage your visitors to install your alexa toolbar to increase your alexa rankings.

Well, there are no solid tricks to boost alexa rankings, although some companies are using alexa bots to increase the alexa rankings of their clients' websites. But using bots is always dangerous because once if you are caught, your website's reputation will go down and you may be hit by google panda or penguin penalties.

Why Some Bloggers Show Fake Income Reports In Their Blogs

You might have seen that some bloggers show their income reports in their blogs to attract visitors to their blog. They say that they earn thousands of dollars just in one week. After looking at those income reports, you might be thinking that those bloggers are really PRO BLOGGERS and have great knowledge of blogging. I've noticed that in India, 1 out of 4 bloggers says that he is a pro blogger and shows his income reports to make the visitors impressed. But a PRO BLOGGER nevers needs to show his income reports in his blog. He earns a handsome amount from his blog and pays income tax to the government silently.Then why these stupid self called "PRO BLOGGERS" need to show fake screenshots of income report? Let me explain you the reason behind it.

1. To gain attention of internet users

These self called "Pro Bloggers" make fake screenshots of adsense income and other online income reports (you can also do it by using webpage editing javascript and photoshop. AdSense fake screenshot generators are also available online) to gain the attention of internet users. If any person visits their blogs and sees their income reports, he thinks that they are making millions using their blogs and he subscribes that blog and visits that blog regularly to know the secrets of online money making.

2. To increse social media followers

These bloggers try to drive traffic from social media from their followers. So, they show unbelievable amount of their earnings in social media, such as in facebook groups and pages and when any social media user looks at his posts, he immediately follows the blogger either by adding him in friends list or by liking his page. These bloggers purchase fake twitter and facebook followers to make advertisers fool that they have a large social media network. To promote their blogs, they create fake social media accounts also.

3. To do fraud with newbies by selling their useless services:

These self called "Pro Bloggers" try to trap the newbies by showing fake income reports. They say that they will make a newbie earn thousands of dollars within a week or a month if they use their SEO services or blogging coaching. Any new blogger gets impressed by them and pays them money to earn lots of money by getting the services of those spammer bloggers and finally gets nothing.
Actually these spammers work in a team of other spammers who have their own blogs. All of them publish fake income reports saying that after taking the services of XYZ blogger, they are now making lots of money. These spammers publish the blog url of other spammers saying that 'this blogger is my customer and I made him able to earn four figure or even more income within one week or month'.
The innocent newbie blogger believes them and day dreams of being a millionaire and falls into the trap of those spammers. A spammer creates so many fake profiles and create blogs with the name of those fake profiles and try to impress other people saying that those all (fake profiles) are his friends or customers who are making lots of money after joining his blogging coaching and using his SEO services.

4. To get the attention of advertisers

These spammers buy backlinks from high PR sites and buy backlink packages from different companies to get better alexa rankings and to increase page rank of their blogs. Then they purchase traffic from different companies who drive massive traffic to their sites using bots and social media promotion. Then they show that their alexa rankings and traffic is very good to generate revenue from advertisements. These fake reports attract advertisers and they give advertising contracts to these fake bloggers. In this way, they recover their spent amount for building traffic and backlinks.

5. To publicize themselves and their blogs:

When other bloggers visit the spammers' blogs, they get inspired from them and publish the interview of those spammers in their blogs. These interviews increase their publicity and drives traffic to their blogs which gives them more people to do fraud with. Generally, spammers use their fake profiles to promote them and publish their interviews on their self made fake blogs. You will never see the interview of such types of spammers on a well reputed site because the administrators of well reputed and genuine sites know the above points I mentioned in this article.
These things make the spammers popular in their locality and then they try to get the attention of local media to get featured in local newspaper of TV channel to get more audience.

Conclusion

If you know about SEO and Blogging, then it's a thing of common sense that blogging can't make you a millionaire over a night. If taking services or coaching from anyone could make you rich, then there was no need of doing any job or business. People could become rich by taking the coaching of those silly self called Pro Bloggers. Blogging is not a shortcut to make money and making huge amount of money online is not an easy task. It requires knowledge, patience and loyalty.
According to my personal experience, the power of these spammers is their huge network in social media. Actually most of the spammers have good knowledge of the easiest HTML also. They say that you should purchase templates from them because their templates are highly SEO friendly. But do you know what they do? They download templates from different sites (there are so many sites distributing free blogger and wordpress templates), change the credits and background colors and images of the template and sell it to their customers saying that they designed that template which is highly SEO friendly. If you send your own design and tell them to design the template for you, then they can't, sometimes they may heir other web designers to design the template for you, but in most of the cases they try to confuse you that the design you sent can't be good for SEO, the template they are offering is search engine optimized so you must use that template.
At the last, I'd like to say you that blogging can be a good source of making money online, but it is not like the way those spammers represent it. Blogging can't give you millions within a week if you are using it in a genuine way. The only thing behind success in blogging is HARD WORK with a little addition of LUCK.
So friends, don't be excited by seeing fake income reports, work hard on your blog and be loyal with your work. Get inspiration from great bloggers and learn from them instead of running behind the spammers.

Wishing you a happy and successful blogging...

Tuesday, 25 March 2014

Beautiful CSS Image Slider For Blogger

A very beautiful CSS powered image slider for blogger. If you use HD images in this slider, it looks amazing and very pretty. To see the next picture, you need to click the dots below the images and after clicking the dots, the next image appears with atransition effect which looks really nice. So, let's start the coding.

Follow the instructions below:

Login to blogger.
Navigate to Template > Edit HTML > Proceed > Expand Widget Templates.
Search for the line ]]></b:skin> and just above it, copy and paste the code given below:

/* slider www.pctricksguru.com*/
#slider1 {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

#slider1:before, #slider1:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
  transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}

#slider1:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
  transform: rotate(4deg) skew(10deg);
}

#slider1 ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}

#slider1 ul li:first-child {
margin-left: 16px;
}

#slider1 ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}

#slider1 ul li:last-child {
margin-right: 0;
}

#slider1 ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

#slider1 ul li a:hover {
background: #888;
}

#slider1 img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
  transform: rotateZ(-10deg);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
  transition: all .5s ease;
}

#slider1 img:target {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
  transform: rotateZ(0);
}

#slider1 img#five {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
  transform: rotateZ(0);}

#slider1 img:not(:target), #slider1 img:target ~ img#five {
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
  transform: rotateZ(-10deg);
}

#slider1 ul li a[href="#five"] {
background: #777;
}

#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}

#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}

Now, save the template.
Now, go to Layout and Add A New HTML/Javascript Gadget.
In the content box, copy and paste the following code:

<div id="slider1">

<img id="one" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJSSvC_jWtuGpcVxpumy11aa_3RYjYB_4LSqh9eCNaZyJ9mMWIbGp-lYHASy2zRJKXHnvNHvIVJDYM9N4U64N35TGod70P21Ww-lDa0MR1eP3NQl9OTnXDBnsJWWhvYAtwWmI-fH-nfc/s1600/pctricksguru_image1.jpg" />
<img id="two" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEIc4KEPv3omRRCot4qD9uqux0zZvJZNHGIm-Mtl2sfHyGfNXAZPay43tg2qJ8vUmCh13h6fF5LPibbUaQ0ytYSpg_8JioXLmCUhoc0abN8FIugtmOuusngJtJAY6g59s3mKEAsbS4mo/s1600/pctricksguru_image2.jpg" />
<img id="three" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi9I6oMFDtBWzC1wrwgb0jv6g472lYk3I7uWInQckRQxgnT3sOqnBVFA3t_AG3oVbDqUP8PVBaLwgGizf8c8eFLAeu7evVeB4MpNS13BD46SFds_y6vkoHe9cCSY1KvUTWwEPHB11kPl8/s1600/pctricksguru_image3.jpg" />
<img id="four" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimR0HGs1ZfA53_8nzynO-71NMijgMrgoZNs_Kmer-yU3QwJ7_4N3-GZR197CcoLRnwiCkDI8imHH9aIELc14Msw-faqgp_dnps3BMfahBpYY2RGIPU5Nx_NP2ap93f_W4T53FfxF0Nos4/s1600/pctricksguru_image4.jpg" />
<img id="five" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQAx7bvR5b0GPIZotorHfTsa-i8MQanWMJ16MCvMFWtB0l7gsMN5ENFndk_ioq6iBxoR3QhANONOVCehcHTBF2nGTr30z2IRDnBMGq7PhyphenhyphendmL9afbEyZfEj-GPvapgRgT2YIkPuoUSNA/s1600/pctricksguru_image5.jpg" />

<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>

Save the widget and see your blog. You will be amazed. It looks very beautiful.

Note: Replace the green text with the desired target link.

Pages