.jpg)
Judul posting semrawut seperti di atas adalah wujud bingungnya gubhug reyot ketika berusaha membuat kalimat yang tepat dan pendek. Mungkin bila dituliskan secara panjang lebar akan seperti ini:
Mungkin ini bisa menjadi bahan baru buat blog sampeyan. Bagus, ko'! Jozhlah, pokoknya...! Coba saja lihat di DEMO. Jangan bingung carinya. Letaknya di ujung paling bawah dengan judul (ushh ... judal-judul terus!) "Recent Posts using jQuery-CSS3". Bagi sampeyan yang selama ini sudah menggunakan jQuery, maka silahkan copy javascript, kode CSS dan xHTML-nya saja. Bagi yang belum menggunakan jquery.1.3.2.min.js, silahkan copy semua kode yang ada termasuk link jquery.1.3.2.min.js-nya. Kita akan buat dengan cara yang paling mudah dengan menyimpan seluruh kode melalui Add a Gadget. Kecuali ... ini kecuali, lho.... Bagi yang mau menggunakan jQuery-nya untuk berbagai kepentingan yang lain, simpanlah jQuery.1.3.2.min.js di atas kode <head>, sedang kode yang lain bisa di simpan melalui Add a Gadget. Jika mau sedikit rapi, biar kode CSS terkumpul di satu tempat, silahkan simpan kode CSS di atas kode ]]></b:skin> (jika di sini jangan lupa membuang tag style-nya!). Javascript dan xHTML bisa di simpan lewat Add a Gadget.
Update » Ngahad Pahing, Maret, 04, 2012
Cara Memasang dan Membuat Recent Posts dilengkapi Gambar/Image atau Thumbnail dengan Efek Animasi Menggunakan Javascript, Kode CSS, JQuery dan CSS3 Transition-Transformation serta CSS3 yang lain!
Ha .... ha .... ha ....! Masih nggak bener juga? Ada yang salah? Uh .... biar saja, emang buat judul nggak pusing?! He .... he ....Mungkin ini bisa menjadi bahan baru buat blog sampeyan. Bagus, ko'! Jozhlah, pokoknya...! Coba saja lihat di DEMO. Jangan bingung carinya. Letaknya di ujung paling bawah dengan judul (ushh ... judal-judul terus!) "Recent Posts using jQuery-CSS3". Bagi sampeyan yang selama ini sudah menggunakan jQuery, maka silahkan copy javascript, kode CSS dan xHTML-nya saja. Bagi yang belum menggunakan jquery.1.3.2.min.js, silahkan copy semua kode yang ada termasuk link jquery.1.3.2.min.js-nya. Kita akan buat dengan cara yang paling mudah dengan menyimpan seluruh kode melalui Add a Gadget. Kecuali ... ini kecuali, lho.... Bagi yang mau menggunakan jQuery-nya untuk berbagai kepentingan yang lain, simpanlah jQuery.1.3.2.min.js di atas kode <head>, sedang kode yang lain bisa di simpan melalui Add a Gadget. Jika mau sedikit rapi, biar kode CSS terkumpul di satu tempat, silahkan simpan kode CSS di atas kode ]]></b:skin> (jika di sini jangan lupa membuang tag style-nya!). Javascript dan xHTML bisa di simpan lewat Add a Gadget.
JQuery-Javascript "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg"; imgr[1] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg"; imgr[2] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg"; imgr[3] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg"; imgr[4] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6;borderColor = "#232c35";bgTD = "#000000"; thumbwidth = 55; thumbheight = 58; fntsize = 11; acolor = "#555";aBold = true;icon = " ";text = "comments"; showPostDate = true;summaryPost = 40;summaryFontsize = 10; summaryColor = "#333";icon2 = " "; numposts = 20; home_page = "http://tantytm.blogspot.com/"; limitspy=4 intervalspy=4000 //]]> </script>
Kode CSS "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"
Kode CSS:
<style type="text/css" media="screen">
#recpost{
overflow: hidden;
margin: 0 auto;
padding: 4px 2px;
height: 327px;
background: #aaa;
border: 1px solid #666;
border-radius: 10px;
}
#recpost ul{
width: 210px;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
#recpost li{
width: 198px;
padding: 5px;
margin: 0 0 5 0;
list-style: none;
float: none;
height: 70px;
overflow: hidden;
border-radius: 6px;
background:#444 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/GR_lurik.jpg);
border:1px solid #ddd;
color:#66CCFF;
}
#recpost li{
position: relative;
-o-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-webkit-transition: all 1.2s linear;
}
#recpost li:hover{background: #663300;}
#recpost li a{
background: none;
text-decoration: none;
font-size: 11px;
line-height: 14px;
color: #babffa;
font-family: Helvetica, Serif, Arial, Tahoma;
line-height: 10px;
margin:0;
padding:0 0 2px 0;
}
#recpost li a:hover{
color:#eee;
text-shadow: 1px 1px 1px #000;
}
#recpost li img{
float: left;
padding: 4px;
border: 2px solid #eee;
border-radius: 6px;
margin-right: 5px;
background: #888;
-o-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-webkit-transition: all 1.2s linear;
}
#recpost li:hover img{
-o-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
-moz-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
-webkit-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
}
.spydate, .spycomment{
position: absolute;
bottom: 5px;
right: 3px;
font-size: 9px;
height: 15px;
background: #aaa;
text-align: center;
width:70px;
padding:0;
margin:0;
font-family: Arial, Helvetica;
}
.spycomment{
left: 76px;
width: 60px;
}
</style>xHTML "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"
xHTML:
<div style="float:right;margin:0px;padding:0;min-width:200px;"> <div id="recpost"> <script src='http://gubhugreyotprojects.googlecode.com/svn/GR_jQrecentposts.js' type='text/javascript'></script> </div> </div>
Cara Menggunakan dan Menyimpan Kode
- Login ke Blogger
- Setelah masuk di Dasbor, klik "Design/Rancangan".
- Lanjutkan dengan klik Add a Gadget. Pilih tempat yang tepat untuk widget recent post ini (bisa di sidebar).
- Pilih dan KLIK "HTML/Javascript".
- Setelah box penambahan widget terlihat, copy dan pastekan semua kode.
- KLIK "SAVE/Simpan".
- Lihat hasilnya dengan membuka blog.
- Setelah bisa tertampilkan dengan sempurna di halaman blog, ganti kode berwarna merah yang berupa URL (http://gubhugreyot.blogspot.com) dengan URL blog sampeyan.
- Untuk mengatur jumlah posting yang akan di tampilkan, ganti kode yang berwarna hijau (numposts = 20) dengan nilai yang lain. Semakin besar maka semakin banyak yang di tampilkan.
- Jika sebelumnya anda sudah menggunakan jQuery versi 1.3.2 atau yang lain maka kQuery yang disertakan di sini nggak usah dipakai.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Ngahad Pahing, Maret, 04, 2012
» Happy Blogging - gubhugreyot «
kang tag cloud eror lgi ya kang . . .
BalasHapussemoga berhasil, saya coba dulu.
HapusTOKO BUKU PETERNAKAN ONLINE
http://www.majubersamaps.com/
Tag Cloud: javascript di stashbox.org. Sering ngadat! Pindah saja jsriptnya ke ripway.com.
BalasHapusTentang cursor: yang ekornya molor!
Itu ekornya si gubhug reyot (emang suka molor-molor!). Jangan potong sekarang n'tar nggak bisa pakai. Tak buat ekor yang masih segar dulu trus baru potong ekor yang ini!
Tentang: Menu Accordion di sebelah kiri! Sudah terposting. Cari di menu Javascript-jQuery.
Tentang Template gubhug reyot: Lain Waktu aku bongkar. Saat ini kodenya masih tambal sulam!
Tentang Email: aku jarang buka email. Klo ada unek-uneg sampaikan leawt comment. n'tar aku buat posting (kuwatir dikira sombong atau tidak memperhatikan. Soalnya aku hampir tidak pernah membuka email!)
Salam ...
Gubhug reyot
mna tuh kang javascript tag cloud'na,,
BalasHapusyang d stasbox ga bsa di bka kan
Javascript Tag Cloud Cumulus:
BalasHapusGanti: cumulus.js yang dari stahbox.org dengan
http://h1.ripway.com/santyeka/Cumulus/MasterCumulus-bgs1-GR.js
Salam ....
gubhug reyot
ok kang...
BalasHapusmakasih ^_^
tpi kok yang akang g diganti sih??
Udah seebel, nih! Masa' tiap kali macet melulu! Aku mo pindah saja yang dari stashbox ke ripway semua! Susah! Bikin deg-deg-kan saja. Emang kitanya nggak malu punya blog yang ditonton banyak orang ko' kacau balau! Apalagi klo DEMO-nya yang macet! Hu ... Malu dikira bo'ong-bo'ongan!
BalasHapusOi ... Blog aku kaya'nya jadi sedikit bermasalah, ya, gara-gara pakai "Energy Saving Mode" yang pakai jQuery. Sidebar kanan ma pas buat comment ko' ada troble, ya?! Bener, nggak?
Salam ....
gubhug reyot
ah nggak kang,,, menurut gw biasa aja !!!
BalasHapusmlah kok skrang kok rda ringan yah blog'na :D
kang minta tutor tooltips kya d blog ini dong kang???
N'tar tak postingkan! Tak siapin dulu. Nggak lama ko'. Paling 1, 2, 3 hari udah nongol!
BalasHapusSalam ...
gubhug reyot
ok siap kang,,,
BalasHapusthanks...
akang jago banget tentang css'y???
belajar dmna kang???
He...he ... belajar di kebun sambil nanam singkong ma' bakar ketela ! He ... he ... kata orang tua ..., "Dimana ada kemauan di situ ada jalan!" He ... asal nggak jalan ke neraka, saja, toh!
BalasHapusBelajar dan selalu belajar itu saja kuncinya. Cangkul di tangan kanan, pensil di tangan kiri, trus buku di bawah topi bambu! Hua .... ha ... ha ....!
Salam ....
gubhug reyot
Mas .
BalasHapusGmna cara buat ganti kata" .
Kan saya promosi in blog lewat facebook .
Dengan cara .
- Klik tautan
- Tulis website
- Kan udah keluar tuh gambar n website nya .
- Eh punya saya malah kata-kata nya aneh .
- Kolo punya sampeyan malah kata-kata nya bagus
- Contoh : Panduan blogger,Tutorial blogger DLL.
- Tolong yo mas bantu blog saya .
Thx .