Tutor | Blog™

How to Add Social Bookmarks Icon to Blogger Post?

Senin, 20 Juli 2009 | 0 komentar

Social bookmarks become a common media for sharing information, especially in blogging. We can add this featured on post that make it easy to share. Check my social bookmarks icon below this post. Usually we use static icon. But this one has a unique effect like an animation, infact that's using CSS only. So How to add social bookmarks to blogger post? Follow these steps below

1. Sign in to Blogger dashboard, go to Layout>Edit HTML , tick mark on expand widget template

2. Copy these code below

3. Paste below this code

]]></b:skin>

4. Find these code

<data:post.body/>

5. Copy these code and paste below <data:post.body/>

You can adjust its width to your main post width size.

6. Save

Note :

- Actually you can put it anywhere as long as still on post section. You also can paste it under

<div class='post-footer-line post-footer-line-1'>

- If your template using automatic readmore, paste that code after <b:if cond='data:blog.pageType == "item"'><data:post.body/>

- You can change background "Sharing is Sexy" using your own image
replace this URL to your own

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

Important update:

hi all.. please hosted button image to your own hosting...
open this link

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNQjzBavsVoAxOuPpWmwPOYb34ugRgG8ZF4WEDRZCRBw-dDUT6r_KFoC8-kFGwa9SXdofgFuX844Fr0iy75wpAXkD075gbwJ91e5ITHqb9WfhAYD9ym8Is6rOTmKmNL2i6YY_bOGdm5w/s1600/sprite.png

save the image
upload to your own imagehosting
replace
http://img509.imageshack.us/img509/3131/sexysprite.png
to your own image URL

Imageshack only provide a little free imagehosting, so please host it self

Credit to Naeem Noor

Community

| 0 komentar

Community Blogger template, multi column layouts, suitable for magazine blog. This template is designed by my friend, Bie

Demo | Download

This template is designed with multi featured menu

Automatic thumbnail and readmore
Bookmarks post icon
RSS Subscribe
Twitter update
Banner advertisement
Adsense ready
Three column
Three column at lower section
Navigation menu

Go to author site, for complete installation setting.

WPSora

Kamis, 16 Juli 2009 | 0 komentar

Introducing, WP Sora blogger template, converted from WP Sora wordpress theme designed by Free Theme Layouts. This template has a bright color, blue and pink, suitable for girly blog. Its cute girl cartoon icon, become an attractive section. Ipietoon convert this for BieTemplates, free blogger template gallery

Demo | Download

Installation Setting

Upload XML

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

Open Edit HTML, find and edit these code below

<ul id='topnav'>
<li><a href='http://wpsora-ipietoon.blogspot.com/'>Home</a></li>
<li><a href='http://www.bietemplates.com' target='_blank'>Template Gallery</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>

Cute Cartoon Image

To change cartoon image, open Edit HTML, replace this code to your own URL image

<div id='pic'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgba0KaLgtkGwpkxqDRigPVcEV81Y0PBmWRrH5OvFtseeInC2ALbUOQFErkPd0kJdSq55pvThi5KOGfPV3g3Neuwr2zk2sa_lNGSny0WJsXflrCGtG0A4SwiSRFEJOcmeFN5fgYQ0j6lj1X/s1600/headpic.gif' style='float: center;'/>
</div>

Banner Advertisement

Access through Edit HTML, edit these code below

<div id='adspot'>

<a class='ad1' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdW3YmrW6C7aenTajlgrz-0sBKa-kJsJ8KZ9aiKcF59i4Q40FNEAfDrragNJaa1vBxuf-6UGvRzSq_gUzpahI_09PXEdnbvgHV8eigNJdxYGUZcqZn-DUdk1s_uKdiJ3AftcfBdlxOkOhR/s1600/adspot.jpg'/></a>

<a class='ad2' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdW3YmrW6C7aenTajlgrz-0sBKa-kJsJ8KZ9aiKcF59i4Q40FNEAfDrragNJaa1vBxuf-6UGvRzSq_gUzpahI_09PXEdnbvgHV8eigNJdxYGUZcqZn-DUdk1s_uKdiJ3AftcfBdlxOkOhR/s1600/adspot.jpg'/></a>

