Cara Membuat SlideShow Di Header Blog Anda

Bagi para blogger yang ingin memperindah blog pribadi nya dengan memiliki header yang dapat berubah-ubah dengan berbagai gambar atau tampilan header nya menjadi SlideShow, dapat mengikuti langkah-langkah yang ada di bawah ini :

1. Login ke blogger.com
2. Pilih Theme atau Tema
3. Lalu pilih edit HTML
4. Cari kode </head>
5. Kemudian copy code script yang ada dibawah dan pastekan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images

slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption

$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0

$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)

$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it

$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption

$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow

var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over

$('ul.slideshow').hover(

        function () {

                clearInterval(timer);

        },

        function () {

                timer = setInterval('gallery()',speed);

        }

);

}

function gallery() {

//if no IMGs have the show class, grab the first image

var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image

var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption

var title = next.find('img').attr('title');

var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index

next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption

$('#slideshow-caption').animate({bottom:-70}, 300, function () {

                //Display the content

                $('#slideshow-caption h3').html(title);

                $('#slideshow-caption p').html(desc);

                $('#slideshow-caption').animate({bottom:0}, 500);

});

//Hide the current image

current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>

</script>

<style type="text/css">

ul.slideshow {

list-style:none;

width:950px;

height:250px;

overflow:hidden;

position:relative;

margin:0;

padding:0;

font-family:Arial,Helvetica,Trebuchet MS,Verdana;

;

}

ul.slideshow li {

position:absolute;

left:0;

right:0;

}

ul.slideshow li.show {

z-index:500;

}

ul img {

width:950px;

height:250px;

border:none;

}

#slideshow-caption {

width:980px;

height:70px;

position:absolute;

bottom:0;

left:0;

color:#fff;

background:#000;

z-index:500;

}

#slideshow-caption .slideshow-caption-container {

padding:5px 10px;

z-index:1000;

}

#slideshow-caption h3 {

margin:0;

padding:0;

font-size:16px;

}

#slideshow-caption p {

margin:5px 0 0 0;

padding:0;

}

</style>

NB :
1. width dan height pada ul.slideshow adalah ukuran dari SlideShow
2. width dan height pada ul img adalah ukuran dari gambar yang kalian pasang

6. Kemudian copy paste kode dibawah ini dan letakkan di gadget header pada layout atau tata letak.

<ul class="slideshow">
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 2 DISINI" alt="MASUKAN Description POST 2 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 3 DISINI" alt="MASUKAN Description POST 3 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 4 DISINI" alt="MASUKAN Description POST 4 DISINI" /></a></li>
</ul>

Setelah berhasil mengikuti langkah-langkah yang telah dijelaskan pada artikel ini tentang Cara Membuat SlideShow Di Header Blog Anda kalian bisa sesuka hati menganti gambar dan ukuran SlideShow pada Header blog kalian.


Semoga Bermanfaat.
(Portal-Informasi-Online/Berbagai-Sumber-Lain/ABNS)

Cara Membuat Widget Slideshow Efek 3D Gallery

 

Anda bosan dengan tampilan blog yang begitu-begitu saja tapi bingung cara mengubahnya? ini dia salah satu cara caranya dengan Membuat Widget Slideshow Efek 3D Gallery


Edit Template, temukan kode ]]></b:skin>

Gambar 1-Membuat Widget Slideshow Efek 3D Gallery

Langkah Selanjutnya Copy CSS berikut, selanjutnya letakkan tepat di atas ]]></b:skin>

.dg-container {width:100%;height:450px;position:relative}
.dg-wrapper {
  width:481px;height:316px;
  margin:0 auto;position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;}

.dg-wrapper a {
  display:block;
  position:absolute;left:0;top:0;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_GP5aDEzVbSrU-9GVnXrIVh136ExjIN4adtdBOQmRGhLUEieWZTAMvOvjXbUoX6wH_199T-PGWLFrTRTgyhfh0qmKwlzgQTsDwgavsTSjVmpa5zQGEdM-g-Bd1h4Nns0DsqqWXe1xeU/s1600/01gambar.jpg') no-repeat 0 0;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  -webkit-box-shadow:0 5px 10px rgba(225,225,225,.5);
  -moz-box-shadow:0 5px 10px rgba(225,225,225,.5);
  box-shadow:0 5px 10px rgba(225,225,225,.5);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;}

