TIPS MEMPERCANTIK BLOG: SCRIPT SIMPEL IMAGE SLIDER DI BLOGSPOT

A TIPS MAKE YOUR BLOG BEAUTIFULSIMPLE SCRIPT IMAGE SLIDER FOR BLOGSPOT


TIPS MEMPERCANTIK BLOG: SCRIPT IMAGE SLIDER SIMPEL DI BLOGSPOT - Bagaimana cara membuat blog tampil cantik/ mengagumkan? Pada kali ini saya akan berbagi tips untuk membuat tampilan blog menjadi lebih cantik/ mengagumkan  Salah satu cara membuat blog lebih cantik/ mengagumkan yaitu dengan memberikan sentuhan efek gambar bergerak pada blog tersebut. Ada beberapa macam jenis sentuhan efek bergerak di blog, tapi kali ini saya akan membagikan mempercantik blog dengan menggunakan image slider. Tampilan image slider ini bisa dilihat pada gambar di bawah ini yang ditunjuk dengan anak panah dan kotak berwarna merah.

Sering saya jumpai, script image slider di blogspot cukup ribet dan susah. Yang meletakkan script di atas ]]></b:skin>,</head>, dan lain sebagainya. Dengan script code ini, maka membuat image slider tampak lebih mudah dan tidak ribet. Dengan script ini, cukup pastekan script ini di add html/ JavaScript maka sudah beres. Tinggal di atur letak dan gambar yang akan ditayangkan. Menarik bukan? Script ini bukan ciptaan saya, tapi hasil saya muter kesana kemari untuk mencari sesuatu yang simpel tapi menarik untuk blog. Ane lupa nemu di mana #heeee jadi mohon maaf jika saya tidak menyertakan sumbernya. Langsung saja copy script code berikut dan pastekan di html/ javascript widget Anda.

<!--www.febrikasetiyawan.com-->
<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 465px;
margin: 0 auto;
border:4px solid #000;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(http://4.bp.blogspot....com-ribbon.png) no-repeat;
z-index: 7;
}
#slider {
width: 465px;
height: 218px;
background: #fff url(http://3.bp.blogspot...com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
div.navBulletsWrapper {
top: 200px;
left: 190px;
width: 150px;
background: none;
padding-left: 30px;
position: relative;
z-index: 5;
cursor: pointer;
}
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(http://3.bp.blogspot....com-bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>
<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script><div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="https://febrikasetiyawan.com" target="_blank"><img alt="Optional" src="TARUH URL IMAGE ANDA DI SINI" /></a>
<a href="https://febrikasetiyawan.com" target="_blank"><img alt="Optional" src="TARUH URL IMAGE ANDA DI SINI" /></a>
<a href="https://febrikasetiyawan.com" target="_blank"><img alt="Optional" src="TARUH URL IMAGE ANDA DI SINI" /></a>
<a href="https://febrikasetiyawan.com" target="_blank"><img alt="Optional" src="TARUH URL IMAGE ANDA DI SINI" /></a>
<a href="https://febrikasetiyawan.com" target="_blank"><img alt="Optional" src="TARUH URL IMAGE ANDA DI SINI" /></a>
</div>
</div>
<!--www.febrikasetiyawan.com-->


Script di atas bisa di ambil di sini

NB:
Optional : boleh diisi dengan teks yang berkaitan dengan image slider yang akan ditampilkan
https://febrikasetiyawan.com : boleh diisi dengan URL yang akan dituju jika men-klik image tersebut

!!!PERHATIAN!!! Selama bereksperimen, biasakan memback up template Anda terlebih dahulu. Jadi kalau terjadi sesuatu yang tidak diinginkan alias tampilan jadi kurang sesuai yang diinginkan bisa di kembalikan ke tampilan sebelum di otak-atik.

Untuk yang ingin berkreasi silakan diotak-atik sendiri script ini. Jika ada pertanyaan silakan ditanyakan. Selama ane mampu dan bisa maka akan ane menjawabnya.
Categories: ,

1 komentar:

Komentar akan OTOMATIS DIHAPUS jika memberikan komentar mengandung iklan, link aktif, dan perkataan yang tidak sopan. Terima Kasih ^_^