Tutorial : Simple Marquee Image Hover

Assalamualaikum and annyeong!

Simple Marquee Image Hover. Really simple and mudah. Kalau ada rasa-II nak cuba tuh, sila ikut step kat bawah. Sebelum tuh, meh sini NS nak tunjukkan prebiew.

{ LIVE PREVIEW }

1. Dashboard > Layout > Add a Gadget > Html/JavaScript

2. Copy ke semua kod kat bawah nie.  

<marquee behavior="scroll" direction="left" width="100%"><img src="URL IMAGE" height="270" width="500" /><img src="URL IMAGE" height="270" width="500" /><img src="URL IMAGE" height="270" width="500" /><img src="URL IMAGE" height="270" width="500" /></marquee>

Note :

*merah : URL IMAGE korang

*biru : lebar gambar korang. Ikut sukalah, kalau nak tayang gambar besar-II, letaklah nilai lagi tinggi.

*hijau : tinggi gambar

3. Paste kod tadi dalam kotak yang disediakan. Jangan lupa tekan SAVE!

Adios~

Tutorial : Image Slide Show

Assalamualaikum and annyeong! 

Hari  ni NS nak share satu tutor yang betul-II simple dan mudah. Image slide show! Sesuai untuk diletak kat disebar blog korang atau mana-II tempat yang korang suka. Heeeee. Tak dapat gambaran lagi?? Cuba clik live preview kat bawah.

{ LIVE PREVIEW }

Amacam? Berminat? Let's start the tutor!

1. Dashboard > Layout > Add a Gadget > Html/JavaScript

2. Copy ke semua kod kat bawah ni :-

<style>
/*
 * jQuery Nivo Slider v3.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * Mhel, of html-and-etc.tumblr.com tweaked the original codes given
 */
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:500px;
 height:400px;
 overflow: hidden;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 max-width: none;
}
.nivo-main-image {
 display: block !important;
 position: relative !important;
 width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
 top:0;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
 overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 width:100%;
 z-index:8;
 padding: 5px 10px;
 opacity: 0.8;
 overflow: hidden;
 display: none;
 -moz-opacity: 0.8;
 filter:alpha(opacity=8);
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
 padding:5px;
 margin:0;
    font-size:14px;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
    display:block;
    width:31px;
    height:34px;
    background:url('http://static.tumblr.com/y0x5xm1/ei3mcx19v/arrows.png') no-repeat;
    text-indent:-9999px;
    border:0;
 
}
.nivoSlider .nivo-directionNav a {
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {    left:15px;}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
 text-align:center;
 padding: 15px 0;
}
.nivo-controlNav a {
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
</style>


<!-- START NIVO SLIDER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/y0x5xm1/WdCmcx05a/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
     var $nv4wp = jQuery.noConflict();
  $nv4wp(window).load(function() {
   $nv4wp('#slider').nivoSlider({
    effect:'random',
    slices:15, // For slice animations
    boxCols: 4, // For box animations
    boxRows: 2, // For box animations
    animSpeed:500, // Slide transition speed
    pauseTime:3000, // How long each slide will show
    startSlide:0, // Set starting Slide (0 index)
    directionNav:true, //Next & Prev
    controlNav:false, // 1,2,3... navigation
    controlNavThumbs:false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
   });
  });
  </script>
    <script src="http://static.tumblr.com/y0x5xm1/e1gmcx29e/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- END NIVO SLIDER -->
<br />
<center>
<!-- START NIVO SLIDER -->
<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="slider">
<img alt="" src="http://24.media.tumblr.com/tumblr_m4dwzevwSm1rvbnxgo1_500.jpg" height="" title="" width="" />
<img alt="" src="http://data1.whicdn.com/images/118749569/large.png" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/118749367/large.jpg" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/116696829/large.jpg" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/116691527/large.jpg" height="" title="" width="" />
 
<!-- END NIVO SLIDER -->
</div>
</div>
</center>

3. Then, pastekan ke dalam kotak yang disediakan. Lihatlah hasilnya! Good luck, guys~

Tutorial : Unique Link Hover

Assalamualaikum and annyeong!

Hari tu NS ada ajar tutor Double Dashed Link Hover. Tutorial yang ni lebih kurang sama je dengan tutor tu. Cuma, link hover bagi tutor nie sangat unik dan boleh la dikatakan 'cute'. (hehehe) Nak tengok contoh tak? Ade kat bawah.

Unik tak? Kalau nak try, sila ikut step di bawah.

1. Dashboard > Template > Edit HTML

2. Korang cari kod nie a:hover {

3. Korang nampak tak bawah kod a:hover { ada kod (warna biru)? Macam ni :

4. Then, korang padam kod berwarna biru tu, dan gantikan dengan kod di bawah.

color: #ffffff;
background:#57D0F9;
text-decoration:none;
border: #ffffff 2px dashed;
padding:3px 5px;
-moz-border-radius:10px;
}

Note : 

* merah : warna background link hover korang

* oren : warna boader link hover

* pink : ketebalan boader link hover

* hijau : boleh pilih sama ada nak buat solid, dashed atau dotted

* biru : Kod ni sangat penting coz kod inilah yang mencantikkan lagi link hover korang. Kalau nak ubah boleh, tak nak pun tak pe (tak marah pun ^^). Pandai-pandai la buat uji kaji yup!

p/s : kod warna boleh dapatkan di SINI


5. Ok, kalau dah siap boleh tekan SAVE template. Selamat mencuba! Annyeong.