Followers

09 Februari 2014

Februari 09, 2014 - , 1 comment

Page Rahsia Youtube




Kalau korang dah tahu,ok,aku cuma nak kongsi info je.

YouTube Leanback



Kalau lebih gemar guna keyboard untuk tengok video youtube,korang boleh guna link ni.Interface dia cantik dan menarik

YouTube Moodwall

Korang nak youtube cadangkan video ikut mood korang?Klik link tersebut dan pilih mood yang ada

YouTube Disco

Membolehkan korang cari  senarai video lagu pilihan dan boleh menonton tanpa perlu pilih video baru bila video yang ditonton habis

YouTube 'Feather' Beta



Bosan,video youtube loading lambat,mungkin ni boleh jadi pilihan untuk anda cuba.Tetapi disebabkan ia masih lagi sedang dibangunkan,sesetengah video mungkin tak berfungsi.YouTube Feather berfungsi dengan cuba mengurangkan jumlah bait yang dimuat turun oleh pelayar untuk menambah kelajuan loading video.

Februari 09, 2014 - No comments

jQuery Image Menu

Demo di sini

Pada demo blog,gerakkan mouse ke gambar seperti disnapshot iini

Cara Pemasangan

Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod  ]]></b:skin>

Langkah 2:Di atas kod ]]></b:skin> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini

.jimgMenu {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}

.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}

.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;javascript:;
width:78px;
height: 200px;
}

.jimgMenu ul li.landscapes a {
background: url(http://1.bp.blogspot.com/-h4FlZYo_MB8/UrxZJ18DdmI/AAAAAAAAEjk/UVUY8hmJ-hE/s1600/Gaara.png) no-repeat scroll 0%;
}

.jimgMenu ul li.people a {
background: url(http://1.bp.blogspot.com/-azFU_tMzJKk/UrxZPLz8bmI/AAAAAAAAEj0/T7gBbohnoCk/s1600/Sasuke.png) no-repeat scroll 0%;
}

.jimgMenu ul li.nature a {
background: url(http://4.bp.blogspot.com/-F4TSD9Gb3s8/UrxYsm_AbkI/AAAAAAAAEjc/p6LvXkezS-w/s1600/naruto.png) no-repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(http://3.bp.blogspot.com/-Wv8wU4iUKkk/UrxZM3wReFI/AAAAAAAAEjs/FfJ76L3tTSo/s1600/Kakashi.png) no-repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(http://1.bp.blogspot.com/-WoRrRNthF9k/UrxZSKCrwzI/AAAAAAAAEj8/lcZSjwZI4k0/s1600/Shikamaru.png) no-repeat scroll 0%;
min-width:310px;

}
.clear {
clear: both;}

Langkah 3:Sekali lagi gunakan Ctrl+F untuk memudahkan pencarian kod.Kod yang perlu dicari seterusnya ialah kod:</head>

Langkah 4:Di atas/sebelum kod </head> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini

<script src='http://bloggertrixcode.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function () {

// find the elements to be eased and hook the hover event
$(&#39;div.jimgMenu ul li a&#39;).hover(function() {

// if the element is currently being animated (to a easeOut)...
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 450, easing:&quot;easeOutQuad&quot;});
} else {
// ease in quickly
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 400, easing:&quot;easeOutQuad&quot;});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;78px&quot;}, {duration: 400, easing:&quot;easeInOutQuad&quot;})
} else {
// ease out slowly
$(this).stop(&#39;animated:&#39;).animate({width: &quot;78px&quot;}, {duration: 450, easing:&quot;easeInOutQuad&quot;});
}
});
});
</script>

Langkah 5:Klik 'Save Template'

Langkah 6:Sekarang pergi ke 'Layout' dan klik  'Add HTML/JavaScript' dengan meletakkan kod dibawah didalamnya:

<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a>
</li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>

Februari 09, 2014 - No comments

Sliding Up Image dengan penerangan



kl

Pemandangan

Menara KL

More




Gerakkan mouse ke gambar

Cara pemasangan

1.Hanya login ke dashboard blog → Layout → Add Widget → HTML/JavaScript dan pastekan saja kod ini didalamnya


<style>
.image-box {
width:280px;height:280px;overflow:hidden;background-color:white;
border:1px solid #ccc;float:left;margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
font-size:120%;height:auto;
}
.image-details .details {
padding:10px 12px;overflow:hidden;
}

.image-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img width="280" height="280" src="http://www.cuti.my/Sub/Kl/menara_kuala_lumpur_2.jpg" alt="kl">
</div>
<div class="image-details">
<div class="details">
<h4>Pemandangan</h4>
<p>Menara KL</p>
<p><a class="more" href="Post Link ">More</a></p>
</div>
</div>
</div>


<div style="clear:both;"></div>

</div>