.dg-wrapper a.dg-transition {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;}

.dg-wrapper a img {
  display:block;margin:0;
  padding:41px 0 0 1px;
  border:none;outline:none;}

.dg-wrapper a .dg-caption {
  font:italic normal 16px/45px Helvetia;
  text-align:center;width:100%;
  height:45px;white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;display:none;
  position:absolute;bottom:-60px;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  box-shadow: inset 0 4px 0 0 rgba(225,225,225, 0.6);
  -webkit-border-radius:45px;
  -moz-border-radius:45px
  border-radius:45px;}

.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
  width:58px;position:absolute;
  z-index:1000;bottom:40px;
  left:50%;margin-left:-29px;}

.dg-container .dg-nav span {
  text-indent:-9000px;
  float:left;cursor:pointer;
  width:24px;height:25px;opacity:0.8;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMSbOTo7JYs9O8kQjdWbm9KW8j0srOpQeDQfzZw9aUuH8auJgNMR7Hqi90ZDYjOmsdtYG6_lh3IYjJO2UDrsvbh8Iav3uecABQhZaiV5POpY1H1JL1gCJe84ZaxlBatvS9ShMs8j13VY/s1600/arrows.png') no-repeat 0 0;}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
  background-position:100% 0;margin-left:10px;}

.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}print 'hello world!'

Selanjutnya Ke tata letak, pilih gadget diatas halaman Posting Blog/ Main, copy kode berikut, letakkan pada halaman.

Gambar 2 -Membuat Widget Slideshow Efek 3D Gallery

Perhatikan kode di bawah yang diberi warnah merah, jika pada template Anda sudah terdapat jQuery yang sama, abaikan kode tersebut atau hapus saja.

