Teck 92 :: Android Apps | Blogging | Tips And Tricks

Get a High Quality Backlinks of 2014 For Good Seo

Incoming link to your blog, in short backlinks are the links of other websites/blog which have redirected to your blog it is also known as inbound links, Backlinks are one of the most significant of high ranking many of newbies do not know much about it so our this article is about making better backlinks for blogger, The below tutorial is thoroughly detail with dofollow backlinks

Why Backlinks Are Important?

Building Links is the first and most important step for the blog However it has enormous effect on alexa ranking including Google Pagerank, The blog with High Alexa Ranking and page ranking attracts google and improves visibility in search engine the more you have dofollow links in various high rank website the more your website rank increase and your traffic get hight, including one more advantageous point of building links is your indexing time if your have more links redirected to your blog then for sure you post will index in less than one 1 hour, speed indexing also plays an important role in blogger it mean's google consider it more,

A Best Way To Get High Quality Backlink From Your Content.

1. Dofollow Blog Commenting

Commenting in blog is one of the finest source of backlinks, Now each and every blog have
(no followed) their comments are which means not passing juice from his website to yours so how to find blog with (dofollow) comments CommentLuv or perhaps KeywordLuv are few comments system which allow readers to comment and can also leave their link to build back links it does not mean that we should spam, commenting on blog means to comment about the article thanking the admin and leave your link at the end of your comment, commenting like a robot may harm your blog majority of people do not understand the concept of commenting on blog it does not mean the we should spam on blog by leaving necessary links and commenting again and again on same blog the best way of blog commenting is to appreciate the article leaving kind feeds about blog and at end leaving the link.

2.Social Bookmarking Websites

Social bookmarking is the easiest way to promote and drive traffic from various social media sites such as, Facebook, Twitter, StumbleUpon , Linkedin, myspace, These are few site which helps to make High inbounded link for blog, StumbleUpon is the best site which allow to make post by just pasting your post link, it automatically generate backlink, Link you're all social media sites with it and start posting on stumbleupon it will automatically promote your post into all social media that you linked with it, Through social media promoting generate great amount of traffic which directly effect on Alexa rank and pagerank it helps to keep safe the blog from google updates such as google panda and penguin updates.

3. Directory Submission

Directories has been a viable SEO tactic it have been our personal experience with submitting in various directories after google penguin 2.0 many blog were affected for those it is the best way to recover from it, submitting your all blog/website details in directory help increase more backlinks and Traffic, Google personally have announced that directory submission cannot possibly hurt your site rather than it generate massive of flow of traffic, increase your rankings, From now start submitting your site to directories and redirect good quality link to your site, submitting in directories is easy just find them on google and provide full details about your site and in few seconds your site will be listed in high rank directories our next post will about High rank directories so stay tune for it,

4. Guest Posting

Guest Posting is the best way to drive massive traffic and to have good backlink by just writing articles on such blog which allow to post for them with given guidelines, Out there are many site which appreciate writing articles for them they will place your blog/website link in between somewhere in the article it also improves your writing skills and (PR Juice) flows in your blog automatically your blog rank goes high, Try to write impressive articles with no grammatical mistakes and Optimized and well researched, and well linked with your own links, it will surely have a great results soon

Create a Stylish Site Map 2014 For Blogger/BlogSpot

Hay Folk's back with stylish new and attractive widget for blog known as sitemap, this is the second post on simap our first post was about adding stunning sitemap in blogger ,This widget have been designed simple and neat and clean it can be customized with any blogger them, the colours can be change easily let me explain in short why to add sitemap page in blog, adding sitemap page in blog has really enhance page ranking it helps readers to navigate through all your blog from single page and including it most helpful static for SEO is interlinking adding it is just like you have interlinked all your post with each other which google consider high and unique quality blog and it also help search engine's crawler/robots to index fast and easily, View the below demo to imagine the widget in your blog lets start adding sitemap page in blogger.

Adding Sitemap in Blogger Page.

sitemap have already been categorised so it will appear all your blog post with each categories, you do not need to mass with the HTML coding's however if you intend to customise it with your own desire you can easily change the colours and can add or remove some categories first you just need a neat and clean page to implement the coding in it so lets get started adding it in blogger page,

