Membuat Slide Show dan Caption - JQuery

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya "s3Slider jQuery plugin". Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.

Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:

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

5. Masukan script jquery ini dibawah script tadi:

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

Read more »

Membuat Back To Top dengan Efek JQuery

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head>

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

4. Masukan kode javascript ini setelah script jquery tadi:

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro

5. Cari kode <body> dan ubah menjadi <body id='top'>
6. Masukkan kode html berikut sebelum </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

7. Simpan template anda dan lihat hasilnya.

Read more »

Cara Merubah Setting Permalink WordPress agar SEO Friendly dan Bebas Masalah

Edisi Tips dan Trik WordPress pada serial Tutorial WordPress kali ini akan membahas tentang bagaimana cara merubah setting/struktur permalink blog wordpress agar lebih SEO friendly dan bebas dari masalah. Pada blog wordpress, setting permalink default adalah /?p=123, sehingga url yg ditampilkan adalah  http://www.namablog.com/?p=123. tentu hal ini kurang SEO friendly karena judul posting tidak ditampilkan pada url. Seperti belajar on-page SEO,  kita tahu bahwa tampilnya judul posting pada permalink akan sangat membantu hasil SERPs ( Search engine Result Pages). Sebaiknya struktur permalink diganti menjadi /%category%/%postname% atau bahkan hanya /%postname% saja. sehingga pada url posting blog akan tampil http://www.namablog.com/kategori/judulposting atauhttp://www.namablog.com/judulposting saja

Pada Blog WordPress baru tentu saja hal ini tidak masalah. perubahan bisa dilakukan secara mudah dan tidak beresiko. Tapi bagaimana dengan blog yg sudah berisi banyak konten? hal ini menyisakan masalah karena blog tersebut akan kehilangan backlink yang sudah dibangun dengan susah payah akibat perubahan struktur permalink tersebut. Nah pada tutorial wordpress kali ini saya akan memberikan tips dan trik wordpress sederhana untuk mengatasi masalah tersebut dengan menggunakan trik redirect file .htaccess, yuk kita mulaii..

Pertama yg harus anda lakukan adalah login ke wordpress admin panel. Pada dashboard wordpress anda, klik Settings > Permalinks. Kemudian pilih custom lalu isi dengan/%category%/%postname% atau /%postname% saja, seperti gambar dibawah ini (klik untuk memperbesar):

setelah itu, struktur permalink anda akan tampak seperti ini

http://www.namablog.com/judulposting

Sekarang kita harus me-redirect seluruh backlink yang menggunakan struktur permalink lama ke struktur permalink baru. Untuk melakukan ini anda harus meng-edit file .htaccess yang berlokasi di root directory pada hosting wordpress anda, Berhati-hatilah jika akan meng-edit file .htaccess ini, pastikan anda backup file ini terlebih dahulu.

Download dan buka file .htaccess dengan file editor semacam notepad atau wordpad,  kemudian tambahkan baris dibawah ini :

RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://www.domain.com/$4

Kemudian simpan perubahan tersebut dan upload lagi pada root directory wordpress anda. Selesai, anda baru saja merubah setting struktur permalink wordpress anda tanpa harus kehilangan backlink

Read more »

Cara Menghilangkan Widget Attribution Blogger

Pada episode yang lalu saya sudah menerangkantentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {height:0px; 
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Read more »