<a class='ad3' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdW3YmrW6C7aenTajlgrz-0sBKa-kJsJ8KZ9aiKcF59i4Q40FNEAfDrragNJaa1vBxuf-6UGvRzSq_gUzpahI_09PXEdnbvgHV8eigNJdxYGUZcqZn-DUdk1s_uKdiJ3AftcfBdlxOkOhR/s1600/adspot.jpg'/></a>

<a class='ad4' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdW3YmrW6C7aenTajlgrz-0sBKa-kJsJ8KZ9aiKcF59i4Q40FNEAfDrragNJaa1vBxuf-6UGvRzSq_gUzpahI_09PXEdnbvgHV8eigNJdxYGUZcqZn-DUdk1s_uKdiJ3AftcfBdlxOkOhR/s1600/adspot.jpg'/></a>
<div class='clearer'></div>
</div>

Replace # to your targetted URL, replace red text to your URL banner image

Any comment, suggestion, bug report, just drop your comment here. Thanks ^_^v

How to Create Favicon in Blogger?

Selasa, 14 Juli 2009 | 0 komentar

What is Favicon?
Favicon is a small icon that appear in browser address. In another words, an icon associated with a particular web/site/blog and typically displayed in the address bar of a browser viewing the site.

Example of Favicon
When we entering blogger URL, we'll see "B" letter icon in address bar. That's favicon

Can I Create it for My blog?
Yes you can

How to Create Favicon in Blogger?
Here's the step how to create favicon in blogger

Create your own icon image using image editor such as photoshop, gimp, or any other editor. I can't use photoshop? Simply, you can search an icon in internet. Choose maximum 32x32 pixel for best view
Upload to your imagehosting, such as imageshack, photobucket. You'll need its direct link url
Open your blogger dashboard. Go to Layout>Edit HTML
Copy this code

<link href='

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROmIyfMUtsSC-OquIGgHZlskNq9mwwNJlzX36TzkphycJuzye0s10Rm3BNRLnp2Up3VB7M5C-2i9vt9jRGUgTv4L1htJUSlv_-NWB0jDqJkRjF1v7oPcCEcdmHRdg-5sIP1FrRA2cz9o/s1600/rainbow.png

' rel='shortcut icon'/>