Go to Blogger-------> Dashboard------->Pages,
Now Create New Page----->Blank Page
Add a Title to it and Click on (HTML)

Site Map 2014

Now copy the below following code and paste in the page (HTML) Section.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.Teck92.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Now Simply replace Teck92 with your own blog domain.
Click on Publish, Browse the page and see how it appears on your blog

Final Words By Admin!

We how hope you all like the simple sitemap page widget for blogger as we have also mentioned above that you must have labels in your blog if you have then then congrats you have successfully added a stylish new widget in your blogger blog , if you are facing any drawback related to the above tutorial feel free to leave your Comments below we will soon reply as per review,Thanks.

Add Author Box With Stylish Social Media Buttons in Blogger

Most of professional bloggers have been using author bio box from a long period adding it in blogger them defines and make good relation between readers and admin, it connects directly readers to author, the widgets contains social media button which can be used as admin social profiles or can be used as website/blog fan pages, this is not the first article on author bio box MBR Personally have designed a stylish author box for blogger, the below tutorial is quit easy to add it in blogger and see the below live demo and imagine how will it appear on your blog,

Adding Author Box in Blogger!

First of all Backup your template
Go to Blogger------> Dashboard
And -------->EDIT HTML

Now Search for the below code with the help of Ctrl+F

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

After finding the above code just like the below image then move to the next step to add the author bio box in blogger.

Now simply copy and paste the below code just beneath/Below the above code we searched .

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Admin Name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">blogger widgets</a></p>
</div>
<style>
.entry-social {
margin-bottom: 20px;
overflow: hidden;
}
.entry-social a {
color: #FFFFFF !important;
display: block;
font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
font-weight: 600;
padding-left: 20px;
}
.entry-social div {
float: left;
margin-right: 10px;
width: 138px;
}
.entry-social .fb a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE_cw5v-8tiMnOMFVL4fTiC1_hrODhDgeuEcxIrUm_ccHQRK9bSnd6XlKWKQws8GLeycq_7-MD2kQT7P4aVyVGHgWq44tSrwIN2TTd_vKq26V847JCKZt7P0HsW4gmwZ3KQYG3bxsWg54/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE_cw5v-8tiMnOMFVL4fTiC1_hrODhDgeuEcxIrUm_ccHQRK9bSnd6XlKWKQws8GLeycq_7-MD2kQT7P4aVyVGHgWq44tSrwIN2TTd_vKq26V847JCKZt7P0HsW4gmwZ3KQYG3bxsWg54/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3-I2MFvkwY_vRlNxD8PQIvdpz-3Dz7Loju6t1hyGUq9GvLBz5hCAwff-qRAge1HDmvfYhA3gO9pAfrpCFcfZ2pcvtDvBFkOeO7JGYL0F4uxScON0k0WRGVR1aHa1N_ajKhY4LlruDUXV/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3-I2MFvkwY_vRlNxD8PQIvdpz-3Dz7Loju6t1hyGUq9GvLBz5hCAwff-qRAge1HDmvfYhA3gO9pAfrpCFcfZ2pcvtDvBFkOeO7JGYL0F4uxScON0k0WRGVR1aHa1N_ajKhY4LlruDUXV/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ7Kyj0iMZbrEgGQrx_Q8V3rV2R6727cIj-I4if0IqFL9d7bh7p82VPscqd2o1CZv3bplrhyphenhyphenlmjj_lkDHqYuTetBJpn2186THAEUCjkE6-dlWKEVJGgLsbgeN8y4E37SKtQ96rxgAaQrhW/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ7Kyj0iMZbrEgGQrx_Q8V3rV2R6727cIj-I4if0IqFL9d7bh7p82VPscqd2o1CZv3bplrhyphenhyphenlmjj_lkDHqYuTetBJpn2186THAEUCjkE6-dlWKEVJGgLsbgeN8y4E37SKtQ96rxgAaQrhW/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qUJ9NhVHbck2jMqpeHLWCMWr6UBKoEsUuke783Z04bxqU59TVjf89mYFoBcpt60O0KlepNG10x7-yNpgikP5mMQY7Z0LbBv0csEZhJjiQox0PCMAfB84VJ7YeBUwS_bduMWocQTK2TTz/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qUJ9NhVHbck2jMqpeHLWCMWr6UBKoEsUuke783Z04bxqU59TVjf89mYFoBcpt60O0KlepNG10x7-yNpgikP5mMQY7Z0LbBv0csEZhJjiQox0PCMAfB84VJ7YeBUwS_bduMWocQTK2TTz/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgkFJSmNw3hrBExHWphDq5oYKxXb2DbSciSW93fFHCgeekJwHFjbHRphcN81GTZNgioxqljGONYAkfDcLJnx3dPn-89D0gYCxJUHUD5OOXtlrGjyLxobdMkIpBEB_GKtgjkQoY3BsWo9h/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgkFJSmNw3hrBExHWphDq5oYKxXb2DbSciSW93fFHCgeekJwHFjbHRphcN81GTZNgioxqljGONYAkfDcLJnx3dPn-89D0gYCxJUHUD5OOXtlrGjyLxobdMkIpBEB_GKtgjkQoY3BsWo9h/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOjBpeMSf1FRhRG82gituwvEBleqdWZ31kug5ui3QaPvhKxIVctwj6ZmEivri1AYm-R6RW2PauR7qAffl-ujOihey-8dWU7z3eBj2Gqh9Vzyt87DQpWKz9HKm6wAGkD0gtcnbBKZIhyHFL/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOjBpeMSf1FRhRG82gituwvEBleqdWZ31kug5ui3QaPvhKxIVctwj6ZmEivri1AYm-R6RW2PauR7qAffl-ujOihey-8dWU7z3eBj2Gqh9Vzyt87DQpWKz9HKm6wAGkD0gtcnbBKZIhyHFL/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
margin-right: 0;
}
.beh-entry-author {
margin-bottom: 20px;
}
.beh-entry-author .author-header {
padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
color: #000000;
}
.beh-entry-author .author-header h4 a {
color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
.beh-entry-author .author-wrap {
border: 1px solid #EEEEEE;
overflow: hidden;
padding: 12px 15px;
}
.beh-entry-author .author-avatar {
float: left;
height: 80px;
margin-right: 30px;
width: 80px;
}
.beh-entry-author .author-link {
margin-top: 5px;
}
.main-color-bg {
background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}
.entry-social a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}
</style>

