Rebel Blogger Template

• Live Demo
• Download Theme

Template Name : Rebel Blogger Template

Template Author : themelib

Designer : http://wpthemedesigner.com/

Basic Instructions : How to install a Blogger template

Descriptions : - 2 Columns, wp theme,Fixed ,Ads Ready,Fresh and clean Blogger template,, Gray color background,,Nice top menu bars,Top RSS,Search gadget ,Followers,Blogroll,Achieves,

Netdohoa Blogger Template

• Live Demo
• Download Theme

Template Name : Netdohoa Blogger template

Template Author : netdohoa

Designer : http://www.netdohoa.com

Basic Instructions : How to install a Blogger template

Descriptions : - 2 Columns, Fixed ,wp theme,Ads Ready,Fresh and clean Blogger template,, Gray and white color background,,Nice top 2 menu bars,Search gadget ,Followers,Friends ,Categories, Blogroll,Achieves,

How to Add Bookmark Us Hyperlink to Blogger Blogs

For your website to have traffic, people should remember your site and visit again. This problem was solved long time ago with browser's Bookmarks. Still, people are lazy and usually are not using it, unless you remind them. so you can add a quick "Bookmark this page" link in all your pages. Clicking on the link prompts the user with a dialog box to add the specified URL to the Favorites list.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

</head>

And immediately before it, paste this code:

<script src='http://yourjavascript.com/0514111300/bookmark_this_page_royaltutor_net.js' style='text/javascript'/>

Now click Save Template.

Then, Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type and add the code given below

<a href="javascript:bookmarksite('WEBSITE NAME GOES HERE', 'URL GOES HERE')">Bookmark This Site</a>

and to change the text to image / button , we should replace the word Bookmark This Site in the code with the following

<img src="URL-OF-BOOKMARK-BUTTON"/>

Finally save your template and you are done!

How to Change Feedburner Email Subject Line

One of the best ways to build a loyal readership for your blog is to encourage visitors to subscribe via e-mail or RSS feed. FeedBurner is one of the most popular feed management solution that is available today for absolutely free of charge. Many bloggers use FeedBurner to manage their blog’s feed.

I noticed that the email subject line for my blog feed was always “Royal Tutor”. This does not give any information about what the email is about and the subscriber has to open the email before he can see the post title. Here’s how to tweak your FeedBurner settings so it will create dynamic Subject lines

1. Log in to your Feedburner account.
2. Click the name of the feed you want to update.
3. Click the “Publicize” tab.
4. Choose "Email Subscriptions" from the navigation menu 
5. That’ll open a sub-menu. Still in the left sidebar, click “Email Branding.”
6. Change what you want your subject line to be under the "Email Subject/Title" box.





If you update your blog more than once a day, click the box that says, “Change Subject when an email has 2 or more items” and use following codes:Examples

• To replace email subject line with your "last post title"

${lastestitemTitle}

• To replace email subject line with your "last post title - blog name"

${latestItemTitle} - Your blog name

You can also use

Your Blog Name - “${latestItemTitle}” plus ${m} more

Your Blog Name (in this message: ${n} new items)

${n}: shows the total number of items
${m}: shows the number of items beyond the latest

So what are you waiting for?

Make Blogger Post Title Unclickable In Single Post Page

 
If you want to make your blog post title unclickable in single post view then this tutorial is present for you. You might have notice that the titles of single post in this blog are unclickable.If not, view this post title. Then you see its unclickble. Now visit the homepage of this blog, then, look at any of the post titles. You can see the title is clickable and easily go inside the post by clicking the title of a post. So let’s do it,

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

<b:if cond='data:post.title'><h2 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h2>

Please note that this code block not be similar in your template. I use H2 tag. But in your case it might be H1 or H3Now, replace the above code with the following:

<b:if cond='data:post.title'><h2 class='post-title entry-title'><b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.link'><data:post.title/><b:else/><b:if cond='data:post.url'><data:post.title/><b:else/><data:post.title/></b:if></b:if>
<b:else/><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></b:if></h2> 

 Now save the template and See how it work.

Collapsible Message Panels On Blogger

