Johny Ganteng Store

• Live Demo
• Download Theme

TEMPLATE FEATURES
Simply blogger online store template with no shopping cart feature in this template. Johny Ganteng Store was designed with magazine style blogger template with 4/5 column blogger template and one right sidebar, 4 column footer, automatic featured content slider, pagination for blogger ready, dropdown menu, tooltip image, clean design template, and more. This template designed for online store with daily updates but you can use it for any content gallery.

Template Name : Johny Ganteng Store
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website
Url Designer : creatingwebsite-maskolis.blogspot.com

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script in this post, and I suggest you to save any javascript in this template with your own Google Code or another file hosting for better result. Read this tutorial to save Javascript in to your own Google Code.

Download »

Falkner Press Blogger Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Main Features:
* Automatic Thumbnails on posts
* Automatic Post Summarize
* Featured Content Slider
* Adsense ready
* PSD Custom Logo Included
* Youtube Video embedding Integrated
* Fully SEO Optimized
* Advertisement Block Ready
* 3 Columns
* Social Bookmarking Icons
* Twitter Updates widget
* Feedburner Email Subscription ready
* Thumbnails on Recent Posts in Sidebar
* Integrated Search box
* Beautiful top Navigation bar
* Cross-browser compatible
* and many more....

Step by Step Installation Guide:

(Make sure you backup your current template before installing any new template)

Step 0 : First Follow the basic installation steps here.

Step 1 : Edit the Logo

The logo *psd (photoshop) file is included in the download file. Open it with Photoshop and Edit the logo and Save it in .jpg format.
Next, upload that image to some image host like tinypic, photobucket,etc.. and get the image link to that file.
Help : Don't have photoshop ? or don't know how to edit the logo ? Leave a comment here with your site name.. I'll make it for you..
If you want the logo quickly.. Post your request here. I'll quickly help you out!

Go to Layout » Edit html
Find this url

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3wQ813LyiAVZ66okytmFwWhIYRE-bRtH3jjgJZwv_LaoD_aE3wFWiW01EKruFT8eOL-tt4op9r81pKS_Vs8_x5BrbBq06IPBUAjKQEKZsAJHMttzyBVlQKOUdUZjuL4Spl9NIKCuogZK/
and replace it with your image url.

Step 2 : Edit the top Navigation links


Go to Layout » Edit html and find this code

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='WEBSITE URL HERE'>About</a></li>

<li><a href='WEBSITE URL HERE'>Archives</a></li>
<li><a href='WEBSITE URL HERE'>Contact</a></li>


<li><a href='WEBSITE URL HERE'>Disclaimer</a></li>


<li><a href='WEBSITE URL HERE'>Forum</a></li>


<li><a href='WEBSITE URL HERE'>Subscribe</a></li>


<li><a href='WEBSITE URL HERE'>History</a></li>


<li><a href='WEBSITE URL HERE'>Profiles</a></li></ul>


See the pattern..you can easily understand. Simply replace the WEBSITE URL HERE with your target url. Also, Edit the anchor texts to your liking (About,Archives,Contact,etc)

Step 3 : Edit the Latest Twits


If you use twitter, You can use the integrated twitter twits widget. Simply find this


<a href='http://twitter.com/bloggertricks' id='twitter-link' style='display:block;text-align:right;'>follow me on Twitter</a>

</div>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>

<script src='http://twitter.com/statuses/user_timeline/bloggertricks.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

and replace bloggertricks with your twitter id.

Don't use Twitter...? then simply delete this code from the template.

From...

<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'>

...................

...............

<script src='http://twitter.com/statuses/user_timeline/bloggertricks.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

</div>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Step 4: Edit Feedburner Email subscription and Feed count Button

This is another cool feature in this template.. built in Email subscription form and Feed count button.

Search for this line


http://feedburner.google.com/fb/a/mailverify?uri=bloggertricksdotcom

and next, this line


<p><a href='http://feeds2.feedburner.com/bloggertricksdotcom'><img alt='' height='26' src='http://feeds2.feedburner.com/~fc/bloggertricksdotcom?bg=FD6D00&amp;fg=202931&amp;anim=1' style='border:0' width='88'/></a></p>

