Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nya

Kali ini saya akan menjelaskan sedikit tentang artikel Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nya.

Langsung saja, ada beberapa cara untuk mendapatkan script iklan adsense. salah satu caranya adalah sebagai berikut. Ikuti langkah-langkah dibawah ini:

1. Pertama : Anda wajib login ke https://google.com/adsense dan anda akan dihadapkan dengan beberapa tab di bagian atas account area

2. Kedua : Klik Tab My Ads dan klik New ad unit


3. Ketiga : Isi dan setting kode iklan adsense anda sebagai berikut :

- Name : Isi dengan nama yang anda inginkan. Kalau saya mengetikkan dengan alamat blog sehingga       nanti akan ketahuan blog mana yang lebih banyak menghasilkan klik

- Ad size : Pilih ukuran iklan adsense sesuaikan dengan ukuran side bar blog anda


- Ad type : Pilih tipe iklan. Ada 3 pilihan.


-  Text & image/rich media ads, jika anda akan memunculkan iklan text dan gambar

-  Text ads only , jika hanya akan menampilkan iklan text

-  Image/rich media ads only, jika hanya akan memunculkan iklan gambar saja

-  Backup ads : Pilih saja Show Blank space. Jika porsi iklan tidak ada maka iklan adsense yang muncul    adalah kosong aleas tidak ada iklan Google Adsense


-  Custom Channels : Sebaiknya kode iklan anda diberi channel sehingga akan diketahui iklan di bagian     mana yang paling efektif menghasilkan klik pengunjung. Misalnya diberi nama iklanheaderblog,             sidekananblog dll. Untuk menambah Channel klik saja Create new custom channel


4. Keempat : Klik tombol Save and get code untuk mengambil kode html iklan adsense anda langsung copy dan paste ke side bar blog anda.


Untuk menambahkan kode iklan adsense silahkan:

1. Login ke blogger.com
2. Klik blog yang akan anda pasang adsense
3. Klik Tata Letak
4. Klik Tambah gadget
5. Klik HTML/Javascript
6. Masukkan ( Paste ) kode adsense yang telah anda copy tadi.

Selesai, Anda sudah memasukkan iklan adsense ke side bar blog. Kalau baru setting dan ambil kode adsense, biasanya memakan waktu beberapa menit untuk muncul di blog anda. Jadi sabar saja. Setelah kurang lebih 10 menit anda bisa buka blog anda.

Demikian Artikel Usai Permohonan AdSense Dikabulkan, Ini Script Iklan-nya, semoga sukses-nya teman-teman... god job.

Blogger Dinamis Slider Responsif oleh Label / Tulisan Terbaru

"Blogger Dinamis Slider" adalah slider otomatis sederhana namun kuat untuk blogger. Konten slider menghasilkan dari feed blog ini secara dinamis, berdasarkan pengaturan pengguna melalui jQuery Ajax panggilan. Hal ini sepenuhnya responsif. Karena merupakan Dinamis Slider, update konten slider setiap kali posting baru datang (jika cocok dengan kriteria pengaturan pengguna).

Blogger Dinamis Slider (bdSlider) Fitur


  • Dinamis - Slider Content Menghasilkan otomatis
  • sepenuhnya Responsif
  • Slider Oleh Label Tertentu
  • Slider Dengan Tulisan Terbaru
  • preloader Fungsi
  • Banyak Kustomisasi Pilihan
  • Mudah Pengaturan & Customization

Pengujian Alat untuk Blogger Dinamis Slider

Nah sekarang baru posting slider otomatis ini memiliki alat uji mana Anda dapat memasukkan URL blog Anda dan melihat bagaimana Dinamis itu menghasilkan slider dari feed blog Anda. alat ini memiliki pilihan dasar lain seperti Image Size, Max Item, Label (Anda dapat menentukan label untuk menghasilkan slider dari. Meskipun itu adalah opsional). Lihat Live Pengujian Alat.

