Tutorial Memasang JavaScript Content Slider Untuk Blogger

aynora nur | 14 February, 2013,9:34 PM |
Advertisement
As-salam,

Saya nak kongsikan dengan pengunjung blog saya yang mahukan kelainan dalam berblog. Tak faham maksud saya kan? Sebab intro macam blurr...sebabnya saya pun baru pulih dari blur yang panjang. Sebabnya, saya nak pasang content slider di blog tetapi menghadapi masalah semua tutorial tak menjadi, ada yang susah nak adjust, ada slider yang terlalu besar. Saya nak yang simple tetapi menarik. Akhirnya, introduce...WHAT'S HOT! kat atas tu. Nampak tak? Okey ke?

Lagi satu kelebihan JavaScript Content Slider ini adalah tak perlu susah payah cari </head>, </body> ataupun ]]skin dan sebagainya. Hanya pergi kat Layout, dah siap.


Jadi, bagi yang berminat pasang slider content macam saya, hanyalah salin kod di bawah dan kemudian SAVE! Senang, kan?

Cara-caranya macam biasa, pergi ke DASHBOARD >>  LAYOUT >> ADD GADGET >> HTML/JAVASCRIPT >> MASUKKAN KOD JAVA SCRIPT DI BAWAH.



<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.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: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.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="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>
Kemudian SAVE dan lihat hasilnya. 

Terimakasih kepada blogger ini yang tolong menghilangkan blur saya..hihi




NOTA:


Tukar kod java berwarna hijau di atas dengan kod anda sendiri. 
  • # = alamat url entri anda
  • img src = alamat url imej/gambar anda
  • alt = tajuk artikel anda

p/s: Semoga berjaya!
Aynora Nur adalah seorang penulis blog separuh masa, terlibat dalam bidang hartanah dan perkhidmatan – di Johor, Malaysia. Lulusan MBA. Aktif berblog sejak tahun 2010. Hubungi saya untuk Promosi produk dan servis • Entry kekal di blog • • Pakej mengikut bajet • Daily PV : 35,000 - 45,000 • Monthly PV : 1.1juta - 1.5juta. Info lanjut di about me ...
 
loading...
2 Komen untuk "Tutorial Memasang JavaScript Content Slider Untuk Blogger "
DISCLAIMER: All content provided on this "Aynorablogs.Com – Inspirasi Wanita" blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner of Aynorablogs.Com – Inspirasi Wanita will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information. This terms and conditions is subject to change at anytime with or without notice.

Boleh komen jika mahu, boleh LIKE jika suka. TERIMAKASIH.

Kisah 25 Filsuf Barat (MATLUTHFI)!! Harga cuma RM22.50 (Asal RM25.00)!

Buat Duit Blog
Back To Top