<section id="dg-container" class="dg-container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
    url: 'http://URL-Anda.blogspot.com',
    numPost: 3,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: false,
    containerId: 'dg-container',
    slider: {
        itemWidth: 480,
        itemHeight: 260,
        prevText: '&lt;',
        nextText: '&gt;',
        current: 0,
        autoplay: false,
        interval: 2000
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>

DEMO

(DTE/Crazzy-Art-01/Berbagai-Sumber-Lain/ABNS)

Cara Mudah Blokir Situs Dewasa Lewat Setting Google

Kita sebagai orang tua, tentunya khawatir jika dalam dunia tanpa batas ini (media digital dalam genggaman) malah memberikan dampak buruk terhadap perkembangan anak-anak kita. mau tidak di pungkirin, akses dunia internet sekarang sudah mulai sangat mudah di akses. Apalagi gadget ponsel sekarang sudah tidak asing lagi buat mereka.

Nah, untuk memberikan akses tanpa batas dan membatasi pergerakan anak untuk menjangkau situs-situs dewasa, berikut saya akan share sedikit pengetahuan terkait cara memblokir situs-situs dewasa (porno/gambar-gambar dewasa) lewat setting google.

Oke langsung saja, agar tidak berbelit dan kemana-mana. untuk langkah awalnya, silahkan langsung masuk saja ke akun google anda. di google.com

Next lanjutkan masuk ke alamat berikut untuk langsung menuju ke halaman setting Google Privacy di alamat ini.

setelah di suguhkan tampilan kurang lebih di bawah ini :


Filter TelusurAman

TelusurAman dapat membantu Anda memblokir gambar yang tidak pantas atau eksplisit dari hasil Google Penelusuran. Filter TelusurAman tidak 100% akurat, namun fitur ini dapat membantu Anda menghindari sebagian besar konten kekerasan dan khusus dewasa.

 Aktifkan TelusurAman

Gembok TelusurAman

klik langsung saja di kita aktivkan telusur aman dan gembok telusur aman..
oke aku rasa itu adalah langkah mudah yang bisa kita perbuat untuk membatasi ruang gerak anak untuk menjangkau situs2 diwasa yang semakin memprihatinkan keberadaannya..

Salam semoga bermanfaat

(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)

Cara Mudah Memblokir Iklan Google Adsense By URL

Sobat blogger ketemu lagi dalam postingan terkait iklan google adsense.. kali ini aku mau sedikit share masalah bagaimana cara memblokir iklan google adsense berdasarkan url tertentu. ini aku angkat sebagai materi karena, aku lihat ada banyak kasus yang menjerat terkait pemblokiran adsense yang tidak muncul lagi di web kita. padahal hanya gara2 satu postingan saja, semuanya jadi ruyam.

Yah, mungkin saja blognya mau di isi hal-hal yang sedikit sensitive agar menarik pengunjung, tapi apes, gara-gara mentargetkan page view google adsense kita ke banned dan tidak bisa tampil karena kena warning.. efeknya mungkin kita jadi malez buat posting karena web tak menarik karena tidak adanya iklan adsense yang muncul, karena mau tidak mau di pungkirin, iklan adsense sudah menjadi tolok ukur dari web-web berkualitas, karena pengajuannya yang bgitu sulit dan berbelit.. jadi ketika kita sudah di approve adsense, jagalah dan pertahankan materi yang tidak menyimpang..

oke langsung saja, jika kita mau mengamankan materi yang sedikit fulgar dan tidak memunculkan iklan di dalamnya, kita bisa melakukan hal-hal berikut ini.

- Silahkan anda masuk di account google adsense anda atau klik Allow and Blocked Adsense
lihat gambar jelasnya di bawah ini :

- Sitelah muncul gambar yang kurang lebihnya seperti ini, silahkan sobat langsung saja masukin alamat url yang mau di blocked semisal http://parah-orang-ini-di-perkosa-kambingnya.html (just contoh aja)
- Setelah anda memasukkan alamat url sobat, di bawah kotak ada status url yang sudah ke blocked..


Untuk pembahasan iklan lengkap silahkan sobat bisa menuju di link adesnse atau di link Get money

Oke itu saja semoga bisa menjadikan manfaat ya..

Salam

(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)

Cara Membuat Image Slider Gaya Cycle Responsive

Kali ini aku mau berbagi terkait, bagaimana cara membuat atau menambahkan image slider gaya cycle pada blogger untuk code script CSS3. sangat gampang banget tanpa mengubah template html sobat. jadi tinggal masuk saja di penambahan gadget pada template sobat.
Jika sobat berkenan menggunakan image slider ini pada tampilan blog sobat, silahkan kode scriptnya dibawah ini ya...

===========================================

<style type="text/css" media="screen">
.container {
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
}

#content-slider {
    height: 335px;
    width: 100%;
}

#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
}

#mask {
    height: 320px;
    overflow: hidden;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider li.firstanimation {
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
}

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -320px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 20px;
}

#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left: 0px;
}


/* PROGRESS BAR */

.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    -moz-animation: fullexpand 25s ease-out infinite;
    -webkit-animation: fullexpand 25s ease-out infinite;
}


/* ANIMATION */

@-moz-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-moz-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

@-webkit-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    50% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-webkit-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}


/* ANIMATION BAR */

@-moz-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}
</style>
<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
                <ul>
                    <li id="first" class="firstanimation">
                        <a href="http://tutorialmixs.blogspot.com/">
                            <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" />
                        </a>
                        <div class="tooltip">
                            <h1>Cougar</h1>
                        </div>
                    </li>
                    <li id="second" class="secondanimation">
                        <a href="http://tutorialmixs.blogspot.co.id/2016/03/cara-membuat-iklan-muncul-di-sembarang-klik.html">
                            <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" />
                        </a>
                        <div class="tooltip">
                            <h1>Lions</h1>
                        </div>
                    </li>
                    <li id="third" class="thirdanimation">
                        <a href="http://tutorialmixs.blogspot.co.id/2016/03/cara-membuat-subscript-box-melayang.html">
                            <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" />
                        </a>
                        <div class="tooltip">
                            <h1>Snowalker</h1>
                        </div>
                    </li>
                    <li id="fourth" class="fourthanimation">
                        <a href="http://tutorialmixs.blogspot.co.id/2016/02/cara-submit-url-ke-directory-webmaster-yandex.html">
                            <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" />
                        </a>
                        <div class="tooltip">
                            <h1>Howling</h1>
                        </div>
                    </li>
                    <li id="fifth" class="fifthanimation">
                        <a href="http://tutorialmixs.blogspot.co.id/2016/01/cara-setting-video-youtube-responsive.html">
                            <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" />
                        </a>
                        <div class="tooltip">
                            <h1>Sunbathing</h1>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