When I was browsing a design blog called "impressivewebs", I found a header that could collapse itself. Impressed by the effect, I sat down to work out the logic and it was pretty simple to achieve it on blogger. In this article, I'll illustrate the collapsible effect with simple message panels while you may apply the same logic to your header or post area or to any widget of your choice.

COLLAPSIBLE MESSAGE PANELS ON BLOGGER - LIVE DEMO

So, take a look at the live demo by hitting the link above. I guess you liked it... Interested to add this on your blog, as well? Then, follow the steps below.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Just paste the following piece of code above the line mentioned at step 1.

.message_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 383px;
}
.message_list li {
    padding: 0;
    margin: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8Nk1OAeldr37ZsPpT36Hg2PI_gQers4E6MhZ7NH_IG2jCe9OfVGDkiU1jHUym0YaMJTQofYiXI0ve5QZWHlaxbsDg2eLzY78a2-eDGo0BA8V3I_2OcADzV51fYKVpFGuRK-7_CxfH4zp/s800/message-bar.png) no-repeat;
}
.message_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
}
.message_head .timestamp {
    color: #666666;
    font-size: 95%;
    position: absolute;
    right: 10px;
    top: 5px;
}
.message_head cite {
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}
.message_body {
    padding: 5px 10px 15px;
}
.collapse_buttons {
    text-align: right;
    border-top: solid 1px #e4e4e4;
    padding: 5px 0;
    width: 383px;
}
.collapse_buttons a {
    margin-left: 15px;
    float: right;
}
.show_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSMqWjFgSh9IkKZUWtnlgciqSRDaqMwogVWUsLOJksv2NzQ2KScfgS56nEUrjvg7hFRZvSdyXEiq4On8hErX22Ab27QkzDruvBw0JuGGaGDW9y94_nYW2Z-XrMLFqOLj5rO3ly_g951dUo/s800/tall-down-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.show_recent_only {
    display: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8251ZTR-UfD_kO-USlw4PM2b7NCoZYtSEE-BWQ0euWxwEvzJuMIoXvoHO39Ew1jbClYe1IBpjK_YxJpJ7yCk7CpGIpU3AALYu57D3uB0W73n0JQ0g5tvtGynOno7zOrJLV9UKtZnpupzl/s800/tall-up-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.collpase_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDp1ZlordZf1XLJbKXgKqGHXsEfwbLJOij_XeKWI2aq3sc3nQFQxplUuLgQ33T0ylDcofS-d4Jk9X038uVYt6ChN21MkuUNJ9Q36qnr2b_bm0KU2d2snkXcAfeT7p2YTq1nW9NtROZIRnE/s800/collapse-all.png) no-repeat right center;
    padding-right: 12px;
    color: #666666;
}

Note: I've used an image for the title part of the image. You may replace the same with gradient colors using CSS. Refer the following article to do the same - Cross-Browser Gradient Effect Using CSS. 
3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();  
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
});
</script>

Note: Do not include the first line in the script mentioned above if you've already added the latest jquery file on your blog. 
5. Now, paste the following piece of code in the document - HTML FOR COLLAPSIBLE EFFECT, anywhere inbetween your <body> and </body> tags - probably within the post editor (or) below <div class='main-wrapper'> (or) <div class='columns fauxcolumns'>.
6. That's it! Save your template or publish the article and view the same to enjoy the effect.

HTML CUSTOMIZATION - FOR CODE MENTIONED IN STEP 5
If you wish to generate the time for your messages (displayed at the top right) by default, then change the text that appears in between  <span class="timestamp"> and  </span> tags. Similarly, you can change the text from "NAME" and "CLIENT" with your names and clients respectively. I've added my name and a small message in the first few div tags for reference. Check the same (code mentioned in text document at step 5) for your reference.

I've tested the above effect on all the major browsers which includes, but not limited to, IE, FF, Chrome, Safari and Opera. Let me know if you find some bugs with the above coding. If you need assistance in extending this effect to other elements on your blog, then leave a comment below and I'll help you out when I'm free:) Do share your opinions about the article via comments!