Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Kilat Tingkatkan Jumlah Pengunjung dengan Widget Blog's Stats Blogger

Bersamaan sampeyan mulai membaca posting ini, perkenankan saya mohon maaf yang sesesar-besarnya karena sebenarnyalah sampeyan telah termakan sebuah tipuan "blogger gila si gubhugreyot". "Apa-apaan, nich? Tipuan yang mana, ya? Apa, sich maksudnya?", pasti tersembul pertanyaan seperti ini di hati sampeyan sambil pikiran berputar mencoba menganalisa tipuan seperti apa yang sebenarnya sudah berlaku. Yah..., posting kali ini memang benar-benar sebuah panduan khusus yang bertujuan untuk membuat sampeyan semua supaya jadi penipu bagi pengunjung blog. Karena aku yakin bahwa diantara sampeyan pasti ada yang mau menerapkan tutorial ini di blog, oleh karena itu sebelum pengunjung tertipu oleh sampeyan semua, akan lebih afdol jika sampeyan duluan yang aku tipu. He... he... gimana? Masih bingung?!

Jika sampeyan orang yang cukup jeli, membaca judul di atas (silahkan baca baca lagi dengan cermat!) pasti akan timbul pertanyaan, "masa iya, sich widget blog's stats bisa mempercepat peningkatan jumlah pengunjung blog?". Hui.... pasti sampeyan jadi lebih bingung karena "menyangsikan judul di atas adalah sama saja dengan menyangkal kebenaran mutlak yang sudah aku buktikan". Hanya dalam tempo sesingkat-singkatnya pengunjung blog yang terdata melalui widget blogger plugin ini bisa mencapai jumlah ribuan! Gila, nggak? Hiiii... ini baru hebat. Mana ada tips dan trik dari blogger lain yang bisa membuat ilmu pelarisan blog seperti ini?! Hu..., nggak percaya? Klo nggak percaya silahkan sampeyan ikuti panduan di bawah ini. He... he ..., ampe lupa. Silahkan sampeyan lihat dulu demonya biar percaya klo omongan aku benar-benar nyata dan bukan kibulan semata. Sss....sstt dalam demo ini posting baru beberapa gelintir tapi, sssttttssststttttttt....sstttt hiiii, .... pengunjungnya udah lebih dari 1 juta. Lha sampeyan jadi satu pengunjung tambahan yang baru!!

Membuat Kode Posting Lightbox Lebih Simple

Posting dengan kode yang berderet terlalu panjang dan rumit pasti membuat siapapun kesulitan untuk melakukan cek ulang, baik saat terjadi kesalahan penulisan ataupun saat harus dilakukan update ulang posting. Posting image, terlebih dalam bentuk gallery adalah salah satunya. Saat banyak image diperlukan untuk melengkapi posting kita akan melihat deretan kode html (di posting mode Edit HTML) yang begitu bejibun bikin kepala pening. Persoalan seperti ini memang perlu penanganan khusus hingga kode html di halaman posting bisa banyak terkurangi. Kode CSS adalah solusi paling tepat yang bisa kita andalkan. Dengan bantuan kode CSS maka bisa jadi kode html di box posting akan terkurangi hingga 50% lebih saat banyak image kita libatkan. Meskipun pada intinya tutorial tentang efisiensi penggunaan kode diposting image ini diperuntukkan pada penggunaan lightbox image viewer di blogger, namun demikian karena kode yang kita buat ini juga berlaku secara umum pada keseluruhan fungsi posting image, maka bisa saja dengan mudah digunakan untuk berbagai posting lain yang tidak bersentuhan dengan lightbox.

Membuat Slideshow CSS3 u Image Gallery Lightbox

Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

Tips & Trik Membuat & Menggunakan Lightbox di blogger

Membicarakan tentang lightbox yang berfungsi sebagai image viewer di blogger tentu tak akan lepas dari lightbox blogger plugins yang sudah terinstall di template. Perlu diketahui bahwa lightbox blogger plugins ini memang telah menjadi satu bagian terintegrasi dalam blog dan akan aktif bersamaan dengan saat kita mulai menggunakan template blogger dan memulai blogging.

Menilik penerapan plugins dengan metode seperti yang dikembangkan blogger (lightbox) sesungguhnya dalam beberapa hal dapat menimbulkan masalah baru apabila pengguna tidak menyadarinya. Pengintegrasian secara langsung menimbulkan masalah baru ketika seorang blogger mencoba menggunakan widget lightbox yang bersumber dari luar blogger dimana sumber kinerja preview image pada lightbox baru tersebut menggunakan kode rel="lightbox". Kode html ini ternyata identik dengan kode yang digunakan pada lightbox blogger plugins sehingga ketika fungsi lightbox dijalankan maka lightbox baru akan bekerja berbarengan dengan lightbox blogger plugins. Agar masalah seperti ini bisa dihindarkan, ada 2 ( dua) cara yang dapat digunakan.

