Rabu, 26 Maret 2014



Tips Cara menambahkan slider di blog kita

by:   1 comment    
categories: 
Cara Menambahkan Slider di Blog dengan Mudah ~  sudah agak lama saya nggak ngepos lagi ,. nah sekarang saya mau ngasih tahu sedikit tentang memasang slider di blog. Apa sih slider itu..? Slider itu itu adalah gambar yang bergerak secara vertikal yang terpasang di bagian atas halaman blog kita, Sobat.















Ok, gak usah pake lama langsung saja ke TKP....:

step 1. buka blog Sobat lalu masuk ke Dashboard
step 2. masuk ke template lalu edit HTML
step 3. cari tulisan <body> (pake CTRL + F biar mudah)
step 4. pastekan script HTML ini ( di bawah code html untuk mengedit Menu di blog )

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2XohyphenhyphenbV39u9QqEkcNx2TNJ1bXHlqhAPVRyhZSqGtPsxSXAnkcJtc4zJ9BOLYceRQ6yd5nAqU0cdA2_zELHEuaU2_176LPaB2CXl4DzqnagmXCQ8m5nxoQaKmgQPdaFjVpkvqZGPtZ4k/s0/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Hebat</a>
</h3>
<p>
Isi dengan deskripsi gambar Sobat
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoDTvec_UiCCpyr0w1SHE9U38ElPvnKquTtbG5NTMOQa-9rOaNZ29BzU0qE8xI1K6PLp9FSYWryVQWxbAZUgkaWHv9u80ik2qM4ZRLmwi4u-bTKp1g1y2FzOe5VIslGPVCMSgEXY4cdFY/s0/2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ayah dan anak</a>
</h3>
<p>
Isi dengan deskripsi gambar Sobat
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD98bGD1mkfbOONcrX6FW-4LBxTHd-vu7YjrGc-9fWjyp9MlPl6lzm5KE9HOtKtflA58czAMzuOE1yPOVEqs_b-aDDJ8BCerL2aAR8iAaJpCebUPFXgmwMeREaf5QCI0oI-Ls75CyGIrI/s0/3.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Smile</a>
</h3>
<p>
Isi dengan deskripsi gambar Sobat
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY19K9uIlSfDN00hB5lNbWK0wk4zyywvlYpkkrmT7_n5BpgBYq1hdaFiubFv0SiFHIeaU05FZKXpLD5t5Maicv-mZ4fLEWivpDF0qT-0duWvo6JYXcJpsWKFvSKt3-FMNSwoc8VvzAhmA/s0/4.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Teknologi</a>
</h3>
<p>
Isi dengan deskripsi gambar Sobat
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHvr9vqxliKM8LXHfUBwrvxJ0CeZfSX4C-xnMR0993Wf-zGUgRVbFHIe7MPx0vtTu1uXFEVnGjXkYBj8-SmYC_jDN_S7zog8GyRLzuNcwSknA49qvIrkGztkrB5evbHQaYxcz20-bxro/s0/5.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Sepeda</a>
</h3>
<p>
Isi dengan deskripsi gambar Sobat
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
    <span class='fp-pager'/>
</div>
         
</div>
</div>
<div style='clear:both;'/>

</b:if></b:if>

<!-- Featured Content Slider End -->
       
step 5. lalu prtinjau apa yang sudah Sobat lakukan
step 6. kalau tidak eror berarti sobat sudah berhasil ...


Ok, sekian ya Sobat . Selamat Mencoba...

1 komentar:

  1. tips dan cara sehat alami5 Agustus 2014 pukul 00.31

    hahahaha...makasih ya atas infonya semoga anda semakin ganteng dan cepat mendapat jodoh saya doakan semoga anda sehatselalu dan memperbanyak artikel yang anda posting

    BalasHapus

Terimah kasih telah berkunjung ke weblog tips cara sehat Alami, Anda Sopan kami segan. Berkomentarlah sesuai dengan postingan blog.

Langganan: Posting Komentar (Atom)