Demo/ Examples

Bagaimana itu bekerja ?

Konten slider menghasilkan dari umpan blogger blog, dinamis oleh jQuery AJAX panggilan, dan kemudian FlexSlider berlaku dan mengurus fitur sliding. Bahwa, tidak ada yang mewah tapi sangat berguna untuk pengguna blogger.

Petunjuk pemasangan

LANGKAH - 1: Pergi ke Blog Anda Home> Template (Backup template Anda aman)
LANGKAH - 2: Edit HTML
LANGKAH - 3: Cari menutup kepala: </ head> di template (Petunjuk: untuk mencari template: klik di mana saja di blok kode dan tekan Ctrl + F)
LANGKAH - 4: Salin kode berikut di bawah ini dan paste tepat sebelum </ head>
<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>
Catatan: Jika Anda sudah menambahkan jQuery js ke template blog Anda maka jangan tambahkan lagi karena kadang-kadang beberapa jQuery reruntuhan semuanya. Berikut tag script jQuery terletak di bagian paling pertama blok kode ini di atas.


LANGKAH - 5: Jadi sekarang script engine slider diinstal, Anda siap untuk menambahkan slider (s) di mana saja di blog Anda, termasuk gadget, posting atau halaman. Nah, hanya menyalin kode di bawah ini dan paste di Gadget HTML atau Post
<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Image width in px value
        imageHeight: 398, // Image height in px value
        maxItem: 6, // Max number of Slider Image to show
        animation: "slide", // Select your animation type, "fade" or "slide"
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
    });
});
</script>
LANGKAH - 6: Simpan & Selesai! Cukup Sederhana & Dinamis.

Check these demos lagi dan melihat kode masing-masing di bawah mereka untuk melihat apa yang dapat memberikan bdSlider, Dan membangun slider Anda sendiri.

Semua pilihan dari 'Blogger Dinamis Slider'

$("#slider1").BloggerDynamicSlider({
    blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog
    labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
    maxItem: 6, // Max number of Slider Posts to show
    showPostTitle: true, // Show post title as Caption ? (true/false)
    postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
    imageWidth: 544, // Image width in px value
    imageHeight: 280, // Image height in px value
    animation: "fade", // Select your animation type, "fade" or "slide"
    controlNav: true, // Navigation for paging control of each slide? (true/false)
    directionNav: true, // Previous/next navigation? (true/false)
    pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
    slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, // Set the speed of animations, in milliseconds
    animationLoop: true, // Should the animation loop? (true/false)
});

Terima kasih untuk semua cinta dan dukungan.

Cara menambahkan Responsif Widget Slideshow untuk Blogger

Di tahun 2016, sekarang desain responsif menjadi hal yang sangat trendi untuk website / blog. Tidak hanya trendi tapi sangat diperlukan untuk situs web untuk memiliki desain responsif, sebagai persentase yang tinggi dari pengguna akan mobile.

Jadi di sini saya datang dengan slideshow widget responsif untuk webmaster Blogger. widget slideshow ini membangun dengan Kamera slideshow jQuery Plugin, yang merupakan proyek open source dari Pixedelic.

Fitur Responsif Blogger Slideshow Widget (Camera Slideshow)


  • sepenuhnya Responsif
  • Cross-Browser yang Didukung
  • 33 Warna Berbeda Kulit
  • Banyak pilihan untuk menyesuaikan dengan cara Anda
  • jQuery Easing Didukung
  • Kustom jQuery Mobile untuk kompatibilitas perangkat mobile.

Lihat demo (Static & Blogger versi) dari Responsif Widget Slideshow
Saya Akan Katakan 'One Of The Best' Jika Anda Meminta Responsive Slider / Plugin slideshow

