Postingan

Menampilkan postingan dengan label Tutorial Blogspot

Menu Navigasi Dan Hover Blogspot

Oleh -
Gambar
Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu: Lihat Demo Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML . Lalu cari script yang tampak seperti ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Jika template mu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head> Setelah itu salin script ini, lalu letakkan tepat di bawah script tadi: <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("#topnav li").prepend("<span></span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $(...
Posting Komentar
Baca selengkapnya

Mencegah Klik-Kanan Mouse Pada Blogspot

Oleh -
Gambar
Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela peringatan ini akan mencegah para pengunjung untuk menyalin sesuatu di halamanmu. Meskipun sebenarnya kita juga bisa menggunakan perintah Edit ยป Copy atau cukup menekan tombol CTRL+C di papan kunci, tapi paling tidak cara ini bisa sedikit memberi peringatan bahwa di sini ada monster berbahaya (???) Salin kode ini kemudian letakkan dalam sebuah elemen halaman HTML/JavaScript , kemudian simpan: <script type="text/Javascript"> // Sumber: http://dynamicdrive.com var message=" Hayooo...!!!!! "; function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message...
Posting Komentar
Baca selengkapnya

Cara Membuat Dropdown Navigasi Blogspot

Oleh -
Gambar
Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini ). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya ( lihat demo ). Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki salah satu dari script ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head> ). Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi: <script type="text/javascript"> $(document).ready(function() { $('ul.menu_awak li:even').addClass("alt"); $('.menu_ndhas').click(function () { $('ul.menu_awak').slideToggle('normal'); }); $('ul.menu_awak li a').mouseover(fu...
Posting Komentar
Baca selengkapnya

Cara Melindungi Artikel Dari Copy-Paste

Oleh -
Gambar
Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML . Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini: <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'> Klik Simpan Template kemudian lihat halaman blogmu. Sekarang coba klik-kanan mouse mu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar...
3 komentar
Baca selengkapnya

Cara Membuat Slide Panel Blogspot

Oleh -
Gambar
Sederhananya, beginilah tampilan awal sebuah slide panel ( lihat demo ) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana: Pertama, carilah script yang kurang lebih tampak seperti ini dalam baris kode HTML template mu: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> Jika template blogmu ternyata sudah disertai dengan script ini, kamu tidak perlu menambahkannya dan bisa langsung mengarah ke langkah berikutnya. Tapi jika belum ada, salinlah dulu script di atas, kemudian letakkan di atas kode </head> . Ke dua, salinlah script pengaturan efek, kecepatan efek dan objek-objek yang diseleksi ini tepat di bawah kode tadi: <script type='text/javascript'> $(document).ready(function() { $('.btn-slide').click(function() { $('#panel').slideToggle('slow'); }); }); </script> Ke tiga, salinlah kode pemod...
1 komentar
Baca selengkapnya

Membuat Recent Post Blogspot

Oleh -
Gambar
Pernah melihat model recent post seperti ini? Ya, itu adalah recent post bawaan dari Blogger.com . Jika dilihat-lihat, tampilannya memang terasa sedikit memaksa dengan template blog kita. Komposisi warna dan model huruf yang tidak bisa disesuaikan terkadang juga membuat recent post ini menjadi tampak seperti "tempelan" saja, bukannya menjadi salah satu bagian dari tubuh blog kita. Selain itu, salah satu bagian kecil berupa tautan bertuliskan continue >> juga mungkin akan sedikit mengganggu bagi para anak bangsa yang cinta bahasa tanah air. Nah, untuk mengatasi semua masalah itu, kamu bisa menggunakan baris script yang Saya peroleh dari salah seorang tetangga Saya yang baik hatinya. Namanya mas Hoctro (hehe..) Salin saja semua kode ini, kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript : <script type='text/javascript'> //<![CDATA[ //kredit kepada HOCTRO function rp(json) { document.write('<ul>'); for (v...
Posting Komentar
Baca selengkapnya

CSS3 Warna Link

Oleh -
Gambar
Sebenarnya ada banyak tutorial yang menyediakan script tautan pelangi seperti ini. Tapi untuk yang satu ini, Saya sudah sedikit mengompresnya sehingga berkasnya jadi sedikit lebih kecil ukurannya. <script src="http://reader-download.googlecode.com/svn/trunk/pelangi.js" type="text/javascript"></script> Letakkan saja kode itu di atas kode </head> atau letakkan dalam sebuah widget HTML/JavaScript . Efeknya bisa kalian lihat langsung di sini. Coba saja kamu dekatkan kursor mousemu ke tautan-tautan di blog ini. Contoh Tautan Sumber: HompimpaAlaihumGambreng
Posting Komentar
Baca selengkapnya

Membuat Menu Navigasi Blog

Oleh -
Gambar
Pada suatu hari Saya mencoba iseng membuat model-model menu navigasi, hingga akhirnya inilah yang Saya dapatkan ( lihat demonya di sini ). Saya rasa, desain menu navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana menurut kalian? Jika kalian berminat membuat menu navigasi seperti tampak di atas, maka ikutilah jalan kebenaran Saya ini: Masuk ke tab Rancangan , kemudian pilih Edit HTML Nah, setelah itu salinlah kode ini, kemudian letakkan di atas kode ]]></b:skin> #hompinav {font:normal 0.9em Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #hompinav ul {list-style-type:none;margin:0;padding:0;height:50px;} #hompinav li a {display:inline;margin:0 2px;float:left;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;box-shadow:0 2px 3px #999;-moz-box-shadow:0 2px 3px #999;-webkit-box-shadow:0 2px 3px #999;} #hompinav li a:link, #hompinav li a:visited {font-weight:bold;color:#FFFFFF;background-color:#335577;border:2px out...
Posting Komentar
Baca selengkapnya

Related Post Dengan Thumbnail Blogspot

Oleh -
Gambar
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan deskripsi artikel ยป baca tutorialnya di sini Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail Masuk ke tab Rancangan , kemudian pilih Edit HTML . Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil. Salin kode di bawah ini, kemudian letakkan di atas kode </head> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #at-gambar {text-transform:...
Posting Komentar
Baca selengkapnya