May 30, 2009

Gadget Blog

,
Introducing my new blogger template, Gadget Blog Template. As its name, this template suitable for gadget and technology blog, discussing about phone, ipod, notebook, and another gadget.
Template Information:
  • Three Column
  • Three Column at lower section
  • Ads Ready
  • Gadget product featured
  • Automatic readmore and thumbnail
  • Work in all major browser
You can preview and download here


How to Upload?

Download xml file from link download, save it (Remember, save do not open). Then Open Edit HTML, upload xml file that have been downloaded.

Top Navigation Menu Setting

Open Edit HTML. Find and edit these code below (Press ctrl + F , an easiest way to find)

<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl/'>Home</a></li>
<li><a href='http://www.ipietoon.com'>Free Template</a></li>
<li><a href='http://cebong.com'>Online Business</a></li>

<li><a href='http://www.emocutez.com'>Free Emoticon</a></li>
<li><a href='http://blogger.com'>Login</a></li>
</ul>
</div>

Change red color text to your link, and blue color text to your own anchor text menu.

Navbar Menu Setting

Find and Edit these code below

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://your-link-here'>Phone</a></li>
<li>
<a href='http://your-link-here'>Notebook</a>
<ul>
<li>
<a href='http://your-link-here'>Sony</a>
<ul>
<li><a href='http://your-link-here'>Vaio Green</a></li>
<li><a href='http://your-link-here'>Vaio Red</a></li>
<li><a href='http://your-link-here'>Vaio Blue</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Toshiba</a></li>
<li><a href='http://your-link-here'>Mac</a></li>
<li><a href='http://your-link-here'>HP</a></li>
<li><a href='http://your-link-here'>Lenovo</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Camera</a></li>
<li><a href='http://your-link-here'>Ipod</a></li>
<li><a href='http://your-link-here'>Personal Computer</a></li>
<li><a href='http://your-link-here'>Blackberry</a></li>
<li><a href='http://your-link-here'>Accesories</a></li>
</ul>
</div>


Recommended Gadget Featured Setting

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

<div class='product'>
<ul>
<li>
<a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-1o3XCvYngUTVYJR-XRyuUYTmrEOO1T-eoe9RYIObiZ9T1jp6PDuKbVcWmkjD6DoZwiz3Mwze8AQV4DkqJ27wzZi32KcTXekttaAM_hSG-2rM1HlOnvlJq0F66kAMMx1omFfitiNjvGU/s1600/ipod-touch.jpg' width='75'/></a>
</li>

<li>
<a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpifrvVd6Z48rr58re5QMhyt1gAqCasQmjMpWuFpzczU-YvIizizAG-f_3c0vgOo_UQJfkZ9X12s4Tkv_hyphenhyphenk7KYO2OW46wPdBmAzek1o8Ftw2mdkUxJ4CnjtX4rvVbyBvZ7RNGcAB6HdLp/s1600/camera.png' width='75'/></a>
</li>

<li>
<a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7eUjJI7Ix2aobk1TJ0qKUX-BoXMRiIfOokltHsHMJ5mJIvbQ_0Wq_9GodZ0mjYb7pSOsrYGo7AEyEguEcjy0hKGm5rpCKq6-C1LubqXfEgy353svsa7AfNVlkjcfTc2a5P3MuBrrrL4B/s1600/blackberry-8820-vodafone.jpg' width='75'/></a>
</li>

<li>
<a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF4WvUXfauYR6GJmZ6wtP57hVS9gQwKq-QQGcSaPyJ8KgPGiY8U-bCR5HVphyphenhyphenoAlDu9j_4J4YmGkRXy9G51Hj9axvlNnguK_Bb9cPE4clPjAwr2Ec0y4EUDRxBXuaMJjMgQd4krrZRmHZ/s1600/apple_iphone.jpg' width='75'/></a>
</li>
</ul>
</div>

Red color text change to your image URL.

-------------------------------------------------
Read Best Kindle Wireless Reading Device

May 25, 2009

