Monday 25 August 2014

CARA MENGGANTI SLIDESHOW PADA BLOG

Pada kesempatan kali ini saya akan memposting dan memberikan tutorial pada hal tersebut diatas, kadang untuk mempercantik blog kita perlu template yang menarik, sekarang ini banyak template-template blog diinternet yang bisa anda gunakan secara gratis.


Misalnya Template yang mempunyai efek slide gambar membuat blog anda seperti website profesional, tetapi masalahnya tema atau kategory blog kita tidak sesuai dengan slide-slide gambar yang disediakan pada template tersebut. Tidak enak dipandang mata kan kalau misalkan kategory blog kita tentang pendidikan tapi slide-nya gambar film, hehee..


Ok langsung saja ke tutorialnya, Anda dapat mengikuti langkah berikut ini.
  1. Login ke akun Blogger Anda
  2. Klik Rancangan atau Tata Letak (layout)
  3. Klik Edit HTML
  4. Tekan Ctrl + F (dimaksudkan untuk memudahkan pencarian).
  5. Jika gambar anda mirip dengan gambar berikut serta kalimat yang ada di dalam gambar ini sama, coba ketik title berikut "<!-- Slide 1 Code Start -->" pada kotak pencarian Anda.

  6. Setelah ketemu Anda dapat mengganti kalimat maupun gambarnya.
  7. Ganti url gambar slide template Anda dengan gambar yang Anda inginkan, cara mudah, Anda Upload terlebih dahulu gambar Anda pada entri baru di dashbord blogger . kemudian klik kanan gambar anda lalu klik open link in new tab setelah terbuka copy url gambar anda.
  8. setelah selesai ,simpan gambar anda tapi jangan di publish yaaa. . . . 
  9. agar lebih memudahkan lihat catatan dibawah ini :


Catatan :
  • Usahakan gambar yang Anda upload sama ukurannya dengan gambar sebelumnya
  • Untuk melihat ukuran gambar sebelumnya, Anda dapat meng-copy url gambarya dan mempastekannya di tab (jendela) baru berowser Anda.
  • Setelah itu simpan dan lihat resolusi (ukuran) gambar tersebut.
  • Untuk memudahkan dalam pengeditan Lihat perintah berikut 
<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJsImofH2xb6h8tGGoCKcONwZMFWqjfgBMUWY7Y4ur-DKU-MhUtJK67ly_zk66ebD2GTcit0FTrSRvHqfc3xb1cNQ-DPw37T31L0is9qtuwuRPGTYWwjqs0SRuQp7GTD2bYKCS5iSKuo/s1600/download+(1).jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>TKJ</a>
</h3>
<p>
  LUDENTRIALD.BLOGSPOT.COM
</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/AVvXsEj8kqfivBA_gpapEIMoqUiul8ttOM3G-OC5u26SNlgykapgCh17Pp30KXd_zddffKEy0xfAOws_Q6kkttRj4vJs4d_Z0W6nNjBzdtNOMMqetc_hwAZ5dxOjXbyBUam8KK4k6F7kXM503r8/s1600/index.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>TKJ</a>
</h3>
<p>
  LUDENTRIALD.BLOGSPOT.COM
</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/AVvXsEhO3WwkV1bCM2k9M4MjJObQW7n1gme_YU5kI_vu9QqiSmh5tqymz7KbF5qmv60MWGlujHfzuyh8N-I01xdiA_oCZt3cXnaMgYEki9sno1E06MhAGxwi9LcF63FHN47AmxFMaC0LvxhZqQo/s1600/indexd.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>TKJ </a>
</h3>
<p>
LUDENTRIALD.BLOGSPOT.COM
</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/AVvXsEiFnwIWf3JZHPvZdy9qWQXxU1PKgcvfFqOrsB-zvq1Xow7DT4ifMCRp5l_TSRzyTM-N_V6BTxJuiFd26acXAqsHafYOoGCkoP2hdPDO0qrGCRlWxC5XSLDpiVL1jZEv5NmHlgtv3RGKE5U/s1600/download.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>SMK BISA</a>
</h3>
<p>
LUDENTRIALD.BLOGSPOT.COM
</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/AVvXsEjTngotpSjPn9tdRJLmBLbhrnhbrnmOx1oO3KTU-XYzkqRCxd8jdKWjuiLU98DO1p4TVpglXsPZCJ0cSVV4XST2UkepGsFNxZApCozf3tPjzW5cf0uuoIcsbMTciW7vomL2rDYvklu1DPs/s1600/20140814_092718.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>TRIALD LUDEN</a>
</h3>
<p>
PT.SEMEN TONASA
</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 -->
  • ubaha tulisan warna merah dengan URL gambar yang anda telah copy
  • ubah tulisan warna biru dengan judul gambar anda
  • ubah tulisan warna hijau dengan keterangan gambar anda

Sekian dulu Tuturial Blog dari saya semoga bermanfaat gan \m/

0 comments:

Post a Comment