Minggu, 17 Juni 2012

Cara Membuat Featured Post Slider


Berikut tutorial membuat Featured Posts Slider:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/stepcarousel.js'/>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;board_carusel&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;board_item&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: [&#39;http://i34.tinypic.com/317e0s5.gif&#39;, -5, 80], rightnav: [&#39;http://i38.tinypic.com/33o7di8.gif&#39;, -20, 80]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;inline&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/*board*/
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykwjdOK-AIskVpXMp6d9OjmK0lhY-uzFVZu-NAC7z6TdGtbtF5WRQtZuUdk1cN3Cn0lpqvTDQxzKJb9USXIZ6p_6wE50plJ1ghVaj_NQDhyphenhyphenK-Z6z16g6vof_1PiNYZZX9n8c2y9QnmoeX/s1600/bgr_board.png) no-repeat;
}
#board_left{
float:left;
padding:22px 0 0 27px;
}
#header_rss{
float:right;
padding:78px 80px 0 0;
}
#board_items{
width:679px;
padding:5px 0 0 0;
}
#board_body{
width:647px;
margin:0 0 0 15px;
}
#board_carusel{
width:647px;
height:131px;
position:relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.board_item{
width:647px;
height:173px;
overflow:hidden;
}
#board_body h2{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight:normal;
margin:0 0 28px 0;
}
#board_body strong{
font-size:12px;
color:#000;
line-height:18px;
display:block;
}
#board_body p{
font-size:12px;
color:#000;
line-height:18px;
padding:0 0 10px 0;
}
#board_body p img{
float:left;
border:1px solid #83b2c4;
margin:0 10px 0 0;
width:161px;
height:107px;
}
#board_body p a{
color:#000;
}
#board_body p.more a{
text-decoration:underline;
}
#board_body p.more a:hover{
text-decoration:none;
}
#board_carusel_nav{
width:100%;
overflow:hidden;
}
#board_carusel_nav li{
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
float:left;
}
#board_carusel_nav a{
display:block;
float:left;
background:#7ac2df;
border-right:1px solid #85d7f7;
width:33px;
text-align:center;
padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
text-decoration:underline;
font-weight:bold;
background:#a7e2f9;
border-right:1px solid #a7e2f9;
}

5. Tambahkan kode HTML berikut diatas <div id='content-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id='board'>
<div id='board_left'>
<div id='board_items'>
<div id='board_body'>
<h2>Featured Posts</h2>
<div id='board_carusel'>
<div class='belt'>
<div class='board_item'>
<!-- board_item -->
<p><img alt='Shafiyyah Binti Abdul Muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Asiyah, Wanita yang Ditampakkan Surga Untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta&#8217;ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir&#8217;aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Fathimah binti Al-Yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra&#39;, nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Ummu Fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu &#39;anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu &#39;anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu &#39;anhu, &quot;Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Ummu Haram Binti Malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div> </div>
</div>
</div>
<ul id='board_carusel_nav'>
<li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 1)'>1</a></li>
<li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 2)'>2</a></li>
<li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 3)'>3</a></li>
<li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 4)'>4</a></li>
<li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 5)'>5</a></li>
</ul>
</div>
</div>
<div id='header_rss'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Rss'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nfRwuq4Uk2my3JFuFzbh7eUk26vvhbr-B5CD7i14X1_jtbTh3dnGU7PGRdWmYLWGIqVbLbwqmCYsti0thb4o4JAv-6mR8AP6PBAJP0EQ4l7y9V4Zh3hT0rgFxCP6iPnKorx5c_8WzBXb/s1600/button_rss.png'/></a>
</div>
</div>

6. Selesai. Simpan template
7. Selamat mencoba

2 komentar: