How to install blogger template 2014

Recently blogger have updated their interface so many people have asked me how can we upload templates in the updated blogger interface so for their solution i have published this post and hope it will help you. In this tutorial i am going to show you how to install blogger template in the new updated version of the blogger.just simple follow the step and install a blogger template in updated blogger interface.

1. Login to your blogger account

2. Now just select Template and you can see bellow button at the right hand side.

3. Now just click on backup / restore button and one box will pop up (you can see it in bellow snapshot)

4. Now simply browse your template and click on upload and you have done !

You can also change the arrangement of the widgets using layout.

Read more »

MXfluity Blogger Template

Demo Download Template Installation

MXfluity is a personal and photograhy responsive blogger template layout. It has 2 columns with right sidebar or left sidebar and accordion slider. Default template color is black, white and red and easy to change. This template have one top navigation menu. Search box is using JSON to see the search results. Thread comments with emoticon, recent comments with avatar, SEO optimized, and much more.

Read more »

How To Change Your Blogger List Post Into a Grid or Gallery View

Generally, all default blogger template are arrange in list style, while some bloggers (especially those who run a fashion blog) have been looking for a way to style their blogger template to a grid  or gallery style. I have receive couple of emails from different bloggers asking, if there is a way they can style their blogspot template into a grid style. Now here i come with a hack that can do the job perfectly well.

This hack will position your post thumbnail at the top, and align the post summary at the bottom with an automatic jump break or "read more" link, which will appear at the end of each summary after a specified number of characters. Bigs-up to Muhammad Hassan on these.

The hack will only work on homepage, archive,  label and search page (not with Google custom search.) Love that? Let's get it done then.

Turning List Style to Grid Style

• Go to your blogger dashboard
• Click on Template > Edit HTML
• Use ctrl F to find </head> and paste the following code above/before it.

<!-- Grid Style Hack For Blogger By MyBloggerStyles.blogspot.com Start-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot; ;

summary_noimg = 400;

summary_img = 180;

img_thumb_height = 130;

img_thumb_width = 220;

</script>

<script type='text/javascript'>

//<![CDATA[

/*

Grid Style Hack For Blogger By MyBloggerStyles.blogspot.com

*/

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>

<style type='text/css'>

.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}

.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}

.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}

.post-footer {margin-top:20px;height:20px;}

.post-labels {display:none;}

.mobile .post {width:auto;height:auto;}

.mobile .post-body {height:auto;}

</style>

</b:if>

</b:if>

<!-- Grid Style Hack For Blogger By MyBloggerStyles.blogspot.com  End -->

Now search for <data:post.body/> and replace it with the following code. You may find 2-3 occurrence of this line, but don't replace the first occurrence with it.

<!-- Grid Style Hack For Blogger By MyBloggerStyles.blogspot.com Start -->

<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'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>

<!-- Grid Style Hack For Blogger By MyBloggerStyles.blogspot.com End -->

Customization

• If you don't want to show post image thumbnail, change "yes" to "no"
• "400" represent the number of characters to be displayed if a post has no image.
• "180" represent the number of characters to be displayed if a post has an image, but only the first image within the post structure will be use as thumbnail.
• The height of the thumbnail is "130"
• The width of the thumbnail is "220". Both the thumbnail height and width value can be adjusted to your own preferred value.
• You can change the word "Read More..."  to something more enticing like "Continue reading..." Better still, replacing the read more link with image button will be super-cool.

Note: You may find your Home, Newer, Older post link missing. Don't worry, here is a fix for it. Go to the Edit HTML section of your template, find <b:includable id='nextprev'> and paste the following code after/below it.

<div style='clear:both;'/>

Save your template. Taaddaaaa! You are done.

Read more »

How To use Automatic Read More Jump Break With Thumbnail On Blogger

The steps involve in adding a automatic jump break to your Blog post is simple if you follow the instruction carefully, jump break makes your blog look neater and make ease for reader to read summery of your post, the posts will be displayed with just a short summery on the home page and a link to read the full post will be below. the advantages of break jump was that, it will reduce the content on your blog and speed up your browser to load your blog much faster, Also applying jump break to your blog, allow visitors to click on your summary before having access to the full post, it increases page views.

