Johny Blackstore


Online Store with Shopping cart  simplecart made in wojodesign.com.You can use paypal for the transaction or manualy transfer on Bank Account. Is Free Profesionaly online store template, simple modification with your idea.


Post Artikel

Please read and folowing the code to post the new article / product :
<div class="product_image">
<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>
<span class="item_price">$00.00</span></div>
<div class="product_describe">
Description your product.............
</div>

on red suggest to upload   product picture url with size 300 x 300 px
 yelloow : price
blue : product descripsion

The above code is the code that you have to start in making a new post, and to make it easy for you to repeatedly do not copy and paste the code while creating a new article, enter your post code in the template column. Go to settings, select the posts and comments >> post template. Click Add, then enter the above code in the empty box as shown below, setting the last save.

Shopping Cart
to Setting Paypal following the code :
<script type='text/javascript'>
simpleCart.email = &quot;johnytemplate@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate  = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];
</script>
Chane email (red code)with your paypal email

Support Feature
  1. To Change slider, following the code
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    change whit code :
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/your label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    Change code blue with the label you want displayed on the slider 
  2. To change an existing subscription email below navigation, search code below on the Edit HTML (do not forget to check the box expand widget templates):
    Description:
    The blue color: replace with your feed address.
  3. These templates use the comment box models that have been modified, to enable the functions of reply you need this code in the Edit HTML, again do not forget to check expand widget templates box :
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
    Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :


  4. Popular Post widget with thumbnail Setting :
    popular
    Save Template
For more informarions and disclaimer please visit : creating website
Baca selengkapnya »

SimplexNewsportal

 
Awesome Simple Magazine Templates, for simple news site or portal with jquery slide like yahoo.  You can make blog like profesional magazine. It's easy to install and manage. Automaticaly slide every post the artikel, like headline.

Designer : HuyDinhQuang 
 
Step for Installing this Template Please Visit on This Page
 
 
Baca selengkapnya »

Queen



Awesome Template minimalist with elegant view, Queen is a 3 column blogger template without sidebar.It has a footer widget with three columns.This Queen layout has a simple main menu and a cute header bar. Nice for post your best photo ,automotic display your picture every post.

Designer : dzignine
Baca selengkapnya »

Blog Jual Beli




This template is modified version of Blogger Store V2 , looking fresh with slider contained. Powerfull for online store, and this free. Fiture in this blog is
  • Clean-view
  • Shopping Chart
  • grid product
  • Order via paypal and google checkout
  • Email Order
  • Homepage slideshow widget
  • 4 coloumn footer
  • Header Ads Place
  • Custom Header Logo
Author : Wahyu Putra 

Template Customize:
1.  Shopping Cart Setting  ( Email Paypal and CurrencySetting)
Change simpleCart.email to email paypal or your googlecheckout, simpleCart checkoutTo change to Paypal or GoogleCheckout, and simpleCart.Currency  USD, GBP, EUR, AUD, CAD, CZK, DKK, HKD, HUF, ILS, JPY, MXN, NOK, NZD, PLN, SGD, SEK, CHF, THB.

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'realwahyuputra@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>

2.  Order by E-Mail Setting

a. Open page contactform email in http://kontactr.com/
b. Klik Sign-Up, write field
c.Finished sign-up, you can login with username and your password
d. You will go to the main page that contains the code to insert a contact form, notice that anywhere, let Ajax Widgets. Note on your ID number after the code 'id ='. For example:
<script type="text/javascript"> id = 111323; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
e. Check the Expand Widget Templates, and then find and change the numbers in bold below with your ID number:
<span class='item_add'><script type='text/javascript'> id=111323; t=1; ctxt=&quot;Order via Email&quot;;

3. Settings  Top menu, the main Menu and  Social Network menu
Find and change the following code:
Top menu:
<ul id='top-nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Kategori</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Tentang Kami</a></li>
</ul>
main Menu:
<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Kategori Produk</a></li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>Peluang Usaha</a></li>
<li><a href='#'>Promo Bulanan</a></li>
</ul>

