-
sabica
Replace these
-
SLIDER-2-TITLE-HERE
Replace these
-
SLIDER-3-TITLE-HERE
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com [...]
-
SLIDER-4-TITLE-HERE
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com [...]
-
SLIDER-4-TITLE-HERE
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com [...]
-
SLIDER-4-TITLE-HERE
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com [...]
Jumat, 03 Februari 2012
A concept that in many fields refers to a quantity without bound or end.
An excursion in which the final destination is the same as the starting point.
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.
A carousel is an amusement ride consisting of a rotating circular platform with seats.
MENAPILKAN JQUERY SLIDE IMAGE
an infinite, circular jQuery carousel plugin: carouFredSel
jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.
The carouFredSel-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.
The carouFredSel-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.
Previous versions:
Features
Testimonials
- Fully customizable and skinnable.
- Optionally responsible/fluid/liquid out of the box.
- Supports variable item-sizes (also with a variable number of visible items).
- Built in keyboard- and mouse-navigation and pagination.
- 7 Built in effects: none, scroll, directscroll, fade, crossfade, cover and uncover.
- Filled with intelligent custom events and loads of options.
- Align (left/center/right) items inside the available width/height.
- Dynamically add and remove items to/from the carousel.
- GET and (re)SET the configuration options after creation.
Kamis, 02 Februari 2012
CARA OPTIMASI BLOG
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 SettingThe 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> |
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; |
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.
<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
<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> |
and
<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/> |
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script> |
How to displaying post from another blog?
<script src='BLOG URL/feeds/posts/default?orderby=updated&alt=json-in-script&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> |
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.
Langganan:
Postingan (Atom)
![[summary_02d36c15b225a0e91055e665b3c0fb83.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKR4wuN-ARwzf1JIbWIjEDyC3yQOcrNJE8RTBiCNFvHMLSfZKVd5HpqrsfA8GBelR_VVP6tjVOGMKFngp4EoVfu1B58lNB27-WIl-VRlErspoR2wmbGuLE42h2aqQrP523EdS-EjBNPOU/s220/summary_02d36c15b225a0e91055e665b3c0fb83.png)
