Gentayangan triks

Membuat Judul Blog Pada Tab Bergerak

posted by yudhie

Kali ini saya akan berbagi bagaimana membuat judul blog bergerak. Membuat judul blog tentu saja menambah blog kita bukan saja menarik, tapi terlihat lebih unik plus kereeen.... he ..he.. emang apaan? Biasanya judul blog dalam keadaan diam, nah kita coba sedikit merubah jadi bergerak dan lebih kelihatan aktif. Tapi membuat judul blog bergerak, tidak ada hubungannya dengan bergeraknya penghasilan, kecuali blog kita menjual sesuatu dan orang lain membeli produk yang kita jual. Ya....ini kemana arahnya....membuat judul blog bergerak kok dihubungkan dengan penjualan. Udah dech... kita langsung ke TKP...sudah siap?

Yang harus dilakukan adalah :

Login ke Blog anda, lalu klik Layout/Tata Letak.
Setelah itu klik Edit HTML lalu beri tanda centang di Expand Widget Templates.
Jika anda sudah masuk Edit HTML cari kode </head> (jika mau lebih mudah mencarinya klik F3 pada keyboard dan tuliskan kata yang ingin dicari)
Jika kodenya telah di temukan copy kode di bawah ini dan letakan dibawah kode </head>

Ternyata caranya cukup mudah, siapapun bisa langsung melakukan aksi bagaimana membuat judul blog pada tab bergerak. Mudah bagi yang mau mencoba, dan terasa sulit bagi yang tidak berani mencoba. Semoga berhasil, kalau belum berhasil berarti resepnya berkurang.

Selamat mencoba...!

Read more »

Membuat Efek Shadow pada Gambar

posted by yudhie

Memberi effect shadow pada tampilan gambar yang kita posting, tentu saja memiliki pengaruh pada tampilan blog kita. Tampilan shadow pada gambar disamping dapat memberikan kesan elegan juga memberikan dampak pada orang yang berkunjung di blog kita. Apalagi gambar yang di tampilkan sangat unik, bisa jadi akan meningkatkan daya tarik mata ketika memandang. Langsung ke TKP

Perhatikan gambar disamping yang berwarna merah dan terdapat efek bayangan pada gambar tersebut, ternyata pada gambar yang akan dimasukan ke dalam posting artikel blog bisa diberi efek bayangan juga, kalian bisa melihat contohnya di blog saya ini yang semua gambar pada posting dihiasi dengan efek bayangan. Untuk membuat sebuah efek bayangan pada gambar posting tidaklah sulit, cukup menambahkan sedikit kode CSS. tapi efek bayangan ini hanya akan berpengaruh di area posting blog atau di artikel blog saja. untuk banner dan lain-lain saya rasa itu tidak bisa, kecuali kalian mengeditnya dengan software edit foto. Jika kalian tertarik langsung saja lakukan langkah-langkah dibawah ini :

- Login ke akun Blogger kalian, lalu pilih Tata Letak dan klik Edit HTML
- Cari kode ]]></b:skin> lalu paste kode CSS dibawah ini tepat di atasnya:

drop-shadow img { background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom; padding: 5px 10px 10px 5px; }
- Cari kode <data:post.body/> lalu ganti dengan kode dibawah ini:
<div class='drop-shadow'><data:post.body/></div>

Setelah semua langkah diatas dilakukan dengan benar, sekarang tinggal di SAVE dan lihat hasilnya pada gambar yang kalian masukan ke dalam postingan artikel blog kalian.

Keterangan:

Pada efek shadow yang saya berikan diatas adalah efek shadow yang berwarna abu-abu, kalian juga bisa menggantinya dengan warna pink,merah atau biru sesuai keinginan tapi dengan syarat kalian harus membuat gambar seperti "http://i30.tinypic.com/1qsh1h.jpg" dan merubah shadow pada gambar tersebut menjadi warna yang kalian inginkan. Setelah itu upload gambar hasil editan kalian tadi kemudian ambil URL nya dan ganti alamat http://i30.tinypic.com/1qsh1h.jpg pada kode CSS diatas dengan URL gambar yang telah kalian edit.

selamat mencoba dan semoga bermanfaat. jika ada pertanyaan silahkan pada kolom komentar dan insyallah akan saya jawab. terima kasih.

sumber: http://www.aziz-rhamadhan.co.cc/

Read more »

Older Newer Post Link Hilang di Firefox

posted by yudhie

