Membuat Sidebar Accordion dengan jQuery

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian akan dibahas pada post ini. Apa itu Sidebar Accordion mungkin teman teman akan lebih jelas pembahasannya bila searching di google, tapi untuk contohnya, sobat blogger bisa lihat di sidebar Blog ini.

Sidebar Accordion dengan jQuery

Kriteria Post Hari Ini :

• Goal : Sidebar kuno kita akan berubah tampilan menjadi lebih elegant
• Tujuan : Memperindah Blog kita sehingga visitor akan betah
• Harapan : Theme Blog kita lebih user friendly

How To Make Sidebar Accordion With JQuery :

Berikut lengkap Membuat Sidebar Accordion dengan jQuery : 

• Masuk pada bagian Template » Edit HTML 

Kemudian Letakkan kode berikut ini atas kode ]]></b:skin> 

#sidebar-wrapper h2 {
margin: 0 2px;
padding:3px 7px 3px 13px; 
text-shadow:0 1px 0 black;
background-color:#AD3000; 
border:1px solid #ccc; 
font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif; 
color:#fff; 
text-transform:uppercase; 
} 
#sidebar-wrapper h2:hover { 
margin: 0 2px; 
padding:3px 7px 3px 13px; 
background:#860000; 
font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif; 
color:#fff; 
text-transform:uppercase; 
border-bottom:1px solid #404040; 
} 
#sidebar-wrapper h2.active { 
background-color:#B60000; 
color:#FFF; 
} 
#sidebar-wrapper .widget { 
margin:0 0; 
padding:0 0; 
} 
#sidebar-wrapper .widget-content { 
padding:5px 5px 5px 13px; 
max-height:auto; 
overflow:auto; 
} 
#sidebar-wrapper1 .widget-content ul li { 
border-top:1px solid #444; 
border-bottom:1px solid #222; 
}

- Selanjutnya Letakkan kode berikut ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script> 

 - Simpan Template

Keterangan:

Kode B60000 merupakan background pada judul widget. 

Kode #sidebar-wrapper  merupakan ID sidebar.

Kode

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

merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.

Read More

Cara Membuat Efek Link Nudging Pada Lists Sidebar

Sebelumnya saya sudah pernah mengetengahkan tutorial cara membuat efek link nudging pada lists label atau category blog. Jadi yang belum tahu apa dan bagaimana efek link nudging mungkin bisa membaca artikel sebelumnya.
Nah jika pada tutorial sebelumnya efek link nudging hanya pada lists label sekarang kita akan menambahkan efek link nudging pada semua lists sidebar blog kita, tentunya masih dengan bantuan script JQuery. Yah sangat sayang khan kalau anda hanya menggunakan framework JQuery pada blog anda untuk membuat featured posts slider, tabber tab, atau membuat scroll top down, kenapa tidak mencoba menambahkan efek link nudging atau biasanya mereka juga menyebutnya dengan efek animasi ini ke semua lists sidebar blog anda? Apalagi caranya sangat mudah kok.

• Setelah sign ini ke akun anda
• Pada dasbor >> pilih Template >> Edit HTML
• Tambahkan kode berikut diatas kode </head>

<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.widget-content li a').hover(function() {
jQuery(this).animate({ paddingLeft: '7px' }, {duration:250});
}, function() {
jQuery(this).animate({ paddingLeft: '0px' }, {duration:250});
});
});
</script>

Catatan: Silahkan atur padding left sesuai template anda karena biasanya setiap template sudah menentukan ukuran padding left untuk lists sidebar. Caranya lihat pada kode CSS lists sidebar (widget-content li a)

• Terakhir simpan template dan lihat hasilnya diblog anda.

Semoga bermanfaat.

Read More

Cara Membuat Tooltip Dengan jQuery

 

Cara Membuat Tooltip Dengan jQuery - Kali ini saya membahas sebuah tutorial blogger yaitu Cara Membuat Tooltip Dengan Jquery. Tooltip adalah semacam icon yang memberikan keterangan pada link/gambar pada saat mouse kita arahakan ke link/gambar tersebut . Pasti sobat masih pada binggun semua ya??? Jadi ginii.. saat kita menggerakan mouse kearah link/gambar tersebut , dan link/gambar tersebut akan mengeluarkan keterangan yang singkat . Baik sudah mengerti kan ? Bagi yang sudah mengerti langsung aja liat tutorialnya di bawah ini .

1. Login Blogger

2. Cari Code </body> dan pastekan kode dibawag ini tepat diatas code </body>

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:25,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->

3.Cari code ]]></b:skin>  lalu pastekan code dibawah ini tepat diatas kode ]]></b:skin>

#easyTooltip{
 padding:5px;
 border:1px solid #222222;
 background:#000000;
 font-size: 12px;
 color: #ffffff;
 }

4.Klik Save Template

Apakah sudah selesai ? tentu belum . Untuk menggunakan tooltipnya mudah tinggal copy code dibawah ini di Postingan pada Mode HTML bukan yang Compose

 

 <a class='tooltip' href='LINK PUNYA KAMU'  title='JUDUL TOOL TIP'>JUDUL LINK</a>

Read More

Cara Membuat Tooltip dengan jQuery

 

cara membuat tooltip

Cara Membuat Tooltip dengan jQuery akan memberi kesan cantik pada blog, karena link2 yang ada pada blog kamu akan muncul seperti title yang bisa sangat mudaj kamu atur, coba kamu arahkan mouse kamu pada blog ini, nahmitulah yang dinamakan tooltips.

Gambar diatas menunjukkan adanya tooltips yang muncul saat pointer diarahkan ke link, lalu bagaimana cara membuat tooltip di blogger, ikuti tutorial blog singkat dibawah ini:

1. Login ke blogger kamu
2. Silahkan menuju pengaturan template
3. cadangkan dulu dengan mendownload template kamu untuk berjaga2 jika terjadi kesalahan dapat dengan mudah di pulihkan.
4. Cari kode ]]></ b:skin> dan letakkan kode berikut tepat diatas kode ]]></ b:skin>
   

   #easyTooltip {
   padding: 5px;
   border: 1px solid #008000;
   color: #00cc00;
   background: #004000;
   }

5. Selanjutnya copy kode di bawah ini, dan letakkan di atas kode </ head> dan letakkan kode berikut diatas kode </ head>
   

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

   <!-- begin Tooltips -->
   <script type='text/javascript'>
   $(document).ready(function(){
   $(&quot;a.tooltip&quot;).easyTooltip();
   });
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
   //]]>
   </script>

6. perhatikan kode di bawah ini, jika dalam template anda sudah terdapat kode tersebut maka tidak perlu diikut sertakan.
   

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

7.  Simpan template kamu

Sekarang pada template blog kamu sudah dilengkapi dengan tooltip, untuk memanggil fungsi tooltips ihat kode dibawah ini:

<a class='tooltip' href='url link' title='pesan tooltip'>text link</a>

Nah, tambahkan yang berwarna merah tersebut pada link kamu, demikian Cara Membuat Tooltip dengan jQuery, semoga bisa membantu kamu.

Read More