Ada banyak indah jQuery slider / slideshow Plugin luar sana. Tapi saya menemukan bahwa sebagian besar dari mereka (slider dengan banyak fitur) tidak sepenuhnya responsif. Lain slider responsif diandalkan yang saya temukan adalah FlexSlider, yang sangat populer karena kesederhanaan. Di samping tanggap Camera plugin slideshow memiliki beberapa fitur keren lainnya juga termasuk ..


  • Banyak efek transisi
  • Play / Pause, Thumbnail Navigasi, ToolTip Navigasi dll
  • HTML5 data Atribut didukung. Dengan menggunakan itu, banyak properti dapat ditambahkan untuk meluncur. Misalnya link / URL, URL thumbnail / slider URL gambar dll
  • Anda tidak perlu khawatir tentang ukuran gambar atau rasio aspek.
  • Gambar akan kembali berukuran sesuai secara otomatis dengan kotak slide.
  • Ketika gambar yang lebih besar dari wadah / box slideshow, atau memiliki rasio aspek yang berbeda maka mereka akan dipotong (dari tengah) secara otomatis dengan mempertahankan aspek rasio mereka, itu berarti mereka tidak akan mendapatkan Peregangan.
  • Video yang didukung.

Saya merekomendasikan untuk menambahkan gambar yang lebih besar dari wadah / box slideshow atau ukuran setidaknya sama wadah.

Dapatkan Kode!

Untuk menambahkan slide ini ke blog BlogSpot Anda, hanya Copy dan Paste kode yang diberikan di bawah ini ke HTML / Javascript Widget.


  1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
  2. Salin kode di bawah ini dan paste di atasnya. Kemudian Simpan. Dan Anda sudah selesai !.

<!---------------------------------------------
    Blogger Slideshow Widget by
    http://imagesliderforblogger.blogspot.com/
    org. by dimpost.com 
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: false, // thumnails & tooltip is controlled by it
        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://blogsmanado.blogspot.co.id/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
        </div>
        <div data-link="http://blogsmanado.blogspot.co.id/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
            <div class="camera_caption fadeFromBottom">
                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
            </div>
        </div>
        <div data-link="http://blogsmanado.blogspot.co.id/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>It's completely free</em> (even though a donation is appreciated)
            </div>
        </div>
        <div data-link="http://blogsmanado.blogspot.co.id/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera slideshow provides many options <em>to customize your project</em> as more as possible
            </div>
        </div>
        <div data-link="http://blogsmanado.blogspot.co.id/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements and videos.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->
Kustomisasi Pilihan:

Melihat kode di bawah ini. Di sinilah Anda menyesuaikan slideshow. Bermain dengan itu. (Baca komentar kode untuk mendapatkan dengan mudah).

Pilihan slideshow
    time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
    transPeriod: 1200, // length of the sliding effect in milliseconds
    thumbnails: false, // thumnails & tooltip is controlled by it
    pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
    fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
    hover: false, // Pause on hover
    height: '50%' // slideshow height (50% is default)
Untuk menyesuaikan ukuran slider mengedit aturan CSS ini dari kode utama
.fluid_container {
    margin: 0 auto; /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}
Tanggapan Anda dipersilahkan!

Gambar Dasar Slider Responsive Widget untuk Blogger

Ini adalah responsif jQuery gambar slider. slider sederhana tapi menakjubkan ini dikembangkan oleh woothemes.com. Ini memiliki beberapa fitur yang sangat bagus yang membuat Anda seperti itu. Fitur yang paling keren adalah hal ini sangat responsif dan ringan; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi menyesuaikan secara otomatis.

Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda.

Lihat demo

Mari Pasang Gambar Slider responsive Widget di Blogger


  1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
  2. Salin kode di bawah ini dan paste di atasnya.

<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* FlexSlider Necessary Styles
*********************************/

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
    margin-bottom: 0 !important;
}

.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

#flex-isfb {
    overflow: hidden;
    position: relative;
    min-height: 200px;
    padding: 3px;
}