Change red text to your uploaded image URL
Put that code before <b:skin><![CDATA[/*
Save
Preview your blog

Free Blogger Template Gallery

Sabtu, 11 Juli 2009 | 0 komentar

Nowadays, blogger template become more variative, fully featured, and well designed. You can choose adjust to your blog theme. The good news is most of blogger template is provided free. Here the list of best blogger template gallery. This gallery is showcasing template so you dont need to search one by one, just pick from the category

BieTemplates

Deluxe Templates

BTemplates

Bloggerstyles

Btheme

Not Magazine 4 Column

Jumat, 03 Juli 2009 | 0 komentar

As its name, Blogger Template Not Magazine 4 Column, whatever you said its magazine style or not :D , have 4 column. Click on post title and post section will be wider and left column disappear. You can put recent post widget or news reel widget on left column section. Here's the screenshoot

PREVIEW | DOWNLOAD

Feature

Layout 4 column and 3 column at lower section
Adsense ready
Social Bookmarks icon on everypost
Search Menu
Best viewed using Firefox 3, Opera 8, Opera 9, Opera 10, Internet Explorer 7, Internet Explorer 8, Safari

Read this instruction setting carefully

Template Layout

This template is adsense ready. I've set adsense section so you can edit it. Copy your adsense code, add a HTML widget through page element, paste your code and save

Navigation Menu Setting

Access Edit HTML, find and Edit this code below

<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://dezigntuts.com' target='_blank'>Dezign Resources</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://YOUR-LINK-HERE' target='_blank'>Edit</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>
</div>

Banner 125x125 Setting

<div class='banner'>
<ul>
<li>
<a href='mailto:cebong.ipit@gmail.com' target='_blank'><img alt='ads' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq51keUyVivKH52JwqXZ2xxzgTZaF4VWdOnc-gej0MOmXU_I_NX40EYPbl7Hotr7sYnrufhiXGC-bH2m1yFNbPH7SFpYJccanGlRzcpo0YdJ5gS2_MapGBvpw37yJvWjKlMjSnVGKs7l2/s1600/advertise+125x125.png'/></a>
</li>
<li>
<a href='mailto:cebong.ipit@gmail.com' target='_blank'><img alt='ads' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq51keUyVivKH52JwqXZ2xxzgTZaF4VWdOnc-gej0MOmXU_I_NX40EYPbl7Hotr7sYnrufhiXGC-bH2m1yFNbPH7SFpYJccanGlRzcpo0YdJ5gS2_MapGBvpw37yJvWjKlMjSnVGKs7l2/s1600/advertise+125x125.png'/></a>
</li>

<li>
<a href='mailto:cebong.ipit@gmail.com' target='_blank'><img alt='ads' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq51keUyVivKH52JwqXZ2xxzgTZaF4VWdOnc-gej0MOmXU_I_NX40EYPbl7Hotr7sYnrufhiXGC-bH2m1yFNbPH7SFpYJccanGlRzcpo0YdJ5gS2_MapGBvpw37yJvWjKlMjSnVGKs7l2/s1600/advertise+125x125.png'/></a>
</li>
<li>
<a href='mailto:cebong.ipit@gmail.com' target='_blank'><img alt='ads' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq51keUyVivKH52JwqXZ2xxzgTZaF4VWdOnc-gej0MOmXU_I_NX40EYPbl7Hotr7sYnrufhiXGC-bH2m1yFNbPH7SFpYJccanGlRzcpo0YdJ5gS2_MapGBvpw37yJvWjKlMjSnVGKs7l2/s1600/advertise+125x125.png'/></a>
</li>
</ul>
</div>

Edit red text color to your target URL, edit blue text color to your image source URL.
If you wanna put advertisement banner, usually they give HTML code. Paste it between

<li>
YOUR HTML CODE HERE
</li>

So glad to receive any comments or bug reports.
-------------------------------------------------
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

Girl & Music

Senin, 29 Juni 2009 | 0 komentar

Here's my new design, Girl & Music Blogger template. Check the screenshoot here. Simply design, but you can customize as you want.

Preview | Download

-------------------------------------------------
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

How to Create Multicolumn Labels/Categories ?

Minggu, 21 Juni 2009 | 0 komentar

Usually we use default labels/categories blogger widget. But if there's too many labels, it become too long. There's three tricky option to simplify labels widget.

Create multicolumn labels. You can see the example at my sidebar. Divide labels become two column
Use scrolling option
Use dropdown option

Now we try to make multicolumn labels only using CSS. No need heavy loaded- javascript as tag cloud widget. Suggested to make new section. Create section for labels and then put before footer. Why we should create new section? If we set multicolumn on sidebar, it will impact to another list widget.

The point is, create 4 column labels in lower section. You can preview the example here

Here's how to

Open Edit HTML and Create CSS code

1. Copy these CSS code below and paste before ]]></b:skin>

#category-wrapper {
width:960px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:1px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.cat ul li {
float:left;
width:22%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbC8YvYowf9tDLGUd8172ieBOF5GO0-swkMHc-8Ni9COFTmwYxzam3gxWxgfjm5N9Niqkwfv6127uvv_689nWYMCKhdbesi506Enqw4IUQCJzUbJFnkzyC68O6_ncd-IPnmlFf252EWSI/s320/li.gif) no-repeat left center;
}

.cat .widget {
border-bottom:1px dotted #F7F7F7;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}

Note :
#category-wrapper {
width:960px; adjust this value to your current template size

.cat ul li {
float:left;
width:22%; adjust this value, If you want to make two column set to about 45% , make three column set to about 33% .

2. Copy these code below

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

Paste before

<div id='footer-wrapper'>

Save Template

Now you've created special wrapper for Labels widget

Thanks to Herro

Baby Shop

Sabtu, 20 Juni 2009 | 0 komentar

Introducing, my another baby template. Baby Shop Blogger template, suitable for baby shop blog, baby clothes blog, baby blog, etc. Featuring unique header and footer image. Here's the screenshoot

You can PREVIEW and DOWNLOAD it for free

Installation and Setting

How to Upload?

- Download xml file and save. Click download link above. Remember to Save, no need to open.
- Open your dashboard, go to Layout > Edit HTML
- Click Upload, choose your saved xml file, and then save

Navigation Menu Setting

Open Edit HTML, find these code below. Replace to your own link and anchor text

<div class='navbarleft'>
<ul id='nav'>
<li><a href='http://your-link-here'>Shirt</a></li>
<li>
<a href='http://your-link-here'>Skirt</a>
<ul>
<li>
<a href='http://your-link-here'>Skirt #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'>Skirt #2</a></li>
<li><a href='http://your-link-here'>Skirt #3</a></li>
<li><a href='http://your-link-here'>Skirt #4</a></li>
<li><a href='http://your-link-here'>Skirt #5</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Hat</a></li>
<li><a href='http://your-link-here'>Pampers</a></li>
<li><a href='http://your-link-here'>Socks</a></li>
<li><a href='http://your-link-here'>Onesie</a></li>
</ul>
</div>

So glad to receive any response, bug report, and suggestion. Many thanks for not removing credit link
-------------------------------------------------
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

How to Change Header Through Page Element?

Jumat, 19 Juni 2009 | 0 komentar

If you use free template, of course there are so many same template with yours. So how to make it unique? You can change header background template with your own unique header. How to? Here's how to configure header on your blog through page element.

- Go to Layout > Edit HTML, find header css code. For example

#header-wrapper {

background:#FFFFFF;

width:920px;

height:90px;

margin:0 auto 0px;

}

It means, header size on your template is width 920 pixel and height 90 pixel. Now you have known your header size.

- Create your own header, size width 920 pixel and height 90 pixel using image editing software such as Photoshop, Corel Draw, Inkscape

- Go to Layout > Page Element

- Click Edit on Header Section and this form will appear

- Click Choose File from your computer, pick your header image that you've created before

- After upload finish, image header will appear

- There are two placement option. If you want header title and description text keep appear, choose Behind title and Description , if you want image header wrap header title, choose Instead of title and description

- Save

How to Add Social Bookmarks Icon to Blogger Post?

Senin, 20 Juli 2009 | 0 komentar

Community

| 0 komentar

WPSora

Kamis, 16 Juli 2009 | 0 komentar

How to Create Favicon in Blogger?

Selasa, 14 Juli 2009 | 0 komentar

Free Blogger Template Gallery

Sabtu, 11 Juli 2009 | 0 komentar

Not Magazine 4 Column

Jumat, 03 Juli 2009 | 0 komentar

Girl & Music

Senin, 29 Juni 2009 | 0 komentar

How to Create Multicolumn Labels/Categories ?

Minggu, 21 Juni 2009 | 0 komentar

Baby Shop

Sabtu, 20 Juni 2009 | 0 komentar

How to Change Header Through Page Element?

Jumat, 19 Juni 2009 | 0 komentar

Blog Roll

Postingan Populer

Senin, 20 Juli 2009 | 0 komentar

document.write(ultimaFecha); | 0 komentar

Kamis, 16 Juli 2009 | 0 komentar

Selasa, 14 Juli 2009 | 0 komentar

Sabtu, 11 Juli 2009 | 0 komentar

Jumat, 03 Juli 2009 | 0 komentar

Senin, 29 Juni 2009 | 0 komentar

Minggu, 21 Juni 2009 | 0 komentar

Sabtu, 20 Juni 2009 | 0 komentar

Jumat, 19 Juni 2009 | 0 komentar

Blog Roll

Postingan Populer

| 0 komentar