Add Background Color To Post Titles In Blogger

 Change Post Title Color in Blogger 

Add an Icon to Blog Post Titles with CSS

A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.

Fully Customize The Post Titles

How To Fully Customize The Post Titles On Blogger

Many of the templates both from the Blogger template designer and Custom templates leave the post titles fairly standard.When it comes to fonts, sizes, colors etc.. the post titles on almost all blogs have the same design.But you can add some spice to your post titles without too much hard work and adding even a few minor customizations can make all the difference.Every Blogger template has a small piece of Css that controls how the Post titles appear and by adding or changing small pieces of code we can change the appearance.

So in this post among other changes to your blog titles we will see, How To Change The Size, Change The Color, Change The Background Color or add A Background Image, Change The Font Family and more..

Table of Contents Page With Thumbnail

Create Table of Contents Page With Thumbnail in Blogger

Table of contents page is also know as Sitemap.Table of contents is one of the key factor for getting traffic for your blog or website.In table of contents all the posts written are shown in an order manner.

Through your sitemap one can get to know about your posts.So it is the source of traffic for your blog.The sitemap with atom or rss doesnt look attractive .

Create Table of Contents Page and from a Specific Label With Thumbnails

Create Table of Contents Page and from a specific label With Thumbnails in Blogger

Table of contents page is also know as Sitemap.Table of contents is one of the key factor for getting traffic for your blog or website.In table of contents all the posts written are shown in an order manner.

Through your sitemap one can get to know about your posts.So it is the source of traffic for your blog.The sitemap with atom or rss doesnt look attractive .A pro blogger named Akith Kumar Singla brought a unique and attractive design using Thumbnail in blogger.I applied it to my blog.

It looks like the icon:

ΠΩΣ ΑΦΑΙΡΩ ΤΟ «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …»

ΠΩΣ ΑΦΑΙΡΩ ΤΟ «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …»

Όταν πατήσουμε πάνω σε ένα link ετικέτας ο blogger μας εμφανίζει όλες τις αναρτήσεις που περιέχουν την συγκεκριμένη ετικέτα μαζί με ένα μήνυμα πάνω από αυτές «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …» το οποίο είναι περιττό και πιάνει το χώρο πάνω από τις αναρτήσεις του blog μας και καλό θα ήταν να το αφαιρέσουμε.

 

Recovery Blog’s Post If Your Blog Deleted

How Can You Get Back Your Blog’s Post If Your Blog Deleted By Google 

 As we give the List of Deleted Blogs by Google deleted some blogs and we also give some links of deleted blogs and Google is suddenly deleting their blogs by giving some reasons which is related spams and violence etc. and as bloggers make their effort with them and give you the best content on the daily basis and some one is lost their 5 and 6 years of hard work and many bloggers are living from blogs by adsense and they also lost their important and valuable posts which are very important from the eye of admin and also from the visitors, and if Google OR Blogger deleted your blog and you didn’t take backup of your blog’s post and template then there is also a second way to take your blog’s content back but this way is little sticky and you have to do hard work with it.

Break Posts Into Multiple Pages

How to Break Posts Into Multiple Pages In Blogger

For today's example I am going to use a four page post breakdown. You can actually break a post into as few as two or up to an unlimited number of pages.  I thought four would get the point across.

ΕΜΦΑΝΙΣΗ ΑΝΑΡΤΗΣΕΩΝ ΣΕ GALLERY STYLE

ΠΩΣ ΝΑ ΕΜΦΑΝΙΖΟΝΤΑΙ ΟΙ ΑΝΑΡΤΗΣΕΙΣ ΤΟΥ BLOGGER ΣΕ GALLERY STYLE

Με την προσθήκη του παρακάτω κώδικα μπορείτε να αλλάξετε το στυλ εμφάνισης των αναρτήσεων του blogger από list view σε grid view ή αλλιώς σε gallery style. Ο κώδικας αυτός μπαίνει μέσα στο πρότυπο πρίν την ετικέτα </head> Ρυθμίστε το πλάτος width:300px; ανάλογα με το πόσο είναι το συνολικό πλάτος ανάρτησης που διαθέτετε και το πόσες αναρτήσεις θέλετε να εμφανίζονται ανα σειρά. Μπορούν να εμφανίζονται από 2 μέχρι 5 ανάλογα πάντα με το πλάτος που διαθέτετε. 

Insert HTML-CSS-Javascript Codes in Blogger Posts As Plain Text

If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.

 

 

Change Width/Height of Popular Post Thumbnails in Blogger

How To Change Width/Height of Popular Post Thumbnails in Blogger

Few days’ a go a user messaged me on Facebook that, he wants to resize Blogger popular post thumbnails. This is not the first time we have received a request from our reader, so we decided to write a detailed tutorial on it. Firstly, we thought that it is not possible but later while playing with a bit of XML Coding we were able to change the size of Popular post thumbnails. To be honest, we were surprised to see that it was so straightforward to resize Thumbnails. Therefore, today in this tutorial we will be sharing a million dollar technique through which anyone can modify the Widget/height of the popular post thumbnails in blogger.

Display Related Articles Below Posts

