Center or Right Alignment of Blogger Header Image

In general uploaded your header image via page element option you will see that image will automatically align to the left and there are no option for right or center alignment. For those who has been facing this problem we hope this article can help you have more control over the header positioning, Using CSS (Cascading Style Sheet) you can make this easily align right, left or center.

At first you need to check the image placement method you choose when you uploaded the header image to Blogger.

• If you used “Behind title and description” option.

1. Go to Dashboard
2. Template > Customize > Add CSS
3. Add the following snippet of code,

To align center

#header-inner {background-position: center !important; width: 100% !important;}

To align right

#header-inner {background-position: right !important; width: 100% !important;}

• If you used “Instead of title and description” or “Have description placed after the image” option.

To align center

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

To align right

#header-inner img {margin: 0 auto 0 300px;}

Enjoy!

Auto Read More Button With Thumbnails For Blogger

By default on blogger you have the option to add a jump break to your blog post, Using this option blogger displayed only a part of your posts on index pages and the link to read the full post will be below. This is a conventional read more option provided by blogger in post editor. In this conventional read more hack, every time you need to insert code in post.

In today's post we will share auto read more hack with thumbnail for blogger blog, This script will automatically create post summaries with thumbnail. You don't need to add any extra code in every blogger post and if you insert image, it appears thumbnail.

Applying Auto Read More

• Go to Design > edit HTML
• Backup your template
• Tick on "Expand Widget Templates"
• In the code window Find this code..

<data:post.body/>

•  Replace with this code below,

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

• Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Customizing the code above :

You can customize the 'Read more' option by changing the value of the variables below:

1. If you want to change image thumbnail size then find these numbers 100 and  120
2. To change post cut height without image  find these line of code - summary_noimg = 430;
3. To change post cut height with image find these line of code - summary_img = 340;

Adjust the Alignment of Sidebar on Blogger

If you are new on blogger, you get a ready-made page layout that allows you to post your articles or add new widgets. Many bloggers prefer changes to their layout to modify the blog and keep them in a neat and clean format, By the using of CSS (Cascading Style Sheets) you can adjust the alignment of your sidebar. Here in my post i will share how to align your blogger sidebar?

To Align Blogger Sidebar

Here we go :

• Login to your blogger account.
• Go to Dashboard > Design > edit HTML
• In the code window find these lines..

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: right;
}

Change the value of alignment 'right' to 'left'. Code will look like below:

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: left;
}

Save it and you are Done!

Before you leave:

• Do you find this article helpful then please share it via tweet, like or pin it buttons below.
• Any suggestion or question please post in the comment below.