Saturday, 22 March 2014



Cara Menambahkan dan Mengganti slide foto di blog di Blog dengan Mudah

by:   No comments    
categories: 
Cara Menambahkan Slider di Blog dengan Mudah ~ Hai Sobat Tsabit's Mgazine 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/AVvXsEhQGrRKXwildVf7_G5TGe9uKv-z60cmUZ_JDxGG3AZy-mUXIRSDi5WYFo7u8Wf2eFQW_cuPZGdgCw1Zhtv9c1xO521LSJasj2Ude0SwkDmSoZ_qIAY6kEk7Yq7NP_rmHQncXp5DDFj43fw/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/AVvXsEjxNoqS0WdlV7fPQH45lufrueWVlCj-LYovQRrfytxhlBFpEk8RWpPIw3A2Kz5euJ0BIRzcQxhL8P33xA9hWRyx9czgSR2JZR8SzOxlFzZRH7muKhDWHb12UD1wIVZTDXQJ3_a6Rx8NPMY/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/AVvXsEjLPQaCJkpF8grh1tD6YJM0IbVtWzZngIsSCHb94r9tBeKc2MZuLC1HZ9AQcWEVPNE_6KBGaG_GVcd5lNsKEHOkpUdFfrUI-SuuUA5eqRNhD9Ye4nnwI1v3G7eTMUDVxScbt9PaRzSo1jE/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/AVvXsEgZ2-gVl4NNboP64A0d8hLgCpQ2fyn4HhYGurkfd48XZP6yns-zWD65_Izk1U_pbxwGxXpenUwvfoQggE9w6BF0pGMPyigBZSa5pvSuhdnuRdHN8CWHL38XzyaQOF12ktZZOj3D8oCdV5I/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/AVvXsEjvF7LwX8hQ_KVP5VZrzsOf3bMmT3M-P4RqEIo9YcoURzOZia6AwWEx1cKF6UtXHP-lJ1vHnNVyE8AkBEjod4cHFx4fS0_8Rgali6hBuah9AuV2Xpr20kQw5pK6UFKKK256X_1znQW7_3w/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...
Subscribe to: Posts (Atom)