JQuery Tuts For Blogger

The Most Popular Traffic Exchange
Cara Menghilangkan Link Hidup Pada Komentar Blogger

Cara Menghilangkan Link Hidup Pada Komentar Blogger

Tutorial kali ini kita akan belajar sebuah trik blog cara menghilangkan link hidup pada komentar dengan bantuan script JQuery. Trik seperti ini terkadang kita butuhkan agar blog kita tidak menjadi sarang spammer.
Nah jika anda tertarik untuk menerapkan trik menghilangkan link hidup pada kolom komentar blog anda, silahkan ikuti tahapan berikut ini:
  • Silahkan login ke akun anda
  • Klik template/ Rancangan >> Edit HTML
  • Cari kode </head>
  • Letakkan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'></script>     
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove();
});
</script>
  • Terakhir simpan template anda dan lihat hasilnya dengan uji coba komentar dengan link hidup pada kolom komentar blog anda.
Demikian trik menghilangkan link hidup pada kolom komentar blogger. semoga bermanfaat. Terima kasih.

Cara Membuat Tabber Tab

Pada kesempatan kali ini, insyaAllah tema JQueryTuts yang akan kita pelajari adalah cara menambahkan atau cara membuat tabber tab pada template blogger.

Sebagaimana kita ketahui Tabber tab telah banyak digunakan dalam dunia desain web. Dengan adanya tabber tab maka kita dapat menghemat ruang widget pada blog. Beberapa style dari tabber tab disetting secara manual dalam memasukkan widget yang ingin ditampilkan pada setiap tab, tapi tabber tab kali ini anda dapat dengan mudah mengatur widget yang akan dimasukkan ke dalam kolom tabber tab hanya dengan mendrag widget pada bagian tata letak pengaturan template anda.

Tabber Tab JQuery 1

Jika tertarik dengan tabber tab ini maka silahkan ikuti langka-langkah pembuatannya sebagai berikut:

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda.

3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

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

Catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,

4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>

Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.


5. Selanjutnya cari kode HTML berikut:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1

6. Selesai.

Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.

Demikian cara membuat tabber tab untuk blogger. Semoga bermanfaat.

Resource: BloggerTuts.Com

Tab Menu Vertikal Dengan Efek Slide Out

Vertikal MenuPada kesempatan kali ini saya insyaAllah akan mengetengahkan cara membuat tab menu vertikal dengan efek slide out. Tab menu vertikal ini mempunyai efek slide yang halus, dimana efek akan terlihat ketika kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergerak keluar (slide out) dan secara perlahan akan kembali ke posisi semula jika kita menggeser mouse keluar dari area menu. Posisi dari tab menu inipun bersifat tetap walaupun kita menggulung layar dengan scroll naik ataupun turun. Kita dapat menggunakan tab menu vertikal ini dengan berbagai keperluan, meletakkan link share social bookmark atau halaman mandiri blog dll.

Baiklah kita langsung pada langkah-langkah cara membuat tab menu navigasi horizontal dengan efek slide out:

1. Login ke akun anda

2. Pada dasbor >> Klik Template >> edit HTML (expan template widget)

3. Kemudian cari kode ]]></b:skin>

4. Letakkan kode berikut ini diatas kode ]]></b:skin>

ul#menusisi {

position: fixed;

margin: 0px;

padding: 0px;

top: 50px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#menusisi li {

width: 100px;

}

ul#menusisi li a {

display: block;

margin-left: -50px;

width: 100px;

height: 55px;

background-color:#141414;

background-repeat:no-repeat;

background-position:48px center;

border:1px solid #cfcfcf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 0.8;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

}

ul#menusisi .beranda a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);

}

ul#menusisi .tentang a{

background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);

}

ul#menusisi .cari a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);

}

ul#menusisi .komentar a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);

}

ul#menusisi .rssfeed a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);

}

ul#menusisi .alat a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);

}

ul#menusisi .kontak a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);

}

5. Setelah itu cari kode </head>

6. Lalu letakkan kode berikut diatas kode </head>

<script src='http://www.google.com/jsapi'/>

<script>

google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);

</script>

<script type="text/javascript">

$(function() {

$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);

$('#menusisi > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);

}

);

});

</script>

7. Kemudian cari lagi kode </body>

8. Lalu letakkan kode berikut ini diatas kode </body>

<ul id='menusisi'>

<li class='beranda'><a href='LINKANDA' title='Home'></a></li>

<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>

<li class='cari'><a href='LINKANDA' title='Cari'></a></li>

<li class='alat'><a href='LINKANDA' title='Alat'></a></li>

<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>

<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>

<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>

</ul>

9. Simpan dan lihat hasilnya

Keterangan

1. Gantilah LINKANDA sesuai dengan link keinginan anda.

2. Gantilah  keterangan didalam tag title (misal; title='Beranda' di ganti menjadi title='Home') sesuai dengan keinginan anda.

3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.

4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.

5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.

6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah anda siapkan.

Cara Membuat Featured Posts Slider

featured posts slider menggunakan JQuery pada template blogger
Featured Posts Slider Using JQuery

Featured posts adalah widget yang bagus untuk mempromosikan artikel terbaik diblog anda. Apalagi dengan tampilan yang menarik dan efek slide aktraktif dipastikan akan membuat blog anda lebih hidup dan tentunya mengundang perhatian pembaca untuk mengklik artikel yang ada.

Nah jika anda antusias untuk memasang widget featured posts slider ini, Berikut tutorial menambahkan widget ini pada template blogger:

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
3. Tambahkan juga script berikut setelah kode diatas
<script>$(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>
Catatan: 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>
#featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}
#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPpcFSB1D2nc06wVLfoyMo0P7erwfcvjFCZPEf7BhPxxos0Ih0bnG2tmuVI_TdmAzTP54f5EIbnTuw8cg4TtK1Whp7E8QSk54HKPDoZwO3khlWxDvvV9lXQ_9Idg3fetXlO1ORWMlPFc/s320/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}
#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('http://i47.tinypic.com/117s1g9.jpg') ;
}
#featured .info h2{
    font-size:14px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}
4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
<center><div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://i49.tinypic.com/qpncrq.jpg" alt="" /><span>Kerinduan Pada Baitullah</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://i49.tinypic.com/sqh9cl.jpg" alt="" /><span>6 Kerusakan Valentine day's </span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://i45.tinypic.com/sy6p3k.jpg" alt="" /><span>Keajaiban Do'a</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://i50.tinypic.com/14jn30n.jpg" alt="" /><span>Wanita yang Lisannya Al-Qur'an</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="http://i45.tinypic.com/33ue3yo.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Kerinduan Pada Baitullah</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. ....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://i48.tinypic.com/mts5sg.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >6 Kerusakan Valentine days </a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis...<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://i50.tinypic.com/av23bm.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Keajaiban Do'a</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://i47.tinypic.com/212h1qt.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Wanita yang lisannya al-qur'an</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus ....<a href="#" >read more</a></p>
        </div>
    </div>
</div></center>
Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
6. Simpan template
Selesai.Semoga bermanfaat.

View Live Demo
Credit: http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html