Tadi pagi blog saya baik-baik saja, namun menjelang siang ada keanehan yakni hilangnya link older post dan newer post. Semula saya sempat mengira link itu memang hilang dan berniat menambahakannya lagi ke template, namun ternyata di browser lain link tersebut tetap tampil. Nah apa yang terjadi dengan firefox? Ternyata link tersebut seakan ngumpet dan bergeser jauh dari seharusnya. Ini yang tidak saya mengerti, mencari info ke firefox tidak ada pemberitahuan. Hal sama terjadi ketika banyak template yang elemennya kacau di Firefox hari ini. Dan kembali algi yang paling banyak mengalami termasuk saya adalah hilangnya older post dan newer post link.

Untuk mengatasinya Anda cukup mengubah bagian css blog-pager Anda.
- Silahkan login blogger, Tata Letak lalu pilih Edit HTML
- Cari kode css berikut ini

#blog-pager-newer-link{.............................}
#blog-pager-older-link{.............................}
#blog-pager{..............................}

titik-titik adalah kode css yang tentu bisa berbeda setiap template.
Cari kode tersebut dan untuk lebih mudahnya ganti saja dengan css berikut ini:

#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:565px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}

Sesuaikan yang berwarna merah dengan lebar pada css main-wrapper Anda. Cari kode css main-wrapper dan lihat lebarnya yang ditandai dengan kode width. Gunakan ukuran yang tertera untuk kode berwarna merah tersebut.

Tambahan... Bagi Template Dengan 2 Lebar Main-Wrapper
Ini saya tambahkan karena banyaknya pertanyaan yang masuk. Yang saya maksud dengan template dengan 2 main-wrapper adalah template dengan lebar area postingan yang berbeda ketika di homepage dan ketika Anda masuk salah satu postingan. Karena pada dasarnya pembenahan ini memasukkan dua kunci utama yakni float: left; dan penyesuaian lebar area postingan, maka untuk template dengan dua main-wrapper kodenya pun harus dua. Lakukan langkah-langkah di atas sebelumnya. Kemudian ikuti tambahan tutorial berikut ini...
- Cari kode main-wrapper kedua, misal di template Magazine R.1.5 Kang Rohman lebar main-wrapper pertama adalah 617px (ini lebar secara umum dan dibenahi dengan tutorial pertama tadi), nah untuk magazine R.1.5 main-wrapper kedua memiliki lebar 315px. Maka carilah kode main-wrapper kedua (kode lebar postingan bersyarat, karena lebar hanya aktif saat berada di homepage, selain homepage blog memanggil lebar secara umum). Anda bisa menemukan lebar main-wrapper kedua dengan rambu-rambu berikut:

Seperti dapat Anda pehatikan di atas untuk css main-wrapper yang kedua diawali dengan syarat. Nah, sekarang Anda juga harus membuat satu lagi css blog-pager untuk dimasukkan ke area tersebut. Misalkan untuk template tersebut menjadi:

Sekarang dijamin older dan newer post link Anda akan normal di template dengan dua macam lebar area psotingan. Sedikit tambahan dari tutorial tadi malam. Semoga bermanfaat....

Sumber: www.MasDoyok.co.cc

Read more »

Pasang Auto Read More V2

posted by yudhie

Sebelumnya saya sudah pernah membahas Tutorial ini di disini. tapi karena ada salah satu sahabat yang masih bingung cara pemasangannya jadi saya coba memberikan tambahan sedikit teman-teman sekalian bisa mudah memahaminya.. langsung aja ya ke tutorialnya..

Penting! Bagi yang sudah pernah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>

var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..

Read more »

Membuat Widget Tombol Auto Instal Untuk Blogger

posted by yudhie

Membuat Widget untuk tombol Auto Instal sangat di perlukan bagi para blogger untuk mempermudah dan mempersingkat waktu instalasi widget dari suatu blog. Dengan cara ini maka blogger tersebut tidak perlu melakukan nya secara manual lagi.

Cara Nya Sebagai Berikut Ini ;

1. Contoh Nya Seperti Ini ,

2. Masuk Ke Blogger,

3. Klik Entri Baru Truz

4. Copy Paste Kode Di Bawah Ini Ke Postinggan Baru

Berikut code script yang bisa anda gunakan ;

<form action="http://beta.blogger.com/add-widget" target="_blank" method="post"><input value="judul untuk widget anda" name="widget.title" type="hidden"><textarea rows="3" cols="5" style="display: none;" name="widget.content">ISI DISINI DENGAN KODE WIDGET ATAU APAPUN YANG INGIN DIINSTALL OLEH PENGUNJUNG, DAN LANGSUNG TERPASANG DIBLOG MEREKA</textarea><input value="Pasang Translator Widget" class="button" name="go" type="submit"></form>

5. Klik Simpan ,Liat Hasil Nya ^_^

Selamat Mencoba .

Read more »