Praktikum PC

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya. Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list ): <ul class='kuda-zebra'> <li>Andai Saja</li> <li>Engkau Tahu</li> <li>Betapa Aku</li> <li>Kebelet Pipis</li> <li>Maukah...</li> </ul> Di sini kita memakai <ul> atau unordered list . Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini: ul.kuda-zebra {font-weight:bold;} .kuda-zebra li {color:darkRed;} Maka nantinya hasilnya akan tampak seperti ini: Sekarang kita terapkan sistem JQuery sederhana seperti ini: $(document).ready(function() { $('ul.kuda-zebra li:even').addClass('kampret'); }); Lalu tambahkan sebuah pemodel baru dengan...

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini: Tanpa CSS Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan tentang teknik dasar dalam mengubah tampilan button di blogmu. Ini adalah contoh CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button , submit dan reset agar lebih efisien): input[type="button"], input[type="submit"], input[type="reset"], button { font:normal 0.9em Arial,Sans-Serif; background-color:#4169E1; border:1px solid #B7B7B7; padding:2px 7px; color:#fff; } Letakkan saja CSS tersebut di atas kode </style> atau ]]></b:skin> , maka tampilan tombol-tombol di blogmu akan berubah seperti ini: Dengan CSS Namun itu saja sepertinya masih kurang. Kita juga perlu menerapkan event hover ...

Satu lagi penerapan CSS dalam elemen-elemen input . Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea . Ini adalah contoh tampilan input text dan textarea biasa: Tanpa CSS Dan ini adalah CSS untuk mengubah tampilannya: input[type="text"] { font:normal 12px Verdana,Sans-Serif; border:1px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } textarea { font:bold 12px Verdana,Sans-Serif; border:5px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } input[type="text"]:focus, textarea:focus { background-color:#FFE4B5; } Letakkan kode tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah seperti ini: Dengan CSS Dari penampilan kode ini Saya...

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); }); $(...

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...

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...

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...

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...

Seo friendly sangat dibutuhkan sebuah blog pada blogspot agar mesin pencari dapat dengan mudah mengindentifikasi bagian perbagian yang harus mereka simpan dan tampilkan pada hasil pencarian. Agar Tag Header Robots Blogger menjadi SEO Friendly ikuti langkah berikut: Langkah 1 Masuk ke Dashboard Blogger - pilih Setelan -  pilih Preferensi Penelusuran Langkah 2 Klik Edit pada Deskripsi - Aktifkan - Isi lah kolom yang ada dengan Deskripsi Blog Klik Edit pada Robots.Txt - Aktifkan - Isi lah kolom yang ada dengan: User-agent:  * Allow: / Disallow: /*?* Disallow: /search User-agent: Mediapartners-Google Disallow: Sitemap: http:// alamat-blog-kamu .blogspot.com/feeds/posts/default Klik Edit pada Tag Header Robot Khusus - Aktifkan - dan isi lah bagian berikut ini: Beranda: All dan Noarchive Laman Arsip Dan Penelusuran: Noarchive, Noindex dan Nosnippet Default Untuk Post Dan Laman: All

Seo heading adalah salahsatu cara untuk meningkatkan kualitas SEO blog dengan mengatur penggunaan prioritas judul pada blog. Heading yang dimaksud adalah karakter H1, H2, H3, H4, H5 dan H6 yang terdapat pada sebuah post atau artikel. Dengan mengatur heading, maka search engine atau mesin pencari akan dengan mudah menjelajahi seluruh isi dari blog dan menentukan prioritas utama yang harus disimpannya. Prioritas yang dimaksud adalah susunan terdepan dari heading akan lebih diutamakan dan menyusul selanjutnya heading yang lebih kecil. Sebagai contoh SEO Title Heading Tags. Pada halaman HOME H1 untuk judul blog H2 untuk deskripsi blog H3 untuk judul artikel H4, H5 dan H6 untuk judul pada sidebar dan footer Pada halaman ARTIKEL dan PAGE H1 untuk judul artikel dan page H2 untuk deskripsi blog H3 untuk judul blog H4, H5 dan H6 untuk judul pada sidebar dan footer Atau dapat pula diatur sedemikian rupa sehingga setiap halaman yang diakses memiliki minimal...

Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed; kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb ) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini: Masuk ke tab Rancangan kemudian pilih Edit HTML . Cek Expand Template Widget agar seluruh elemen pembangun posting tampil. Salin kode pemodel di bawah ini, kemudian letakkan di atas kode ]]></b:skin> atau </style> : .alaihumcrumb { position:fixed; z-index:1000; top:0; left:0; background:#333; width:98%; color:#ccc; border-bottom:2px solid #999; padding:1px 1% 1px 1%; -webkit-box-shadow:0 0 7px #000; -moz-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; } .alaihumcrumb a, .alaihumcrumb a:visited, .alaihumcrumb a:active { color:#fff; } .alaihumcrumb span.kanan { float:right; } Kemudian carilah kode yang tampak seperti ini: <a expr:name='data:post.i...

Demonya bisa kamu lihat di sini . Oke, kita mulai proyeknya sekarang! Pertama-tama, salinlah baris kode pemodel ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau di atas kode </style> : #pelangi {font:normal 14px Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #pelangi ul {list-style-type: none;margin:10px 0;padding:0;height:95px;} #pelangi a strong {position:relative;top:40%;overflow:hidden;} #pelangi li a {width:95px;height:95px;display:inline-block;float:left;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;} #pelangi li a:link, #pelangi li a:visited, #pelangi li a:active {font-weight:bold;color:#FFFFFF;text-decoration:none;margin:2px 2px;} #pelangi li a:hover {margin:0 0;width:99px;height:99px;opacity:0.9;} Setelah itu letakkan kerangka navigasi ini di tempat yang kamu inginkan: (Pelajari tentang beberapa tempat alternatif untuk meletakkan kerangka navigasi di bab ini ): <di...

Apa yang dimaksud dengan hover gambar sederhana? Coba letakkan pointer mouse mu pada gambar di atas. Dalam segi kepraktisan, tentu saja efek ini akan lebih ringan jika dibandingkan dengan efek hover gambar artistik dengan JQuery . Untuk membuatnya caranya sangat sederhana. Kita hanya memerlukan sebuah penerapan CSS Pseudo-Class :hover pada selektor img . Pertama-tama, carilah kode yang tampak seperti ini: img { background:#fafafa; border:1px solid #dcdcdc; padding:5px; } Tidak usah terfokus pada deklarasi-deklarasi di dalamnya. Cukup fokus pada selektor img . Kode di atas adalah komponen khusus untuk mengatur tampilan gambar-gambar di halamanmu. Kita bisa mengetahui itu karena selektor img pada dasarnya memang berasal dari tagnya, yaitu <img> Jika sudah ketemu, salinlah kode ini, kemudian letakkan di bawahnya: img:hover { /* Secara teoritis untuk IE 8 & 9 (lebih valid) */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*...

Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mouse mu pada gambar di halaman ini » Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery . Saya ajarkan caranya di sini: Pertama-tama, salinlah script di bawah ini, kemudian letakkan di atas kode </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Nah, yang barusan kita lakukan adalah meletakkan mesinnya. Khusus untuk script di atas, jika ternyata template mu sudah memilikinya, kamu tidak perlu lagi menambahkannya, satu template cukup satu mesin saja . Namun seperti halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan tepat di bawah kode tadi: <script type='text/javascript'> $(document).ready(function() { $(' img ').hover(function() { //masuk $(this).animate({ opa...

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...

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

SEO Judul Blogspot dimaksudkan untuk Optimasi Blog Tittle dan Post Tittle Blogger sehingga tampilan judul pada Search Engine mudah diingat dan kenali serta disenangi oleh mesin pencari. Cara membuat SEO Friendly Judul Blog: 1. Edit template 2. Cari menggunakan Ctrl+F kode <b:include data='blog' name='all-head-content'/> 3. Letakkan dibawahnya:   <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/></title> </b:if> 4. Simpan perubahan dengan klik tombol Save