News Update :
'
'
'
Tampilkan postingan dengan label Trick Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Trick Blogger. Tampilkan semua postingan

Trick Blogger | Membuat Link Pelangi pada Blog

Penulis : Unknown on Senin, 31 Desember 2012 | 15.53

Senin, 31 Desember 2012


Terkadang pengunjung betah untuk berkunjung ke blog kita, karena tampilan blog yang begitu menarik. Nah jika sobat ingin membuat blog anda lebih menarik silahkan berikan effek yang menarik pada link blog anda. Yaitu dengan memberikan effek link pelangi pada blog anda.
Dimana nantinya jika salah sati link disorot oleh cursor, maka link akan berubah warna seperti warna pelangi.
Untuk DEMO silahkan lihat Blog Ini. Jika sobat sudah mengerti dengan effek link pelangi ini, silahkan ikuti langkah berikut ini.

1. Login ke blogger
2. Pilih Template
3. Pilih Edit HTML => Lanjutkan
4. Cari kode seperti ini <head> dan letakkan kode berikut ini tepat di Bawah <head>
<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>
5. Simpan Template
6. Silahkan lihat blog anda.
Selesai, semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)
komentar | | Read More...
Diposting oleh Unknown di 15.53 0 komentar
Label:

Trick Blogger | Cara Membuat Link Begoyang Saat Disentuh Oleh Mouse

Penulis : Unknown on Kamis, 20 Desember 2012 | 15.44

Kamis, 20 Desember 2012


Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog anda.
2. Pilih menu Rancangan dan Pilih Edit/HTML
3. Setelah Itu Centang Expand Widget 
4. Untuk menghindari terjadinya kesalahan silahkan Download Lengkap Template 
5. Kemudian cari kode </Head> gunakan Ctrl+f
6. Copy kode dibawah simpan di atas kode </Head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script> 
9. Jika sudah selesai klik Simpan Template dan lihat hasilnya. 

SUMBER: BERBAGAI SUMBER
komentar | | Read More...
Diposting oleh Unknown di 15.44 0 komentar
Label:

Trick Blogger | Cara Membuat Recent Post Animasi Vertikal Bergambar

Penulis : Unknown on Senin, 03 Desember 2012 | 15.14

Senin, 03 Desember 2012


Recent Post Animasi Vertikal Bergambar Adalah widget yang dibuat dengan tujuan memperlihatkan postingan terakhir di suatu blog atau website, apabila sebuah artikel yang di posting memuat suatu gambar maka widget ini pun akan menunjukan gambar yang telah di muat artikel tersebut dengan ukuran yg kecil tentunya, tidak sama dengan ukuran gambar aslinya di dalam posting. Dengan adanya Recent Post membuat tampilan blog kita menjadi menarik dan membuat pengunjung ingin melihat artikel postingan kita yang lainnya. sebagai referensi sahabat bisa lihat di beranda blog milik saya ini. Untuk Membuat Recet Post Animasi Vertikal Sahabat bisa melihat caranya dibawah.

Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog Anda
2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget 
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :

<div style="margin-bottom: -20px;">
<style type="text/css">
#rp_plus_img{height:217px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#fff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:1px;border:solid 1px #cccccc;width:70px;height:70px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://wisnunugraha.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 250;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul></div>

6. Setelah dicopy silahkan klik simpan dan lihat hasilnya.

Keterangan :
  • Angka yang berwana Kuning diatas adalah ukuran untuk gambar di Recent Post.
  • Angka yang berwarna Biru diatas adalah kecepatan Slide gambar Recent Post
  • Angka yang bewarna Hjau diatas adalah 10 Jumlah posting yang akan di tampilkan di Recent Post dan 250 adalah Huruf atau deskripsi postingan yang ditampilkan di Recent Post
sumber: http://irawanbudiarto.blogspot.com/2012/04/cara-membuat-recent-post-animasi.html
komentar | | Read More...
Diposting oleh Unknown di 15.14 0 komentar
Label:

Trick Blogger | Recent Post With Thumbnail Horizontal

Penulis : Unknown on Minggu, 02 Desember 2012 | 15.04

Minggu, 02 Desember 2012

Halo pembaca  sekalian, mari kita bersama sama membuat "Recent Post With Thumbnail". 
yg kita buat "Recent Post With Thumbnail horizontal berjajar ". anda  ingin melihat gambarnya secara langsung, berikut screenshotnya

Menarik bukan? Walaupun tanpa animasi jQuery pada post saya pada zaman dulu kala yakni "Recent Post Animated With jQuery"
Pada Recent Post kali ini, admin lebih menekankan kepada ringannya blog saat dibuka, karena pada saat kita menggunakan Recent Post yang teranimasi dengan jQuery tentu saja akan sedikit lama untuk dimuat karena harus memuat script jQuerynya.
Dan, pada Recent Post With Thumbnail ini, admin menggunakan Script sederhana yang tidak lama untuk dimuat di blog kesayangan anda. 

Oke, Berikut Step-By-Step nya

1. Login ke Blogger --> Pilih Blog anda --> Layout
2. Click "Add a Gadget" --> HTML/JavaScript
3. Masukkan script berikut
<center><script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[1] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[2] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[3] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[4] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[5] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[6] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[7] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[8] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[9] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
showRandomImg = true;

tablewidth = 900;
cellspacing = 2;
borderColor = "#eeeeee";
bgTD = "transparant";

imgwidth = 110;
imgheight = 100;

fntsize = 12;
acolor = "Black";
ahover = "#444444";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 10;
summaryColor = "gray";
icon2 = " ";

numposts = 5;

home_page = "http://inyomanardianta.blogspot.com/";

</script>
<script src="https://sites.google.com/site/kukuhcdh/home/javascript/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script></center>

***---*** 
Ganti text yang bewarna merah dengan alamat blog anda.
Ganti nominal yang bewarna biru untuk menentukan banyaknya jumlah post yang akan ditampilkan.
Ganti nominal yang bewarna hijau untuk banyaknya huruf yang dimuat untuk setiap post (Read More)
Silahkan berkostumisasi sendiri ya :)

Sekian trik blogger, mohon maaf apabila ada kesalahan.. Sekian terima kasih...
sumbernya: http://kukuhcdh.blogspot.com/2012/02/trick-blog-recent-post-with-thumbnail.html
komentar | | Read More...
Diposting oleh Unknown di 15.04 0 komentar
Label:
Langganan: Postingan (Atom)
 
Design Template by panjz-online | Support by creating website | Powered by ardi tricajus