Select Menu

Slider

Adsense Banner 970 x 90

Blog Archive

Footer W 2

Footer W 1

Footer W 3

Travel

Performance

‹
›

Cute

My Place

Slider

Racing

Popular Posts

Videos

Seperti yang saya jelaskan ketika saya posting tentang Tooltips juga disini [baca : Bubble Tooltips]. Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Ini adalah postingan kedua tentang Tooltips Jquery. Yaitu Easy Tooltips. Tooltips kali ini berbeda dengan sebelumnya yaitu mengikuti kearah cursor pindah.

Perhatikan itu, gerakan kursor di Link itu. Rasakan dan Lihatlah apa yang akan terjadi. Rupanya link mengeluarkan kata kata ajaibnya yaitu title="Ini adalah contoh Easy Tooltips Jquery" . Title sebagai deskripsi/tulisan yang keluar dari sebuah link atau object lain. Tapi bagai mana bisa mengeluarkan Deskripsi yang berbeda tampilan itu? Kuncinya ada di bawah ini :
  1. Buka Akun blogger.com dengan password dan ID tentunya
  2. Saat di dasboard klik Layout/Design → Edit HTML → Cari kode <head>
  3. Letakan kode berikut tepat di bawah kode Head :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>

    <style type="text/css">
    p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
    p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
    </style>
    Kata bercetak tebal adalah kode Css/tampilan Easy Tooltips ini
  4. Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". Sebagai Contoh :
    1. Link →
      <a href="http:farixsantips.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">Farixsantips</a>
      Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
    2. Gambar →
      <img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
      Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.

  5. Selesai.
Semoga Easy Tooltipsnya bisa membantu dalam perawatan blogger sobat :), kurang lebihnya mohon maaf saya akhiri dengan wassalam :)
- - - -
Kembali kita berbincang mengenai Jquery. Kali ini perbincangan kita sejalur dengan Menu Navigasi Jquery. Yaitu kumpulan link yang akan di satukan dan membuatnya menjadi Menu Utama dengan berbagai Style tentunya. Kali ini menu yang saya akan tunjukan adalah menu yang Floating/melayang di bagian atas meskipun sudah di scroll kebawah keatas karna Posisinya adalah Fixed.

Pengertian lain Position:Fixed : Merupakan properti untuk memposisikan suatu blok element secara tetap di atas layar browser walaupun user melakukan scroll dokumen. Mengingat tentang Fixed [bukan Fixie, kalau Fixie mah trend Sepeda sekarang :P] sepertinya saya telah membuat artikel yang memanfaatkan kode Position:Fixed tersebut [baca : back to Top Jquery].

Kembali ke Topic perbincangan yaitu Jquery - Fixed Sliding Menu. Bingung ya maksud dari keterangan diatas ↑ ? Lihat contohnya seperti di bawah ini :



Kotak diatas adalah kotak IFRAME dari weblog : http://demo-ifnumber4-fqbis.blogspot.com/. Didalam kotak tersebut terdapat 7 Menu yang mana sobat bisa ganti sendiri Tulisan, gambar, maupun Style kotak menu tersebut. Kotak tersebut melambangkan LAYAR dari BROWSER. Bagaimana? bagus bukan? Kalau mau pasang di blog silahkkan ikuti cara di bawah ini :

1. Buka Blogger.com dengan password dan akun masing masing

2. Saat di dashboard klik Layout/Design kemudian klik Edit HTML pada Tab diatas.

3. Kemudian Cari kode <head> dengan CTRL + F

4. Kemudian letakan kode berikut tepat di bawah kode <Head> tadi :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='https://sites.google.com/site/farixsantips/scripts/slidemenu.js'></script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#floatmenu a').each(function(){
$(this).stop().animate({
'marginTop':'-78px'
},d+=150);
});