SocialNetworking:
<ul id='top_social'>
<li class='social_facebook'>
<a href='http://www.facebook.com/wahyu.putra' tooltip='facebook'><span>facebook</span></a></li>
<li class='social_twitter'>
<a href='#' tooltip='twitter'><span>twitter</span></a></li>
<li class='social_linkedin'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
<li class='social_rss'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
</ul>

4. Now we will be setting the format of a blog post. This needs to be done so that your post is in accordance with the format template is created. Click Settings> Format> Templates Entries and enter the code as follows:

<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Descriptions...</div>

How to use it that every time you make a new post, select the Edit HTML tab at the post-editor, not the Compose tab. Change product_image.jpg to link your product images, change the $ 00.00 price of the product and change descriptions ... a description of your product.

5. Logo Setting
Search and change picture link in the bottom with your logo picture link with size 369px x 61px
<div class='clearfix' id='header-wrapper'>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSUXv4o8UOa71xxVgDJO0QAyeaNDWzx3ocM17jPIp3NtCQWIgMAOdrtApQCy254ffxwVUm_M4Zm9twoJAChXGskoHwgC6C8v01pVa1A7Dx_d64BDMNKrX9zjUOcy4bPBMKDSo75FA9V24/s1600/logo-bjb.png'/></a>

6. Setting the number of products on the main page
Featured products should amount to a multiple of 4 to fit the template. To change it click on the Settings> Format> Change 7 post (default) to a multiple of 4. Suppose 20 posts.


7. Slideshow settings
To organize and change the slideshow can add or edit the code found on the main menu widget below.
Change the code link below, or duplicate the code for more pictures.

<div id='casing'>
<div id='slider'>
<div id='mover'>
<div class='slide'>
<img alt="iPad 5" src="http://i56.tinypic.com/4q3jva.jpg" /> </div>
<div class='slide'>
<img alt="iPhone 4" src="http://i56.tinypic.com/ipscyf.jpg" /></div>
</div>
</div>
</div>

Finish and Save Template

Fore More Information please visits the template author

Baca selengkapnya »

Baby Shop



I see Baby Shop is a free blogger template custom design with 2 Column, 4 Column, Blogger, Elegant, Fixed, Gallery, Green, Magazine, Online Store, Web 2.0, White, zoomtemplate, and you can download Baby Shop blogspot template for free only in ZoomTemplate. The designer is bestfreetemplates.info


Baby Shop Blogger Template is a free premium template with Professional Design for your Online Store. is specially designed templates that you create a conversion I want to build a simple online store, especially who want to sell knickknacks baby equipment. With a view that is very elegant style and look professional, this template-style course designed specifically Magazine plus Gallery , and do not forget I also have SEO features planted therein.

Set For SEO:
--------------
Find This Code:
<title><data:blog.pageTitle/></title>
And Change with this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | (example: ZoomTemplate)</title>
<b:else/>
<title><data:blog.pageTitle/> | (example: ZoomTemplate)</title>
</b:if>
<meta content='your description here' name='description'/>
<meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>




Set For Top Menu:
---------------------
<ul>
<li><a href='/' rel='nofollow'>Home</a></li>
<li><a href='
#'>Post RSS</a></li>
<li><a href='
#'>Comments RSS</a></li>
<li><a href='
#'>All Products</a></li>
<li><a href='
#'>Buy Now</a></li>
<li><a href='
#'>F.A.Q.</a></li>
<li><a href='
#'>Reviews</a></li>
<li><a href='
#'>Contacts</a></li>
</ul>


Note: find a code like this href='#' and change symbol # with link what you want.



Set For Sidebar Menu:
------------------------
<ul>
<li><a href='/'>Home page</a></li>
<li><a href='
#'>New products</a></li>
<li><a href='
#'>All products</a></li>
<li><a href='
#'>Reviews</a></li>
<li><a href='
#'>F.A.Q.</a></li>
<li><a href='
#'>Contacts</a></li>
</ul>


Note: find a code like this href='#' and change symbol # with link what you want.



Set For footer Menu:
--------------------
<ul>
<li><a href='/'>Home page</a> |</li>
<li><a href='
#'>New Products</a> |</li>
<li><a href='
#'>All Products</a> |</li>
<li><a href='
#'>Reviews</a> |</li>
<li><a href='
#'>F.A.Q.</a> |</li>
<li><a href='
#'>Contacts</a></li>
</ul>