We are done here now just replace the highlighted text with your image,your Bio, Author Name,
Replace the highlighted red colour text with your social media profile link,

Stylish Facebook Like Subscribe Popup Box For Blogger/BlogSpot

Hello fellow reader today I am going to tell you how you can add Cool Facebook Like Subscribe Box to your Blogger blog.Subscribe Box is a very important widget for blogs who want their visitors to return. This box which is replica of the Facebook Login box converted to Subscribe box by Your PC Genie can fetch you lot of subscribers. The prerequisite of this template will be an account made at Feedburner where subscribe by email is enabled.
This widget has an elegant look and is very beautifully coded. The bar and button glow when they are active (mouse is pressed on them). A live working demo of this widget can be seen by clicking the button below.

Adding the HTML/CSS in Layout

To add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
<h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px"> Sign up and receive our free Newsletter  </span></font></center><br/>
<input type="hidden" value="Teck92" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
</form>
</center>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}

::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
font: 12px/20px "Lucida Grande", Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
padding: 18px 20px;
width: 80%;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-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);
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);
}
.login > h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
line-height: 10px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-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);
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);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style>

Once you have pasted the code change Teck92 (which occurs at 2 places in the code) with your Feedburner ID. Finally save the widget and the template.

You are done now. Now you and your visitors can see this Cool Facebook Like elegant Subscribe box in your blogger blog and subscribe to your receive all the recent posts directly in their inbox.

With the introduction of latest search preferences by Blogger, BlogSpot blogs are now far more optimized than they used to be before. One of the features was "Errors and redirections" The "404 Error" in simple terms is a page that appears when a broken link is clicked and it tells the visitor that the page he clicked no more exits or is deleted. The error page loads inside your post body surrounded a dull grey box. By default you can only add plain text along with HTML tags inside the "Custom Page Not Found" input box using search preferences option page. The message display using this technique looks pretty ugly and we would therefore need a better approach to design a creative 404 Message for a BlogSpot blog. First kindly see a demo of our error page:

