10 Mayıs 2014 Cumartesi

Blogger Store v2.0 e-ticaret temasi Kurulum & Customize

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 = 'rifkiblogger@gmail.com'; simpleCart.checkoutTo = PayPal; simpleCart.currency = USD; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total']; //]]> </script>
    Replace with your email address.

    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.

    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.

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

                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" />
                    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 jagjeetsinghubhi@yahoo.com 

                        Thanks for using my template !!!

                        Hiç yorum yok:

                        Yorum Gönder