$('#floatmenu > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-78px'
},200);
}
);
});
</script>
5. Kemudian Cari kode ]]></b:skin> dengan CTRL + F. Letakan kode berikut tepat diatasnya kode ]]></b:skin> tadi :
ul#floatmenu {
list-style:none;
margin:0;
padding:0;
position:fixed;
right:10px;
top:0;
width:721px;
z-index:999999
}
ul#floatmenu .tools a{background-image:url(http://icons.iconarchive.com/icons/apathae/wren/64/Utilities-icon.png)}
ul#floatmenu .gallery a{background-image:url(http://icons.iconarchive.com/icons/iconshock/cms/64/gallery-icon.png)}
ul#floatmenu .video a{background-image:url(http://icons.iconarchive.com/icons/babasse/old-school/64/bobines-video-icon.png)}
ul#floatmenu .rssfeed a{background-image:url(http://icons.iconarchive.com/icons/untergunter/leaf-mimes/64/app-rss-plus-xml-icon.png)}
ul#floatmenu .musics a{background-image:url(http://icons.iconarchive.com/icons/itzikgur/my-seven/64/Music-Piano-Chello-icon.png)}
ul#floatmenu .contact a{background-image:url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-contact-new-icon.png)}
ul#floatmenu .home a{background-image:url(http://icons.iconarchive.com/icons/iconshock/sigma-general/64/home-icon.png)} /*Gambar Bisa di Ganti sesuai kemauan */
ul#floatmenu li {
display:inline;
float:left;
width:103px
}
ul#floatmenu li a {
background-color:#fff;
background-position:50% 10px;
background-repeat:no-repeat;
border:1px solid #777;
box-shadow:0 0 2px #ccc;
box-shadow:inset 0 0 5px #eee;
text-shadow:0 0 3px #ccc;
display:block;
float:left;
height:25px;
margin-top:-2px;
padding-top:80px;
text-align:center;
text-decoration:none;
width:100px
}
ul#floatmenu li a span {
color:#000;
font-size:12px;
font-family:comic sans ms;
}
ul#floatmenu li a:hover {
background-color:#ffcc00
}
Kode berkedap kedip adalah kode yang berfungsi meletakan MENU FIXED di kanan atau di kiri.
6. Pertunjukan belum selesai kita lanjutkan dengan meletakan kode berikut di bawah kode <body> :
<ul id='floatmenu'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='tools'><a href='#'><span>Tools</span></a></li>
<li class='gallery'><a href='#'><span>Gallery</span></a></li>
<li class='video'><a href='#'><span>Video</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='musics'><a href='#'><span>Musics</span></a></li>
<li class='contact'><a href='#'><span>Contact Me</span></a></li>
</ul>
Kode merah dan Biru terserah mau diganti menjadi apa.

7. Kemudian Save Template.

Kemudia lihat hasilnya :) Sudah dulu ya tutorial saya kali ini, saya akhiri dengan wassalam :) dadaaa
- - - -
Kembali lagi bersama saya di Blog ini. Disini saya akan menerangkan Bagaimana cara membuat Show/Hide pada Komentar Blog. Sebelum kita bahas bagaimana cara membuatnya, akan lebih baik mengetahui apa itu Show/Hide? Show/Hide atau Tombol Show (mengeluarkan) dan Hide (menyembunyikan) dalam Kode Script adalah Tombol dimana jika di Event-kan (di klik, mouseover, mouseout, dan lain lain) baik akan mengeluarkan maupun menyembunyikan OBJECT.

Nah, disini saya berbicara mengenai Bagaimana cara Show/Hide Object yang Objectnya itu adalah Komentar2 blog dengan bantuan JQuery. Bagaimana sih contoh dari Show/Hide tersebut? Saksikan Review di bawah ini. Contoh untuk Show/Hide kotak Komentar adalah Di Blog ini. Bagaimana cara membuat Show/Hide di komentar? Yuk ikuti cara berikut ini.

• Pertama tama Buka masing masing Account blog kamu!

• Pilih Layout/Design → Edit HTML

• Pastekan kode berikut tepat di bawah kode <head> :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>
• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :
.slidingDiv {
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}
Bisa di Edit Seperlunya.

• Kemudian cari kode yang mirip dengan kode berikut :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
• Paste kan kode berikut dan letakan menjadi kode berikut :
<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv"></div>
Dan letakan kode diatas kedalam kode sebelumnya menjadi
<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv">
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
</div>
Kode TITIK2 merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.

• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)
- - -
Langganan: Postingan (Atom)

Copyright © 2014, Informasi Tanggamus | Distributed By Blogger Templates | Designed By Uong Jowo