×
Please Join Softare On Facebook

Don't Forget To Join With Our Community

Enter Your Email Address :-

Please Check Your Email Inbox For Complete Subscription

Keywords

3D Logo Text Mockup Antivirus Apple iOS7 app Icons Backgrounds BisListe Blank t-shirt template Blog Templates Blog Tricks bluestack Brushes business doodles Business Website Template cache cache plus Chrome Chrome Layouts CodeCanyon compress your jpg images Corporate Branding Mockup Dashboard UI Elemets Deals Design Articles Design Bundles Design Inspiration Domain Easter Eggs eCommerce Flat UI Kit Elegant Themes Facebook facebook like all Firefox Fonts Free Photos Free PSD Files Free Stuff Free Wordpress Theme freebies Giveaway Google Google Chrome Themes Graphics Graphics Icons Hosting how to see google cache version webpage HTML Template icons Icons Design Infographic Elements iPhone 5C Mockup iPhone 7 Concept JPEGmini Latest Updates Layouts Light Music UI Elements logos Magento and Opencart Theme Magnifying Glass Miscellaneous Mockup PSD Mockup template parallax Patterns Photoshop Actions Photoshop Gradients Photoshop Patterns Photoshop Resources Photoshop Tutorials PHP PNG Files Premium Blogger Template Premium Wordpress Themes PSD PSD Templates Quotes Responsive Responsive Blogger Template Responsive Wordpress Theme Review and Rating Stars run android apps on pc SEO Shop Sketch App Files Social Media Icons Software Templates Text Effects Textures ThemeForest Themes Timeline Remove Tips Tools & Utilities Top Download Trial Buy Buttons Tricks UI & Mobile Apps UI Element UI Elements UI Kits Uncategorized vector ribbons vectors Web Buttons Website Layouts Website Traffic Websites Windows Wordpress Plugins Wordpress Themes

Tuesday 16 October 2012

Installing & Customize Blogger Store v2.0


Install The Template

Download the file, extract file to spesific folder on your computer, login to your blogger account and select one blog that will be installed with this template, click on template menu and point your eyes to upper right corner, you will see Backup/Restore options.. Click that button and select the XML file from your directories and click upload.


After the template installed succesfully, now it’s time to start a costumizations..

Customize The Template

1. Shopping Cart Setting
The code for Shopping Cart setting is appear after opening  <head>, it look like :
<script type='text/javascript'> //<![CDATA[ /* SIMPLE CART SETTING >>>>>>>>>>>>>>>>>>>>>>>>*/ simpleCart.email = '[email protected]'; simpleCart.checkoutTo = PayPal; simpleCart.currency = USD; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total']; //]]> </script>
simpleCart.email
Replace with your email address.

simpleCart.checkoutTo
It have three payment method options, Paypal, GoogleCheckout and Email method. But for blogger only can using Paypal and GoogleCheckout only because using Email methode it required PHP code.

simpleCart.currency
You can set the currency by replace this line with your currency, sample usage if you using Poundsterling Currency:

simpleCart.currency = GBP;
List of available currency is located on download folder. and specifically for Indonesian Rupiah you can set to IDR, but it just a fake because Indonesian Rupiah currently not listed on paypal.

simpleCart.cartHeaders
No required any customize here.

2. Customize Background and text

This template is support for Advanced Blogger Template Designer and available for 3 customizations:

a. Body Background Color
b. Main Menu Background Color
c. Text Link Color
d. Blog Description Color
e. ShoppingCart Border Color
f. ShoppingCart Background Color

Now lets customize yor template color scheme, click Customize and you will redirect to Blogger Template Designer. You can see the option on screenshot below :



3. Dropdown Menu and Social Menu

I’m using jQuery superfish menu for drowpdown menu, superfish make it have smooth animate.

a. Top Dropdown Menu.

For edit link on top menu, find code like this :
<ul id='top-nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Category</a> <ul class='sub-menu'> <li><a href='#'>Category 1</a></li> <li><a href='#'>Category 2</a></li> <li><a href='#'>Category 3</a></li> </ul> </li> <li><a href='#'>Contact</a></li> <li><a href='#'>About</a></li> </ul>
b. Main Dropdown Menu.

For edit link on top menu, find code like this :
<ul class='nav'> <li><a class='current' href='/'>Home</a></li> <li><a href='#'>Product Category</a> <ul> <li><a href='#'>Camera</a></li> <li><a href='#'>Gadget</a></li> <li><a href='#'>Electronic</a></li> <li><a href='#'>Phone</a></li> </ul> </li> <li><a href='/p/sample-page.html'>Sample Page</a></li> <li><a href='#'>How To Use ?</a></li> <li><a href='#'>Get it !</a></li> </ul>
c. Social Menu

For edit link on top menu, find code like this :
<ul id='top_social'> <li class='social_facebook'> <a href='#' 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. Featured Content

As you know my framework is using Automatic Slider or Featured Content on all my template with JavaScript, this is a new revolutions for blogger.

How to activate the slider?

For default it will showing your latest post, and you can change to showing your post by spesific label/category or showing post from another blog. I’m using two following code for it.
<script type='text/javascript'>
//<![CDATA[
random = true;
product_image = new Array();
product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail.
product_image_width = 110; // Product image width.
product_image_height = 110; // Product image height.
product_image_number = 9; // Value to show item.
//]]>
</script>
&
<script src='/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>
How to make it showing your post by spesific label/category?

For edit link on top menu, find code like this :
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product"></script>
How to displaying post from another blog?

For edit link on top menu, find code like this :
<script src='BLOG URL/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>
Posting

After  finished with customizable templates now is the time to try to create a post.
Notes : This template is required template post for best result.

1. Create a template post.

Go to Setting and select Post and Comments options, copy the template post bellow to your template post field.
<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>

2. Create a Post

Now lets start to create one test post.

Step 1. Create Product Title

Give the title for this post on Post Title field. Example : Product 1.

Note : this title will used for product name on ShoppingCart, so i suggest to create short title.

Step 2. Create Product Image and Thumbnail

Upload an image as usual, set the field to HTML and copy the image URL, then paste it to your template post, recommended to use square image size ex : 140×140

Example :
<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
</div>
Step 3. Set The Price

Set your product price using span tag after image.

Example :
div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
Step 4. Product Descriptions

Give a description for your product by using div tag.

Example :
<div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>
Step 5. Publish

Check back all the code from your post and make sure everything is arranged properly. And whole should look like this :-
<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$00.00</span> </div> <div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>
And then click publish.


CONCLUSION & DISCLAIMER

In making this template I spent a lot of time and effort. so I hope you appreciate me and did not remove the credit in the footer. I do not give warranty for this template.

If you think this template is useful for you, please give $2 donation for me to buy a cup of coffee so that I can keep working via Paypal to [email protected] 

Thanks for using my template !!!

3 comments

Anonymous

I love to disseminate information that will I've built up with
the yr to help enhance group functionality.

Visit my page 散熱風扇

Anonymous

Hiya! I just want to give a huge thumbs up for the good
information you��ve got right here on this post. I will likely be
coming back to your weblog for more soon.

Also visit my web page: 散熱風扇 ()

Anonymous

I have a willing synthetic eye designed for fine detail and can
anticipate issues before they will happen.

Feel free to surf to my weblog 情趣用品 - ,

Post a Comment

Thanks For Visit :)

Note: only a member of this blog may post a comment.