Mau bikin Blog ? Cari Jasa Blog Murah Berkualitas? Ke Jasablog.info aja yuk! Cepat, Mudah, Murah dan Berkualitas

Blogger Slider Responsive


Blogger Slider Responsive - Sahabat blogger yang masih semangat belajar memperbaiki blognya agar lebih terlihat profesinal dan menarik, berikut ini Jasa Blog akan memberikan tutorial memasang gambar slide responsive yang akan menambah blog anda terlihat menarik. Langkah pemasangannya juga sangat mudah, silahkan anda ikuti langkah berikut ini:

Cara Pasang Slider Responsive Pada Blogger


  1. Setelah anda login ke blogger anda kemudian silahkan anda menuju ke menu Template
  2. Agar lebih aman saat edit template alangkah lebih aman jika anda Backup Template terlebih dahulu
  3. Kemudian klik "Edit HTML"
  4. Silahkan Copy kode dibawah ini kemudian anda pasang diatas kode </Head>. Gunakan "Ctrl + F" untuk mempercepat menemukan kodenya.

  5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
    Catatan: Jika Kode Sript maupun Link berikut (JQuery, FontAwesome, FlexSlider atau Oswald) sudah ada maka tidak perlu anda tambahkan.

  6. Selanjutnya silahkan anda temukan kode ]]></b:skin>  Gunakan "Ctrl + F" untuk mempercepat menemukan kodenya.
  7. /*######### Blogger Image Slider By Jasablog.info #############*/
    .flexslider {padding: 0;margin: 0;background: #fff;border: 4px solid #fff;position: relative;zoom: 1;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: '' 0 1px 4px rgba(0,0,0,.2);-moz-box-shadow: '' 0 1px 4px rgba(0,0,0,.2);-o-box-shadow: '' 0 1px 4px rgba(0,0,0,.2);box-shadow: '' 0 1px 4px rgba(0,0,0,.2);height: 370px;}.jb-s{margin:0 5px;border:0;width:100%;overflow:hidden}
    .jb-s .slides{list-style-type:none;margin:0 auto;padding:0}
    .jb-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
    .jb-s .flex-control-nav li{display:inline-block;margin:0 2px}
    .jb-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
    .flex-direction-nav .flex-prev{left:-50px}
    .flex-direction-nav .flex-next{right:-50px;text-align:right}
    .jb-s .flex-control-paging{display:none}
    .flex-direction-nav{position:relative;top:-250px}
    .jb-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
    .jb-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;}
    .jb-s li a{color:#0080ff;text-decoration:none}
    .jb-s i{color:#999;padding-right:5px}
    .jb-s .iline{line-height:2em;margin:0;position:relative;top:-87px;background:#31363a;padding:3px 10px;display:inline-block}
    .jb-s .icontent{line-height:1.5em;margin-top:5px}
    .jb-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
    .jb-s .jbtitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}
    .jb-s .jbtitle:hover,.jb-s .itotal a:hover{color:#fff;text-decoration:none}
    .jb-s .iedit a{text-decoration:none;color:#999;cursor:pointer}
    .jb-s .iedit:before,.jb-s .iauthor:before,.jb-s .itag:before,.jb-s .icomments:before,.jb-s .idate:before,.jb-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
    .jb-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
    .jb-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
    .jb-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
    .jb-s .iFeatured img{-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
    .jb-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
    .jb-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}
    .jb-s .icomments a:hover{text-decoration:underline}
    .jb-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
    .jb-s .idate{color: #ff0;padding: 9px 10px;font-family: Oswald;
        font-size: 12px;position: relative;top: -270px; left:-80px;
        background: #222;width: 23px;text-align: center;line-height: 1.8em;}
    .jb-s .idate b{font-size:17px;}



  8.  Untuk menyesuaikan dengan warna template yang anda gunakan, anda bisa mengubah beberapa kode berikut ini:
      • Untuk mengubah gambar background silahkan ubah kode warna ini : #222
      • Untuk mengubah warna font silahkan ubah kode warna ini : #ff0 
      • Untuk mengubah warna komentar ubah kode warna ini : #0080ff
  9. Setelah kode diatas terpasang semua silahkan anda Simpan/Save template anda.
  10. Sekarang silahkan anda masuk ke menu blogger "Layout/Tata Letak"
  11. Pada kolom yang anda inginkan klik "Add Gadget"
  12. Kemudian anda pilih "HTML/JavaScipt"
  13. Biarkan kolom judulnya kosong kemudian isikan kode dibawah ini pada kolom isi.
  14. <script type="text/javascript">
    $(window).load(function() {
      $('.jb-s').flexslider({
    animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});}); </script>
    <div class="flexslider jb-s">
    <ul class="slides">
    <!-- SLIDE 1 --> <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="jbtitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li> <!-- SLIDE 2 --> <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="jbtitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li>
    <!-- SLIDE 3 --> <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="jbtitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li>
    </ul></div>

  15. Pada kode yang berwarna diatas silahkan anda sesuaikan dengan dengan keinginan anda.
  16. Setelah selesai anda sesuaikan silahkan simpan pengaturan anda.
Silahkan lihat blog anda apakah sudah muncul Slider Image Responsive nya atau belum, jika belum berhasil silahkan anda hubungi kami atau komentar pada kolom yang tersedia dibawah ini. Selamat mencoba

0 Response to "Blogger Slider Responsive"

Post a Comment

Terimakasih mas aliff, saya puas dengan layanan jasa blog disini, selain hasilnya sesuai keinginan, juga masnya sabar mendengarkan permintaan saya. Sukses terus jasablog.info

konsumen
IRWAN DIANTO

CEO dan Marketing distributor agen pulsa di Irvi Celluler .

www.irvipulsa.com.

Orderan kedua saya setelah tahun lalu saya puas dengan pelayanan jasa blog disini, alhamdulillah juga sudah page one dengan keyword olah data skripsi. Terimakasih jasablog.info.

konsumen
DARYAWATI, S.Si

Owner jasa olah data skripsi.

www.olahdataskripsi.com.

www.olahdata.info

Awalnya mau menggunakan jasa blog lain, ternyata setelah saya order tidak bisa membuat blog sesuai permintaan, untung nemu jasa blog kang alif, semua bisa teratasi dan recommended pokoknya.

konsumen
ICHA

Owner dan marketing mukena dan pakaian muslim di elshama hijab.

www.elshamahijab.com.

Butuh BANTUAN? Segera Hubungi Info Jasa Blog: 081-333-806806