Design 404 Error Page For Blogger

The reason why a box appears around the error message is because of Blogger's default style sheet for status messages. We would therefore override the existing style sheet for the error_page alone using conditional statements. I will be using the CSS code prepared by my friend aneesh joseph which really make things simple and would add slight modifications to make the error box more attractive.

Our 404 page will prompt visitor that he has landed a wrong page and will provide him three important options which are:

Go Back to the page from where he came from. We will use JavaScript here.
Contact the Admin and inform him about the broken link. This will help you track broken links
And finally to provide a link to homepage.

So lets get to work to achieve all the above. Simply follow the easy steps below to display 404 error message uniquely.

Go To draft.blogger.com > Settings > Search Preferences
Click on Edit link next to : Custom Page Not Found
Inside the box paste the following code:

<div class='Teck92-404-box'>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font></strong></p>
<ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>« Go Back</a> </li>
    <li>Report the Problem to us by <a href='http://contact.Teck92.Blogspot.com'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.Teck92.Blogspot.com'>Clicking Here</a>
      <br/></li>
</ol>
<p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
<p> </p>
<p align='center'/>
<p align='center'><font size='5'>Page Not Found!</font></p>
</div>

Make these customizations:

You can edit the bolded texts with anything you like
Replace http://contact.Teck92.Blogspot.com with link of your contact page
Replace http://www.Teck92.Blogspot.com with your homepage link

   4.   Click the Save changes button and you are half way done.
    5. Now go to Template > Edit HTML
   6.   Search for this ]]></b:skin>
    7. Just below it paste the following code stylsheet code:

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.MBT-404-box {
background:#FFFFFF;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>

     To change the background colour of the box edit #FFFFFF
    8.   Save your template
    9.   Done!
Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:

http://yourblog.blogspot.com/blablabla
or
http://yourblog.blogspot.com/xyz
or
http://yourblog.blogspot.com/anything-here
etc....

Numbered Popular Post Widget 2014 For Your Blogger/BlogSpot

So I am back with yet another Popular Posts customization for blogger blogs. This one is quite special as it looks extremely elegant and has cool transition effects when hovered.

We can rarely see blogs which do not use Popular Posts widget. This widget decreases bounce rate and increase the pageviews of your blog. Making them attractive and eye-catching will make more people click on it hence making your blog more awesome and better.

Adding the widget in Layout

Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.

Adding the CSS in Edit HTML

Now go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
}

After adding the code save the template. Now you and your visitors can see this awesome numbered popular posts widget in your blogger blog.

Animated Loading Page Effect 2014 For Blogger/BlogSpot

Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog.

The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the visitors will click any link to leave the current page, inspite of the old boring loading it will have animation.

To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just above </body>.

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihGSZ1QJvAu1p62k_o195GdqLeBecbAKTI6QamWVVzwCd017oVyCyc4Z93D5ty8tBFqiKw6NsNCEv1FSFUqfveM2omKpfkp_HjUE6wN-QUaFnFjoGNbUcV84QgJpzeuF6Cc_FIofWLOro/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code, save the template.

You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.

Floating Share Buttons For Your Blogger/BlogSpot 2014

CODE UPDATED !
Note: Does Not Work On Small Posts.

This tutorial will help you in adding Floating Social share buttons under every post of your blogger blog. I personally use this widget in my blog.

The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The widget contains four social sharing buttons - Facebook, Twitter, Google+, LinkedIn. There is a close button too to close down the floating share buttons.

Once you have seen the demo to add this widget in your blog just follow the below steps.

Adding the Marker

First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'/>
</b:if>

Add the code and follow the next step.

Adding the HTML/CSS/JS in HTML Editor

To add this widget you have to go to Blog Title → Template → Edit HTML and add the below given code just above </body>. The code has been optimized and made lite so it loads faster.

     <b:if cond='data:blog.pageType == "item"'>
    <script src='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTeck92&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
</div> <div class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don't You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

After adding the code change change Teck92 with your Facebook Page's ID. Finally save the template.

You are done now. Now you and your visitors can see this awesome Floating Social Share Buttons in your blogger blog.

Archives

Label