SEKEDAR SHARE

J ika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda.  Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini . Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini : Login ke blogger dengan akun anda   Kemudian pada dasbor  klik Rancangan >> Edit HTML   Letakkan kode/ script berikut di atas kode </head> <link href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css' rel='StyleSheet' type='text/css'/> <scrip...

S eperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua). Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini : Login ke blogger dengan akun anda   Kemudian pada dasbor  klik Rancangan >> Edit HTML   Tambahkan kode CSS berikut diatas tag  ]]></b:skin>: .animatedtabs{ border-bottom: 1px solid gray; overflow: hidden; width: 100%; font-size: 14px;...

K embali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down , kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini . Langsung saja. berikut ini tutorial membuat glossy horizontal menu Login ke blogger dengan akun anda   Kemudian pada dasbor  klik Rancangan >> Edit HTML   Tambahkan kode CSS berikut diatas tag  ]]></b:skin> /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */ /*Modified : IB  (http://www.maskolis.co./) */ .glossymenu{     position: relative;     padding: 0 0 0 34px;  ...

K ali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link , kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang. Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini . Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya : Login ke blogger dengan akun anda   Kemudian pada dasbor  klik Rancangan >> Edit HTML Tambahkan Script JQuery berikut diatas kode </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> Catatan : Jika anda sudah memasukk...

S aya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini . Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya : Login ke Blogger dengan akun    Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan. Letakkan script JQuery ...

T emen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery. Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini , klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya : Login ke blogger dengan akun anda. Kemudian klik rancangan Pilih Edit HTML jangan lupa centang " Expand Template Widget " Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah...

P erlu temen-temen ketahui blog saya ini baru berusia 2 bulan, mulai dari bulan Desember kemarin saya bikin blog ini. Kalau temen-temen nanya masalah komentar yang masuk, yah tentu saja masih sedikit. Nah, tutorial kali ini ada hubungannya dengan komentar, setelah sebelumnya saya sudah membahas tentang memasang reply pada kotak komentar , kali ni saya akan berbagi ilmu dengan anda tentang cara  menampilkan dan menyembunyikan komentar yang masuk kalau bahasa inggrisnya show hidden comment . Sebenarnya fungsi dari show hidden comment ini terutama untuk blog yang sering kebanjiran komentar dari pengunjung seperti blognya Kang Rohman, Mas Doyok, O-om tiga orang pendekar blogger yang sudah mempunyai ilmu yang sangat tinggi. Dengan menyembunyikan komentar dapat menambah ruang pada blog. Cara kerjanya sepeti ini : komentar dari pengunjung akan disembunyikan dan akan muncul apabila anda atau pengunjung menge-klik tulisan seperti ini [+/-]Click to Show or Hide Old Comments . Untuk lang...

S etelah pada postingan sebelumnya saya sudah jelaskan cara menghilangkan show older post di blog , kali ini saya kembali akan memberikan tutorial yang temanya menghilangkan. Temen-temen jangan heran ini bukan sulap, hanya menambahkan beberapa kode pada template kita tulisan itu hilang. Sebenarnya tampilan link ini tidak terlalu mengganggu karena letaknya di bawah kotak komentar. Anda pun bisa mengganti tampilan link ini dengan icon atau gambar sehingga kelihatan menarik. Tapi jika temen-temen bersikeras untuk menghilangkannya, ya sabar dulu di bawah ini akan saya jelaskan caranya : Login ke Blogger dengan akun temen-temen. Kemudian pilih Layout/Tata Letak >> Edit HTML Jangan lupa untuk mencentang pada kotak Expand Template Widget Menghilangkan Link Posting Baru atau Newer Post Cari kode berikut ini: #blog-pager-newer-link { float: left; } Ganti kode di atas dengan kode di bawah ini: #blog-pager-newer-link { display:none; } Simpan Template Menghilangkan Link Posting Lam...

W alaupun sudah banyak diulas oleh blogger-blogger lain, tidak apalah kalau tutorial ini saya tulis lagi. Yah, daripada hari ini nggak posting, soalnya lagi banyak kerjaan. Nah, tutorial yang saya maksud diatas adalah cara menghilangkan tampilan entri lawas atau orang Inggris bilang Show Older Post . Tampilan entri lawas atau Show Older Post akan muncul apabila Anda mengklik link dari label atau kategori yang terdapat di blogger. Gambar di bawah adalah contoh dari show older post , jika kurang jelas anda klik salah satu label yang terdapat di navigasi menu blog ini. Untuk menghilangkan agar tulisan itu tidak muncul lagi, berikut ini saya akan berikan caranya : Login ke Blogger dengan akun anda Kemudian pilih Rancangan   Setelah itu klik Edit HTML   Jangan lupa untuk centang expand template widget Biasakan mem-backup template kalian Habis itu, cari kode di bawah ini : <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='s...

T emen-temen bosan dengan tampilan huruf standar pada template yang dipakai? Nah, setelah sebelumnya saya menulis tentang cara memperbesar atau memperkecil huruf di blog , kini saya akan berikan satu lagi tutorial yang masih ada hubungannya dengan huruf, yaitu memasang change font di blog. Fungsi dari menu ini adalah untuk mengganti tampilan huruf yang ada di blog kita. Misalnya jika huruf yang kita pakai adalah Arial dengan memasang widget ini pengunjung dapat merubahnya dengan pilihan huruf yang ada di widget tersebut. Untuk membuatnya sangat gampang, kita tidak perlu edit HTML, tinggal menambahkan kode javascript ini ke dalam widget. Oke, langsung saja pada cara-cara pembuatannya : Pertama yang mesti dilakukan adalah login ke blogger . Kemudian menuju Rancangan >> Tambah Gadget Pilih HTML/Java Script Lalu masukkan kode berikut ini ke dalam widget anda <div class='widget-content'> <center><script> function go1(){ if (document.selecter2.select2.options...

T erkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil. Untuk contoh soalnya, temen-temen bisa lihat disini , klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya : Login ke blogger dengan akun anda Selanjutnya klik Rancangan >> pilih Edit html Jangan lupa centang Expand Template Widget Saya sarankan untuk membackup template anda dengan cara klik download template lengkap Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode...

S atu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini . Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya. Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya : Login ke Blogger dengan akun anda. Kemudian pilih Rancangan >> Edit HTML Seperti biasa klik Download Template Lengkap biar aman Jangan lupa centang Expand Template Widget Selanjutnya cari kode ]]></b:skin> , jika sudah ketem...

S atu hal yang mungkin teman-teman kadang lupa dalam membuat sebuah blog, yaitu mengenai RSS Reader. Apa sih sebenarnya RSS Reader itu? RSS reader adalah aplikasi yang digunakan untuk membaca RSS dari sebuah website. Cara membaca RSS suatu website adalah, anda masukkan alamat feed website tersebut, lalu RSS akan mengambil RSS dari feed website tersebut. Setiap kali web tersebut di update, versi RSSnya akan disediakan oleh feed, dan akan diambil oleh RSS reader anda. Nah, yang menjadi permasalahan sekarang adalah kenapa jumlah pembaca pada Feedburner-Count kadang terlalu sedikit. Perlu diketahui bahwa tidak semua pembaca RSS Feed selalu menggunakan alamat Feedburner untuk berlangganan posting dan komentar pada blog. Hal ini terjadi ketika pembaca melakukan akses ke alamat blog maka secara otomaris web browser akan membaca alamat default Rss Feed pada blogger kita. Disini nanti saya akan jelaskan bagaimana cara untuk meningkatkan RSS reader kita. Tapi yang perlu anda perhatian ...

D aftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang cara membuat daftar isi manual dan otomatis , kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren. Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini . Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya : Langkah Pertama Login dulu ke blogger anda Pada dasbor masu...

S eperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar , kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar ( zoom-in ) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan ( zoom-out ) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali. Untuk lebih jelasnya anda bisa lihat disini , klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langka...

S elamat siang semuanya, pada siang hari yang mendung ini saya akan memberikan tutorial mengenai cara membuat Sliding Login/Register Form Panel di Blogspot dengan jQuery. Login dan register biasanya digunakan pada sebuah blog atau web yang sudah banyak memiliki anggota. Contoh dari form login/register ini dapat anda temui jika anda login di Blogger, Facebook, Twitter atau situs-situs yang menyediakan layanan jaringan community. Untuk contohnya bisa temen-temen lihat pada gambar di bawah, atau bisa langsung klik disini . Nah, jika temen-temen tertarik untuk membuatnya, di bawah ini saya akan berikan penjelasannya : Pertama, anda mesti login ke blogger . Kemudian klik Rancangan   Setelah itu klik Edit Html Jangan lupa untuk mencentang Expand Widget Template (saya anjurkan download dahulu template anda) Kemudian cari kode berikut ini </head> Setelah itu letakkan kode Javascript dibawah ini tepat diatasnya <script src=' http://web-kreation.com/demos/Sliding_login_panel_jquer...