Blogger Readmore Feature

Yesterday, Blogger has announced another Blogger Birthday feature. Blogger has add readmore feature on your post. Now you dont need to add any code because this new readmore feature ease us to choose whether show full post or break post.

Blogger call this feature  Jump Break. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a "Read more" link to the full post page where your readers can keep reading.

How to use this blogger readmore feature?
There are two ways to insert a "Read more" jump to your posts.

If you use the new post editor , you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.

If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding <!-- more -->  where you want to break your post.

Want to change the "Read more" text to your own style? No problem. You can edit the "Read more" text by clicking Layout and then Edit the Blog Posts widget.

 

What if I use template with automatic readmore feature? Will discuss on the next post.

Source : Blogger Buzz

Blogger New Post Editor

Actually New Post Editor have been announced at June 2008 access through Blogger Draft. And now this feature have been launched officially on Blogger. This is one of many features announced as part of Blogger's 10th birthday. Blogger has developed new post editor embedded with multi features. You can set this new post editor, access through Setting - Basic , find the lowest section, at Select Post Editor, then choose Updated editor.

Improved Image Handling and HTML

At Old Editor, when you upload image you'll get new pop up window with maximum 5 image in every uploading. This is really wasting time. But now with the new post editor it will appear as a thumbnail in the image dialog box. That way, you can upload several images at once, and then add them into your post at your convenience. The thumbnails will be available until you close the post editor.
If you use Edit HTML, especially to add tables and other advanced HTML to your posts, you should find that the new editor has a number of enhancements to make the experience less frustrating, or, dare we say it, even pleasant.

Other Features

• Easy link editing in Compose mode. Just click a link and you’ll have the option of changing its URL or removing the link.
• Full Safari 3 support on both Windows and Macintosh. The old editor is pretty quirky on these browsers, but the new editor works as you’d expect.
• New Preview dialog that shows your post in a width and font size approximating what you’d see on a blog.
• Placeholder image for tags (such as those from video embeds) so that you can see and drag them around Compose mode.

Source : Blogger in Draft

Cosmetic Girl

As its name, Cosmetic Girl is a feminine blogger template. Its girl illustration at the header make this template really suits your beauty, fashion, cosmetic, make up, even personal diary blog.

Demo | Download

Installation Setting

1. Download this template by clicking download link. Save xml file. Remember, save it, no need to open
2. Open your blogger dashboard, click on Layout>Edit HTML
3. Click Upload button, and pick xml file
4. Save it

Navigation Menu Setting

1. Access through Page Element
2. Click on Top Tab widget
3. Fill URL and anchor text
4. Save
   

-------------------------------------------------
THE CONTENTS OF THIS TEMPLATE IS MADE BY CEBONG IPIET.
PLEASE BE RESPECTFUL AND DO NOT REMOVE CREDIT FOOTER LINK WITHOUT MY PERMISSION.
YOU ARE ALLOWED TO DISTRIBUTE BUT NOT ALLOWED TO ADD DISTRIBUTED BY ON FOOTER

How to Set Label Cloud in Blogger Layout?

Have too many labels/categories on your post?Need a lot of space on your sidebar only for categories? There are many way to fix this problem. You can divide label become two or more , or use label cloud widget.

An older version of Label widget, is only list type. As I said, this type need a lot of space. Label cloud become an alternative to simplify label display. Now you dont need to add any complicated script to get Label cloud. Blogger has installed cloud type for Label widget. Note: this is only text cloud not animated cloud widget.

How to set label cloud on my template? Go to Page Element>Add Gadget, choose Labels gadget. There are two options, list type or cloud type to display. You also can choose which labels you want to show. Such a helpfull featured.

List of Blogs with Unique Design Under Blogger/Blogspot Platform

Blogger/blogspot become more popular in new bloggers as their first blogging platform. As a user I said that this platform easy to customize. We often meet unique design in Wordpress platform, with flexibility in plugin, they can create unique design with special effect.

But it's all about creativity. I found some unique design too under blogger platform. Here they are

Blog Amuki : an artistic design with flash slideshow featured.


Cebong Ipiet's Personal Blog : this is my personal blog haha im being narcist


Deconstruction Code : dark design full javascript effect make this design so manly


Chic and Sassy : girly design with swirl pattern. You can find another girly template here


Extra Icing Cake : one of Gisele Jaquenod's portfolio, with cute cake header


Green Corner Cookies : combination of pink and green for cookies blog


Itzi Blog : another Gisele's design


Jasmin Love Coffee : another Gisele's design


