Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Sunday, September 24, 2017

Tutorial Membuat Auto Slideshow (CoinSlider) Pada Blogger

Auto Slideshow (CoinSlider)
Screenshot Auto Slideshow (CoinSlider)
Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>var AutoCoinConfig = {
 url_blog: "http://faiz-tutorial.blogspot.com",
 MaxPost: 7,
 cmtext: "Komen",
 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "Tiada Komen",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'prev',
 nextText: 'next'
};
</script>
<script src="https://dl.dropboxusercontent.com/s/933tfrp45tfry9o/autocoin.min_faiztutorial.js" type="text/javascript"></script>

Keterangan:

  • http://faiz-tutorial.blogspot.com - Gantikan dengan URL blog anda.
  • Jika tempate anda sudah sedia ada kod JQUERY , padam kod yang di highlight dengan warna oren .


6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) "


Untuk Paparkan Auto Slideshow Pada Laman Utama Sahaja

Perhatian:  PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >>

1. Pergi ke Dashbord >> Template , kemudian klik tombol Edit HTML
2. Cari kod dibawah:
<b:widget id='HTMLxx' locked='false' title='' type='HTML'> 
Keterangan: Gantikan xx dengan dengan  nombor ID widget anda. Contohnya HTML13 .
Untuk dapatkan Widget ID , lihat cara-caranya dibawah:
i) Pada Layout , klik Edit pada HTML/Javascript dimana kod Featured Post anda disimpan.
ii) Pada halaman Configure HTML/JavaScript , lihat pada URL kafe . ID widget anda berada dihujung URL .


3. Tambah kod <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> pada kod widget anda.

Contoh (sebagai contoh, misalnya ID widget aku adalah HTML13 ) : 
- Kod yang belum di edit menyerupai dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
- Setelah diedit akan menyerupai dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if></b:includable>
  </b:widget>
4. Klik Save Template

Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Auto Slideshow (CoinSlider) Pada Blogger