=============================================
Semoga bisa bermanfaat buat anda..
salam blogger

jika widget ini tidak jalan pada browser selain firefork, silahkan ambil code scriptnya dibawah ini:

Cara menambahkan JavaScript Tracking Snippet Google Analytics Terbaru

Sobat blogger, akhirnya aku kembali dengan wajah baru terkait situs web ini. yang awalnya aku menggunakan domain Blogspot.com lalu migrasi ke domain Tdl .Com, lalu aku demosikan lagi ke domain Blogspot tercinta ini.. memang dari awal karena aku tidak tertarik menggunakan domain berbayar (Tdl), walaupun mempunyai pengaruh yang luar biasa di serach engine, pengindekan dan lain-lain..

Dan akhirnya aku kembali ke domain Blogspot ini, alasanya cukuplah sederhana, yaitu "Aku tidak ingin di sibukkan dengan masalah registrasi ulang pertahunnya terkait perpanjangan penggunaan domain TDL/Domain Top Leader .Com" dan belinya domain berbayar ini aku lakukan hanya atas dasar keingintahuan aku terkait bermain domain, Not More

Oke dari pada panjang lebar (karena ini hanyalah intermozo sedikit untuk menuhin description blog aku saja) jadi aku lanjutkan ke masalah bagaimanakah menambahkan JavaScript Tracking Snippet Google Analytics. Kenapa aku tertarik ini menjadi bahan postingan aku kali ini, itu disebabkan karena ini adalah langkah yang penting terkait Memonitor laju perjalanan Blog kita. sehingga kita bisa track blog kita secara langsung.

Berikut adalah manfaat dari pemasangan JavaScript Tracking Snippet Google Analytics:
- Url apa yang di akses
- Dari mana (wilayah/zone) pengunjung datang
- Lama durasi pengunjung melakukan visit ke blog kita
- Keywords Search Engine ketika pengunjung melacak blog kita
- Dan dari perangkat apa pengunjung mengakses blog kita

Cukup banyak juga kan manfaatnya? nah itulah kenapa alasan aku mengangkat topik ini menjadi bahan postingan aku malem ini. semoga bisa menjadikan gambaran yang bermanfaat but sobat blogger.

Tutorialnya:
silahkan masuk saja ke alamat web Google Analytics sobat dan sisipkan perintah <script> di bawah ini di atas kode </head>

Kode Javascript Tracking Snippet

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

untuk kode UA-XXXXX-Y silahkan ganti dengan ID Pelacakan GA sobat. silahkan menuju ke menu Admin >> Properti >> Setelah Properti >> liat ID Pelacakannya. untuk tahapan pertama sudah selesai cukup disitu.

sekarang masuk ke tahapan ke dua, untuk menambahkan:

Alternative Async Tracking Snippet

(namanya juga alternative, jadi kode berikut ini nantinya bisa anda gunakan atau tidak itu terserah anda) tetapi sebelum memutuskan untuk tidak menggunakannya pertimbangkanlah untuk hal berikut ini:

Manfaat dari pemasangan Alternative Async Tracking Snippet ini adalah :
Untuk kode di atas yaitu (Java Script Tracking snippet) memungkinkan blog kita bisa di akses dengan segala macam media browser. tetapi kelemahannya kode tersebut tidak memungkinkan bisa Preload Script oleh Browser modern.

Jadi penambahan cuplikan Alternative Async ini di maksudkan untuk menambah dukungan Preloading Script pada Browser modern. jadi jika sobat sudah memahami manfaat dan kelemahannya, dan berniat memasangnya di HTML sobat, silahkan copy saja code script di bawah ini di atas </head> atau bisa juga di bawah pemasangan code di atas.

dan berikut adalah script yang bisa sobat pasangkan:

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script asyncsrc='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

