Post Background Color Background Image

Different background picture for each post and each post appear in different color background. Do you know that you can have your each blog post displayed in various styles with different background colours or different background images? Yes it’s true you can show individual blog post in colored background or with different image background. Implementing this latest blogger tricks you can make your blog stand unique in various aspects. Let’s say for example, if you accept guest posts and have multiple authors contributing articles to your blog, this proves an easy way to differentiate the post appearance according to individual author. Following this blogger tips you can also make a specific post stand-out among other hundreds and thousands of posts.

Below I have explained very carefully and in plain English. I believe you will enjoy reading this blogger unique trick and work with the codes for giving your blog a unique look.

Each Post in Different Color or Different Background Images.

How to place different background picture for each post?

How to make each post appear in different color?

...............................................................................................................
Instructions to Note
...............................................................................................................

Let me also make you clear that there in no need to back up the template codes of your blog. We will not work with template instead we will go to regular create a new post option in blogger. This blogger hack is done by wrapping your Post content into a "div" element. You can apply these setting to your already published posts too and you may change, remove it at any point of time.

...............................................................................................................

Code for Changing Color of the Post Background in blogger

...............................................................................................................

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Your post content goes here....
</div>

Place the purple code at the end of your blog post.
Replace the part in green with your preferred color hex value.
Place the red part of the code at the beginning of your blogpost.
Make sure you replace the part in green" Your post content goes here...." with the post content.
You can also edit padding, we have added some padding so the text does not move too close of far away from the borders.

...............................................................................................................

Code for placing Background image behind Post in blogger

...............................................................................................................

<div style="background:url(URL ADDRESS OF THE PIC) no-repeat;">
Your post content goes here....
</div>

Place the purple code at the end of your blog post.
Replace the part in green with the URL of the image.
Place the red part of the code at the beginning of your blogpost.
Make sure you replace the part in green" Your post content goes here...." with the post content.
You can also edit no-repeat, we have added no-repeat, so the image does not repeat itself.
If you use repeat you can use small pattern images so that it repeats itself to cover the whole post area.

...............................................................................................................

Here's the Example on How to Place a Code:

...............................................................................................................

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
We bring you the best in blog, blogging tricks and tips. thebest-technic.blogspot.com provides an opportunity for bloggers to come together to collaborate, learn and experience a difference. We bring you all tutorials like Earning online, templates hack, Google Adsense tricks, free blog hosting and many more. Hope this guide will help those who are finding the way around, just like me...
</div>

............................................................................................................... 

Suggestions:

...............................................................................................................
Work with the codes in EDIT HTML Post editor.
Save code in template editor in blogger settings for future use.
If you don't want to display background color or background image than you may simply remove the code by deleting the red, green and purple codes from blog post body or settings.



The Best Technic

Read more »

Change Default Blogger Anonymous Avatar Comments

Changing Default Blogger anonymous avatar on threaded comments. After Blogger announced new feature of threaded comment, we still can costumize avatar for whose comment with 'anonymous' or 'Name/URL'. At first time Blogger using blank image http://img1.blogblog.com/img/blank.gif, so we can hack the template with background for avatar.

Now Blogger using avatar with URL  http://img1.blogblog.com/img/anon36.png, and we can't hack this image with background. But we should use jQuery script to hack this. And Let's we go... :)

To change default Blogger anonymous avatar, follow simple steps below:

1. Go to Template -> Edit HTML
2. Find </body>
3. Add this code just before </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'your-avatar-url-here')
.ssyby('blank')
</script>

4. Save

Replace the red text with your avatar URL. Or you can select below URLs to replace the link.

1. Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtl2vdSIhOKj6kZq2Cnxme1XlhWguiiERCwu-NhQ4iDkE2uh_oEAjenmdZTtpn3ePQxx7uplgHFuzx6gd7pZ31ebsrW3Dbh-vi5S_PD9pLSKrrcCarSlqyXQDj93qJLEesVVmNBk6EiM/s1600/blogger2.jpg

2. Anon6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIE9FJZM6DsINMEAVhlF8qQH6vMz5IUI2JqeoOWV4IkXvPEqlqhZt96rhQ9xYROBWGDBeCyFuPq5_0iuhSVyXtH903VGv4oSONefOX8OBMB7JutAVJ_SSi4LoC40cYjlPX-8bqzM5__Q/s1600/anon6.png

3. Anon7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjXzPBoiD2smAlErw8dgSivXQ80F31wr3KFtyAGE114kvzx8_YMy9T8yB2OCA8cC1r1hjBxUYBhkOEqDgjWh5Ecf_aVZnCoMqCYgwAwYoWgbsBSEtSs25bz9RVMNhVORBQKBaNwRJXd-E/s1600/anon7.jpg

Or please make own avatar :)

The Best Technic

Read more »

Add Floating Facebook Like Box for Blogger

Many tutorial gives you how to add floating facebook like button. Now I came up with new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.

Adding Jquery Plugin

1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing </head> tag in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

Ignore thies step if you have added Jyquery plugin to your blog.

Adding Widget Code

1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiscGDiBQ22fekkmNSX_u5u5jdynKiWhu5XLHcKqJ_BqQ3P5CHaJ57FbHlCpZ-foN-iAzLxmkwb4eNMhOYFyDP4W3BIjMAI4zYxRgFytpwSc9maIC8Nr7u0ii0bNAaAkbTks_utrFqU9Kw/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsibarasok&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe><span><a href="http://thebest-technic.blogspot.com/2012/09/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>

Replace http%3A%2F%2Fwww.facebook.com%2Fsibarasok, with your Facebook fan page URL.


The Best Technic

Read more »