Mike Matas : Personal photoblog, designed grunge and simple


Savvy Moxie : dark red color for mom blog


Sprinkle : another Gisele's design


Cheth Studio : dark design with unique features


Sweet Cupcakery : detailed with sweet cupcake


Quinto Elemento


Flair in The City : such a fashionable and cute template

LinkWithin : Related Posts Widget with Photo Thumbnails

Related post widget shows related stories in similar categories. Showing related stories under each post help your reader find any interesting post easier. My last post discuss about related post widget using javascript. This widget only show post title. Thought it will be more interesting showing related post with image thumbnail. There's any another easy way to do this.

LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive. You can check the example on Free Blogger Templates Gallery. Check under each post, there are some related post with image thumbnail. More interesting than plain text. This widget totally free and easy to install. No complicated sign up or difficult script editing. How to put related post widget with thumbnail image on my post?

- Go to LinkWithin site
- Fill setting form. Type email, blog URL, choose Blogger platform, width. Width is how many related post will show. Adjust it to your post width.
- Click Get Widget button
- Page will be redirected to LinkWithin installation step. Follow instruction carefully. After all step done, the widget should now appear on your blog.

Free Icon Download Gallery

Need an icon for desktop or web development? There are so many icon that free to download. It's wasting time to search one by one. Simply, just browse from icon gallery and get what you need. These icons are licensed under Creative Commons Attribution 3.0 License, they are free for personal and non commercial use / free for public non-commercial use. This means that you are free to modify the design to suit your tastes in any way, but you must include the provided link back to authors site or notify the author.

Here some list of free download icon gallery

BieIcons

Free Icons Web

Icon Archive

Free Icons Download

Cookiez

As its name, Cookiez Free Blogger Template has unique cookies header. Composition of cupcake, ice cream, candy, lollipop, milkshake, and another sweet things. This cute blogger template suits your cake, food, recipe or cookies blog.

Demo | Download

Installation Setting

How to Use?

• Click on download link
• Save xml file on your desktop (save it no need to open)
• Go to blogger dashboard, Layout>Edit HTML
• Upload xml file through upload button
• Save

Navigation Menu Setting

Open Edit HTML, edit these code below

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://your-link-here'>Cake</a></li>
<li>
<a href='http://your-link-here'>Cookies</a>
<ul>
<li>
<a href='http://your-link-here'>Cookies #1</a>
<ul>
<li><a href='http://your-link-here'>Green</a></li>
<li><a href='http://your-link-here'>Red</a></li>

<li><a href='http://your-link-here'>Blue</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Cookies #2</a></li>
<li><a href='http://your-link-here'>Cookies #3</a></li>
<li><a href='http://your-link-here'>Cookies #4</a></li>
<li><a href='http://your-link-here'>Cookies #5</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Cupcake</a></li>
<li><a href='http://your-link-here'>Pudding</a></li>

<li><a href='http://your-link-here'>Sweet</a></li>
<li><a href='http://your-link-here'>Brownies</a></li>
<li><a href='http://your-link-here'>Tart</a></li>
<li><a href='http://your-link-here'>Cake</a></li>
<li><a href='http://your-link-here'>Cookies</a></li>
</ul>
</div>

This is free template. No special hosting service for image. To avoid bandwidth excedeed, caused image not show up, suggested to back up image and upload to your own hosting. Read this how to. How to backup image?

I have uploaded image file, you can download image here.

-------------------------------------------------
THE CONTENTS OF THIS TEMPLATE IS MADE BY CEBONG IPIET.
PLEASE BE RESPECTFUL AND DO NOT REMOVE CREDIT FOOTER LINK WITHOUT MY PERMISSION.
YOU ARE ALLOWED TO DISTRIBUTE BUT NOT ALLOWED TO ADD ANY LINK ON FOOTER

WoodMag

WoodMag Blogger Template, as its name, this template has wood background. Designed well and ads ready. Suitable both personal and business blog.

Demo | Download

Featured

• Three column
• Tested in majoring browser
• Ads ready
• Automatic readmore
• Three column lower section
• etc

Installation Setting

1. Install

• Download xml file
  
• Save to your desktop
• Go to blogger dashboard, open Edit HTML, click upload buttom and choose your downloaded xml file
• Save

2. Header

You can create custom header, size is about 400x100 pixel. Upload through page element, click Header widget

3. Header Right Ads

This templates is designed ads ready. Put your 468x60 banner ads, through Page Element, click on HTML widget and paste your code

4. Top Navigation Menu