untuk kode UA-XXXXX-Y silahkan ganti dengan ID Pelacakan GA sobat.
oke aku rasa cukup itu dulu pembahasan terkait Pemasangan Javascript Tracking Snippet dan pemasangan Alternative Async Tracking Snippet
semoga bisa menjadi manfaat untuk tracking blog sobat dengan cakupan yang jauh lebih luas.

(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)

Cara Membuat Image Slider Jquery Carousel Flexslider Tanpa Rubah Html

Salam jumpa lagi sobat blogger, pada kesempatan ini aku coba mau sharing terkait bagaimana Cara membuat image slider Jquery Carousel Flexslider responsive tanpa rubah html.

Tutorial yang aku jelaskan nantinya adalah tutorial penambahan pada html template karena penampilannya aku memakai kode scritp kondisi. (tampilan hanya aku munculkan ketika pada beranda Web) tetapi jika sobat mau menambahkan langsung pada penambahan gadget template sobat, ya tinggal di tambahkan saja, jadi langkah ini adalah langkah termudah yang bisa anda lakukan . masang dan tinggal tunggu hasilnya hmmm

Untuk semua tutorailnya sudah aku jelaskan detail pada file txts, jadi tinggal copy scriptnya dibawah Ini:

=========================================
cara ini aku rasa sangatah mudah, jadi silahkan letakkan kode di bawah ini
tepat di atas kode </header>

note: karena setiap template mempunyai struktur yang berbeda-beda, silahkan gunakan logika anda.
cermati struktur html template anda dengan teliti. sebelum memasang kode slider ini.
(untuk pemula seperti saya, silahkan lakukan backup terlebih dulu template anda untuk keamannnya)
slider ini sudah saya modifikasi hingga anda tinggal makek dan terapin pada template sobat. 
jika masih kurang juga untuk masalah lebar (width) dan panjangnnya (hight)nya silahakan atur dan sesuaikan sendiri.
====================


<!-- tambahan image slider-2 start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 &gt; 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: 5;
    text-decoration: none;
    z-index: 99999;
}