/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flexslider .slides,
.flexslider .slides img,
.flex-direction-nav {
    margin: 0 !important;
    padding: 0 !important;
}

.flex-pauseplay span {
    text-transform: capitalize;
}


/* Clearfix for the .slides element */

.slides:after {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-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);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}


/* Direction Nav */

.flex-direction-nav {
    *height: 0;
}

.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 40px;
    height: 45px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
    left: -50px;
}

.flex-direction-nav .flex-next {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
    right: -50px;
    text-align: right;
}

.flexslider:hover .flex-prev {
    opacity: 0.5;
    left: 10px;
}

.flexslider:hover .flex-next {
    opacity: 0.5;
    right: 10px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 0.9;
}


/* Pause/Play */

.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #000;
}

.flex-pauseplay a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f004';
}

.flex-pauseplay a:hover {
    opacity: 1;
}

.flex-pauseplay a.flex-play:before {
    content: '\f003';
}


/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 10px;
    }
    .flex-direction-nav .flex-next {
        opacity: 1;
        right: 10px;
    }
}
</style>
<!-- SLIDER HTML -->
<div id="flex-isfb">
    <!-- Preloader -->
    <div id="preloader"></div>
    <style>
    /* Preloader */
    
    #preloader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        /* change if the mask should have another color then white */
        z-index: 999999999999;
        /* makes sure it stays on top */
    }
    </style>
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="http://blogsmanado.blogspot.co.id/">
                    <img src="https://4.bp.blogspot.com/-WwhCZqAYcxw/WEYujMVzhaI/AAAAAAAAANA/7uhvnxOWRFsSFtq9DjfpRPGz2RIbRT1rQCLcB/s320/slide1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://blogsmanado.blogspot.co.id/">
                    <img src="https://3.bp.blogspot.com/-Q9xwXwgF-G4/WEYujOwAWZI/AAAAAAAAANE/zXugjld00zgM4b9RYwoJzIJeY6yW8ENZgCLcB/s320/slide2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://blogsmanado.blogspot.co.id/">
                    <img src="https://2.bp.blogspot.com/-2Zt-t0jlW2Y/WEYuhxU9i7I/AAAAAAAAAM8/Nz_lAJjuKBIDn2rCiZIcCH8OpmIINUszQCLcB/s320/slide3.jpg" />
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: true,
        easing: "swing",
        slideshowSpeed: 3000,
        animationSpeed: 600,
    });
});
</script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow');
    })
    //]]>
</script>
3. Menyimpan, dan kita selesai.

CATATAN:
Lupakan lebar slider dan tinggi, itu akan menyesuaikan secara otomatis.
Mengganti gambar slider (pencarian <img src) dengan gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)
Ada beberapa hal lain yang mungkin ingin bermain dengan, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka. Bermain dengan mereka ...
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: true,
    easing: "swing",
    slideshowSpeed: 3000,
    animationSpeed: 600,
});
Selamat bersenang-senang! Jangan lupa untuk mengucapkan terima kasih...

jQuery Carousel Slider untuk Blogger (FlexSlider) Responsive

Ini adalah responsif jQuery korsel slider. slider ini menakjubkan dikembangkan oleh flexslider.woothemes.com. Ini memiliki beberapa fitur yang sangat keren yang membuat Anda seperti itu. Fitur yang paling keren itu sepenuhnya responsif; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi yang otomatis disesuaikan.

Dan juga Anda dapat mengatur minimum / maksimum jumlah gambar yang akan tampil di acara berbagai ukuran layar / browser. Jadi secara keseluruhan itu cukup korsel slider yang indah. Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda. Check out live demo dengan mengklik link di bawah.



Mari Pasang jQuery Carousel Slider untuk Blogger Blog Anda


  1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
  2. Pilih HTML / Javascript
  3. Salin kode di bawah ini dan paste di atasnya.
<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/


/* Browser Resets */

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* FlexSlider Necessary Styles
*********************************/

