Skip to main content

cara bikin slide otomatis di blog

Hari ini kita akan belajar bagaimana melakukan sesuatu yang menyenangkan! wordpress pengguna kemampuan untuk menginstal plugin dan menciptakan fitur slider gambar di blog-nya. Ini cara masang gambar slider template dan widget standar untuk Blogger pengunjung, tapi sekarang saya akan menunjukkan cara untuk membuat slide gambar Blogger. Kode acara asli saya dapat membuat Anda pembantu ditemukan di Blogger. Cara membuat slider gambar blog,silakan langsung ke tkp
1.1Blogger
 2.Edit template
 3Copy code di bawah ini dan cari code ]]></b:skin> atau </style> di bagian head template.  perhatian wrapper dan #slider jka pada wrapper anda ubah code width atau height pada #slider


wrapper { position:relative; margin:0 auto 15px; width:600px; height:350px; display:block; padding:5px; background:#FFF; z-index:2; }
#slide-prev,#slide-next { -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; padding:15px; bottom:50%; position:absolute; z-index:4; }
#slide-prev { left:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbPAgO_g-bCpMtOby-3XppZ7fweJXrrrnTdjdiEC3RwtggvRI4CepEybR2zR2lWLSMgmQ_tvIShnQ3AsPNajLuu6kZPrKOwSGS7SHNh9152R5Uf51tGKsbZxoJ0QN45P9NYzU1jfClPI/s1600/arrow_left.png) no-repeat center; }
#slide-next { right:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieS0u5P4r_KX7jFai-Mb1yIcRbzYD0sCD-Y-HWpAHZTeeGd0Kw_EEqB_887_m_VpN2J43r1t_VU9s3eUyNXHe1vfdmkiam15zE60rGoWP9HYxyybwqT1uya6ngPx7TU8OxsTR-QMtWm8E/s1600/arrow_right.png) no-repeat center; }
#slider { width:600px; height:350px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; }
#slider img { width:100%; height:100%; }
.slide { display:none; }
.cs-activeSlide { display:block; }
.slide-descriptions { display:none; }
.caption { background:rgba(238,238,238,0.83); color:#333; display:none; padding:5px 10px; position:absolute; left:0; right:0; bottom:5px; z-index:3; font:normal 13px/20px Arial,sans-serif; }

2.copy scrip di bawah ini,cari code <head> atau tekan CTR+F dan letakan scrip di bawahnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        slide : ".slide",
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
        autoplayDelay : 3000, // waktu penundaan gambar
        t3D : csTransitions['3DFlips']['random'],
     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})
</script>

3.1.layout
   2.add a gadget
   3.pastakan code scrip dan ganti ulr gambarnya
   4.save
<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>



Labels:

Comments

Post a Comment

Popular posts from this blog

cara mendapatkan uang dari cloap

Cloap progarm affiasi yaitu sebuah merek dagang dari  cload yang dikelola oleh PT. Cosbeni Indonesia. Cloap Program Afiliasi merupakan layanan dari Cloap yang memberikan peluang kepada siapa saja untuk mendapatkan penghasilan dari internet.peluang ini anda bisa untuk menanba penghasilan sampingan untuk mencukupi kebutuhan anda.Untuk pembayaran hasil afiliasi akan dikirimkan ke rekening bank atas nama kita, dengan minimal pembayaran 200,000 rupiah.caranya mudah tinggal link affiasi cloap bisa kita sebar ke mediasosial atau bisa menggunakan websit atau blog.silakan bisa di coba totorialnya untuk mendaftar langsung saja ke tkp seperti berikut ini: 1.daftar http://affiliate.cloap.net 2.isi formulir 3.sukses 4
Post a Comment
Read more

cara mudah bikin parse html di blog

Belajangeblog-cara membuat parse html di blog.saya akan menjelaskan apa arti dan fungsi parse html  adalah sala satu cara yang di gunakan para blogger untuk memposting artikel yang berkaitan dengan code HTML/javascript.seperti untuk membasang iklan adsense di sebuah blog dengan menggunakan parse html .ya itulah sala satu yang di maksudnaya.jadi anda bisa membuat sendiri parse html,bisa di coba langasung copy scripnya di bawah ini   DEMO 2.copy scrip di bawah ini silakan bisa pasang di postinagn blog tingal klik html dan pastakan scripnya <div dir="ltr" style="text-align: center;" trbidi="on"> <div class="style1"> <div style="text-align: center;"> <span style="font-family: Arial, Courier, monospace; font-size: large;"><b><u><a href="http://www.bangrusman.com/p/parse-kode-html.html">Alat Parse HTML</a></u></b></span> </div> <center> <b...
Post a Comment
Read more

free template hacker blog

    Blogger adalah yang tertua platform blogger yang sedang berlangsung. Blogger memiliki basis pengguna yang besar, sebagian besar pengguna memiliki penulis pribadi dan blogger. Blogger membuka jendela di Internet banyak orang yang tidak ahli teknologi di Internet.Blogger adalah rumah bagi jutaan blogger di seluruh dunia. Hal ini sederhana dan mudah dipelajari. Setiap pengguna dapat dengan mudah membuka akun Blogger, dan mengeksplorasi kreativ mereka.Temple kulit untuk platform Blogger, Anda dapat dengan mudah mengubah tampilan dan nuansa dari blog Anda setiap saat tanpa kehilangan data. Ada banyak blogger temple di Internet, kedua versi gratis dan berbayar yang tersedia.Blog baru-baru ini mengembangkan komunitas yang jauh lebih besar, dan kita juga bisa mendapatkan Blogger gratis temple Blogger menerbitkan secara teratur diperbarui untuk melihat.Blog adalah dengan menggunakan CMS pertama untuk semua orang dan memiliki banyak platform blogger favorit dari Google. Banyak ...
Post a Comment
Read more