.slides:after {
    content: &quot;.&quot;;
    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 &gt; 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: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

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

.flexslider .slides {
    zoom: 1;
}

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


/* 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: 10px;
    height: 10px;
    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: .1;
    cursor: pointer;
}

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

.flex-control-thumbs .active {
    opacity: 1;
    cursor: default;
}
</style>
<a alt='get update data script' href='http://tutorialmixs.blogspot.com' style='font-size: 9px; color: white; float: right; margin: 5px;'>.</a>
<noscript>Your browser does not support JavaScript please update!</noscript>
<script src='http://project.dimpost.com/flexslider-carousel/jquery.js' type='text/javascript'/>
<script src='http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
    $(window).load(function() {
        $(&#39;.flexslider&#39;).flexslider({
            animation: &quot;slide&quot;,
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 1
        });
    });
});
</script>
<!-- tambahan image slider Start -->
<div class='flexslider'>
    <ul class='slides'>

        <li>
         <a href='http://lapak-untungbeliung.blogspot.co.id/2016/02/handphone-mu-bisa-merubah-hidup-anda.html' target='_blank'><img alt='Handphone mu bisa merubah hidup anda' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhZSd_J1UMXXSX0oT9VUxXZuaRRVF-74FYwOn1HRcYTbC7IPRj233S8YXeo9PHYWII5PeeQX-x07T1canzljhxM-QL0jrbmtLusZADTnrSAhQqDdlqDGcSNj38fxQnYjpC16uB0lqZO0/s640/cara+membuat+HP+menjadi+mesin+uang.jpg' title='Handphone mu bisa merubah hidup anda'/></a>
        </li>
        <li>
        <a href='http://lapak-untungbeliung.blogspot.co.id/2016/02/penjelasan-terkait-bisnis-dni-lengkap.html' target='_blank'><img alt='Penjelasan Terkait Bisnis DNI [Lengkap]' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jzHKy91t-gfhj7pU4eWawPrDwcHwXx82cnwgBe8ZcgCihkj-s3GQEBiNujCsfmf_m9nVSfwM6OzUyt_JDr9vTbL0FjVCaQAZuZLjcnwE3PEWGl9GN6pa2iRct-NGLPHLnuCPVI_R4vQ/s640/business+kit+DNI.jpg' title='Penjelasan Terkait Bisnis DNI [Lengkap]'/></a>
        </li>
        <li>
            <a href='http://lapak-untungbeliung.blogspot.com/2016/02/cara-daftar-keagenan-pulsa-di-dni.html' target='_blank'><img alt='Cara daftar keagenan pulsa di DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVhMTCAWY8A71Qbn_0PU_Pb-Yit-GRp9TZjHp21BXTApNuhCMjh2RFggL4WhWIwxmd8APKj8dO9gND1T5E_dLSI6bbJapR3ymAh1LtsT4HHcCb1SBANrmsMTjBnhVYLGPOXnuo4jnOv0/s640/cara+daftar+keagenan+pulsa.jpg' title='Cara daftar keagenan pulsa di DNI'/></a>
        </li>
        <li>
            <a href='http://lapak-untungbeliung.blogspot.com/2016/02/tips-dan-cara-menawarkan-bisnis-dni.html' target='_blank'><img alt='Tips dan Cara menawarkan Bisnis DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_TjkHFZ74qvet2-C6geFgZDaLXYx7nhX1SL6pjiMjiF6UQXl1LxRBfrK8iOiMuC3Y7d1ZRVhblYodGAOu28vXU0kwrP9qHkmkQgbJG23KZNzwZ8w_OkMjCy5DDlhOiF6Stk5FBWV1FFP/s640/cara+presentasi+yang+baik.jpg' title='Tips dan Cara menawarkan Bisnis DNI'/></a>
        </li>
        <li>
            <a href='http://lapak-untungbeliung.blogspot.com/2016/02/triks-mensiasati-bisnis-bersama-dni.html' target='_blank'><img alt='Triks mensiasati bisnis bersama DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiybGoX1SDiZ_8pWt0svHVcCE91xDyEJ_K6ojJ2dXts08tn5JfZorbFMsKUZdoaXFyrgN0vuVFTUb0gzD8o_FzaRrp4RDvzBDO-Oxz2opjdn1IHVejrYyqyvQQnaASMAa6hNub76khiTUM/s640/trik+mensiasati+bisnis+dni.png' title='Triks mensiasati bisnis bersama DNI'/></a>
        </li>
     

    </ul>
</div>
</b:if>
<!-- tambahan image slider End -->
<!-- tambahan image slider-2 start -->

============
note: ganti semua URL Web dan URL Image, dengan Url sobat yah...

yabbbb...
selesai sudah tutorail ini bagaimana Cara Membuat Image Slider Jquery Carousel di atas header
next setelah ini aku akan bagikan juga ke sobat terkait Tutorial Bagaimana Cara Membuat Auto Slider Jquery Carousel Berdasarkan Label
dan aku rasa juga tidak kalah menariknya dari artikel ini, sehingga web sobat nantinya bisa seperti web profesional dengan harga anak kos he,e,.

salam blogger, semoga bermanfaat

Maaf karena scriptnya teralu panjang jadi silahkan saja di get code slider image
semoga bermanfaat.

(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)

Cara Membuat Slider Responsive Jquery Tanpa Edit Html

Sobat blogger salam jumpa lagi, dah lumayan lama aku ndak posting di blogku yang satu ini, atau mungkin beberapa blog aku, karena maklum lagi ada beberapa pemesanan website, ataupun permintaan bantuan buat sobat blogger untuk minta di bantu edit beberapa Html template terkait pemasangan slider pada blog mereka. ya.. kalau aku lagi tidak ada kerjaan, insysAllah aku akan bantu untuk mempercantik blog sobat blogger yang menginginkan bantuan aku.. yahh semoga bisa menjadikan manfaat aja, biar mereka juga bertambah semangat buat blog, karena melihat tampilan blognya tambah oke..

yab,, kali ini aku mo share terkait cara membuat image slider responsive dengan jquery, tanpa harus susah payah mengotak-atik template sobat (untuk pemula seperti saya, aku rasa tutorial ini sangat membantu sekali.. tapi sebelumnya aku minta maaf karena aku tidak bisa share secara langsung scriptnya di postingan ini. jadi jika sobat memang menginginkan script ini terpsang di blog atau website sobat, silahkan download aja di link di bawah ini. (jangan lupa di follow blognya ya sob, agar sobat bisa mendapatkan artikel gratis update setiap aku membuat artikel baru..)


Untuk scriptnya silahkan di bawah ini:

<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
* http://tutorialmixs.blogspot.com
* 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: 10;
    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: 130px;
    -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: .1;
    cursor: pointer;
}

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

.flex-control-thumbs .active {
    opacity: 1;
    cursor: default;
}
</style>
<a style="font-size: 9px; color: white; float: right; margin: 5px;" href="http://tutorialmixs.blogspot.com" alt="get update data script">.</a>
<noscript>Your browser does not support JavaScript please update!</noscript>
<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: 3
        });
    });
});
</script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/2016/03/list-generator-backlink-builder-free.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ8sOOjTI9JG291U48B4lzIcS_VI0yn6Sfu0kvHLpQyY5MfQg7L9OBoNTwgywufQwo0XMVDVJWqkqzTcCUQd4FAr9Uyd5uEPMUYoHsVOzo1nBgq_XWrZh1Y-HKvIrd5lhWI87fYipyMw/s640/backlink+bulder+free.jpg" title="Kumpulan Backlink Generator Free" alt="Kumpulan Backlink Generator Free"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Submission" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfXIOHfNDX0JgLFRuCVbeqygk9ucD3XH4wvESBRkUIu_B9UU08C5CdYqnKzMCJv9Q2vEuqRFvaerXvy421sGYzpWasuYOSyMdiNJXsLRUUZNV5dsPPdxTNLglPkIA-DdNbrNBEBaKnLw/s400/FWsubmission.jpg" title="Free Submission URL lengkap" alt="Free Submission URL lengkap"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/DirectoryFree" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjc-R-YbkNN-r9PoIZmnY5CC6da2SSJw1obqBdKhvB9rtlCgAzaDwVSgkOqBbAG5MbDlij_OjXZeZ8u9X3TaXT79j_y56_77RrE-VTnJtLm0wF6HzI8DgxNoRAhjMcoTw00OcZ6vsyzMU/s640/ISEDN+directory+submite+Free.jpg" title="Submit Blog ke Direktory free lengkap" alt="Submit Blog ke Direktory free lengkap"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Slider" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaRfsbOrlWKff_5wZr0rOIxMXxOpjojVigojtdv-1XPma87Cc0hhGQG7YB59w4h-eRcDBezp3xWTo0CK4J7EX862Qkx6fSoZV2iJypwwOkhewfDqxfKt1k50Yz3j5XK1cq8fmC5oxheY/s640/Image+slider+header+untuk+blogger.jpg" title="Slider dan Jquery widget untuk blogger" alt="Slider dan Jquery widget untuk blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Widget" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6rA1ozfeAUk6e_ee7_-RwOGKUN80oW1IhlfdIs-Fp1PQDPTvRcPPwPDjtBjl9dyqd3U7ekqvhAqw5kcm3UoHRae1EXxudR46AZWdR8DRxmmpeobESOBupHUXXJQgAG1rw2QtmUWKIDg/s640/image+slider+v3.jpg" title="Widget for Blogger" alt="Widget for Blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Artikel%20Blog" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBE0mBNdu8o-nBPp_svW_gc5PXCy9e161pYzJS0Iw7LxtGu4k_Jq_hSumLizvVG3fyB136cSiHcNxL4-axQuQ59inO3y4Pv0MCSnc9sdETV5W6W4w3QaNgbHDTx6AIXuzgUKX3C5-9WXA/s640/cara+mengaitkan+blog+dengan+search+console+google.jpg" title="Artikel Blogger" alt="Artikel Blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Mobile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZd9pbcmpqC2Bfxw9ihXncvpDIBCynYzX_8X_JQq0-auGuBxyZ3mMp2nRAZP2xeVkxnek5EKgbE-YYvbtO9FslL2wTCJD_LNWFaCGAKhw1WKJ3vb88sJliRmq1Wk1kvxtX15y6ww6EHg/s640/android+cara+hemat+baterai.jpg" title="Mobile and Download Apps" alt="Mobile and Download Apps"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/GetMoney" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQr8Yx2yVWeyEWHZo7spC98DXykTdUBjHrXsEFUIJ68SQJ9yPZc0S7lLDkWaej1GMoQ8H_ueCHJ2kqPJ0dGr4uioYbhxY_cmRZfBxWMqqnRJssBSjGxzxHIOr-2KHfmbaLqL7nckNu_g/s400/iklan+accestrade.jpg" title="Get Money / Affiliate Iklan " alt="Get Money / Affiliate Iklan"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Related%20Post" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2qYL6z3ZYrpfR1vNKveQvK2TdB4LFPvktz8UQSZR24060sd7YFLBDE9feSwxVm1E8uS4PmVfthLH9n321xdhbhftgPwnzbl_kLRNXykBOYAKj5dR2gS9l3mFugmDJLDK434SzjKxmPqU/s640/Related+posts+horizontal+by+label.jpg" title="Related Posts Widget for Blogger" alt="Related Posts Widget for Blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/Recent%20Post" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8nkTh4UxuHI4KfKC3K4-7fdm64O1B4NZUD_ctAm_lrZeO100O_o2qXOD2El4nkSrlzAT0suTWnkO3RhX9pBUpHrwIxg-WJqOGL9vFHJIeoVDcn5D0zk1vKDE3zwzxZLKPHayHdCbc3A/s640/recent+post+slider+responsive+ciamixs.jpg" title="Recent Posts Widget for Blogger" alt="Recent Posts Widget for Blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/PopularPosts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0S97U56LUt3w380hoUfN19LfMKtcNl5Vk-S287jvRTLk8ZpklNtBijzU1peBRDPttfiLEYodliHhtHDhIVIbo0qzTCdjana5JZ7ZFfxQcXeEq5la98lZlxYZtFUMlz_dcFUlvGf8Eos/s400/Popular+Post+Vertikal.jpg" title="Popular Posts Widget for Blogger" alt="Popular Posts Widget for Blogger"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/TipsTrik" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIDJbTYuQNVkZIlF49YfQ-7qVo45Ox8bHG0k9ISLE5wS7scfDhvgUFu2eXSUHzeGDbyEi6jHeW1CiELJOP-ix-7ZIcWIAnR-fcAxqS-O2PzCweobwiB9zOsz1eBW71P8cJ7t70EOye8k/s400/polcy+privay+iubenda.png" title="Kumpulan Tips dan Triks" alt="Kumpulan Tips dan Triks"/></a>
        </li>
        <li>
            <a href="http://tutorialmixs.blogspot.co.id/search/label/IndikatorForex" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKea_uSyNMuu1Bm4pJ1SBzJpJ6jZ1UwcuhcMYNjtJGpo0F3OMfpfFnLUsPci0RWDdK0Kzvm6zbaVF4LjPcDgNx90BXQD9Wo_6ccU18rI7vVcTPIlI-56bS2vC9mXKBPydpcUGX70K5a94/s640/SuperTrend+indikator.jpg" title="Indikator Forex dan Template lengkap" alt="Indikator Forex dan Template lengkap"/></a>
        </li>

    </ul>
</div>
<!-- batas -->

catatan: 
- untuk cara memasangnya silahkan tambahkan saja di penambahan widget pada tmplate sobat yah..
- silahkan ganti juga untuk hal di bawah ini dengan alamat URL dan Image sobat :
  href="http://tutorialmixs.blogspot.co.id/search/label/IndikatorForex (ganti URL Link sobat)
  img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKea_uSyNMuu1Bm4pJ1SBzJpJ6jZ1UwcuhcMYNjtJGpo0F3OMfpfFnLUsPci0RWDdK0Kzvm6zbaVF4LjPcDgNx90BXQD9Wo_6ccU18rI7vVcTPIlI-56bS2vC9mXKBPydpcUGX70K5a94/s640/SuperTrend+indikator.jpg (silahkan ganti image yang mau ditampilan untuk di jadikan Label utama slider)
  
oke itu saja tutorial ini, semoga bisa bermanfaat buat sobat blogger
salam blogger

Untuk semua cara sudah aku sekalian jelaskan kok di scriptnya. jadi silahkan download aja.
oke aku rasa tutorial di pagi ini, semoga bisa menjadikan manfaat buat sobat blogger.

(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)