CSS Web Design Gallery

,
So many great web design  with various themes around the world, such as web2.0, classic, art, cartoon, and many more.  I think these design could be inspiration for us especially for web designer. No need to search for item, simply by looking at web design gallery. Here the list of some showcase gallery resources.














May 17, 2009

Shopping Bag

,
As its name, Shopping Bag Blogger Template, suitable for online shopping blog. This template is simply but colorful. Recommended Product Featured make it possible to show your best product.

Template Description :
  • Three column
  • Adsense ready
  • Product Featured
  • Automatic thumbnail and readmore
  • Work in all major browser
  • Auto alignment post
You can preview and download it here

Read This Instruction Setting Carefully

How to Upload?

Download xml file from link download, save it (Remember, save do not open). Then Open Edit HTML, upload xml file that have been downloaded.

Top Navigation Menu Setting

Open Edit HTML. Find and edit these code below (Press ctrl + F , an easiest way to find)

<div class='topnav'>
<ul id='topnav'>
<li><a href='http://girlzshoppingblog.blogspot.com/'>Home</a></li>
<li><a href='http://www.ipietoon.com'>Free Template</a></li>
<li><a href='http://cebong.com'>Online Business</a></li>

<li><a href='http://www.emocutez.com'>Free Emoticon</a></li>
<li><a href='http://blogger.com'>Login</a></li>
</ul>
</div>

Change red color text to your link, and blue color text to your own anchor text menu.

Navbar Menu Setting

Find and Edit these code below

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://your-link-here'>Bag</a></li>
<li>
<a href='http://your-link-here'>Shoe</a>
<ul>
<li>

<a href='http://your-link-here'>Shoe #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'>Shoe #2</a></li>
<li><a href='http://your-link-here'>Shoe #3</a></li>
<li><a href='http://your-link-here'>Shoe #4</a></li>

<li><a href='http://your-link-here'>Shoe #5</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Fashion</a></li>
<li><a href='http://your-link-here'>Cosmetic</a></li>
<li><a href='http://your-link-here'>Jeans</a></li>
<li><a href='http://your-link-here'>Baby</a></li>
<li><a href='http://your-link-here'>Belt</a></li>
<li><a href='http://your-link-here'>Accessories</a></li>
<li><a href='http://your-link-here'>Jewelry</a></li>

</ul>
</div>

Recommended Product Featured Setting

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

<div class="'product'">
<ul>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNXBxUixz6HQ8mptREBlN4PgxFKU5403pWg7lVKSIkWT8LJbiGdLKI_4opz1E4GvA8qazcDfC3c_oedlzmweteODaHAeYblbyL6WAeCYDCIotZOU_Zl4toj0RbwPajASHi0OGnnj3BWI/s1600/gelang.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHIyglWPkVIRRY6lXDmtoxAWM8hZl3mBLCGDvqFTHm9-6r2GWby7upRspV-TuIaO1iWXst-rA266vz71n4VTghnYqHIoA5ArAcNvvnutENBnzxwVA6qEgbgs5rDie4Lnf3gfzBqM73WY/s1600/lv2.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIuWAgBe7D0WO_2iL2fjELkzyRNQueOAMwSDJlDHDPzuFSCoG1OF9c47wNUMb5ayTEYURnxfkWPPeQCxHwy6aEdcgC7IHygPSGeJI8B-_327EVPbdQNs2lj16kmFsJJfns3ZXALAEqEw/s1600/lv1.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLZHJ15fvBIjHnhonffSiVtV4tTbtWwQ5T2uo4Zje2FQtaadrHCze0n1n9IUH61DbRstJCWMz8otVj8qW55Zors-l4sU7amgIDp4LVM_5DJimxUq-z_ZtJY2V8f19vfr6IQqtbyD3T_o/s1600/images4.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLZHJ15fvBIjHnhonffSiVtV4tTbtWwQ5T2uo4Zje2FQtaadrHCze0n1n9IUH61DbRstJCWMz8otVj8qW55Zors-l4sU7amgIDp4LVM_5DJimxUq-z_ZtJY2V8f19vfr6IQqtbyD3T_o/s1600/images4.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamkPZHdyOzfkEM2b3RbxDgJfhSKP8dAFZIZIq5XUe6VqGAtaoRN4C2d3y0wnKOoZLPZMQaG2pQlX_SOHU-krwnRZYtN6hZUSRTEOEOO5AYnu99QBU6tFbBLqXMNweLtf6k8HrvGAif_k/s1600/images.jpg'" width="125" border="0" height="125" /></a>
</li>

