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)
Post a Comment
mohon gunakan email