1. Log in to blogger account and Click drop down.
2. Now select "Template"
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here bloggertrix.com */ div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{ background: none;border: none;margin: 0;padding: 0;} div#socialbox{ color: #768a96; font-family: Arial, Helvetica, sans-serif; font-size: 14px; width:300px;} div#socialbox ul{ background: url() repeat; border: 1px solid #d8dcdf !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 2px 4px #dfe4e7; -moz-box-shadow: 0px 2px 4px #dfe4e7; box-shadow: 0px 2px 4px #dfe4e7; list-style: none; margin: 0 !important; padding: 0;} div#socialbox ul li{ background-image: none; border-bottom: 1px solid #d8dcdf; height: 59px; list-style: none;} div#socialbox ul li:last-child{ border-bottom: none;} div#socialbox ul li p{ padding: 19px 9px 0 9px;} div#socialbox ul li p img{ border: none; margin-right: 10px; position: relative; top: 3px; vertical-align: baseline;} div#socialbox ul li p span{ color: #425763; font-weight: bold;} div#socialbox ul li p a.socialbox-button{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9_WscsLoqlUC9wnX0Dh_t47-bDBItWt66Ugg9hnymQDGSiHbuZFluCaeGeiUxQ-EK4MzrkO1Xw8YH32WIazrV4g0GDXA0wxuSVzvXHiYFM-j2gXcPaEetfR0XuYiLpsSBDNKv_av2Ng/s1600/bloggertrix-button.png) no-repeat; border: 1px solid #d8dcdf; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #425763; float: right; font-size: 11px; font-weight: bold; line-height: 11px; padding: 6px 10px; position: relative; text-decoration: none; text-transform: uppercase; top: -2px;} div#socialbox ul li p a.socialbox-button:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9_WscsLoqlUC9wnX0Dh_t47-bDBItWt66Ugg9hnymQDGSiHbuZFluCaeGeiUxQ-EK4MzrkO1Xw8YH32WIazrV4g0GDXA0wxuSVzvXHiYFM-j2gXcPaEetfR0XuYiLpsSBDNKv_av2Ng/s1600/bloggertrix-button.png) 0 -27px no-repeat;} div#socialbox ul li p a.socialbox-button:active{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9_WscsLoqlUC9wnX0Dh_t47-bDBItWt66Ugg9hnymQDGSiHbuZFluCaeGeiUxQ-EK4MzrkO1Xw8YH32WIazrV4g0GDXA0wxuSVzvXHiYFM-j2gXcPaEetfR0XuYiLpsSBDNKv_av2Ng/s1600/bloggertrix-button.png) 0 -54px no-repeat;}
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
<br /> <div id="socialbox"> <ul> <li><p> <a href="http://www.facebook.com/antisite2" target="_blank" title="Like on Facebook"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUVxnyF4Qo_mOUPAeXZ-do4fZ9sbT55U5gmk1oqyPLIDgzKIto6PNQv_Z-06QBDMxiRt7lNmwnZDz_ElhuubXL3WsqZgx08ZymiV_-ud6Gkz7xDaDFimAhtfGXQe6k6LdgEMOG59NtZk/s1600/bloggertrix-facebook.png" /></a>2,482 Fans <a class="socialbox-button" href="http://www.facebook.com/antisite2" target="_blank" title="Like on Facebook">Like</a></p> <br /></li> <li><p><a href="http://twitter.com/antisite2" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfE1tTcpGI-j-_7oK3Q7Id1XMtbByOuXIp6ZC16B4YBn01mITLIXAQJI-JxtvQDJXylzG_Kklka4UraO4NYxmtpv7IZN9twPvlqbKEL0iKhmFiumgSEgtW-CxaXGniAJARBHrnxUh7PE/s1600/bloggertrix-twitter.png" /></a>5,365 Followers <a class="socialbox-button" href="http://twitter.com/antisite2" target="_blank" title="Follow on Twitter">Follow</a> <br /></p></li> <li><p><a href="http://feeds.feedburner.com/antisite2" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaFJeMfHuM2YcFp1sgJUFQ1QFTdPb9MMraVCFUoxeLTioiiqx698Xx87Epbmhi9rcRxqJUe2MFMKReOYrtiUT9k5ubQTmA-lNq1i__oXVc9_hB1V-cAXUKDEXbP0z9wzcfRQZJlQlv3Cc/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers <a class="socialbox-button" href="http://feeds.feedburner.com/antisite2" target="_blank" title="Subscribe to Feed">Subscribe</a> <br /></p></li> </ul> </div>
Replace antisite2 with your usernames.
10. Now save your HTML/Javascript'.
To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.
How to add multi-colored popular posts to Blogger
Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:
/* Variable definitions
====================
Step 2. Copy and paste just below/after this tag, the next code:
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>
Step 3: Search for the following piece of code:
]]></b:skin>
Step 4. Just above/before it, add this code:
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Step 5. Now find the following code:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
Step 6. Delete it until you reach at this tag (delete this also):
</b:widget>
Note: Be very careful when removing it. The entire fragment of code should look like this:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Step 7. After you have deleted the above code, paste this in its place:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicndldHlqeH-73ob-NoOI8oBvoMPHk0zQHhPH3HNVQVvW9-tSSD0ggZvvcIzu1Z47NbDywWVnJHJji_pDLY7R6jsISXY8NK5jWvbHv-7apD-25yw_Psi8HUyooE-dcGa93jAaTblyJviY/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicndldHlqeH-73ob-NoOI8oBvoMPHk0zQHhPH3HNVQVvW9-tSSD0ggZvvcIzu1Z47NbDywWVnJHJji_pDLY7R6jsISXY8NK5jWvbHv-7apD-25yw_Psi8HUyooE-dcGa93jAaTblyJviY/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Step 8. Save template.
Settings
- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
You can easily change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and there you can select any color you want.
If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.
In this post will help you to create a recent post widget for your blogger. Its animated widget with thumbnail and Include with nice back ground. So you can try to add it to your blog.
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
After paste above code
* Replace http://antisite2.blogspot/ with your Site URL
4. Now save your HTML/Javascript'.
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } .spydate{ overflow:hidden; font-size:10px; } #spylist ul{ width:350px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:230px; background: #1ed2f2; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 1px 10px !important; -webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px; } #spylist li:hover { background: #84f6f5; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; margin-top:3px; background:none; border:0; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://antisite2.blogspot/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script> </div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://antisite2.blogspot.com">Blogger widget</a>
After paste above code
* Replace http://antisite2.blogspot/ with your Site URL
4. Now save your HTML/Javascript'.
In this tutorial im gonna explain how to add
circle image with nice hover effect. Actually,
this effect helps to make your blog attractive.
You can use this image circle for link to your
page or post,like contact me page, about me
page etc. SO , you can add similar image for
it.This whole effect made up by CSS and
HTML.You can check my similar post here
Amazing CSS Image Circle Hover Effect For Blogger
circle image with nice hover effect. Actually,
this effect helps to make your blog attractive.
You can use this image circle for link to your
page or post,like contact me page, about me
page etc. SO , you can add similar image for
it.This whole effect made up by CSS and
HTML.You can check my similar post here
Amazing CSS Image Circle Hover Effect For Blogger
Demo
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5.Find this code by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> code
/* Bloggertrix */
.Btrix-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
height: 150px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 150px;height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-alP6HrM84Sws6vW-9iNlaDH-DlTjraeIndA0cOggj4zK-sdmSGMHUATYOUsQpRtl0aZZauJpBQrtIJFtQrx75P2vajtZMoWU_TCk7s1j3_moDWuiXpqycTG1KCaou2up3zgCCgb37-8/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewN8Ct6l-KLibBvM4diaFbJN5JuIXdU8U1NsYN1ON_WYFfqe5Y2WwNBM_wrcNJa1DPhn_wRM3n92iX2PBs6DtNLutlKUDQvX-av_deGi4xcWXJuAWO0CauphM2bcV50UvzDB3asLsvWk/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak9o5jDJkO39Jlq4oT5r7DNbDdNYlw2JzoPP-Zn6dpYlCot-Z05P0_k2v-C-o7wVkWz6OqORX7jJISTMnPGKkZwF_Z421vWD71_4BRwbUkcaNE5cQ7Uukw2tuJ-tW1RB2v5dkjD3YYKc/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
*You can change image as your like im using 180x180 pixel7. Go to blogger and click drop-down like 1st step and select Layout
8. Click Add Gadget and select 'HTML/Javascript"
9. Paste below code.
<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Fashion</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Nature</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Car</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li></ul></section>
*You can change the header according to image and image URL10. Now save your template. You are done.
Guest Post - Our host is Saskia Bader.See How To Become a guest author on Spice Up Your Blog.
One reason why I have started to research and write about blogging tips is that I really don't like it when good blogs are taken offline just because the blogger became frustrated. So what are the
causes for blogger frustration and what can you do against it?
My tip: Don't give up. I know exactly how it feels when you do so much for something but you only get very little in return. I have learned over and over again that most of the online success happens over time - that could mean anything from 6 months to a few years if you can not spend lots of money on advertising. You may just be one or two work-intensive months away from the readership you want to achieve.
My tip: Don't take comments too important as a measure of your blogs success. Especially if you run a tips-, advice-, knowledge- or tutorial oriented blog because people may be busy following the steps of your tutorial or implementing the knowledge you shared instead of staying on your website to leave a comment. It's better when you look at the number of returning visitors as a measure for success because all these people who try out the things you showed them my not leave a comment - but come back for more over and over again.
My tip: When you feel productive, write as many high-quality posts as you can but don't publish them all. Always keep some in draft mode as a reserve for the "bad blogging days" where you want to do everything but write a blog posts. This way you still have great content to publish.
One reason why I have started to research and write about blogging tips is that I really don't like it when good blogs are taken offline just because the blogger became frustrated. So what are the
causes for blogger frustration and what can you do against it?
Too few visitors
I know how it feels when you log in to your Google Analytics after a day of promoting your blog and... your visitor count is even lower than usual. Many great bloggers put a lot of work into their blogs and get frustrated if all their hard work leads to no results.My tip: Don't give up. I know exactly how it feels when you do so much for something but you only get very little in return. I have learned over and over again that most of the online success happens over time - that could mean anything from 6 months to a few years if you can not spend lots of money on advertising. You may just be one or two work-intensive months away from the readership you want to achieve.
Too few comments
Comments are very important for bloggers because positive feedback motivates and constructive "negative" feedback helps to improve the blog. That is why some bloggers get discouraged when they receive too few or even no comments what is absolutely undersandable. But how to deal with this discouragement?My tip: Don't take comments too important as a measure of your blogs success. Especially if you run a tips-, advice-, knowledge- or tutorial oriented blog because people may be busy following the steps of your tutorial or implementing the knowledge you shared instead of staying on your website to leave a comment. It's better when you look at the number of returning visitors as a measure for success because all these people who try out the things you showed them my not leave a comment - but come back for more over and over again.
Too Tired to post
Sometimes it is hard to keep up with your regular posting schedule - either you feel overworked, you don't feel like you have anything of interest to share in the momemnt or you just have more important things to do. Don't worry, you don't have to leave your regular readers alone when one of these times comes again.My tip: When you feel productive, write as many high-quality posts as you can but don't publish them all. Always keep some in draft mode as a reserve for the "bad blogging days" where you want to do everything but write a blog posts. This way you still have great content to publish.
It is no secret that the title meta-tag is one of the most important
factors when it comes to on-page search engine optimization. Search
engines including Google, Yahoo and MSN give quite a bit of importance
to the title and description metatags in their algorithms. What many
people, however, do not know that the same title tag could actually hurt
your rankings, if you try to change it abruptly with a hope to improve
your search engine rankings.
If you are currently ranking well with your page title, you should not risk with changing it to improve your rankings. You may often see your current Google rankings go down with such a change. I myself have experienced negative results when I tried to change the title tag for a site which was already ranking well. In fact, Google slammed the site with a -950 penalty.
Your page title is the main entry gate of search engines. Changing the title meta-tag could easily make your Google rankings fluctuate. If you change your title, Google and other search engines will take some time to reflect rankings for new titles. Especially, it would definitely look suspicious in the eyes of Google and other search engines if you have made the changes in the main title and description tags after a long time.
In short, changing the main title of your site, although it’s already ranking well is not a good idea. Instead of changing the page title to try to have improvements on certain keywords, it is better to work on adding content about those keyword phrases on your page, and add links with appropriate anchor text from sites with relevant content. Google always penalized over-optimization. Now it seems as if it frowns normal search engine optimization too. So the best policy is to optimize the website at the time of creation – Do it once, and do it right !
If you are currently ranking well with your page title, you should not risk with changing it to improve your rankings. You may often see your current Google rankings go down with such a change. I myself have experienced negative results when I tried to change the title tag for a site which was already ranking well. In fact, Google slammed the site with a -950 penalty.
Your page title is the main entry gate of search engines. Changing the title meta-tag could easily make your Google rankings fluctuate. If you change your title, Google and other search engines will take some time to reflect rankings for new titles. Especially, it would definitely look suspicious in the eyes of Google and other search engines if you have made the changes in the main title and description tags after a long time.
In short, changing the main title of your site, although it’s already ranking well is not a good idea. Instead of changing the page title to try to have improvements on certain keywords, it is better to work on adding content about those keyword phrases on your page, and add links with appropriate anchor text from sites with relevant content. Google always penalized over-optimization. Now it seems as if it frowns normal search engine optimization too. So the best policy is to optimize the website at the time of creation – Do it once, and do it right !
How to add Description and Keyword metatags to Blogger blogs?
If you are a webmaster or site creator, you have to make sure that the site content reaches your target audience. One way of doing that is by carefully assigning title tags as well as meta descriptions and keywords to your web pages. Meta description tags also improve the chances of your site being found and clicked on in the SERPs.Though Blogger is a Google product, blogs hosted on blogger do not have support for meta descriptions and keywords by default. If you have ever tried adding keywords or description meta tags to your Blogger pages, you might have seen that there is no easy way of implementing that. Here is a workaround to make changes to your blogger template in order to add description and keyword metatags of your choice to your blogger top page as well as to your posts.
In the Layout panel of your blog, click on Edit HTML.
Click on Download Full Template and save a backup copy of your template. This will come in handy to undo any changes in case the changes do not work as expected
Look for the following code in the template
Add the following code immediately after the code in step #3.
Replace the http://myurl.blogspot.com/ line with the URL of your blog top page.
Replace the word MY DESCRIPTION with a description for your blog top page.
Replace the word MY KEYWORDS with a list of keywords separated by commas, relevant to your blog top page.
You would need to to follow the steps 4 to 7 – for adding corresponding URL’s, descriptions and keywordsfor for all the individual posts from your blog. For example, if your first article is about your visit to New York, you’ll need to as follows.
Add this code again immediately after the
<b:include data=”blog” name=”all-head-content” /> line:
Replace the http://myurl.blogspot.com/ line with http://myurl.blogspot.com/my_visit to_newyork.html.
Replace the word MY DESCRIPTION with description of your visit to New York.
Replace the word MY KEYWORDS with keywords such new york, business visit, usa visit etc.
Please ensure that all the individual posts have titles and descriptions matching the page content. This will help you from preventing your posts to go in Google Sandbox.