and Edit those urls to your feedburner links.
Don't have Feedburner yet ? You can signup here.

Step 5 : Add Youtube Video



Go to Layout tab.. and you can see like this



Click on the edit button and paste your youtube video code.
Don't forget to change the width and height of the video to 250 x 190 px to fit perfectly in the layout. You can edit the width and height values in the youtube embed code.
Help: How to add Youtube videos to Blogger

Don't want Youtube Video Widget ? then, simply remove this code from the template.


<b:widget id='HTML2' locked='true' title='VIDEO (250 x 190)' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<data:content/>

<b:include name='quickedit'/>

</b:includable>

</b:widget>
Step 6 : Setup Mini Updates (Recent Posts with thumbnails)

This template has inbuilt Recent Posts with Thumbnails widget. All you have to do is enter your blog url and it will do the rest.
Look for this code in the template




home_page = "http://falknerpress.blogspot.com/";

and replace the url with your Blog url.

Step 7 : Edit Social Bookmarking links



In the footer, you will see three widgets, 1.About me 2. Be my Frined? and 3. Advertisement widget.
The 1 & 3 widgets can be directly added by going to Layout tab.
All you need to edit is the second widget 'Be my Friend'. Using Social Bookmarking sites is a smart way to drive traffic to your sites.. So, if you don't have any of those accounts, Just take time to register..they are free and worth it :)

Find these lines:

<ul>


<li><a href='http://your-feedburner-url.com' target='_blank'>Subscribe</a></li>


<li><a href='http://digg.com/users/bloggertricks' target='_blank'>Digg</a></li>


<li><a href='http://www.facebook.com/people/bloggertricks' target='_blank'>Facebook</a></li>


<li><a href='http://bloggertricks.stumbleupon.com'>Stumble It!</a></li>


</ul>


</div>

<div class='share-list2'>


<ul>


<li><a href='http://technorati.com/faves?add=http://your-blog.blogspot.com/'>Technorati</a></li>


<li><a href='http://twitter.com/bloggertricks' target='_blank'>Twitter</a></li>


</ul>


and Edit them accordingly.

Step 8 : Featured Content Slideshow

Check out the Live Demo to see how it looks.

Edit the Slideshow...
Go to Layout » Edit html and find these lines..
Observe the pattern, it's easy!
wait! First prepare your images... the images should be 490(width) x 280 (height) pixels. Use Photoshop or any other image editing software to crop the images to 490 x 280 px and then upload the images to some image host like photobucket,tinypic,etc.

Next, find this code

<div id='myGallery'>

<!-- First Picture Start -->

<div class='imageElement'>

<h3>Title One </h3>

<p/>

<a class='open' href='http://bloggertricks.com'/>

<img alt='Marley And Me' class='full' src='IMAGE URL'/>

<img alt='Marley And Me' class='thumbnail' src='http://54800.com/wp-content/uploads/a1.jpg'/>

</div>

<!-- First Picture End -->

.........................................

..........................................

</div>


The pattern is like this

<div id='myGallery'>


<!-- First Picture Start -->


<div class='imageElement'>


<h3>Title 1 </h3>


<p/>


<a class='open' href='LINK 1 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 1 '/>


</div>


<!-- First Picture End -->


<!-- Second Picture Start -->


<div class='imageElement'>


<h3>Title 2 </h3>


<p/>


<a class='open' href='LINK 2 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 2 '/>


</div>


<!-- Second Picture End -->


<!-- Third Picture Start -->


<div class='imageElement'>


<h3>Title 3 </h3>


<p/>


<a class='open' href='LINK 3 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 3 '/>


</div>


<!-- Third Picture End -->



</div>


Got it? Now edit those links and Save the Changes!!
Now, FalknerPress template is successfully installed!

Extras

Here are few more things you can learn about this template..
Adsense Color Codes:

Here is the Color Palattes you can use to perfectly blend your adsense ads in the layout

1. Adsense in Left sidebar:
Preview:









Colors to use:











2. Adsense in Right sidebar:

Preview:


Colors to use:



3. Adsense just below Featured Content Slideshow:
(468 x 60px)

SAME COLORS as 2nd one







4. Adsense in Footer:
Colors to use:




That's it guys! Hope you like the template :D

Download »

Free Premium Islamic Arab Blogspot Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Template Name: Arabic Blogger Template
Platform: Blogspot/ Blogger
Author: Revodes
Designer: http://revodes.blogspot.com/
Release Date: 2014
Color: Black, Gold, Orange
Template Features: 2 Columns Layout, 3 Columns Footer, Automatic Slider, Tabbed Widget, Auto Readmore, Dropdown Menu, Numbering Pagination, Next and Previous Widget, Threaded Comments, Opengraph Meta Data, Seo Friendly.
License: Creative Commons Attribution 3.0

Download »

7 Colorful Islamic Blogspot Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Template Name: Colorful Arabic Blogger Template
Platform: Blogspot/ Blogger
Author: Revodes
Designer: http://revodes.blogspot.com/
Seo By: http://islamicbloggertemplate.blogspot.com/
Release Date: 2014
Color: Violet, Dark Violet, Red, Yellow, Grey, Aqua Marine, Black
Template Features: 2 Columns Layout, 3 Columns Footer, Automatic Slider, Tabbed Widget, Auto Readmore, Dropdown Menu, Numbering Pagination, Next and Previous Widget, Threaded Comments, Opengraph Meta Data, Seo Friendly.
License: Creative Commons Attribution 3.0

Download »

MasgusMarket

• Live Demo
• Download Theme

TEMPLATE FEATURES

• Shopping cart ( Keranjang belanja )
• Email Invoice ( invoice email otomatis )
• Drop down Menu
• Slide show by Nivo Slider
• Yang terpenting template ini GRATIS....hehehe

Designer & Author : www.Bukablog.com

Tutorial Template MasgusMarket :

1. Format Post MasgusMarket :

Untuk template masgusmarket 2014 harus di posting dengan Format tersendiri agar produk anda memiliki flexibilitas yang sama dengan produk lainnya, alias rapi gan..

<div class="product_image">
<a class="item_thumb zoomable" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZ_YrAPVVhhVfNkZbaE0Q2CuoR6luToa355bMvpQa7bLNoOOB6UY9yX5tV_SeIlAWX41yjs7GAcWiU0DEo0xEapxyLmbk7EsoSi5fN-q12iRT9xW_QYORNtIPX5VrJ9KwXzY0sskSSoI/s1600/nike.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZ_YrAPVVhhVfNkZbaE0Q2CuoR6luToa355bMvpQa7bLNoOOB6UY9yX5tV_SeIlAWX41yjs7GAcWiU0DEo0xEapxyLmbk7EsoSi5fN-q12iRT9xW_QYORNtIPX5VrJ9KwXzY0sskSSoI/s1600/nike.jpg" /></a>
<span class="item_price">RP 280,000.00</span></div>
<div class="product_describe">
<br />
<br />
<table class="ui-grid ui-gridFull prd-attributes" style="background-color: ; border-collapse: collapse; border-spacing: 0px; border: 0px; color: black; font-family: Tahoma, Arial, sans-serif; font-size: 13px; height: 127px; line-height: 15px; margin-bottom: 0px; width: 100%;"><tbody>
<tr class="even" style="background-color: #fafafa;"><td class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: bold; line-height: 24px; padding: 0px 15px; vertical-align: top;"><div style="text-align: center;">
Nama</div>
</td><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;"><div id="pdtsku">
AIRWALK SNEAKERS&nbsp;</div>
</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Ukuran (L x W x H/ cm)</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Ukuran Produk</td></tr>
<tr class="even" style="background-color: #fafafa;"><th class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Berat (kg)</th><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Berat Produk</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Warna</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Warna Produk</td></tr>
</tbody></table>
<br />

Keterangan :

• Silahkan gantis text yang di cetak tebal warna hitam dengan alamar URL gambar produk anda.
• Jangan lupa merubah harga produk di bagian text yang berwarna Merah.