Cara membuat Elemen Baru di Footer Blogger Baru (Template Designer)

Elemen di bagian footer blogger baru atau dikenali templatenya sebagai "Template Designer" memang tak dapat di dilihat oleh siapapun tanpa melakukan perubahan pada beberapa kode html yang letaknya tak seberapa jauh dari tag penutup body (</body>). Elemen footer yang pada "Page Elements - Add and Arrange Page Elements" terlihat sebagai "Attribution memang sengaja dibuat tidak seperti elemen yang lain oleh blogger. Selain hanya dibuat sebagai elemen tunggal dan sekaligus "dikunci" sehingga ridak dapat digeser posisinya (dengan cara "drag"), elemen yang di dalamnya berisikan teks "nama template" dan "powered by blogger atau dalam bahasa Indonesia Diberdayakan oleh Blogger ini juga dibuat "patent" atau "tak dapat diothak-athik" kode htmlnya. Agar kita bisa memanfaatkan bagian footer untuk diisi dengan widget baru sedikit perubahan harus dilakukan. Sebagai contoh hasil penambahan elemen baru di bagian footer sampeyan bisa melihat gambar di atas. Adapun hasil yang diperoleh dan berhasil ditampilkan di halaman blog bisa dilihat melalui link demo. Setelah demo berhasil dibuka, lihat pada ujung terbawah halaman blog. Agar lebih mudah untuk melakukan proses penambahan elemen baru, silahkan ikuti panduan berikut ini.

Membuat - Memasang Scroll Box Widget Popular Posts Blogger

Ada dua cara untuk membuat atau memasang scroll box pada widget popular posts blogger plugins.
  1. Menggunakan kode CSS
  2. Menggunakan kode html di bagian body.
Ke dua cara di atas menghasilkan fungsi yang sama, hanya cara yang digunakan berbeda. Jika kita gunakan kode CSS maka kode bisa kita simpan dalam template melalui add a gadget atau disimpan di atas kode ]]></b:skin>, sedangkan untuk xHTML kita harus menyimpan di antara tag pembuka body (<body>) dan tag penutup </body> melalui halaman "Edit HTML".

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Pilihan lain untuk membuat Ticker Popular Posts Blogger Plugins Widget dapat dibuat juga dengan menggunakan javascript. Tak banyak berbeda dengan ketika kita menggunakan kode html marquee hanya jika kita menggunakan javascript tag marquee tak lagi digunakan. Javascript dalam bentuk link sudah tersedia hingga jika tak mau terlalu repot bisa langsung kalian pakai. Hanya sekedar saran, jika ingin lebih aman dan lancar javascript ini bisa kalian upload di file hosting sehingga tak ada orang lain yang menggunakan link-nya. Kode CSS dalam ticker ini sudah dilengkapi dengan kode CSS yang berkaitan dengan widget popular post hingga memungkinkan ticker popular posts blogger plugin ditampilkan lebih sempurna. Jika ingin penampilan berbeda silahkan tambah dengan css lain atau bisa juga modif dibeberapa kode css yang sudah disertakan.

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Creating a special ticker Popular Posts Blogger Widget Plugins

Tak perlu harus pakai javascript atau kode html yang njelimet tetapi sebuah ticker spesial dapat kita buat pada widget popular posts blogger plugin. Ticker yang memanfaatkan efek marquee ini berfungsi untuk membuat seluruh popular post berputar ke arah atas dimulai dari popular post pertama hingga yang terakhir dan selalu berulang seperti itu. Dengan efek yang seperti ini tentu saja kita tak perlu sebuah box yang besar atau tinggi. Dengan box ticker berukuran 200px atau mungkin lebih sedikit maka berapapun jumlah popullar post semuanya akan dapat ditampilkan satu semi satu secara sempurna. Dengan bantuan sedikit script yang menyatu dengan tag marquee, pergerakan memutar popular post dapat dihentikan dengan mengarahkan cursor ke dalam box popular posts blogger plugin. Agar lebih jelas, silahkan lihat di demo berikut:

Membuat Animasi Background Berjalan (Bergerak)