<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHIyglWPkVIRRY6lXDmtoxAWM8hZl3mBLCGDvqFTHm9-6r2GWby7upRspV-TuIaO1iWXst-rA266vz71n4VTghnYqHIoA5ArAcNvvnutENBnzxwVA6qEgbgs5rDie4Lnf3gfzBqM73WY/s1600/lv2.jpg'" width="125" border="0" height="125" /></a>
</li>
<li>
<a href="http://www.blogger.com/%27http://YOUR-LINK-HERE%27" target="'_blank'"><img alt="'ads'" src="http://www.blogger.com/%27https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIuWAgBe7D0WO_2iL2fjELkzyRNQueOAMwSDJlDHDPzuFSCoG1OF9c47wNUMb5ayTEYURnxfkWPPeQCxHwy6aEdcgC7IHygPSGeJI8B-_327EVPbdQNs2lj16kmFsJJfns3ZXALAEqEw/s1600/lv1.jpg'/" border="0" /></a>
</li>
</ul>
</div>

Note : src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNXBxUixz6HQ8mptREBlN4PgxFKU5403pWg7lVKSIkWT8LJbiGdLKI_4opz1E4GvA8qazcDfC3c_oedlzmweteODaHAeYblbyL6WAeCYDCIotZOU_Zl4toj0RbwPajASHi0OGnnj3BWI/s1600/gelang.jpg' change to your own image URL

Timestamp Format

To make calendar date appear properly, change your timestamp format to Wednesday, April 21, 2009
Access through Setting>Formatting>Timestamp Format

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

May 15, 2009

How to Add Javascript on Blogspot Template?

,
Sometimes we use javascript on HTML template to create some special effect such as slide, glider, parallax, automatic readmore and another blogger hack. As we know, javascript contain such a long code, usually we're using third party hosting. The purpose is to make it simple and lighter. Before put javascript on HTML, it should be uploaded to your web host.

Read this how to.

Here's how to place hosted javascript on HTML template.

Open Edit HTML. Copy these code below

<script src='http://YOUR-JAVASCRIPT-URL.js' type='text/javascript'></script>

put before </head> section

But many people have no own hosting, and sometimes free hosting have limited bandwidth and complicated registration. So how? Javascript can be placed through HTML without hosting. Here's how to place it.

Open Edit HTML. Copy these code below

<script type='text/javascript'>
//<![CDATA[

your fulljavascript code here

//]]>
</script>

put before </head> section

May 11, 2009

Simple Blogger Template

,
Do you like minimalist design for your blogger template? I guess this two simple blogger template is suitable for you. Deluxetemplates has released two simple blogger template called Think Simple and 2Plus. Here's the screenshoot






Just go to author's site to get this simple but professional looks template. 

May 9, 2009

Online Pattern Background Generator for Your Blog

,
There are so many online pattern background generator offers various background for website or blog. It's easy to use and we can make pattern as we want. How to use this pattern background for our template?
  1. Create background using online tools. Save the pattern and then upload to imagehosting such as imageshack, photobucket, flickr
  2. Open Layout > Edit HTML
  3. Edit background body css code ,
body {background:url(http://your-image-url-here) repeat;}

Note :
For horizontal pattern change code to repeat-x
For vertical pattern change code to repeat-y
Here the list of Online Pattern Background Generator


Subscribe to: Posts (Atom)
 

Ipietoon - Blog Design and Online Business Blogging Since 2008