2. Setting data Pemilik Toko Online :

• Masuk ke halaman Template.
• klik Edit Html.
• Cari deretan kode seperti di bawah ini :

simpleCart.email = &#39;masgustemplate@gmail.com&#39;;
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;

• Silahkan rubah data toko anda sesuai kebutuhan seperti Email,norek dan lain-lain.

3. Script Slider by Nivo Slider :

• Masuk ke halaman TataLetak.
• Klik Tambahkan Gadget > Html/JavaScript.
• Pastekan kode Slider berikut.

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://www.bukablog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbu-UD8x7buFA-I5KqpFX4z7b1LQrJLMxxnJiZaoRQkKvak-RUD23itlbt68z2l1iAvOGc-jShssw7BVDD3BrzpJ-OVb72IJ5e2oOtWCGioHpopSM2X9IL0PoINFUhnp-ZoMtNh-J2XO4/s1600/gshock_banner_2.jpg" alt="" /></a>
<a href="http://www.bukablog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UDQvT_jkNjWsp9Y3z6uTdiJhZk1RQDMhGBdfSeSpmYnow0yIwVr_hhlWYWjzICn5BXqAjU_dGThfoHyG1LiDUZl0OZNp_H8ajcwR9JbyMQMZFKIaFhbXUfICEb5-0ZWQDBPQyf_jOeY/s1600/banner-(1).jpg" alt="" title="Selamat Datang di toko kami" /></a>
<a href="http://www.bukablog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0YRmM00wC4b_jjIetVF2Yg8FGJFWT4962V5OdbL4998r9iz3rpaQz5KcNpoUWp-WLbzEuDC1W5BTVUNOarDbj3lIKjmmlIc88AO7IFCOV57EhT9CicdWUbOWokWYMOvjoaJUZvT0PzU/s1600/ban.jpg" alt="" /></a>
<a href="http://www.bukablog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXh6SvZuwgtVQBeYtiVDfwGbOI7OMaa3s21Susqi4Lz6wvagX9A0ulVa7Wli_8n1VOfIK5SbtNWpe3i-5mw4gScXmHu6vmpRwFDHpf3hiUVKtEjGAhU1Je-e4csOjPljpN5cJ4x_D5Ig/s1600/slide1-680x285.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Selamat Berbelanja
</strong></div>
</div>

• Silahkan agan rubah kode yang berwarna Merah dengan URL banner anda sendiri.
• Klik Simpan dan lihat hasilnya.

Download »

BukaBaju Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

• Full Post Product.
• Currency IDR ( Indonesia Rupiah )
• Related Post.
• Footer 4 Columns
• Drop Down Menu.
• Price Button.
• Ads Ready header.
• Widget ongkir.
• widget bank.

Designer & Author : www.Bukablog.com

Persiapan sebelum menggunakan BukaBaju template :

• Buatlah halaman cara pembelian produk di toko online anda.
• Banner iklan ( jika ada )

Setting Posting Produk :

Template ini memiliki tampilan khusus dan tertata agar terlihat lebih keren.Maka dari itu anda harus menyesuaikan struktur posting yang satu dengan yang lainnya.

• Buat postng baru.
• Pastekan kode posting berikut pada mode HTML bukan Compose :

<div class="product_image">
<a class="cloud-zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGEB104IpfExNtwT7dTWuRFO7Z-IcxspHwjDVVYnoZZAWJxizn_s93hmxs9sPMxtfTkuhWTPQEpo9kYaGQONWbF0JLdXZ2qkdGaNU0jECw0xLrz81bcBU6Qwvp-EBazl8_IN5Su5K11Y/s1600/nike.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGEB104IpfExNtwT7dTWuRFO7Z-IcxspHwjDVVYnoZZAWJxizn_s93hmxs9sPMxtfTkuhWTPQEpo9kYaGQONWbF0JLdXZ2qkdGaNU0jECw0xLrz81bcBU6Qwvp-EBazl8_IN5Su5K11Y/s1600/nike.jpg" /></a>
<span class="item_price">Rp 190.000</span></div>
<div class="product_describe">
Deskripsi Produk anda</div>