Note: find a code like this href='#' and change symbol # with link what you want.




Set For Info OUR SHOP:
---------------------------
<div class='info'>
<img alt='' height='132' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_le1RvnUd5nwJSNB6v_U7kQySqupFM-cM1gB8H0AnrexIZcmQZbIDTxJFvnKgFXSvbuhAs-VhKf_USgu6Q18wmXmLSMtGIITyrnKtp-zE6MxqmfMBs5jDKrlvy6M1qEzX_aAboWT19-X/s1600/pic2.jpg' width='159'/>
your text description here..
<a class='more' href='
#'><img alt='' height='28' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1N3xdSPOPhGS3JRTKFVOIUEpRhWbT_6TWUx_pf2OPXlNJ8EJshsGSF1lClsaxG-V-uCcdiQoyxGgoD8bTrXXsuDEX5CAwhTFXT_MWi2Jmy_U5rU0YGghIlFHMx3alovxm1PBkkgyhXUSt/s400/more.gif' width='106'/></a>
</div>


Note: find a code like this href='#' and change symbol # with link what you want. oh you can cange image if you want.



Set for Online Yahoo Messenger (YM):
-------------------------------------------
<a href="ymsgr:sendIM?youryahoousername1">
<img style="padding-top:3px" src="http://opi.yahoo.com/online?u=
youryahoousername1&amp;m=g&amp;t=1" border="0" height="16" width="64"/>
</a>

<a href="ymsgr:sendIM?
youryahoousername2">
<img style="padding-top:3px" src="http://opi.yahoo.com/online?u=
youryahoousername2&amp;m=g&amp;t=1" border="0" height="16" width="64"/>
</a>

Note: change youryahoousername1 / youryahoousername2 with your YM account.


Terms of use:
Blogger themes on this site comes under a creative license. You can use all themes in any way you want. All you need to do is just keep the footer credit links intact.

Please visit zoomtemplates.com for more information abots this templates
Baca selengkapnya »

Simplex E Shop



Once again Ecommerce /shopping cart in Blogger platform . The result is template SimplexEshop . 

Feature :
  • E-shopping Blogger Template
  • Free premium shopping, Shopping cart.
  • Top menu bar, 2 column, left sidebar, fixed width.
  • Auto posts thumbnails, footer widgets ready, white colors.
  • Please note: this template is still in beta.
  • Amazing shopping cart blogger template.

Author : HuyDinhQuang

How to install this template

1,Download the template file .

2,Open template file in a word editor .

3, To make a menu navigation

Find this code
<ul id="nav">
<li><a href="http://simplexeshop.blogspot.com">Home</a></li>
<li><ahref="http://simplexeshop.blogspot.com/search/label/shop">Store</a> <ul class="children"> <li><a href="">Category</a></li> <li><a href="">Category</a></li> </ul> </li> <li><a href="http://simplexeshop.blogspot.com/search/label/blog">Blog</a></li> </ul>
Add link to your categories like my other template . You can see on Simplex Enews or Simplex Transcript for more about this multi-level menu .

4,Basic Shop Setting
This template was built based on SimpleCart solution (Simplecartjs.com ) , what I did only integrated Simplecart to a blogger template . So all options /setting for shop ,you can see in simplecart documentation .

a,Payment method 
This Template support two payment methods : Paypal and Google Checkout . Default is Paypal ,and it was set in these line :
simpleCart.email = "brett@wojodesign.com";
simpleCart.checkoutTo = PayPal;
If you want to use Paypal ,you can replace brett@wojodesign.com to your paypal email .
If you want to use Google Checkout ,you can replace two lines above with
simpleCart.merchantId = "111111111111111";
simpleCart.checkoutTo = GoogleCheckout;
Change 111111111111111 to your Google Checkout merchant ID .

b,Currency

This template support GBP,USD ,and EUR . Default is USD and it was set in this line
simpleCart.currency = USD;
if you want to change the currency ,you can change USD in the line above (marked in bold) to GBP or EUR .

