Johny Blackstore, Download Free Templates Online Store
T
emplate this is a blogger friend request via email, Abu Dzaky or who is it? I forgot his name. The point he was asked to be made a template for selling online. Actually I am not so able to make a template online store, in addition to my job in the real world lately too time-consuming due to the limitations of my ability to create a shopping cart for easy online transaction via Paypal. This template name is Johny Blackstore
Shopping cart that I use here is simplecart made in wojodesign.com . I already enter the currency USD or dollars on the script but it still can not be used for direct transactions via paypal, because Paypal has not received dollars as payment. So if you want to wear this template for online sales, the goods assessed disposable dollars aja ya ... ??. Now I will explain the installation template and some features that are on this template:
Post Article
In creating a new article, consider the structure of the code below:
<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 guide product .............</ div>
Remarks:
The color red : enter the url of your product images on both the red code above. Try to picture that you uploaded the same length and width, such as 300 x 300 px
color yellow : the price of the product
color blue : a description of the product code above is the code that you need to start making new posts, and to make it easier so that you do not copy and paste repeatedly The code when making a recent article, enter the code in the post column template. Sign in to settings , select the posts and comments >> post template . Click Add, then enter the above code in the empty box as shown below, last save settings .
Shopping Cart
Shopping Cart feature is used here to facilitate online store manager in the transaction via Paypal. But because Paypal has not received the payment amount, so the settings for the converter is still in dollars.To change the Paypal account contained in this demo blog with your Paypal account, look for the code below:
<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 the & quot;];</ Script>
Change email color red above with your email (emails that are already registered in Paypal)Supporting Features
- Slider which I attach here works automatically, showing you the latest article by the number 8 post.If you want to display per category or label, find this code in the Edit HTML (do not forget to checkexpand widget templates ):<Script>document.write (& quot; & lt; script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</ Script>Replace with the following code:<Script>document.write (& quot; & lt; script src = \ & quot; / feeds / posts / default / - / guide label ?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>Change color coded blue with the label you want to display in the slider.
- To change the email subscription that is under the navigation, this code in the Edit HTML (do not forget to check the box expand widget templates):<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>Remarks:The color blue : replace with your feed address.
- Online Contact WidgetPut the following code in the box HTML / Javascript<table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
<tbody>
<tr>
<td height='1'>Customer Service A</td>
<td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername1'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername1&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
</tr>
</tbody>
</table>
<div style='display: block;'>
<table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
<tbody>
<tr>
<td align='left' height='1'>Custumer Service B</td>
<td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername2'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername2&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
</tr>
</tbody>
</table></div>
<p align="center"><a href="http://mas-template.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBrTYRSj9NWvapnbnWp3epln9Zsl0dAyYYw4xeibYrUx5-WK8ReHT6JjMCEUfM7Y4vaCeuoz-sAoiehuUWnmP6vbkMWdykcyYL4uBMODvJ8Lsipnzozt48rekgp6Ya2dI7YHImh6rTL0/s1600/donate.png" alt="twitter maskolis" /></a></p>Change youryahoousername1 and youryahoousername2 with your yahoo ID. - These templates use the comment box models that have been modified, to enable the functionality you need to reply to this code in the Edit HTML , once again do not forget to check the box expand widget templates :<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>The red color in the code above is the blog ID demo, you should replace it with your blog ID located on the browser when you go to the dashboard, as shown below:
- Thumbnail popular post widgets, settings as in the image below:
Noteworthy is the check only thumbnails , leave the box snippet does not need to be checked empty. Title and the number of posts you want to display up to you. For more details, please readthe tutorial here .
Another feature that I think is easy, such as installing Yahoo Messenger and others. This template also comes with the zooming effect on the image if you point the cursor on the image, the image will be automatically enlarged in accordance with the location of the cursor. Maybe it's just that I need to explain about this template, as usual if there are not clear please leave your comments in the comments box below. Good luck and hopefully useful.
If you want to see the blog is already using this template. can be found here: Store Honey Honor Natural Nusantara Johny Online Store
- Read this tutorial to complete the installation template.
- I suggest to upload pictures of products with the same length and width, such as 300 x 300 px.
- So that the final result in the maximum use of this template and layout post regularly, post title should not be too long, because it will move the image down.
- To speed up loading, save the javascript that exist in this template on your Google Code repository.For those who have not been able to save in a Google Code can read the tutorial here .
To change the currency symbol of $ (dollars) to IDR (rupiah) to shopping cart:
- Find the URL of this script in the Edit HTML :http://jagad.googlecode.com/files/WojosimpleCart-IDR.jsHaving met the following scripts replace the URL:https://masolis-javascript.googlecode.com/svn/trunk/blackstorecart-rupiah.js
- The next step, still in Edit HTML replace USD in this code:simpleCart.currency = USD;besimpleCart.currency = S;
Last save templates, and your converter will turn into dollars. But keep in mind here, it's just a replacement converter alone, can not checkout or to make direct payments through Paypal. Because not accept Paypal as a payment amount.
From some of the comments that come in, no one wants to display the name of the goods available in the shopping cart, for that please re-download this template I have updates to display the name of the goods (see demo)
My Google Code was banned again, there's so many scripts that I put in there can not be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some scripts below Click this link and read the subtitle "Update Template" in that post for the latest updates of Javascript