Yang ini juga asli product dalam negeri. Dengan hanya secuil javascript sebuah background animasi yang selalu bergerak bisa menjadi bagian dari blog sampeyan. Menempatkannya sebagai background header menjadi sebuah pilihan tepat hingga terlihat sangat atraktif. Membuatnya juga sangat simple karena hanya perlu menyimpan script pertama di bagian header di bawah tag pembuka header (<head>) dan script kedua di atas tag penutup body (</body>). Perlukah kode css untuk animasi background bergerak ini? Yah, tentu saja jika dipandang perlu sampeyan bisa buat tambahan kode css agar bisa ditampilkan lebih cantik di blogger atau blogdetik sekaligus penyesuaian dengan kode html di template. O..., ya ... xHTML yang nantinya dipergunakan bisa sampeyan lihat di bawah ini.

Hidden Calendar-Clock Using CSS3-Javascript

Hidden Calendar-Clock adalah sebuah gabungan kerja antara kode CSS3 yang membentuk fungsi hide & show serta sebuah javascript sederhana pembangun Calendar-Clock. Posisi/letak Hidden Calendar-Clock dapat diatur di kanan-atas, kanan-bawah, kiri-atas atau di kiri-bawah blog. Calendar-Clock menampilkan secara lengkap hari, tanggal, bulan, tahun serta am/pm serta digital clock di ujung paling kanan. Pada demo akan diperlihatkan dimana calendar clock hanya akan terlihat ketika cursor berada di halaman blog. Hidden Calendar-Clock akan menghilang lagi saat anda berpindah ke halaman web/blog yang lain. Muncul dan menghilangnya Calendar-clock mempunyai jeda waktu 1 (satu) detik setelah cursor anda aktif ataupun meninggalkan halaman blog. Hmmm... seperti halnya kata pepatah, tong kosong nyaring bunyinya yang artinya banyak berkata-kata banyak pula muncrat air ludahnya, jadinya aku rasa lebih baik segera lihat saja demonya.
NB: Harap diperhatikan, karena keternatasan dhuwit dan tak mampu bayar hosting atau beli domain sndiri maka jika demo-1 tak bekerja sampeyan dipersilahkan buka demo yang ke-2! Oye?!

jQuery Simple Image Zoomer

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

Cara buat Box dg Efek Gelap-Terang (Fade Effect) CSS3

Panduan atau tutorial (blogger & blogdetik) membuat box dengan efek gelap terang ini bisa digunakan tidak hanya di blogger, namun bisa juga digunakan di blogdetik.

Fade Effect yang tercipta melalui opacity effect sekalipun merupakan efek yang sangat sederhana namun hingga saat ini memang merupakan sebuah efek yang banyak dilibatkan dalam berbagai desain/fungsi. Selain membuatnya cukup mudah, tak dapat dipungkiri bahwa fade effect mampu memberi pengaruh yang luar biasa menarik, terlebih bila dipadukan dengan efek-efek yang lain.

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.

Cara Memodifikasi Search Form Blogger Plugins

Tutorial blogger ini mencoba memberikan sebuah trick bagi blogger untuk merubah bentuk dan tampilan search form (orang sering juga menyebutnya sebagai search engine atau dikenal juga sebagai kotak penelusuran) agar terlihat lebih cantik dan menarik. Tak banyak kode css yang diperlukan. Kita hanya butuh satu deret kode CSS saja dan siapapun dapat membuat berbagai gaya yang berbeda. Hal yang penting setelah sampeyan mencoba menggunakan kode CSS ini, segeralah upload background imagenya di blogger agar loading selalu dalam keadaan terjaga. Atau mungkin jika ingin menyesuaikan background search form dengan background halaman blog, cobalah untuk merubah background-nya dengan image berbeda.

Kode CSS

jQuery Loader: Preload your blog

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

Simple No Right Click Image - Disable Right Click Image

Daripada harus dipostingkan dikemudian hari yang paling juga bisa lupa,juga agar sampeyan punya pilihan dalam menggunakan kode anti copy image, maka setelah pada posting sebelumnya kita coba membuat sebuah anti copy image "yang sedikit menipu pengunjung" melalui CSS3, untuk kali ini kita tak sekedar membuat anti copy saja, namun benar-benar sebuah fungsi "no right click atau disable right click" karena setelah script digunakan maka "klik kanan mouse" benar-benar tak akan bekerja sama sekali. Sangat sederhana dan teramat mudah digunakan serta compatible dibeberapa browser besar seperti Mozilla Firefox, Opera dan Google Crhome.

D E M O

Membuat Daftar Posting di Halaman Statis Blogger

Berbagai hal bisa kita tuliskan sebagai posting di halaman statis blogger yang berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis nantinya ditampilkan sebagai link menu yang letaknya bisa kita pilih antara sidebar dan di atas halaman posting (di bawah header). Karena terbatasnya lebar, baik di bawah header ataupun sidebar, sebaiknya title halaman statis dibuat sependek mungkin. Title yang pendek nantinya bisa diperjelas melalui deskripsi di halaman statis tersebut.