• Ganti text yang mas gusti beri warna merah dengan data masing-masing produk seperti URL Gambar,Harga dan deskripsi produk
• Klik publikasikan.

Setting HTML Template :

• Klik menu Template.
• pilih Edit HTML
• Cari URL berikut ini,gunakan Ctrl+F untuk mempercepat pencarian :

<a class='belitdetail' href='http://demo-bukabaju.blogspot.com/p/cara-pembelian-barang.html'>Pesan Produk Sekarang</a>

• Silahkan ganti url yang berwarna merah dengan URL halaman anda yang sudah dibuat.
• Klik simpan Template.

Download »

Queen Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Free Queen Blogger Template is a nice blogger template for photo blogs with white color background. It's a 1 column blogger template with multi posts column and 3 column footer, clean and minimalist design template, simple design design template, and more. This template designed for photo, gallery, showcase blogs

Similar Templates : Exposure Blogger Template & Capture Blogger Template

Designer & Author : Biyan - http://www.dzignine.com/

Download »

Music Shop Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

File size: 0.13 MB

XHTML 1.0 Strict, Fixed Width, 3 Columns, Light on Dark, Music, Online Shop, Black, Red

Author : Free Website Templates

Licence : No Details Provided

Download »

Electronix Store Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

File size: 0.35 MB

XHTML 1.0 Transitional, Fixed Width, 3 Columns, Dark on Light, Tools or Equipment, Online Shop, Green, Light Grey

Author : csscreme

Licence : Creative Commons

Download »

Tonny Jualan Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Dengan berkembangnya teknologi dan publikasi melalui media Internet, pemasaran produkpun ikut berkembang. Terlihat dengan semakin meningkatnya penjualan secara online. 

Bagi para pemilik Toko Online yang tidak memiliki modal besar, banyak yang mengandalkan google untuk dijadikan tempat menampilkan lapaknya, terutama di Blogger.com.

Hmmm.... gak perlu panjang lebar deh ngomongnya, cuma mau berbagi template lagi nih. Template Blog Toko Online gratis saya bagikan untuk yang berminat.

Template ini sekedar kreatifitas hasil dari utak-atik script template orang lain yang sedikit di modifikasi, dengan kata lain copy paste script template dari berbagai sumber.

Template Blog Toko Online Gratis ini saya beri nama Tonny Jualan

Template ini tidak begitu ribet untuk ngedit ulang tata letak dan cara postingnya.

Buat sobat yang berminat dengan Template Blog Toko Online Gratis - Tonny Jualan yang sederhana ini, silahkan tuliskan email di kotak komentar, jika saya sudah online tentu akan saya kirimkan ke email sobat. Mudah-mudahan template ini bermanfaat. Bila masih bingung menggunakan template ini, silahkan tanyakan langsung cara menggunakannya. 

Terima kasih, salam blogger.

Sumber: http://telagapandan.blogspot.com/2013/09/template-blog-toko-online-gratis-tonny.html

Download »

Jual Beli Blogger Template

• Live Demo
• Download Theme

TEMPLATE FEATURES

Platform Type : Blogger / Blogspot
Template Name : Jual Beli Blogger Template
Instructions URL : How to install Blogger Template
Template Author : Ikhsan Hafiyudin / http://ikhsanhafiyudin.blogspot.com
Designer : Ikhsan Hafiyudin
Descriptions : Template for Online Store, with gallery style, and easy setting.
Jual Beli is a free blogger template custom design with 1 Left Sidebar, 2 Column, Blogger, Blue, Fixed, Online Store, and now you can download Jual Beli blogger template for free only in ZoomTemplate.
Description: Jual Beli | Rating: 4.0 | Reviewer: ZoomTemplate | ItemReviewed:Jual Beli

Download »

Edit Johny Sip Deh

• Live Demo
• Download Theme

TEMPLATE FEATURES

Template Name : Edit Template Johny Sip Deh
Author : Eddy Wijaya
Url Instruction : http://digitalareas.blogspot.com
Designer : digitalareas
Url Designer : http://digitalareas.blogspot.com

Download »