.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flex-pauseplay span {
    text-transform: capitalize;
}


/* Clearfix for the .slides element */

.flexslider a.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -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);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}


/* Direction Nav */

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

.flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: -36px;
}

.flex-direction-nav .flex-prev {
    left: -36px;
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 5px;
}

.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 5px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 1;
}

.flex-direction-nav .disabled {
    opacity: .3!important;
    filter: alpha(opacity=30);
    cursor: default;
}


/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .active {
    opacity: 1;
    cursor: default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 4
        });
    });
});
</script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="https://4.bp.blogspot.com/-WwhCZqAYcxw/WEYujMVzhaI/AAAAAAAAANA/7uhvnxOWRFsSFtq9DjfpRPGz2RIbRT1rQCLcB/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://3.bp.blogspot.com/-Q9xwXwgF-G4/WEYujOwAWZI/AAAAAAAAANE/zXugjld00zgM4b9RYwoJzIJeY6yW8ENZgCLcB/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://2.bp.blogspot.com/-2Zt-t0jlW2Y/WEYuhxU9i7I/AAAAAAAAAM8/Nz_lAJjuKBIDn2rCiZIcCH8OpmIINUszQCLcB/s320/slide3.jpg" />
        </li>
        <li>
            <img src="https://1.bp.blogspot.com/-tmoMEpRFYUY/WEYuj6FIl3I/AAAAAAAAANI/ACiG8Lvkr4Yq2ApjIcEwQHqoJnYNMxbMACLcB/s320/slide4.jpg" />
        </li>
        <li>
            <img src="https://4.bp.blogspot.com/-WwhCZqAYcxw/WEYujMVzhaI/AAAAAAAAANA/7uhvnxOWRFsSFtq9DjfpRPGz2RIbRT1rQCLcB/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://3.bp.blogspot.com/-Q9xwXwgF-G4/WEYujOwAWZI/AAAAAAAAANE/zXugjld00zgM4b9RYwoJzIJeY6yW8ENZgCLcB/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://3.bp.blogspot.com/-Q9xwXwgF-G4/WEYujOwAWZI/AAAAAAAAANE/zXugjld00zgM4b9RYwoJzIJeY6yW8ENZgCLcB/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://1.bp.blogspot.com/-tmoMEpRFYUY/WEYuj6FIl3I/AAAAAAAAANI/ACiG8Lvkr4Yq2ApjIcEwQHqoJnYNMxbMACLcB/s320/slide4.jpg" />
        </li>
        <li>
            <img src="https://4.bp.blogspot.com/-WwhCZqAYcxw/WEYujMVzhaI/AAAAAAAAANA/7uhvnxOWRFsSFtq9DjfpRPGz2RIbRT1rQCLcB/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://4.bp.blogspot.com/-WwhCZqAYcxw/WEYujMVzhaI/AAAAAAAAANA/7uhvnxOWRFsSFtq9DjfpRPGz2RIbRT1rQCLcB/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://3.bp.blogspot.com/-Q9xwXwgF-G4/WEYujOwAWZI/AAAAAAAAANE/zXugjld00zgM4b9RYwoJzIJeY6yW8ENZgCLcB/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://2.bp.blogspot.com/-2Zt-t0jlW2Y/WEYuhxU9i7I/AAAAAAAAAM8/Nz_lAJjuKBIDn2rCiZIcCH8OpmIINUszQCLcB/s320/slide3.jpg" />
        </li>
    </ul>
</div>

4. Menyimpan, dan kita sudah selesai.

CATATAN:

  • Lupakan lebar dan tinggi itu akan menyesuaikan otomatis.
  • Mengganti URL gambar berwarna dengan URL gambar yang diunggah Anda sendiri (Anda dapat meng-upload gambar di blogspot, flickr dll)
  • Ada beberapa hal lain yang dapat mengubah, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka.

    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4