Blog Widget Girant

Diposting oleh Girant_31

Normally when a div tag has to expand to accommodate more content, it does so downwards, adding height onto the bottom of the element rather than the top. For this menu we will want to do the exact opposite – when the user hovers over the thumbnail it should expand upward (think about how the OSX dock works).

We’re going to go about this by making use of position:fixed, which essentially lets us “fix” elements to the bottom. Let’s break down the elements.

More►►

Diposting oleh Girant_31

background

Diposting oleh Girant_31

0 komentar

Mengenal Tooltips, mungkin sudah tidak asing lagi bagi sobat blogger semua. banyak cara dalam memasang tooltips di blog dan berbagai macam pula menempatkan tooltips tersebut. Kali ini ane akan sedikit share tentang Tooltips Menu Hover yang mana membuat menu dengan effect tooltips di saat cursor melintas diatasnya.

Seperti apa Tooltips Menu Hover ?

mari kita lihat demo nya.

Demo Tooltips Menu HoverKlik disini untuk melihat demo Tooltips Menu Hover

Cara membuat Tooltips Menu Hover :
Langkah 1

Letakan kode dibawah ini tepat diatas kode ]]></b:skin> pada halaman Rancangan-Edit HTML akun blog sobat.

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUfkXV_-OI/AAAAAAAABMA/xpP0YvRDEQY/button.gif) no-repeat center center;
}
.menu li em {
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUeMfTbzhI/AAAAAAAABL4/aJxkPGpJB5I/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Langkah 2

Pasang Framework jQuery dibawah ini pada template sobat, tepatnya pada halaman Rancangan-Edit HTML diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika sebelumnya sobat pernah memasang Framework jQuery tersebut pada template sobat, maka Langkah 2 dilewat saja.

Langkah 3

Letakan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan-Edit HTML akun blog sobat.

<script type='text/javascript'>
$(document).ready(function(){
  $(".menu a").hover(function() {
    $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
  });
});
</script>

Langkah 4

Save template sobat dan langsung menuju halaman Rancangan-Elemen Laman.

Langkah 5

Tambahkan kode dibawah ini pada halaman Add Gadget HTML/Java Script blog sobat.

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

Perhatikan kode yg dicetak besar, gantilah dengan ketentuan menu yang sobat pasang.

URL LINK [1, 2, 3,] = Menentukan URL link yang sobat tuju.
MENU [1, 2, 3,] = Menentukan nama pada menu.
TIPS [1, 2, 3,] = Menentukan nama didalam Tooltips.

Langkah 6

Drah drop gadget yg sudah ditambahkan ke atas postingan, atau di header, terserah keinginan sobat.

Disarankan ditempatkan pada gadget yang memiliki width besar, agar hasilnya lebih maximal.

Langkah 7

Save template sobat dan lihat hasilnya.
Personally I dont think this is the right way to do it,
if you have better ideas to develop it, please comment !!

Selesai.
Selamat mencoba dan semoga bermanfaat.

More►►

Diposting oleh Girant_31

contoh

Diposting oleh Girant_31

0 komentar

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUfkXV_-OI/AAAAAAAABMA/xpP0YvRDEQY/button.gif) no-repeat center center;
}
.menu li em {
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUeMfTbzhI/AAAAAAAABL4/aJxkPGpJB5I/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUfkXV_-OI/AAAAAAAABMA/xpP0YvRDEQY/button.gif) no-repeat center center;
}
.menu li em {
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUeMfTbzhI/AAAAAAAABL4/aJxkPGpJB5I/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

.purple {
color: #ffffff;
border: solid 1px #8560a8;
background: #8560a8;
background: -webkit-gradient(linear, left top, left bottom, from(#b6a3c8), to(#8560a8));
background: -moz-linear-gradient(top,  #b6a3c8,  #8560a8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6a3c8', endColorstr='#8560a8');
}
.purple:hover {
background: #633d87;
background: -webkit-gradient(linear, left top, left bottom, from(#9f8fae), to(#633d87));
background: -moz-linear-gradient(top,  #9f8fae,  #633d87);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9f8fae', endColorstr='#633d87');
}
.purple:active {
color: #e6e6e6;
background: -webkit-gradient(linear, left top, left bottom, from(#8560a8), to(#b6a3c8));
background: -moz-linear-gradient(top,  #8560a8,  #b6a3c8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8560a8', endColorstr='#b6a3c8');
}

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

More►►

Diposting oleh Girant_31

0 komentar

view plain copy to clipboard print ?

<div id="random">  
<ul>  
<li>Random post 1</li>  
<li>Random post 2</li>  
<li class="last">Random post 3</li>  
</ul>      
</div>          
</div>

More►►

Diposting oleh Girant_31

tes

Diposting oleh Girant_31

0 komentar

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();    
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

green {
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
background-color:#CCFF99;
border:2px solid #66CC00;
color:#666666;
font-size:120%;
font-weight:bold;
padding:8px 10px; }

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();$("ul.slick li").click(function () {$("ul.slick li").click(function () {    
    $("ul.slick li").click(function () {$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        $(".active").removeClass("active");$("ul.slick li").click(function () {
        $(this).addClass("active");$("ul.slick li").click(function () {$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        $(".content-slick").slideUp();$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();$("ul.slick li").click(function () {$("ul.slick li").click(function () {    
    $("ul.slick li").click(function () {$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        $(".active").removeClass("active");$("ul.slick li").click(function () {
        $(this).addClass("active");$("ul.slick li").click(function () {$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        $(".content-slick").slideUp();$("ul.slick li").click(function () {$("ul.slick li").click(function () {
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

More►►

Diposting oleh Girant_31

0 komentar

green {
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
background-color:#CCFF99;
border:2px solid #66CC00;
color:#666666;
font-size:120%;
font-weight:bold;
padding:8px 10px; }

More►►

Diposting oleh Girant_31

text neon

Diposting oleh Girant_31

0 komentar

Huuffs.. Setelah sempet kesel, marah, kecewa, bingung dikerjai oleh si mBah Google kemarin, dimulai dari hilangnya semua komentar sobat semua, juga sempet penghapusan blog tercinta ini selama 3 jam. dan ternyata seluruh blogger di dunia ini pun sebagian besar mengalami nya,.. ga percaya? lihat disini. rata-rata dari mereka mengeluh komentar...

More►►

Diposting oleh Girant_31

Online Visitor	:
Blog's Rank	:
Pengunjung	:
Posts	:
Comments	:

Top Commentators

Top Comments

Statistic

profil

Selamat Datang

Sepintas Tentang Saya

My Blog

My Social Stuff