Open Edit HTML, edit this code below

<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.bietemplates.com/' target='_blank'>
Template Gallery</a></li>
<li><a href='http://www.emocutez.com' target='_blank'>Emoticon</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>
</div>

5. Secondary Navigation Menu

Open Edit HTML, edit this code below

<div id='nav'>
<ul id='nav'>
<li><a href='http://your-link-here'>Photoshop</a></li>
<li>
<a href='http://your-link-here'>Freebies</a>
<ul>
<li>
<a href='http://your-link-here'>Icon</a>
<ul>
<li><a href='http://your-link-here'>Icon #1</a></li>
<li><a href='http://your-link-here'>Icon #2</a></li>
<li><a href='http://your-link-here'>Icon #3</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Pattern</a></li>
<li><a href='http://your-link-here'>Brush</a></li>
<li><a href='http://your-link-here'>Swirl</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Vector</a></li>
<li><a href='http://your-link-here'>Sketch</a></li>
<li><a href='http://your-link-here'>Wallpaper</a></li>
<li><a href='http://your-link-here'>Theme</a></li>
<li><a href='http://your-link-here'>Layout</a></li>
<li><a href='http://your-link-here'>Inkscape</a></li>
<li><a href='http://your-link-here'>Graphic</a></li>
<li><a href='http://your-link-here'>CSS</a></li>
<li><a href='http://your-link-here'>Community</a></li>
<li><a href='http://your-link-here'>Submit</a></li>
</ul>
</div>

6. Banner Ads 125x125

Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<a class='ad1' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg296g-bygnA338gAPtJLXOFdC0-4WnKOI-hz8-P_rAGf1jrKQ3vHNLuazZzk2KF9FUTTmdt94yoWYQoHO4sFJra4ezGkrtHac5dA2-XVTnOwuQAdk7v8nAg-P-0HyHhYUvY0v_zOd4Z8-O/s1600/themeforest.jpg'/></a>
<!-- Ad2 start -->
<a class='ad2' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg296g-bygnA338gAPtJLXOFdC0-4WnKOI-hz8-P_rAGf1jrKQ3vHNLuazZzk2KF9FUTTmdt94yoWYQoHO4sFJra4ezGkrtHac5dA2-XVTnOwuQAdk7v8nAg-P-0HyHhYUvY0v_zOd4Z8-O/s1600/themeforest.jpg'/></a>
<!-- Ad3 start -->
<a class='ad3' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg296g-bygnA338gAPtJLXOFdC0-4WnKOI-hz8-P_rAGf1jrKQ3vHNLuazZzk2KF9FUTTmdt94yoWYQoHO4sFJra4ezGkrtHac5dA2-XVTnOwuQAdk7v8nAg-P-0HyHhYUvY0v_zOd4Z8-O/s1600/themeforest.jpg'/></a>
<!-- Ad4 start -->
<a class='ad4' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg296g-bygnA338gAPtJLXOFdC0-4WnKOI-hz8-P_rAGf1jrKQ3vHNLuazZzk2KF9FUTTmdt94yoWYQoHO4sFJra4ezGkrtHac5dA2-XVTnOwuQAdk7v8nAg-P-0HyHhYUvY0v_zOd4Z8-O/s1600/themeforest.jpg'/></a>


Change '#' to your targetted URL
Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg296g-bygnA338gAPtJLXOFdC0-4WnKOI-hz8-P_rAGf1jrKQ3vHNLuazZzk2KF9FUTTmdt94yoWYQoHO4sFJra4ezGkrtHac5dA2-XVTnOwuQAdk7v8nAg-P-0HyHhYUvY0v_zOd4Z8-O/s1600/themeforest.jpg to your image URL


Any comment, suggestion, bug report, just drop your comment.

Be respectful, do not remove credit footer link or do tricky thing such as replacing original link but still the same anchor text :D

-------------------------------------------------
Pass PW0-204 exam with promising score! We offer best 132-S-911-3 training to help candidates pass 1z0-054 exam on first try.

How to Show Blogger Navbar?

Most of new blogger template always hide Navbar. What's Blogger Navbar? Blogger Navbar is default navigation menu bar on top page.The purpose of not displaying navbar is for better looks. Honestly, I also remove this so my blog layouts will looks clear ^_^

But some people still want show blogger navbar on blog. First, we have to know why navbar is not show up?

Open Edit HTML, find this code

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}


See, navbar is set not display (display:none;)

So how to show up blogger navbar? Simply. Just delete that all code. And how to hide? Just put that code on your HTML.