Rabu, 27 Juni 2012

Cara Mudah Membuat/Memasang Gambar di Hider Blog Secara Bergantian/Slide

Sobat berbagiilmuyok.blogspot.com, kemarin2 saya mengalami kesulitan saat akan membuat foto slide di blog saya, template yang saya pakai yaitu dari premiumbloggertemplates.com
Beberapa pekan yang lalu asdos saya udah mengajarkan langkah2 untuk mengganti foto yang ada di template itu, namun dari pengalaman yang saya dapat ternyata walau dalam satu link downloadan templatesnya itu tak semua cara mengubah foto slidenya sama.
Setelah searching2, alhamdulillah sobat http://ngulikku.blogspot.com memberikan solusi yang tepat.
langkah2 yang saya terapkan di blog seperti di bawah ini:



>Masuk ke "dashboard" blog anda, lalu untuk jaga-jaga terjadi kesalahan baiknya didownload dulu tempalte anda yang sekarang dan simpan,kemudian klik "rancangan",klik "edit Html",centang kotak kecil dipojok atas kanan kotak HTML .

>Setelah itu cari kode <div id='content-wrapper'> ,(biar mudah carinya pakai Control F) dan kopi kode scrip di bawah ini lalu tempelkan pas di bawah kode <div id='content-wrapper'>.
------------------------------------------------------------------------------------------------

<!-- 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='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</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='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda 
</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='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda 
</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='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</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='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda 
</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 -->
------------------------------------------------------------------------------------------------
>Dan simpan,bila sukses boleh lihat hasilnya. 

CATATAN ;
Lihat dengan teliti tulisan yang berwarna hijau :
1. ### -pagar 3 x masukan Url yang anda kehendaki mau dituju.
2. URL GAMBAR ANDA -Isi dengan url gambar anda yang telah disimpan seperti di google picasa atau situs yang lainnya.
3. JUDUL KETERANGAN - Tulis judul keterangan yang sesuai dengan url yang hendak dituju.
4. Keterangan gambar anda - Isi deskripsi singkat untuk url yang dikehendaki.

Untuk Contoh bisa di lihat di sini,cuma bedanya yang buat contoh gambarnya di atas postingan. Kalau kepengin sperti yang di contoh letakn kode scrip tadi di bawah kode ini 

<div id='main-wrapper'>.

terimakasih sobat, semoga dengan Berbagi Ilmu kita bisa saling menambah pengalaman yang bermanfaat, amin :)

0 komentar:

Posting Komentar