c,Tax rate

The default tax rate was set in this line
simpleCart.taxRate = 0.08;
You can change the value from 0.08 to another rate . If you don't want to add the tax rate ,you can delete this line

d,Shipping

There are many ways to calculating the shipping cost for an order :
-Add a flat rate to the entire order .This is the default method in template and it was set in this line
simpleCart.shippingFlatRate = 5.25;
(an amount 5.25 shipping cost will be added to the entire order )You can change 5.25 to the value you want.

-Add a shipping cost to every item in the cart : if you want to use this method ,you can delete
simpleCart.shippingFlatRate = 5.25;
and use this line
simpleCart.shippingQuantityRate = 3.00;
This line will add an amount 3.00 to every item in the cart .Of course ,you can change 3.00 to other value .

-Add a shipping cost as percentage of total cost : to use this method ,you can delete the default
simpleCart.shippingFlatRate = 5.25;
and use this :
simpleCart.shippingTotalRate = 0.05;

This line will add a shipping cost as 5% to the total cost .You can change this rate to another value .

If you require some advanced calculations for shipping, you can delete the default line and use the prototype object for CartItems:
CartItem.prototype.shipping=function(){
// we are using a 'size' field to calculate the shipping,
// so we first make sure the item has a size
if(this.size){
if( this.size == 'small' ){
return this.quantity*5.00;
} else if( this.size == 'large') {
return this.quantity*7.50;
} else {
return this.quantity*10.00;
}
} else {
// use a default of $2.00 per item if there is no 'size' field
return this.quantity*2.00;
}
}

The 'this' here refers to the item, and we are using a 'size' field and the item 'quantity' to calculate the shipping. Because an item may or may not have a size, we check to make sure it does with the 'if(this.size)'. If there is a size field, we use a different rate for each size and return a value based on the item quantity. Otherwise, we use a base rate of 2.00. simpleCart(js) will use the global shipping rates, and then add the shipping value for each item in the cart.


5,When you finish editing ,upload template to Blogger . Go to Dashboard ->Design ->Page elements

6,To add logo

click on logo widget

add logo as this image bellow

7,There are many places that you can add your own widget . For example ,you can add link list widget for making category menu ,subscription widget ,page list widget ...

8,That's all for install this template .

How to use this template

It's a little bit difficult when using this template .

To post product to shop : Go to Dashboard -> Posting -> New Post .Click on Edit HTML and made a post with this structure
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION..................................</div>
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>
In structure above , this is the product information section :
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION GOES HERE..................................</div>
you can add image by using <img src="image url goes here"> and add product description bellow (in the text product information goes here )
After the product information section ,we move to add to cart section :
<div class="simpleCart_shelfItem"><span class="item_name">item name ...</span>Price : <span class="item_price">price .........</span>Quatity : <input class="item_quantity" type="text" value="1" /><a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a> </div>
in this section ,add the item name in where I marked item name .... ,add the price in where I marked price ... and change the quatity from '1' to another value .

If you want to set a special shipping cost for this item only ,you can add this line to the add to cart section
<input class="item_shipping" value="xxx" type="hidden">
replace xxx to the shipping cost of this item
and the code of Add to cart section will become :
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<input class="item_shipping" value="xxx" type="hidden">
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
 </div>
When you set shipping cost for an item ,the method which used to calculate shipping fee in step 4 will be overide .

After finish editing the post with structure above ,add a label 'shop' at the end of post ,and the product will be added to shop with sliders ,price and add to cart function

To post to Blog : to post to blog ,you can make a normal post ,and add a label 'blog' at the end of post .

It's similar to my older template Simplex Portfolio ,in Simplex Portfolio ,we have two display mode : display a post as a post in gallery ,and display a post as a normal blog post .In this template ,we also have two display mode : display a post as product in shop and display a post as a normal blog post .

For the page : you can make pages as normal .

That's all for this template . I think it is not easy to use and handle .If you familliar with the code ,you can take a try ^^ For detail shopping cart settings ,you can see more in simplecartjs 
Feel free to leave me feedbacks

For More Informations Please Visits thesimplexdesign.com
Baca selengkapnya »