How to Display Related Articles Below Posts in Blogger

People always wonder that how many blogs are able to display something like a list of “Related Articles” just beneath each and every post. It not only helps the user to find the next relevant topic but also engage them for a longer period. Recently, one of our users asked us that How to Display Related Articles Below posts in Blogger? Technically, there are a lot of ways of displaying related articles or posts but most of them are not highly targeted. Either they don’t attract people or they provide totally irrelevant results. Today in this article, we will show you How to Display Related Articles below posts in Blogger?

Why to Add Related Articles below posts in Blogger?

Sometimes you may want to give some extra stuff to your visitors so that they can engage and spend more time on your website. Engaging readers for a longer period of time is something that is extremely useful for not only growth but increase in the revenue of a website. The more time people spend on your site, the more chance of getting good sales through affiliates, Adsense or etc.

When people are engaged on your site, it means that your bounce rate would go down which is indeed a great sign for those site owners who always complain about high bounce rate. For those are not familiar with bounce rate check this article.

Yet, these are the few perks of displaying related articles below your posts because it really makes your site looks professional plus provide great engagement possibilities.

How to Add Related Articles Below posts in Blogger?

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending </head> tag and just above it paste the following code.

<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtAippEOorCfzbNJwimKhCScJiAg0Jr991H9UygyaqUL0eCHh-xRSsPAfebXHyVj3fLGjNfiq0luiUu__6aCl_aoTXusSA9kVElKujVcTzaxmPYqjYuJ9eu___rxejCKkm6D6McXs7S-H/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtAippEOorCfzbNJwimKhCScJiAg0Jr991H9UygyaqUL0eCHh-xRSsPAfebXHyVj3fLGjNfiq0luiUu__6aCl_aoTXusSA9kVElKujVcTzaxmPYqjYuJ9eu___rxejCKkm6D6McXs7S-H/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}

var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;

if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>

In the template, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer-line post-footer-line-1'></div>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>

Congratulations: You have successfully learned how to display related Articles below posts in blogger. Go and preview your posts to see everything is working in an order or not.

We hope this tutorial has helped you in displaying related Articles below posts in blogger. Related articles helps a lot in reducing your bounce rate and gives a lot of great sales.

http://www.mybloggerlab.com/2013/09/how-to-display-related-articles-below-posts-in-blogger.html

Display Featured Posts in Blogger

How to Display Featured Posts in Blogger

You would certainly have some stories or articles in your blog that you would like to highlight to your readers. It could be anything, a cheap deal offer, launch of new product and more. This is not a new feature for blogs, more commonly known as “Featured Posts” or “Featured Content” that is displayed mostly on homepage at the very top of the homepage of the blog. If you are a Blogger user and have seen those premium Blogger templates that displays featured post in various ways then you have arrived to the right place. Today in this article, we will show you how to display featured posts in blogger.

Break your Post into Multiple Pages in Blogger

How to Break your Post into Multiple Pages in Blogger

Are you looking for ways to break your posts into pages? You might have seen some popular blogs who have broken their long post into pages in order to maintain the interest of the users and it also helps in reducing the bounce rate. Today in this article, we will show you how to break your posts into multiple pages in Blogger - Post Pagination.

Why to Break any Post into pages?

As we have already mentioned above that it is used to build the interest of readers, if your post is too long then it might make reader get bored. Secondly, it is good for search engines as well, as it helps the search engines robots to crawl the pages more effectively and easily.

Therefore, if your posts are too long then you must use post pagination or break that post. And, here today we will teach you this amazing technique to break blogger posts into multiple pages.

How to add Audio Files to Posts in Blogger

Do you want to add audio files to posts in Blogger? Sometimes you do want to include some audio track to your blog, which could either be a podcast or something related to your content. Recently, one of our users asked us how to add audio tracks to post in blogger. We initially thought, we might have covered this article but we haven’t. Therefore, today in this article, we will show you how to add audio files to posts in blogger.

Smooth Featured Post Slideshow

Smooth Jquery Featured Post Slideshow For Blogger

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

Image Morph Effect To Post Images

Add An Amazing Image Morph Effect To Post Images On Blogger

 In the last post we had a CSS Zoom effect for images on your blog.Now we are continuing with image effects this time with something really awesome.This effect has a number of layers but as with all our tutorials it can be easily added to your blog even for a newbie.

So what is the effect ? The main feature is on hover images will spin and morph from square to round, to help this effect images will also have a 3D style.Below I have created an animated GIF to give you an idea of how it looks, check out the demo for the real thing (On the demo page hover over any of the images in the post).

Create JQuery Featured Content Slideshow

How To Create JQuery Featured Content Slideshow

Create JQuery Featured Content Slideshow

Add Seperator In Blog Posts

How To Add Separator In Blog Posts In Blogger

Separator In Blog Posts

 

Featured Content Slider

17+ Featured Content Slider Using jQuery

You should already know about JQuery Featured Content Slider.Today we will see how to add 17+ jQuery featured content sliders / slideshows for your blog or website.Almost all bloggers use the contents, which included slider.Contents are a great way to show a lot of content in a smaller area of ​​a web page or a blog. Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.