Mengisi halaman statis blogger dengan daftar berbagai posting yang telah kita buat juga menjadi salah satu hal yang akan sangat bermanfaat. Halaman statis membuat kita bisa lebih memaksimalkan tampilan daftar posting tersebut karena halaman yang cukup luas. Beberapa kode CSS dan xHTML mungkin akan dapat membantu hingga daftar posting dapat dibuat lebih tertata rapi. Di bawah ini telah tersedia kode CSS dan xHTML yang mungkin sampeyan butuhkan. Untuk lebih memaksimalkan hasilnya atau mungkin juga untuk penyesuaian dengan halaman blog silahkan lakukan beberapa modisikasi melalui perubahan pada kode CSS atu xHTML. O ... ya ... kita telah sediakan dalam dua bentuk box. Box besar digunakan apababila daftar posting dibuat dalam ukuran selebar halaman posting dan kode css dan xHTML ke-2 membagi halaman posting menjadi 2 kolom hingga mampu memuat 2 box daftar posting di kanan dan kiri.


Pasang Widget TV Streaming Online

Sorry berat, ini sebenarnya posting lama yang saat itu lupa aku terbitkan. Lihat saja apa yang sampaikan dalam teks juga pasti akan terlihat kuno (hanya aku edit di bagian ini!) . Apa boleh buat karena draft yang lupa aku terbitkan ini sudah aku buat beberapa bulan lalu. "He... biar jadinya sedikit lucu tak apalah...! Yah..., biarlah sekalipun jadi posting lucu dan aneh di awal tahun 2012, namun tetap konstektual dan bermanfaat bagi semua."

Nih..., yang baru jadi trend dikalangan blogger. Widget TV online multi channel. Yah ..., blogger dan para netter kini semakin dimanjakan oleh berbagai widget baru yang bersifat menghibur dan memberi banyak kemudahan untuk mengakses info-info terbaru, termasuk melalui TV online yang langsung bisa dinikmati melalui halaman blog. Blog kini tak lagi hanya sekedar berisi teks atau gambar hasil perasan otak dan lelehan keringat yang dibarengi kepulan asap rokok semata. Selain TV online telah banyak widget lain yang bisa memberi banyak hal positif dan gratis bagi para penjelajah blog. Widget SMS gratis, misalnya.

Pingin ngeblog atau blogwalking sembari menikmati tayangan TV online yang terdiri dari beberapa channel? Yah ..., kini blogger ataupun netter "mungkin" tak perlu lagi beli TV-Tuner atau harus menghidupkan TV saat asyik menjelajah web demi web atau blog demi blog. Aktifkan saja salah satu blog yang memberi fasilitas TV online dan kita bisa browsing dengan channel TV yang tetap menyala. Beberapa channel yang tersedia bisa menjadi pilihan saat menikmati TV online ini. Sampeyan bisa pilih AN TV, TV one, Trans 7, Trans TV, SCTV atau beberapa yang lain.

Bagaimana cara menggunakan widget ini?

Anti Copy/ No Copy Image using CSS3

Sebuah fungsi anti copy yang sering juga disebut sebagai no right click, disable right click tidak hanya dapat difungsikan secara total pada sebuah blog ataupun web, namun juga dapat difungsikan pada bagian-bagian terkecil dari blog atupun web, seperti halnya image/gambar. Fungsi anti copy/no right click/disable right click dapat dibangun menggunakan javascript atau kode CSS. Sekalipun sebuah fungsi anti copy tak mungkin seratus persen dapat menjamin blog/web atau image tak dapat dicopy atau dibongkar kode html-nya, namun setidak-tidaknya bisa sedikit menjaga agar beberapa bagian yang yang ingin dirahasiakan tetap aman.

Jika dibanyak panduan dan tutorial ataupun tips & trick blogger sebuah anti copy lebih banyak dibuat menggunakan javascript, namun untuk kali ini kita akan buat menggunakan kode CSS3. Tak banyak kode CSS yang akan kita gunakan, namun anti copy ini cukup mampu memberi sedikit kejutan karena akan terlihat sebagai sebuah tipuan kecil bagi pengunjung. Mengapa kita sebut sebagai sebuah tipuan kecil? Yah ... karena klik kanan akan tetap berfungsi namun bukan lagi fungsi yang berkaitan dengan image atau apa yang sebelumnya diharapkan pengunjung. Bagaimana ini bisa terjadi dan apa maksud sebenarnya? He ... he ... silahkan saja coba dengan klik pada demo yang dapat dibuka melalui link di bawah ini:

 
GR | Edited by | gubhug reyot