Tampilkan postingan dengan label Javascript. Tampilkan semua postingan
Tampilkan postingan dengan label Javascript. Tampilkan semua postingan
Membuat "Sticky/Floating" Menu Navigasi Horizontal
Udah lama banget ane ngga ngapdet postingan.. Semua aktifitas yang membuat ane pusing mulai dari tugas-tugas kuliah, skripsi ane yang judulnya bermasalah, konflik dengan pembimbing lah..!! Ditambah lagi ane sibuk belajar meng-edit template ini agar bisa fix (tapi rasanya ga pernah fix sih... ^^). Yah! Pokoknya bermacam-macam.
Oke! Kembali ke Blog.. karena mendengar permintaan beberapa teman ane yang bertanya bagaimana cara membuat navigational menu seperti yang ada di atas, ane berinisiatif lagi untuk membuat postingan ini. Sebenarnya trik ini sudah pernah terbit dalam blog ane, tapi sepertinya pengunjung juga malas untuk menjelajahi blog ini. Oleh karena itu ane buat judul baru saja tentang widget yang satu ini.
caranya sederhana karena kalian dapat mengaksesnya pada postingan ane untuk membuat floating object pada blog (silahkan klik di sini). dan di dalam floating object tersebut, kalian dapat mengisinya dengan sebuat navigational menu yang ada pada postingan jadul ane yang satu lagi.
Sesederhana itu sih..! Silahkan cek TKP bagi yang ingin membuat sama persis seperti blog milik ane ini. ^^
klik yg bawah bos...!!!
Jumlah komentar : (22)
Membuat Tab Menu dengan Slide Effect (versi Abu Farhan)
Entah kenapa jarang banget ane liat blog yang menggunakan widget ini. Padahal widget Tab Menu ini cukup keren dari segi tampilan dan ringan dalam proses loading. Alasan ane tidak menggunakan widget ini sendiri karena disamping ane sudah memiliki tab menu sendiri dari om Khendin, widget ini juga tidak sesuai dengan template ane yang sifat bentuknya tidak bergerak alias fixed size.
Widget ini merupakan Tab Menu yang sangat fleksibel, dengan slide effect menggunakan script JQuery. Penasaran seperti apa??? Lihat demonstrasinya di sini. Widget ini merupakan hasil karya dari Webitect, dan terima kasih pada om Abu Farhan yang mau berbagi infonya. ^^
Langsung aja ya! Untuk membuatnya sendiri cukup mudah, pertama-tama masuk ke "Tata Letak" dari Dasbor Blogger, dan masuk pada "Edit HTML".
Langkah awal, pasang kode CSS untuk membentuk tampilan widget ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.
Setelah itu, kita akan memasang script JQuery dari Google. Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode berikut tepat di atas </head>.
Yang terakhir, tinggal memasang widgetnya yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>
Perhatikan kode berwarna hijau!! "starttab" adalah nomor widget yang akan masuk dalam tab pertama, "endtab" adalah jumlah widget yang akan masuk ke dalam Tab Menu, sedangkan "sidebarname" adalah nama id dari kolom yang akan di jadikan Tab Menu.
Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu, lihat gambar berikut:
Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar
"endtab=3". Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.
Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:
....<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...
Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".
CATATAN: Widget ini tidak akan muncul di pratinjau, jadi jangan stres bila kelihatannya gagal, langsung saja simpan dan lihat hasilnya ^^ (seandainya tidak muncul, mungkin blogger membutuhkan beberapa saat untuk memperbaiki error yang disebabkan cache dari tampilan sebelumnya).
Sederhana kan!!?? (meskipun keliatannya rumit -_-') Tapi patut di coba. Sekali lagi silahkan lihat CONTOH dari widget ini di blog ane yang satunya.. ^^v..
Oke! Selamat mencoba =)
klik yg bawah bos...!!!
Jumlah komentar : (38)
Membuat Alternatif Twitter Update Widget dengan Javascript
Postingan ini sebenarnya mau diterbitkan bulan lalu, tapi karena tanggung, lebih baik diterbitkan awal bulan ini saja biar lebih terasa nuansa semangat tanggal mudanya.. ^^ ..
Beberapa dari sobat blogger pasti pernah dan /atau masih menggunakan widget Twitter Updates pada platform blogger yang dibuat oleh BloggerBuster. Kali ini, kalian bisa membuat alternatifnya dengan kode Javascript. Keuntungannya apa...!!?? Hehe... Tentu saja widget ini jadi lebih gampang dimodifikasi dibandingkan dengan widget yang biasa, meskipun mungkin membingungkan, tapi tenang saja, karena saya akan membantu langkan demi langkah agar widget ini lebih mudah di utak-atik.
Masuk pada Dasbor Blogger, kemudian pilih Tata Letak (Edit Layout), lalu pilih Edit HTML, kemudian beri centang pada Expand Template Widget. Cari kode ]]></b:skin> (gunakan Ctrl+F pada browser untuk mencari kode) kemudian letakkan kode CSS berikut tepat di atasnya.
.twittop{margin:5px 0px 0px 0px;height:30px;background:#141313 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfLEoxY28cXqB0LonSNDCd4hbBPrFkQyEnjHfXJ-p83xatyrHMnTSx2CPPwLlu-qRKHqyVYlcjxCkojY6FPNytbchNaUxSwxhUloykpaYLz1lZ5VrToVLqlQHizm9WSzkjo2_mYXGscM/s1600/twitop.jpg) no-repeat; /* Gambar Header*/
width:335px;}
#twitter_div{width:333px; /* Lebar Widget*/
float:left;height:100%;padding:0px 0px;margin:0px 0px;background:#fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;font-family:Tahoma,Century gothic,verdana, Arial, sans-serif; /* Jenis Huruf*/ }
ul#twitter_update_list{list-style:none;padding: 0px 0px;margin:0px 0px;}
ul#twitter_update_list li{font-size: 11px; /* Ukuran Teks Status*/
list-style:none; /* pilih bentuk daftar circle, disc, square, atau none*/
padding: 5px 5px;margin:0px 0px;line-height:18px;background:#B5D3DD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeEH_omJWMQAx8xnX6SGCNKpUS10cElXbH_VCvJY-RrJe9u1n1mkhFTr_STEyhtdvfIvWZjY3pNW_WoHMc5ST54Ij2PNi1S8vJYxcfNS3aFR-gTBhE-BrXkXi5d7iEhyphenhyphennxQj7OawFa4FM/s1600/twit.jpg) repeat-x; /* Gambar Background Update Status*/
border-bottom:1px dotted #ccc; /* Warna Border*/
color:#222; /* Warna Teks Update Status*/}
/* Berikut atur saja sama seperti di atas, tetapi yang ini untuk saat mouse over (ketika kursor mouse menghampiri kotak)*/
ul#twitter_update_list li:hover{font-size: 11px; /* Ukuran Teks Status saat hover*/
list-style:none; /* pilih bentuk daftar saat hover*/
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#dcdcdc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Hl3HGDjKpLTGDcxigCAcl_gpLoAsfEqnQraQhDj-BeSFzeJBucgVOHZeHDSuWYEGdQP8Ff66eMkvGAzGmXjIBxuvNrIQcHmsLTFPPYjVKNSrquj_vkmU4rb5Fg4Xjebrhy-UzFzBTm4/s1600/twith.jpg) repeat-x; /* Gambar Background Update Status saat hover*/
border-bottom:1px dotted #ccc;}
/* Berikut aturan untuk tautan (link)*/
#twitter_update_list li a:link, #twitter_update_list li a:visited{color:#D3116D;}
#twitter_update_list li a:hover{color:#BC0C0F; /* Warna Teks Links saat hover*/ }
Perhatikan teks catatan berwarna biru, kalian tinggal mengganti lokasi gambar atau bisa juga hanya menggunakan warna, ubah warna & ukuran teks dsb. Setelah itu Simpan (Save), lalu masuk pada Elemen Halaman (Page Elements), kemudian tambah gadget, pilih Kode HTML/Javascript, dan paste-kan kode javascript berikut, kemudian Simpan.
<div class='twittop'> </div> <div id='twitter_div'> <ul id='twitter_update_list'/> </div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/> <script src='http://twitter.com/statuses/user_timeline/ID-user-twitter.json?callback=twitterCallback2&count=5' type='text/javascript'/><br/>
<center><a href='http://twitter.com/ID-user-twitter'>Ikuti Saya di Twitter</a></center>
Ubah ID-user-twitter dengan user twitter milik kalian, dan ganti angka 5 yang menunjukkan jumlah tweet yang akan muncul pada widget.
Cara ini kelihatan rumit, tapi kalau diikuti dengan hati-hati dapat memuaskan sobat semua, karena bentuknya yang lebih unik, orisinil buatan kalian sendiri, baik itu terlihat dari gambar, warna, bullet, dan gambar.
Contoh widget ini terdapat pada bagian bawah blog ini, tapi pada blog ini saya tidak menggunakan gambar background, hanya menggunakan permainan warna saja.
Ini cuma untuk latihan dan menambah pengalaman saja, jadi jangan ragu mencoba... ^^ ...
klik yg bawah bos...!!!
Jumlah komentar : (7)
Alternatif 'Smooth Navigational Menu v1.31' (Bentuk Vertikal)
Ganti Javascript yang di atas <body> dengan kode berikut:
Ganti kode CSS dengan kode CSS berikut:
klik yg bawah bos...!!!
Jumlah komentar : (6)
Menambahkan MP3 Player Pada Blog Dalam Waktu 60 Detik
Kalian merasa tidak? Judul posting-an kali ini seperti judul buku programming! hehe..! Kenyataannya memang widget kali ini cukup mudah untuk dipasang. Widget ini saya pakai untuk melengkapi tugas blog BoxBerita dari dosen saya yang mengharuskan untuk mencantumkan rekaman suara dalam postingan blog.Awalnya saya tidak tahu bagaimana cara membuatnya, tapi alhamdulillah ada sobat BloggerTuts yang berbaik hati untuk memberikan tips ini.
Widget ini cukup mudah dipasang dalam blog, bisa diletakkan dimana saja, dalam postingan, atau menjadi widget di sidebar atau bawah postingan. Widget ini merupakan mp3 player ringan, yang hanya mampu menampilkan satu file mp3 saja (cocok untuk menampilkan hasil rekaman suara).
Berikut instruksi pembuatannya:
Masuk pada 'Edit HTML' pada 'Tata Letak Blogger', jangan lupa centang Expand Template Widget. Setelah itu copy dan paste kode berikut tepat di atas kode </head> (gunakan Ctrl+F untuk mencari kode).
<script type="text/javascript" src="http://flash.for.islam.googlepages.com/inlineflashplayercomp.js"></script>
<script style="text/javascript">
var paramplayerflash=2;
</script>
Perhatikan kode yang berwarna merah! Ada 1-8 jenis bentuk player yang dapat kamu gunakan, semua bentuknya berbeda dan dapat kamu lihat pada contoh di bawah.
Setelah itu simpan/save, dan selesai. Bagaimana cara memasang mp3 player-nya..?
Cara memasang widgetnya cukup sederhana, cukup membuat kode berikut ke dalam postingan atau widget 'Kode Javascript/HTML' dan bisa diletakkan dimana saja.
<a href="http://dl.getdropbox.com/u/1693834/Files/samplefile.mp3">Sample File</a>
Setiap kamu membuat tautan (link) yang tujuannya ke arah file berekstensi '.mp3' maka javascript akan otomatis mengubahnya menjadi sebuah mp3 player. Cukup ubah alamat URL yang berwarna merah pada kode di atas. Nama link (Sample File) juga bisa diubah sesuka hati.
Script widget ini cukup cepat dalam proses loading, dan bentuk player-nya dapat diubah sampai delapan jenis, berikut contoh-contoh yang dapat kamu pakai:
Sampel dari BloggerTuts : Player 1
Sampel dari BloggerTuts : Player 2
Sampel dari BloggerTuts : Player 3
Sampel dari BloggerTuts : Player 4
Sampel dari BloggerTuts : Player 5
Sampel dari BloggerTuts : Player 6
Sampel dari BloggerTuts : Player 7
Sampel dari BloggerTuts: Player 8
Keren kan...!?? Kalau begitu silahkan mencoba... ^^
klik yg bawah bos...!!!
Jumlah komentar : (8)
Membuat Menu Navigasi yang Keren..!! (Smooth Navigational Menu v1.31)
Hari ini adalah hari Natal... Oleh karena itu saya pribadi mengucapkan selamat bagi kemeriahan perayaan dan liburan keluarganya... Tapi, saat saya menulis posting-an ini, hujan deras sedang melanda Kota Bandung, makanya ga bisa kemana-mana nih...!!! -_- Dari pada tidak ada kerjaan jadi lebih baik menambah postingan blog, tul ga.....!! (Bukannya ane kaga ngormatin hari liburan ini ya... maklum... -_-')
Tips ini diciptakan oleh Dynamic Drive, sebuah situs yang berbagi script web secara gratis, dan kali ini, salah satu script-nya saya bagikan untuk sobat blogger semua.... ^^
Seperti biasa, untuk mengedit javascript, masuk pada Dasbor Blogger, klik Tata Letak, lalu pilih tab Edit HTML, kemudian centang Expand Template Widget. Setelah itu kalian siap menjadi Blogger Web Designer... hehehe...!!! ^^ Baiklah tanpa membuang waktu, berikut instruksinya:
Cari kode <body> (gunakan Ctrl+F untuk mencari), lalu letakkan script berikut tepat di atasnya.
Setelah itu masukkan script CSS ini tepat di atas kode ]]></b:skin>.
Jangan lupa untuk memperhatikan catatan tips untuk mengubah warna pada script CSS. Setelah itu simpan editan, dan masuk pada tab 'Elemen Laman'. Tambah gadget baru, pilih 'HTML/Javascript Kode', lalu masukkan kode berikut ini:
Kode di atas dibuat sama persis seperti menu yang ada pada navigasi blog ini. Ubah saja alamat tiap menunya (contoh: '<li><a href="http://em-mizan.blogspot.com">Halaman Utama</a></li>') Ubah saja alamat URL dan judul link-nya. Kalau ada menu yang ingin dihapus, hapus dari kode <li> sampai kode </li>. Untuk menghapus sub menu hapus dari <ul> sampai kode </ul>.
Setelah itu simpan dan letakkan gadget tersebut sesuka hati kalian... ^^, pilih pratinjau, dan lihat hasilnya. Jangan lupa disimpan... ^^ ...Selamat mencoba..
klik yg bawah bos...!!!
Jumlah komentar : (2)
Membuat Efek Hujan Salju pada Web/Blog dengan Javascript
Kali ini mengenai trik untuk membuat tampilan web/blog dihujani salju atau bisa juga item lainnya sesuai dengan keinginan kalian.
Triknya cukup gampang dan sederhana, berikut instruksi langkah-langkahnya:
Siapkan sebuah gambar yang akan digunakan menjadi gambar salju/benda yang turun. Kalau anda Bingung, gunakan saja gambar ini.
Klik kanan gambar di atas dan save as, lalu upload ke dalam web atau bisa juga ke situs penyimpanan gambar seperti Flickr, atau Photobucket.
Setelah itu masukkan script berikut tepat di atas kode </body>. Dalam blogger, kalian harus masuk ke dalam tata letak dan pilih Edit HTML.
<script type="text/javascript">
/******************************************
* Snow Effect Script- oleh Altan d.o.o. (http://www.altan.hr/snow/index.html) Diposkan oleh MiMuha
******************************************/
// Ubah alamat URL gambar ke lokasi yang anda upload
var snowsrc="salju.gif"
// Ubah jumlah gambar item/salju yang akan tampil pada web
var no = 10;
// Ubah berapa detik salju akan muncul pada web (0=akan selalu muncul):
var hidesnowtime = 0;
// Ubah kapan efek salju akan hilang di bawah halaman ("windowheight" [menghilang saat mencapai bawah window browser] atau "pageheight" [menghilang saat berada di bawah halaman web])
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "salju.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
Jangan lupa perhatikan tulisan pada kode yang berwarna biru. Setelah itu pratinjau, lihat hasilnya dan simpan.
Seep...! silahkan mencoba ^^
Sekadar tips: agar proses loading tidak lemot, gunakan gambar yang di kompres, kalo perlu ukurannya di bawah 1kb (sekian byte), atau pakai gambar yang hanya berbentuk titik saja (1x1 pixel), jumlah item saljunya kurangi saja dari 10 jadi 5 atau 8, dan atur agar item gambar akan hilang pada posisi bawah window ("windowheight") ... trims ... ^^
klik yg bawah bos...!!!
Jumlah komentar : (2)
Membuat Slideshow Featured Post dengan Javascript
Tertarik membuat 'Featured Post' seperti yang ada di sebelah kanan blog ini? Ternyata cara membuatnya cukup sederhana (terima kasih pada BloggerBuster ^^).
Widget ini menggunakan script dari JonDesign's SmoothGallery. Berikut langkah-langkah yang perlu dilakukan untuk memasang widget ini.
Pertama buat gambar dengan ukuran yang diinginkan. Jumlahya terserah, yang penting resolusinya harus sama, dalam post ini saya menggunakan contoh tiga gambar dengan resolusi 300x200 pixel. setelah itu upload ketiga gambar tersebut di situs image hosting seperti Photobucket atau Flickr.
Masuk pada 'Edit Halaman' di tata letak Blogger, dan tambahkan gadget, pilih HTML/Javascript kode berikan judul 'Featured Post', lalu simpan (isikan apa saja didalamnya, terserah karena tidak berpengaruh ^^), letakkan dimanapun sesuka hati.
Setelah itu masuk ke 'Edit HTML' di tata letak Blogger, centang "Expand Template Widget" cari kode ]]></b:skin> (gunakan Ctrl+F pada browser [mozzila, IE] untuk mencari kode ini). Setelah itu Copy dan Paste-kan kode berikut tepat diatasnya.
#myGallery { width: 300px !important; height: 200px !important; overflow: hidden; }
Langkah selanjutnya copy dan paste kode berikut ini tepat di atas kode </head>:
<script src='http://mimuha.byethost2.com/javascript/mootools.v1.11.js' type='text/javascript'/>
<script src='http://mimuha.byethost2.com/javascript/jd.gallery.js' type='text/javascript'/>
<link href='http://mimuha.byethost2.com/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
Sudah.....? Sekarang masih pada 'Edit HTML', cari kode title='Featured Post' pada kode-tersebut (gunakan Ctrl+F lagi ^^). Dibawah kode tersebut, terdapat kode berikut:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
Sekarang ganti kode yang berwarna merah dengan kode berikut:
<div>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting1.html'/> /* tautan/link ke posting-an 1 */
<img class='full' src='http://photobucket.com/gambar1.jpg' /> /* Alamat link gambar 1 yang sudah di-upload */
<h3>Judul Artikel 1</h3>
<p>Deskripsi Artikel 1</p>
</div>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting2.html'/> /* tautan/link ke posting-an 2 */
<img class='full' src='http://photobucket.com/gambar2.jpg' /> /* Alamat link gambar 2 yang sudah di-upload */
<h3>Judul Artikel 2</h3>
<p>Deskripsi Artikel 2</p>
</div>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting3.html'/> /* tautan/link ke posting-an 3 */
<img class='full' src='http://photobucket.com/gambar3.jpg' /> /* Alamat link gambar 3 yang sudah di-upload */
<h3>Judul Artikel 3</h3>
<p>Deskripsi Artikel 3</p>
</div>
</div>
</div>
Perhatikan keterangan yang berwarna hijau untuk pengaturannya. Setelah itu lihat pratinjau terlebih dahulu. kalau berhasil segera simpan blognya.
Kalau ingin mengubah ukuran yang lebih besar, ubah saja ukuran gambar yang di-upload, tapi jangan lupa untuk mengubah ukuran lebar dan tinggi widget (yang berwarna biru) pada kode #myGallery di atas kode </b:skin> tadi.
Selamat mencoba... ^^
klik yg bawah bos...!!!
Jumlah komentar : (1)
Membuat 'Artikel Terkait' dengan Thumbnails pada Blog
Membuat artikel terkait dengan gambar kecil (thumbnail) pada posting blog dapat membuat keunikan tersendiri pada blog. selain preview yang lebih enak dilihat. Gambar yang akan muncul adalah gambar yang masuk ke dalam postingan saat kita membuat entri pada blog.
Cara membuatnya cukup rumit juga, tapi bisa dicoba dan pasti berhasil, kalau tidak, berarti template blog terlalu diutak-atik sehingga perlu mengubah kode HTML di sana-sini. Bingung juga kalau begitu (
sori... can't help)
sori... can't help)
Pertama login ke dalam dasbor Blog dan masuk pada tata letak (Edit Layout), jangan lupa untuk mencentang "Expand Widget Templates".
Cari kode berikut (gunakan 'Ctrl+F' pada browser untuk mencari kode) :
</head>
Setelah itu letakkan kode berikut tepat diatasnya
Setelah itu temukan kode html ini:
<div class='post-footer-line post-footer-line-1'>
Letakkan kode berikut dibawah kode tersebut:
Edit jumlah postingan pada kode:
Edit judul pada kode:
var maxresults=5;
Edit judul pada kode:
var relatedpoststitle="Artikel Terkait:";
Setelah itu simpat editan html, lihat blog dan adrakadabra....!!
Jadilah artikel terkait dengan thumbnails pada bagian bawah postingan.
Jadilah artikel terkait dengan thumbnails pada bagian bawah postingan.
klik yg bawah bos...!!!
Jumlah komentar : (3)
Hosting HTML/Javascript yang Mudah, Cepat, dan Gratis
Untuk mengedit kode HTML/Javascript pada blog membutuhkan script atau kode-kode yang perlu dihosting atau di-uload kesitus tertentu. Hal ini sangat bermanfaat agar dapat menghemat tempat pada pengeditan html, sehingga script yang begitu panjang tidak akan mengganggu kita dalam saat mengedit HTML.
Yang perlu dlakukan hanya membuat tautan atau link ke lokasi html/javascript kita upload, sehingga script tersebut akan muncul pada saat halaman web diakses.
Untuk itu, bagi yang tertarik untuk mengupload script-nya ke situs hosting online, dapat memanfaatkan Yourjavascript.com, yaitu tempat hosting yang dikhususkan untuk file-file berjenis script agar dapat digunakan oleh banyak orang.
Tempat hosting ini tidak membebankan biaya sama sekali alias gratis. Bahkan, kita tidak perlu menjadi user dan login terlebih dahulu di situs ini. Yang perlu kita lakukan hanya meng-upload script kita, dan Yourjavascript.com akan mengirimkan link-nyapada email yang kita inginkan.
Situs ini dapat diakses dengan cepat, proses loading script yang di-upload juga tidak memakan waktu lama. Yang paling penting, script kita aman dan tidak perlu khawatir akan hilang, error atau tidak muncul pada halaman web yang kita inginkan, sangat berbeda jika kita mengandalkan script dari hosting-an orang lain yang berpotensi rusak atau dihapus.
klik yg bawah bos...!!!
Jumlah komentar : (0)
Membuat "Slideshow Ads Banner" dengan Javascript
Ads banner (spanduk Iklan) sering dipasang di bawah atau di atas postingan utama. Tujuannya, tentu saja agar iklan tersebut dapat lebih terlihat oleh pembaca. Biasanya bentuknya persegi panjang, dan cukup memakan tempat apabila dipasang lebih dari satu.
Kalau kamu berminat untuk memasang banyak banner iklan sekaligus, tapi tetap menginginkan tampilan halaman web yang rapi dan lapang, luas, atau tidak sempit, mungkin tutorial berikut dapat berguna untuk web/blog kamu.
Tutorial ini mengenai cara memasang slideshow banner yang akan terus berotasi bergantian dari satu iklan ke iklan lainnya dalam satu frame. Mungkin kalian bisa mengakali banner tersebut dengan script marquee, tapi dengan Javascript yang satu ini, hasil yang akan diperoleh jauh lebih memuaskan pastinya. (Javascript memang OKE..!! ^^ ).
Yang harus dilakukan pertama-tama adalah memasukkan kode CSS & Javascript berikut kedalam kode web/blog (seperti biasa.... Masuk 'Edit HTML' bagi pengguna blogger. ^^).
Berikut kode CSS yang diletakkan di atas kode ]]></b:skin>, cukup kamu copas saja.
#addbox { position: relative; width: 500px; height: 70 px; clip: rect(0px, 500px, 0px, 70px); overflow: hidden; }
#banner1 { position: relative; width: 480px; height: 60px; left: 0; top: 5px; }
#banner2 { position: relative; width: 480px; height: 60px; left: 500px; top: -55px !important; top:-58px; }
Kode berikut berupa javascript, yang dapat kamu Copas (Copy Paste) di bawah ]]></b:skin> atau bisa juga tepat di atas kode </head>.
<script type="text/javascript">
<!--
/* Dibuat oleh: Ben Kanaev :: http://www.webhostreview.biz
Adaptation for Netscape and Firefox by Fang. Dipublikasikan oleh Mizan :: http://em-mizan.blogspot.com */
var displayTime, speed, wait, banner1, banner2, link1, link2, bannerIndex, bannerLocations, bannerURLs;
function initVar() {
displayTime = 10; // durasi waktu banner diam sebelum berotasiberotasi .
speed = 5; // kecepatan animasi rotasi (1 - 10).
wait = true;
banner1 = document.getElementById("banner1");
banner2 = document.getElementById("banner2");
link1 = document.getElementById("link1");
link2 = document.getElementById("link2");
banner1 = document.getElementById("banner1");
banner2 = document.getElementById("banner2");
banner1.style.left = 0;
banner2.style.left = 500;
bannerIndex = 1;
/* Masukkan urutan gambar dan lin-nya berikut secara urut, perhatikan angkanya! Jumlah iklan dan banner dapat ditambahkan. */
// Masukkan lokasi link alamat gambar dari iklan di sini secara urut.
bannerLocations = new Array("http://www.tautan1.com/gambar.gif","http://www.tautan2.com/gambar2.gif");
// Masukkan alamat URL tautan/link yang dituju iklan di sini secara urut.
bannerURLs = new Array("://www.tautan1.com","http://www.tautan2.com");
}
function moveBanner(){
if(!wait){
banner1.style.left = parseInt(banner1.style.left) - (speed * 5);
banner2.style.left = parseInt(banner2.style.left) - (speed * 5);
if(parseInt(banner1.style.left) <= -500){
banner1.style.left = 500;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ? ++bannerIndex :0;
banner1.src = bannerLocations[bannerIndex];
link1.href = bannerURLs[bannerIndex];
wait = true;
}
if(parseInt(banner2.style.left) <= -500){
banner2.style.left = 500;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ? ++bannerIndex :0;
banner2.src = bannerLocations[bannerIndex];
link2.href = bannerURLs[bannerIndex];
wait = true;
}
setTimeout("moveBanner()",100);
} else {
wait = false;
setTimeout("moveBanner()", displayTime * 1000);
}
}
-->
</script>
Kemudian, ganti kode <body dengan <BODY onLoad="initVar(); moveBanner()">. Setelah disimpan, masuk pada tab elemen halaman. Untuk langkah terakhir, buat widget 'HTML/Javascript Code' dan letakkan di bawah atau atas postingan, dan isi dengan kode berikut:
<center><div name="addbox" id="addbox">
<a name="link1" id="link1" href="www.tautan1.com"><img border="0" name="banner1" id="banner1" src="internet-lg.gif"></a>
<a name="link2" id="link2" href="http://www.jupiterweb.com"><img border="0" name="banner2" id="banner2" src="jupiterweb.gif"></a></center>
setelah itu simpan, dan lihat hasilnya. ^^
klik yg bawah bos...!!!
Jumlah komentar : (0)
