728x90 AdSpace

Headline

Script Gallery


Slider "Elegant Theme"
In this tutorial I will discuss how to create automatic Carousel slider based on your labels in blogger. All you have to do only replace with your own label and the slider will work based on the label that you add in Lay Out  template. I made this carousel slider was very simple and only used jCarousellite script without adding easing effects or mousewheel.
  1. You must login to blogger with your account
  2. After that select the blog that you want to add slider.
  3. Go to the template >> Lay Out >> Edit HTML and check the expand widget templates, don't forget to backup your template first.
  4. And then place this following codes above : 
Script Slide Otomatis:
<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>
Script Random-Post:
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:280px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;line-height:1.2em;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 25;
var numchars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
Script Widget-Sidebar:
<div id="webdespost"></div>
<script type='text/javascript'>
jQuery("#webdespost").RecentPostbyTag({
postType:"v",
MaxPost:5,
ImageSize:"s200-p",
tagName:"seputar berita"
});
</script>

Catatan:
Yang berwarna merah/tagName diganti sesuai dengan nama tag yang diinginkan.

<div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
postType:"v",
MaxPost:4,
tagName:"selera nusantara"
});
</script

Catatan:
Yang berwarna merah/tagName diganti sesuai dengan nama tag yang diinginkan.

Script Untuk Video dan Marque:
<div id="slider-wrapper"><div class="inner-wrapper"><div align="center"><iframe width="100%" height="250" src="//www.youtube.com/embed/KWxJ_Eyn6eQ" frameborder="0" allowfullscreen></iframe></div></div></div>

<marquee direction="left" width="100%" scrollamount="2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkiKoLeyOeNKIeqafxyv7Oy5B6eOnLB3bvnpKX-IeNpSJg98za4ZhaxQhqUmc48ZfaN1ecSqJ6RC9GGgy9mdk9_s6odPUHjcI3RXsSV27SiDR96Rm3v8bNTYKR07cBw5uWe2J2bo_nxo/w140-h114-p/bike.gif" width="40" height="30" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGvrNIX9fBS8W6zyOv0jbXVexTPHCRvipXZQ7wPk01TI1Vh8QAoIvuMrEwcGKGeK3wXa-GbZm3e8pUFZMZNrXQc0JPXrgcffl0ZjPQSxPPUzqF5dLSLr-RhgOkcVHhyphenhyphenTrl9JGPlyWJL7T/h33/banner+papan+nama.png" width="400" height="54" />
</marquee>
You can also put the following codes in the place of your navigation menu or you can also placed in your footer side, that's depend on your needs.
Finally step, save templates and see the results.



  • Blogger Comments
  • Facebook Comments
Item Reviewed: Script Gallery Rating: 5 Reviewed By: Unknown