Update 06/12/2012

If you have been using this hack before, you may observe that it has stop working. Please find http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js and replace it with http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js

We are sorry for any inconvenience this may have caused you.

> Your posts will automatically be displayed as short summary's with a read more link.

> An image from the post will be re sized into a thumbnail and displayed beside the summery.

> You can choose how much text is displayed in the summery.

> The Read more will also apply to all your previous post

> Your thumbnail size can also be adjust to your preferred size.



To get this apply to your site, follow the few steps below;



> Login to your blogger dashboard

> Click Design

> Click on Edit Html (Remember to back up your template)

> Tick/Mark "Expand Widget Templates"

> Press ctrl F on your keyboard, the find </head>

> Copy and paste the code below, before </head>

 <script type='text/javascript'>

var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

> Find this next code again <data:post.body/>

> Replace it with the code highlighted in yellow below;

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<div style='clear: both;'/>

<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>

</b:if>

</b:if>

Note: <data:post.body/> must be cancel before you replace it with the code above, and the highlighted "Read more" above can be change to your own text.



> Save your Template

Then you are done, if your post contain an image, it will be automatically use as your thumbnail.



Please feel free to use the comment box if any problem persist, and use the share button below too.

Thanks.

Read more »

How To Show Or Hide Blogger Widget On Homepage, Post Pages, Static Pages, Or On Selected Pages

It is always important that you control how widget function in your blog, because their are some widget that are suitable mostly for homepage only while some makes sense post pages, archive pages, and so on. Most frequently asked question by my blog readers is that how can they hide a particular widget (especially recent post widget) from displaying in homepage in other to reduce the load time of their homepage, while some are interested in showing a widget on only homepage. So if you are also interested in controlling your widget performance, then this tutorial will trash out your worries.

We will be using different conditional tag to selectively display widget on any preferred pages.

How To Show Widget Only On Homepage

Use the following conditional tag to show widget on homepage only.

<b:if cond='data:blog.url == data:blog.homepageUrl'>



WIDGET CODE HERE



</b:if>

How To Hide Widget On Homepage

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



WIDGET CODE HERE



</b:if>

How To Show Widget Only On Static Pages

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



WIDGET CODE HERE



</b:if>

How To Hide Widget On Static Pages

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



WIDGET CODE HERE



</b:if>

How To Show Widget Only On Archive Pages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>



WIDGET CODE HERE



</b:if> 

How To Hide Widget On Archive Pages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>



WIDGET CODE HERE



</b:if> 

How To Show Widget On A Selected Post

<b:if cond='data:blog.url == "URL Of Selected Post"'>



WIDGET CODE HERE



</b:if>

How To Hide Widget On A Selected Post

<b:if cond='data:blog.url != "URL Of Selected Post"'>



WIDGET CODE HERE



</b:if>

How To Wrap Widget With The Conditional Tag

The conditional tag can be applied to any widget using the same procedure.

• Go to your blogger dashboard
• Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)

Every widget has a code structure, but you can easily locate a widget using the widget title. Each widget code structure will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>

<b:includable id='main'>





LARGE CODE





</b:includable>

</b:widget> 

Wrapping the widget with any conditional tag, the final result will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>



LARGE CODE



</b:if>

</b:includable>

</b:widget>

The conditional tag used above is just an example, you can choose any condition tag of your choice, and the same procedure applies to all.

Any queries or contribution/appreciation is highly welcome, and don't forget to share it with friends/followers.

Read more »

Diapason Blogger Template

Demo Download Template Installation

Diapason Blogger Template is a professional blogger template. Diapason Blogger template is three column blogger template having left and right sidebar. Diapason Blogger Template have inbuilt social subscription widget with navigation menu and in this blogger template you can add the widget with header. Diapason Blogger Template have awesome navigation menu and having auto posts summarization effect. Diapason Blogger Template can be use for news, technology, and marketing blogs.

Read more »