Content Slider gives an unique look and feel to your blogs. Featured Content Slider are now seen many sites
All Stories
Sunday, 6 October 2013
Content Slider gives an unique look and feel to your blogs. Featured Content Slider are now seen many sites
Stylish Featured Content Slider for your Blogger
Prashanth
at 03:48
No comments
Continue Reading→
Thursday, 15 August 2013
http://www.allblogtools.com/tricks-and-hacks/add-facebook-like-button-for-blogger-blogspot-and-customize-it/
http://www.bloggersentral.com/2010/07/add-facebook-like-button-to-blogger_30.html
http://www.bloggersentral.com/2010/07/add-facebook-like-button-to-blogger_30.html
Links
Prashanth
at 01:49
No comments
http://www.allblogtools.com/tricks-and-hacks/add-facebook-like-button-for-blogger-blogspot-and-customize-it/
http://www.bloggersentral.com/2010/07/add-facebook-like-button-to-blogger_30.html
http://www.bloggersentral.com/2010/07/add-facebook-like-button-to-blogger_30.html
Wednesday, 14 August 2013
Google Plus button is a simple plugin that lets people quickly share content. It can also display how many have +1d your Posts. Lets find out how to include this button in every Post.
(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>
- It is always a good practice to first take a backup of Blogger Template before modifying any code in the template.
- Search for </body>
- Copy following code and paste just after code </body>
(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>
- Paste the following code wherever you want to display Google Plus button.
- 'Save Template'
- Now you can see Google Plus button appearing in your Post.
How to add Google Plus button to Blogger Post
Prashanth
at 23:35
No comments
Google Plus button is a simple plugin that lets people quickly share content. It can also display how many have +1d your Posts. Lets find out how to include this button in every Post.
(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>
- It is always a good practice to first take a backup of Blogger Template before modifying any code in the template.
- Search for </body>
- Copy following code and paste just after code </body>
(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>
- Paste the following code wherever you want to display Google Plus button.
- 'Save Template'
- Now you can see Google Plus button appearing in your Post.
The Facebook Like button is a simple plugin that lets people quickly share content on Facebook. It can also display how many have really liked your Posts. Lets find out how to include this effective way of sharing Posts on Social Network.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
</div>
- It is always a good practice to first take a backup of Blogger Template before modifying any code in the template.
- Search for <div class='post-header-line-1'/>
- Copy following code and paste just after code <div class='post-header-line-1'/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
</div>
- 'Save Template'
- Thats it.Now you can see Facebook like button appearing after your Post Title.
How to add Facebook Like button to Blogger Post
Prashanth
at 23:12
No comments
The Facebook Like button is a simple plugin that lets people quickly share content on Facebook. It can also display how many have really liked your Posts. Lets find out how to include this effective way of sharing Posts on Social Network.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
</div>
- It is always a good practice to first take a backup of Blogger Template before modifying any code in the template.
- Search for <div class='post-header-line-1'/>
- Copy following code and paste just after code <div class='post-header-line-1'/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
</div>
- 'Save Template'
- Thats it.Now you can see Facebook like button appearing after your Post Title.
Sunday, 21 July 2013
Free Blogger Templates/Blogger Themes for your blogspot/wordpress which would give your blogs a professional look. It is not easy to find an image oriented templates as there so many templates/themes available.
Here I tried to give the best templates available and I hope you won't get dissappointed... :-)
Best Free Blogger Templates/Themes for Blogspot and Wordpress
Prashanth
at 09:19
No comments
Free Blogger Templates/Blogger Themes for your blogspot/wordpress which would give your blogs a professional look. It is not easy to find an image oriented templates as there so many templates/themes available.
Here I tried to give the best templates available and I hope you won't get dissappointed... :-)
Tuesday, 16 July 2013
Saturday, 29 June 2013
Friday, 26 April 2013
Google sitemap is necessary for each blogger blog which would help search engines to index contents on the blog easily and effectively.Submitting Sitemap to Google Webmaster, will help you to optimize blog for SEO in Google Search. So, waste no time and get started..
Click Submit Sitemap
Alternate Method:
- Connect to http://ctrlq.org/blogger/
- Enter your blog URL as shown in image below and click Generate Sitemap.
- Login to Google Webmaster.
- Select your blog. Goto Optimization -> Sitemaps.
- Click on ADD/TEST SITEMAP highlighted in red at top right corner.
- Now select a part of sitemap code generated as shown in image and paste the code.
Click Submit SitemapAlternate Method:
- You can submit sitemap in blogger blog also.
- Go to your Blogger dashboard and under Settings – > Search Preferences
- Enable Custom robots.txt option (available in the Crawling and Indexing section).
- Paste the entire sitemap code generated here and save your changes.
How to Generate Blogger Sitemap and Submit to Google Webmaster
Prashanth
at 22:17
No comments
Google sitemap is necessary for each blogger blog which would help search engines to index contents on the blog easily and effectively.Submitting Sitemap to Google Webmaster, will help you to optimize blog for SEO in Google Search. So, waste no time and get started..
Click Submit Sitemap
Alternate Method:
- Connect to http://ctrlq.org/blogger/
- Enter your blog URL as shown in image below and click Generate Sitemap.
- Login to Google Webmaster.
- Select your blog. Goto Optimization -> Sitemaps.
- Click on ADD/TEST SITEMAP highlighted in red at top right corner.
- Now select a part of sitemap code generated as shown in image and paste the code.
Click Submit SitemapAlternate Method:
- You can submit sitemap in blogger blog also.
- Go to your Blogger dashboard and under Settings – > Search Preferences
- Enable Custom robots.txt option (available in the Crawling and Indexing section).
- Paste the entire sitemap code generated here and save your changes.
Saturday, 13 April 2013
Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file
Step 2:
- Go to Template>Edit HTML
- Check the Expand widget templates
- Copy and Paste following code before
</header>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
Step 3:
Search for first occurrence of code
<data:post.body/>
Now, replace this line with the following code:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
Show Blogger/Blogspot Posts with Thumbnail and Read More in Homepage
Prashanth
at 21:53
No comments
Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file
Step 2:
- Go to Template>Edit HTML
- Check the Expand widget templates
- Copy and Paste following code before
</header>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
Step 3:
Search for first occurrence of code
<data:post.body/>
Now, replace this line with the following code:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
As you already know, Blogger Popular Posts and Blogger Recent Posts Widgets will show Posts based on options selected in widget. Further you do not have any control as to what Posts will be shown.
Here I'll explain you how to create your own custom Popular Posts/Recent Posts widget using CSS and decide which Posts in which order it should be shown.
1) Log into www.blogger.com
2) Select your blog from dashboard.
3) Goto Layout -> click Add a Gadget.
4) Select HTML/JavaScript from add a Gadget options.
5) Leave Title part empty.
6) Copy and Paste following code in Content part and Save:
<style>
#recent_posts
{float:left;
width:200px;
border:4px double #4169E1;
background:#fff;
box-shadow: 5px 5px 5px #888888;
}
.post_title
{float:left;
width:200px;
height:20px;
padding-top:4px;
line-height:normal;
background:#4169E1;
}
.post_title a
{font:bold 12px Verdana;
color:#fff}
.recent_posts_topic
{float:left;
width:190px;
height:60px;
background:#F0F8FF;
border:2px double #FFFFFF;
margin:0px 0px 0px 2px;
}
.recent_posts_topic a
{font:12px Verdana;
color:#000;
text-decoration:none;}
.recent_posts_topic a:hover
{font:12px Verdana;
color:#1E90FF;
text-decoration:none;}
.recent_posts_topic img
{ border:0px solid #F0F0F0;
width:80px;
height:50px;
float:left;
margin:5px 0px 0px 2px;
}
</style>
<div id="recent_posts">
<div class="post_title">
<a>Popular Posts</a>
</div>
<div class="recent_posts_topic">
<img src="Your_Post_Image"/>
<a href="Your_Post_URL">Your Post Title</a>
</div>
</div>
If you want to add Post then copy and paste code highlighted in red after </div>.
Create your own Popular Posts and Recent Posts Widget
Prashanth
at 21:45
No comments
As you already know, Blogger Popular Posts and Blogger Recent Posts Widgets will show Posts based on options selected in widget. Further you do not have any control as to what Posts will be shown.
Here I'll explain you how to create your own custom Popular Posts/Recent Posts widget using CSS and decide which Posts in which order it should be shown.
1) Log into www.blogger.com
2) Select your blog from dashboard.
3) Goto Layout -> click Add a Gadget.
4) Select HTML/JavaScript from add a Gadget options.
5) Leave Title part empty.
6) Copy and Paste following code in Content part and Save:
<style>
#recent_posts
{float:left;
width:200px;
border:4px double #4169E1;
background:#fff;
box-shadow: 5px 5px 5px #888888;
}
.post_title
{float:left;
width:200px;
height:20px;
padding-top:4px;
line-height:normal;
background:#4169E1;
}
.post_title a
{font:bold 12px Verdana;
color:#fff}
.recent_posts_topic
{float:left;
width:190px;
height:60px;
background:#F0F8FF;
border:2px double #FFFFFF;
margin:0px 0px 0px 2px;
}
.recent_posts_topic a
{font:12px Verdana;
color:#000;
text-decoration:none;}
.recent_posts_topic a:hover
{font:12px Verdana;
color:#1E90FF;
text-decoration:none;}
.recent_posts_topic img
{ border:0px solid #F0F0F0;
width:80px;
height:50px;
float:left;
margin:5px 0px 0px 2px;
}
</style>
<div id="recent_posts">
<div class="post_title">
<a>Popular Posts</a>
</div>
<div class="recent_posts_topic">
<img src="Your_Post_Image"/>
<a href="Your_Post_URL">Your Post Title</a>
</div>
</div>
If you want to add Post then copy and paste code highlighted in red after </div>.
Change the background of images in your Posts like shadow behind images, remove borders of images as in shown in this image in simple steps.
Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file.
Step 2:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file.
Step 2:
- Go to Template>Edit HTML
- Copy and Paste following code before
</b:skin>
.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}
How to Create/Remove Shadow Behind Images in Blogger Posts
Prashanth
at 21:24
No comments
Change the background of images in your Posts like shadow behind images, remove borders of images as in shown in this image in simple steps.
Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file.
Step 2:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file.
Step 2:
- Go to Template>Edit HTML
- Copy and Paste following code before
</b:skin>
.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}
Blogger Templates Collection
Prashanth
at 20:17
No comments
We all know when it comes to themes provided in Blogger, Wordpress is the clear winner. And when you look those stunning mind blowing themes from Wordpress, we think of having those themes for our blogs.
Here I'am giving some of the wonderful themes translated from Wordpress and made compatible for Blogger.
Awesome Blogger Templates Translated From Wordpress
Prashanth
at 20:04
No comments
We all know when it comes to themes provided in Blogger, Wordpress is the clear winner. And when you look those stunning mind blowing themes from Wordpress, we think of having those themes for our blogs.
Here I'am giving some of the wonderful themes translated from Wordpress and made compatible for Blogger.
Blogger Templates with Content Slider Translated From Wordpress
Prashanth
at 19:32
No comments
Continue Reading→
Subscribe to:
Comments (Atom)
0 comments: