Coba yang ini

Search

How To Get Carousel Viewer

Today I got an email from blog kang Rohman long I have been taking. Filled in the email about The Magazine Template R.1.2. and after i compare to the Magazine Template 3 was the view that there are called the Carousel Viewer. I try to input into my blog ( Magazine Template 3 ) was successful. You can see my blog under the title Buy Some Products From Me or you can visit Magazine Template R.1.2. live demo with Carousel Viewer in here.

But I do not know if this can be successful or not in template the others, because I only ask permission to post Carousel Viewer, and not how to do so. So please try it and if you do not succeed I apologize because I own fewer understand the code.

Well we do not need to elaborate more, it is better to direct our practice.

How To Get Carousel Viewer

  1. First you must have a photo or picture that you have saved on the web that provide file storage. If you do not have, maybe you can register in http://tinypic.com. After the register and upload you photo / image present to us to the next step
  2. You must first Login in Blogger.com / Blogspot.com
  3. Save your tamplate before edit
  4. Select layout --> edit HTLM
  5. Find this code

]]></b:skin>


6. Copy this code below and paste in the top of the code ]]></b:skin>

.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;
background:#c4d5ec;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 910px; /*Width of Carousel Viewer itself*/
height: 173px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 200px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#d9e5f4; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
padding:10px;
border:1px solid #ccc;
}


7. Find this code

</head>

8. Copy this code below and paste in the top of the code </head>



9. Now save u tamplate
10. Go to Layout Page, Elements tab, click Add a Gadget, click on the HTML / JavaScript
11. Copy the code below and paste to the Gadget



12. save
13. view you template
14. Finish

I hope this can work in your blog because it has been successful in my blog. Good luck.

If you want to see the original code you can download here. I have move to Notapad

Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)