Bru masuk angin!

Arsip...

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 Membuat Horizontal Roll Menu

Roll Menu ini merupakan menu yang tersembunyi di atas navbar. Sebuah controll yang bertuliskan "Menu" dibuat dibagian atas-kanan halaman dan berfungsi untuk membuat menu yang tersembunyi meluncur ke bawah. Sebuah controll yang lain berfungsi membuat menu kembali meluncur menghilang. Contoll yang satu ini dibuat tak terlihat akan tetapi didesain mudah tersentuh cursor secara tak sengaja. Posisinya tepat di bawah garis terluar menu bagian bawah dengan ketinggian controll sebesar 30px. Untuk membuat roll menu diperlukan javascript, kode css, css3 dan xHTML.

Cara pembuatan Roll Menu

Overflow dan penggunaannya

Ada beberapa value overflow yang bisa kita pakai untuk kelengkapan blog. Masing-masing overflow mempunyai fungsi dan kegunaan yang berbeda. Di bawah ini merupakan pengenalan beberapa scroll box dan scroll box yang terbentuk berkaitan dengan penggunaan properti overflow.

Contoh-contoh Bentuk Overflow
Overflow visible

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka . Penolakan SBY, lanjutnya, sudah diperkirakan Pansus akan tetap fokus pada ...Pansus Hak Angket Bank Century

Overflow hidden

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka untuk menonaktifkan pejabat negara yang terlibat kasus Century. Pansus akan tetap fokus pada upaya untuk mengungkap skandal tersebut. Anggota Pansus dari Fraksi Partai Hanura, Akbar Faisal menyatakan pihaknya tidak mempersoalkan penolakan imbauan Pansus oleh Presiden SBY, sepanjang tidak ada upaya memperlambat pemeriksaan. Penolakan SBY, lanjutnya, sudah diperkirakan dan tidak akan menggangg ...
Overflow auto

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka untuk menonaktifkan pejabat negara yang terlibat kasus Century. Pansus akan tetap fokus pada upaya untuk mengungkap skandal tersebut. Anggota Pansus dari Fraksi Partai Hanura, Akbar Faisal menyatakan pihaknya tidak mempersoalkan penolakan imbauan Pansus oleh Presiden SBY, sepanjang tidak ada upaya memperlambat pemeriksaan. Penolakan SBY, lanjutnya, sudah diperkirakan dan tidak akan menggangg ...

Overflow scroll

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka untuk menonaktifkan pejabat negara yang terlibat kasus Century. Pansus akan tetap fokus pada upaya untuk mengungkap skandal tersebut. Anggota Pansus dari Fraksi Partai Hanura, Akbar Faisal menyatakan pihaknya tidak mempersoalkan penolakan imbauan Pansus oleh Presiden SBY, sepanjang tidak ada upaya memperlambat pemeriksaan. Penolakan SBY, lanjutnya, sudah diperkirakan dan tidak akan menggangg ...

Cara Penulisan kode HTML Overflow

Cara membuat Vertical Menu with Descriptions

Vertical menu ini mampu menghadirkan deskripsi menu dengan effek css3. Effek css3 akan terlihat saat cursor berada di atas link menu. Dengan digunakannya sebuah boks deskripsi menu dengan kapasitas cukup longgar, maka anda dapat menyampaikan beberapa hal terkait menu title yang diharapkan membuat pengunjung blog merasa penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

D E M O

Cara Membuat Drop Down Menu dengan Javascript

Drop down menu tetap menjadi satu menu terfavorit hingga saat ini karena sangat effisien akan tempat dan mampu memuat atau dikembangkan menjadi anak menu hingga jumlah yang tidak terbatas. Disamping sangat effektif ruang, banyak inovasi yang dikembangkan dapat menciptakan drop down menu dengan penampilan menarik tanpa harus dipenuhi dengan javascript yang terlalu njelimet. Di bawah adalah salah satu dd menu yang di padukan dengan animasi gif yang membuat menu ini tampil sangat "keren" dan bergaya. (KLIK untuk melihat gambar dalam ukuran besar).

Lakukan penyimpanan javascript dan css di bagian head di atas KODE ]]></b:skin> atau javascript di bawah <head> sedang css di atas ]]></b:skin>



Javascript :

<script type="text/javascript">
var timeout = 100;
var closetimer = 0;
var ddmenuitem = 0;
function GRopen(id)
{ GRcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
function GRclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
function GRclosetime() { closetimer = window.setTimeout(GRclose, timeout); }
function GRcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer);
closetimer = null; } } document.onclick = GRclose;
</script>

KODE CSS :

#bgsGR_sddmenu {
margin: 0;
padding: 0;
z-index: 30;
}
#bgsGR_sddmenu li {
background: #0000FF url(http://i45.tinypic.com/2ep4m1h.gif);
margin: 0; border-bottom: 2px solid #999999; border-top: 2px solid #999999;
padding: 0;
list-style: none;
float: left;
font-size: 14px; font-family: Cursive; font-weight: bold;
}
#bgsGR_sddmenu li a {
display: block;
margin: 0 1px 0 0;
padding: 7px 8px;
width: auto;
background: #FFFF33 url(http://i50.tinypic.com/1z3c5tx.png); /*bg tampilan */
color: #FFF;
text-align: center;
text-decoration: none;
}
#bgsGR_sddmenu li a:hover {
background: url(http://i49.tinypic.com/1079ef7.gif); color: #FF0000;
}
#bgsGR_sddmenu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: transparent;
border: 1px solid #5970B2;
}
#bgsGR_sddmenu div a {
border-bottom: 3px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
top: 15px;
z-index:100;
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: #2875DE;
font-size: 12px; font-family: verdana; font-weight:bold;
}
#bgsGR_sddmenu div a:hover {
background: #49A3FF url(http://i45.tinypic.com/2ep4m1h.gif);
color: #FFF;
}



Contoh HTML untuk menu :

<ul id="bgsGR_sddmenu">
<li><a href="#" onmouseover="GRopen('GR1')" onmouseout="GRclosetime()">Nama Pulau</a>
<div id="GR1" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Sumatera</a>
<a href="#">Kalimantan</a>
<a href="#">Bali</a>
<a href="#">Lombok</a>
<a href="#">Sulawesi</a>
<a href="#">Jawa</a>
<a href="#">Nusakambangan</a>
<a href="#">Madura</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR2')" onmouseout="GRclosetime()">Nama Propinsi</a>


<div id="GR2" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kepulauan Riau</a>
<a href="#">Papua Barat</a>
<a href="#">Sulawesi Tenggara</a>
<a href="#">Nusa Tenggara Timur</a>
<a href="#">Jawa Timur</a>
<a href="#">Jogjakarta</a>
<a href="#">Daerah Istimewa Aceh D</a>
</div>
</li>


<li><a href="#" onmouseover="GRopen('GR3')" onmouseout="GRclosetime()">Nama Kabupaten/Kota</a>
<div id="GR3" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Badung</a>
<a href="#">Kutai Kertanegara</a>
<a href="#">Magelang</a>
<a href="#">Mojokerto</a>
<a href="#">Cirebon</a>
<a href="#">Solok</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR4')" onmouseout="GRclosetime()">Nama Orang</a>


<div id="GR4" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kartodimejo</a>
<a href="#">Jambul</a>
<a href="#">Tlepong</a>
<a href="#">Nasution</a>
<a href="#">Ngabdul</a>
<a href="#">Tecuari</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR5')" onmouseout="GRclosetime()">Merk Mobil</a>
<div id="GR5" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">


<a href="#">Toyota</a>
<a href="#">Honda</a>
<a href="#">Lamborgini</a>
<a href="#">Cadilac</a>
<a href="#">Izuzu</a>
<a href="#">Mercedes Benz</a>
</div>
</li>
</ul>
<div style="clear:both"></div>








<a href="#">Sumatera</a>

1. Tanda # adalah URL untuk Link Menu.
2. Sumatera adalah contoh nama menu.

Bentuk Sususnan Pemasangan Kode CSS dan xHTML

CSS Gallery Spesial

CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.

Kolom Posting dg BackgroundTransparan

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai background dengan effek transparansi adalah sebuah gambar mobil atau sesuatu yang berkaitan dengan artikel tersebut.

MouseOver with Simple CSS

Mouse over dengan css ini sebenarnya menggunakan prinsip rollover.Jadi gambar di bawah bukanlah sebuah sulap atau animasi gif tetapi merupakan gambar dengan dua obyek yang yang berdampingan. Melalui serangkaian css, maka ketika cursor berada di atas gambar, gambar akan bergeser secara cepat untuk menampilkan gambar di sisi kanan. Untuk mendapatkan effect yang sempurna atau dengan ukuran gambar berbeda hanya perlu dilakukan perubahan lebar (width) dan tinggi (height) pada KODE CSS dan obyek yang ditampilkan. Untul lebik jelasnya anda bisa mendownload gambar di bawah beserta KODE CSSnya.

Hover Image dari Gambar berbeda Langsung Nongol

Hover yang dibuat untuk memperlihatkan gambar berbeda dari gambar/image yang ada dihalaman posting biasanya tidak akan langsung muncul begitu saja meskipun cursor sudah di letakkan di atasnya. Hal ini disebabkan image baru yang di tugaskan sebagai hover masih harus menunggu loading terlebih dahulu. Kejadian seperti ini tentunya akan membuat harapan akan hover yang muncul seketika begitu cursor diatas obyek menjadi sirna.Di bawah ini ada sebuah trik yang mampu membuat sebuah hover image dari obyek berbeda akan spontan muncul ketika cursor menyentuh obyek yang ditampilkan.

Demo : Arahkan cursor pada gambar di atas!

Contoh KODE yang digunakan hover image :

Style font ringkas/praktis untuk posting

Saat melakukan posting, pembuatan style font atau huruf dan angka biasanya selalu menggunakan toolbars/fitur yang tersedia di box posting, baik untuk membuat font berwarna, font tebal, ataupun merubah besar . Ada trik spesial yang sebenarnya jarang sekali diungkap untuk membuat style-style font tertentu yang dapat kita gunakan untuk melakukan posting dimana ruang posting menjadi lebih ringkas/praktis dan tidak "nggedabyah" (bahasa Indonesia : tidak terlalu memenuhi ruang posting).

Dengan menyimpan beberapa KODE CSS di bagian head yang berkaitan dengan style font, maka kita dapat membuat berbagai macam style font/teks yang bahkan dalam beberapa hal tak mungkin dilakukan jika hanya mengandalkan toolbars yang tersedia, seperti misalnya membuat font dengan ukuran tertentu. Dengan metode ini maka dalam beberapa hal menjadi lebih simple dan sangat memudahkan blogger saat harus melakukan update ulang atau revisi beberapa kesalahan tulis di

Hover Melayang atau Fly Hover

Sebelum melangkah lebih lanjut untuk menggunakan KODE CSS hover melayang, perlu kita pahami bersama terlebih dahulu yang dimaksud dengan haver melayang atau fly hover ini.
Fly hover sebenarnya sama saja seperti bentuk hover yang lain yaitu memunculkan teks atau image saat cursor berada di atasnya. Pada hover biasa, desain hover dengan memperbesar ukuran obyek dari ukuran aslinya akan membuat posisi obyek di sekitarnya berubah sehingga akan mengganggu kenikmatan seseorang saat menikmati obyek-obyek yang ada karena posisi obyek yang lain menjadi berpindah tidak beraturan. Dengan menggunakan fly hover CSS ini, maka sebesar apapun obyek yang diciptakan sebagai hover tidak akan mengganggu atau merubah posisi obyek-obyek lain di halaman blog. Untuk lebih jelasnya kamu bisa membuka link demo di bawah ini.

D E M O

Keterangan tentang demo:

Dalam demo yang akan anda lihat merupakan desain yang sama namun menggunakan effek css3 transition. Fungsinya sama persis dengan seluruh kode dalam posting ini, hanya saja yang di posting ini tidak menggunakan effek css3. Perbedaan yang lain adalah posisi preview image saat thumbnail/image diposisikan di kiri dan kanan posting. Silahkan anda bisa mencoba dari kedua desain yang tersedia, baik di sini atau yang disertakan dalam demo.

KODE CSS dan xHTMLfly hover :

Scroller Bar with Color Properties

Scroller Bar with Color Properties merupakan scroller bar dengan modifikasi warna pada seluruh bagian scroller sehingga penampilannya benar-benar berbeda dari scroller bar yang biasa digunakan. Scroller bar ini akan tampil dengan sangat sempurna di Internet Explorer dan Opera (terbaru) sehingga tentunya akan membuat blog semakin menarik untuk dinikmati.

Gunakan KODE seperti di bawah ini untuk menampilkan scroller bar with Color Properties :

xHTML :
<div style="scrollbar-arrow-color:yellow;scrollbar-base-color:blue;scrollbar-darkshadow-color:black;scrollbar-highlightcolor:green;scrollbar-shadow-color:brown;background:#CCC;color:#000;border:8px double #930;border-radius:5px;padding:6px;width:300px;height: 200px;overflow:scroll"  cols="30" rows="5" wrap="off">
teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update »Setu PAHING, Maret, 24, 2012

» Happy Blogging - gubhugreyot «

Berbagai kode Scrollbox untuk Posting

Pemanfaatan ruang posting mejadi satu faktor yang harus diperhatikan oleh blogger, terutama apabila posting artikel sangat panjang. Bentuk posting yang terlalu panjang selain tidak effektif dalam pemanfaatan halaman blog, dampak negatifnya adalah sering membuat pengunjung blog menjadi "malas" untuk melihat atau bahkan membaca hingga tuntas. Untuk mengatasi permasalahan seperti ini scrollbox menjadi satu solusi paling tepat. Sebenarnya scrollbox bisa dibuat dalam berbagai macam variasi, terutama berkaitan dengan imporovisasi warna, seperti halnya background, border, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-highlightcolor, scrollbar-shadow-color. Sayangnya untuk sementara ini hanya IE dan Opera yang sudah support terhadap css properti scroller bar. Apabila anda ingin menggunakan scrollbox yang kompatible untuk semua browser, KODE di bawah ini bisa anda manfaatkan saat membuat posting.

Scroller bar sederhana.

On Mouseover Alert

Yang dimaksud On mouseover alert pada posting ini berfungsi untuk menampilkan pesan pada saat pengunjung blog menggerakkan cursor di atas gambar. Bentuk KODE yang digunakan adalah sebuah javascript yang sangat sederhana. Script ini dapat ditampilkan pada blog dalam bentuk posting atau diletakkan pada di antara tag <body> dan </body>.

D E M O :

Arahkan cursor di atas image!

Cara membuat On Mouseover Alert :

Show Image/text on Mouseover with Javascript

Selain menggunakan CSS, efek transparansi gambar bisa juga dilakukan dengan menggunakan javascript. Sangat simple dan praktis untuk digunakan. Javascript ini berfungsi untuk menampilkan gambar saat cursor menyentuh gambar.

Javascript Show Image on Mouseover

Show and Hide Image With Effect

Show and Hide Image With Effect mampu meciptakan effect dengan mouseover dan mouseout serta cara KLIK pada mouse. Sekalipun hanya dengan sedikit javascript, effect yang mampu diciptakan sangat eksotis sekali.

Javascript Show and Hide Image With Effect

<script type="text/javascript">
/* gubhugreyot - bloggerstars1 */
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 10);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
</script>

Cara menggunakan javascript:

Image Selector dengan Effect Transisi Opacity

Bentuk penggabungan dari backckground image yang berupa animasi gif dipadukan dengan effect transisi gambar menggunakan javascript yang memanfaatkan opacity akhirnya menghasilkan sebuah effect yang fantantis dari sebuah image selector. Effect transisi setiap pergantian image juga bisa di atur sehingga bisa dilakukan perubahan oleh pengguna hanya melalui perubahan kecil yang dilakukan di ruang posting. Dengan kata lain ; tidak perlu repot-repot selalu mengobrak-abrik javascriptnya! Keuntungan penggunaan javascript "bgsGRmultifungsi.js" ini adalah bisa digunakan untuk menciptakan effect image dalam bentuk yang lain dengan tetap mengacu pada fungsi opacity.

D E M O

Tabel Nama dan KODE Warna: Tutorial BloGGeR Font

Posting dalam Tutorial BloGGeR kali ini aku sengaja membuat sebuah tabel nama dan kode warna dengan tujuan supaya sobat blogger tidak kesulitan ketika harus menggantikan sebuah kode warna dengan nama warna. Penggunaan nama warna sering kali digunakan dijavascript, sehingga perbendaharaan nama warna yang mencukupi akan sangat menolong kita untuk menggunakan warna lebih lengkap dan variatif. Ya ..., meskipun tidak selengkap yang diharapkan, tetapi setidak-tidaknya sudah cukup banyak nama warna yang berhasil aku sediakan. Terus terang saja membuatnya njelimet sekali, sehingga hanya seperti inilah yang bisa aku sediakan. Semoga cukup menolong dan memberi banyak manfaat.

Daftar Nama Warna dan Kode Warna :

Membuat Effect Blur dengan Opacity


Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat transparansi sebuah object. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai transparansi untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla, Opera, Safari, Google Chrome, SeaMonkey serta beberapa browser lain menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin transparan hingga menjadi tak terlihat. Dalam penggunaannya, opacity property dapat di aplikasikan melalui kode css tau langsung dalam tag html. Penempatan yang bersifat permanen dilakukan pada bagian head dalam bentuk kode css, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.

KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :

Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.

Cara menggunakan Original Size Image on Mouseover :

Background Color on Mouseover

Ingin warna background dinamis dengan warna yang bisa berubah-ubah? Dengan javascript di bawah, anda bisa melakukan gonta-ganti warna background hanya dengan menyentuhkan cursor pada tempat yang sudah ditentukan.

Mengatur Tebal Huruf

Tebal font dikenali dengan atribut font-weight. Merupakan atribut yang dipergunakan untuk merubah tebal dan tipisnya font. Dalam penggunaannya ada beberapa macam ketebalan font :

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Buat box teks di ruang posting

Box teks di ruang posting bisa dipergunakan untuk tempat meletakkan teks yang bersifat khusus sehingga terpisah dari teks lainnya. Ada berbagai style box yang bisa disesuaikan dengan seberapa besar box yang ingin digunakan. Pada beberapa posting dengan teks yang sangat panjang, box yang dilengkapi dengan scroller juga sangat bermanfaat untuk effisiensi ruang. Agar box kelihatan lebih menarik, box bisa dilengkapi dengan border style, background dan border radius serta beberapa properi css yang lain.

1. Box sederhana :

Menambahkan Atribut Style

Penambahan atribut style sering digunakan pada blog yang pada intinya berfungsi untuk menambahkan sejumlah KODE CSS untuk melengkapi dan membentuk sebuah elemen baru. Penambahan atribut ini bisa tempatkan pada bagian body, diantara tag <body> dan </body> serta pada bagian head diantara tag <head> dan </head>.

Contoh penggunaan atribut style :

Mengatur Posisi Elemen Blog

Untuk mendapatkan posisi sebuah elemen pada halaman blog agar sesuai dengan yang kita kehendaki dapat kita lakukan dengan menempatkan KODE yang berfungsi sebagai pengatur posisi.
KODE ini berupa KODE CSS yang diletakkan pada tag head, antara <head> dan </head>. Meskipun demikian, pada kodisi tertentu pengaturan posisi dapat kita lakukan pada bagian body, diantara <body> dan </body> . Nilai/satuan yang umum dipergunakan untuk pengaturan adalah pixel (px) atau % (persen).

Contoh pengaturan elemen dengan KODE CSS di antara <head> dan </head>

Pasang Icon Address Bar

Meskipun hanya berupa secuil ruang, address bar bisa kita manfaatkan untuk menampilkan identitas blog, baik berupa teks ataupun gambar (image). Untuk membuatnya hanya perlu dilakukan dengan sedikit menambah KODE pada template blog di ruang Edit HTML.

Cara memasang icon di adress bar :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode <head>.
  8. Copy dan paste-kan link icon di bawah kode <head>
  9. Klik Simpan Template (Save Template).

Potret Kemiskinan dan Kebodohan

Rasa sedih yang tiada tara terasakan menusuk kalbuku yang paling dalam. Potret kemiskinan dan kebodohan menyeruak kembali dalam kenestapaan. Idul Adha, hari yang seharusnya dipenuhi dengan kebahagiaan, menjadi luluh lantak melihat derita yang mungkin dibarengi keserakahan kembali memenuhi tayangan layar kaca. Hikmah yang luar biasa dan mampu menciptakanan tangis kepedihan, ketika kembali harus melihat mereka yang rela mengorbankan tubuh renta atau bahkan keselamatan dan nyawa anaknya demi sekilo daging korban (Rp. 50.000, bung !!!). Beginilah potret bangsaku yang ketika bangsa lain sudah tidak "mekiklik" (sangat bernafsu) menerima daging gratis seharga "go cap jing", karena kemiskinan dan sifat "ngah-ngahan" (serakah) mereka rela berdesak-desakan "berjudi" mengorbankan keselamatan diri dan anak.

Title Bar Effect-4: Cara Praktis membuat Title Bar Effect

Sedikit berbeda dengan effect title bar sebelumnya, effect title bar-4 sedikit lebih atraktif karena setiap huruf akan dimunculkan seperti bentuk tembakan pistol. Kecepatan tembak akan semakin cepat saat sisa huruf dalam magazine semakin berkurang.
Karena jarak tembakan sangat berpengaruh terhadap panjang teks, maka apabila anda ingin menampilkan teks cukup panjang pada title bar, nilai yang tertera pada KODE BGS1_GRdistance = 45; harus anda perbesar sesuai panjang teksnya.

Cara membuat Title Bar Effect-4 :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode <head> atau </head>.
  8. Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
  9. Klik Simpan Template (Save Template).

Title Bar Effect-3 : Caea menampilkan Effect Title bar

Title Bar Effect-3 merupakan desain effect title bar dengan menggunakan javascript yang sangat praktis tetapi mampu memberikan effect dinamis sekaligus menarik. Rangkaian script yang ringkas membuat beban yang harus ditanggung blog saat loading menjadi tidak terpengaruh sama sekali, sehingga sangat tepat apabila digunakan untuk mempercantik tampilan blog.

Cara membuat Title Bar Effect-3 :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode <head> atau </head>.
  8. Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
  9. Klik Simpan Template (Save Template).

Title Bar Effect 2 » Tambahkan Title Bar Effect di blogger -

Seperti halnya Title Bar Effect 1, Title Bar Effect 2 bisa dimanfaatkan untuk menampilkan kata sambutan, menu blog atau teks lain yang berkaitan dengan materi yang disuguhkan dalam blog.

Cara membuat Title Bar Effect 2 :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode <head> atau </head>.
  8. Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
  9. Klik Simpan Template (Save Template).

Cara Membuat Title Bar Effect -1

Dari berbagai effect title bar yang bisa kita buat, untuk kali ini kita akan coba dengan sebuah effect pada title bar dengan beberapa teks yang akan muncul secara bergiliran. Dengan kemampuannya untuk memunculkan teks secara bergilir, membuat kita bisa menampilkan teks yang berbeda-beda (variatif).

Cara membuat Title Bar Effect-1 :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode <head> atau </head>.
  8. Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
  9. Klik Simpan Template (Save Template).

Background blog statis

Judul yang sederhana akhirnya sering membuat orang bingung. Untuk artikel ini anda tidak perlu bingung karena ketika anda menjelajahi blog ini sebenarnya anda sudah membuka blog dengan background yang bersifat statis. Background statis dapat dengan mudah dikenali ketika pengunjung mencoba menggulung halaman blog, dimana background/latarbelakang blog tidak ikut bergulung.

Cara membuat blog dengan background statis :
  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
  6. Simpan file template di folder PC.
  7. Cari kode syntax body.
  8. Lakukan perubahan pada syntax body sesuai panduan di bawah.
  9. Klik Simpan Template (Save Template).

Hover Link Pelangi: Cara Buat dan Pasang Rainbow Link Effects

Karena desain hover link CSS mempunyai banyak keterbatasan, maka untuk mendapatkan hover link yang lebih menarik dan atraktif banyak diciptakan hover link dalam bentuk script dengan menggunakan javascript. Kelemahan mendasar penggunaan hover link menggunakan javascript adalah dalam hal kompabilitinya, dimana tidak semua javascript yang digunakan kompatibel dengan browser yang ada. Salah satu Hover link yang begitu terkenal dilingkungan blogger adalah "Hover Link Pelangi" atau "Rainbow Hover Link" yang diciptakan oleh TAKANASHI Mizuki.

Hover Link

Hover link dikenal sebagai perubahan yang tampak ketika sebuah link tersentuh cursor. Meskipun hover yang paling sering digunakan dan dijumpai hanya berupa perubahan warna pada teks link, sebenarnya berbagai macam bentuk hover link bisa kita tampilkan dengan cara merubah KODE CSS hover. Perubahan yang umumnya dilakukan terhadap hover adalah :
color warna link
font-size ukuran font
background latar belakang/background link
font-family jenis huruf/font
text-decoration dekorasi link
font-weight ketebalan huruf
border garis tepi
cursor bentuk tampilan cursor
opacity transparansi
color :
a:hover {
      color: green;
}
font-size :
a:hover {
      font-size: 120%;
}
background :
a:hover {
      background: #66ff66;
}
font-family :
a:hover {
      font-family: Tahoma;
}
text-decoration :
a:hover {
      text-decoration: underline;
}
font-weight :
a:hover {
      font-weight:900;
}
border :
a:hover {
      border: 8px ridge #9933FF;
}
cursor :
a:hover {
      border: 8px ridge #9933FF;
}
opacity :
a:hover {
      opacity:0.85;
      filter:alpha(opacity=85); /* IE  */
}

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «

Repeat Image Vertically and Horizontally

Metode penulisan dengan menggunakan repeat dimaksudkan sebagai perintah supaya gambar ditampilkan secara berulang dengan dasar dan tujuan supaya dengan image sekecil mungkin bisa digunakan untuk memenuhi keseluruhan bidang yang harus ditutup dengan background. Dengan cara ini beban image yang dipergunakan menjadi jauh lebih kecil bila dibandingkan dengan apabila kita menggunakan gambar dengan ukuran yang luasnya sesuai dengan lebar background yang sebenarnya.

Repeat image vertically dimaksudkan supaya gambar berulang secara vertikal atau dari atas ke bawah. Repeat image horizontally digunakan untuk pengulangan gambar dari kiri ke kanan atau sebaliknya.

Contoh Cara penulisan KODE :

Penulisan KODE Background Image

Mengenal dan memahami cara penulisan dan penggunaan kode, baik kode CSS, javascript, xHTML ataupun kode yang lain seperti php menjadi satu kunci keberhasilan blogger agar mampu melakukan berbagai perubahan (modifikasi) hingga membuat template sendiri. Sekalipun belajar tentang kode HTML banyak menjadi sesuatu hal yang baru bagi banyak blogger, tetapi jika dilakukan dengan sungguh-sungguh dan telaten niscaya dalam waktu relatif singkat hal yang berkaitan dengan kode dan desain template dengan cepat akan segera dikuasai. Langkah termudah dan yang nantinya akan sangat menunjang kecepatan memahami kode HTML adalah dengan belajar tentang cara penulisan dan fungsi kode CSS. Banyak yang musti kita pelajari dan tentu saja cepat atau lambatnya pemahaman ini bergantung juga pada frekwensi latihan penulisan kode yang langsung diterapkan pada sebuah fungsi atau desain dalam blog atau dengan menggunakan bentuk software yang memang diperuntukkan untuk membuat desain melalui kode HTML seperti halnya dreamweaver. Penulisan kode background menjadi salah satu penulisan kode yang patut kita ketahui agar dapat menggunakan sebuah background yang berupa gambar secara benar. Untuk memunculkan sebuah background image dapat digunakan 2 buah kode yang berbeda.

Tips seputar penulisan background

Penulisan KODE warna pada template, khususnya yang dipergunakan pada background bisa menggunakan 2 (dua) metode penulisan warna dan 2 (dua) metode penulisan untuk background.

Metode penulisan KODE warna :
  1. Menggunakan Teks --> contoh : black, green, blue, magenta, darkgreen, lightyellow, dst.
  2. Menggunakan Angka dan Huruf
    contoh : #fff, #000, #ffeeff, #fd0000, #5fa54c, dst.

Metode penulisan background
:

Display Navbar on Mouseover

"Display Navbar on Mouseover" mungkin menjadi pilihan tepat bagi beberapa blogger yang tetap menginginkan keutuhan fungsi navbar. Penggunaan "Display Navbar on Mouseover", pada template berfungsi untuk menghilangkan navbar pada tampilan blog, tetapi navbar akan muncul kembali pada saat cursor menyentuh bagian navbar yang tersembunyi. Dengan cara seperti ini menjadikan navbar tetap berfungsi sebagaimana mestinya.

Cara menggunakan Display Navbar on Mouseover :

Cara Menyembunyikan, Menhapus, Menghilangkan Navbar Blogger

Meskipun bagi beberapa blogger navbar dianggap tidak begitu penting untuk di tampilkan, pada dasarnya navbar sangatlah bermanfaat karena beberapa toolbars yang disediakan pada bar tersebut sangat efektif untuk dipergunakan. Meskipun demikian, karena beberapa toolbars tersebut juga disediakan pada halaman lain dari blog maka hilangnya navbar tidak berpengaruh sama sekali terhadap kelengkapan fungsi blog yang diperlukan saat blogger melakukan aktivitas di dalamnya. O..., ya..., mungkin diantara rekan-rekan blogger yang belum jelas tentang navbar, untuk diketahui bahwa navbar adalah bar yang terletak pada bagian teratas (top) dari halaman blog. Navbar berisi beberapa tools seperti kustomisasi, sig in, sign out, search, entri baru dan alamat email.

Highlight Paragraph

Yang dimaksud "Highlight Paragraf" adalah membuat sebuah paragraf dalam sebuah posting mempunyai latar belakang (background) dan warna teks yang berbeda-beda;
saat teks mulai terlihat, saat tersentuh cursor dan setelah cursor berpindah. Ketika cursor anda di atas box ini, maka inilah yang dimaksudkan dengan highlight paragraf!
Cara membuat highlight paragraf:

Cara Pasang KODE HTML dan CSS Baru/tambahan

Menambah KODE HTML baru pada template haruslah dilakukan dengan cara yang tepat. Penambahan yang dilakukan tanpa mengenal terlebih dahulu pola penggunaan KODE HTML terkadang justru membuat penampilan blog berubah bentuk yang sangat jauh dari harapan. Kesalahan pemasangan KODE umumnya banyak terjadi karena kesalahan dalam penempatan atau karena adanya kesalahan cara penulisan KODE. Beberapa tips di bawah ini mungkin bisa menjadi solusi untuk menempatkan KODE HTML dan CSS baru :

Penambahan kode CSS baru pada sebuah syntax:

Merubah tampilan hover link

Hover yang sering dipergunakan pada sebuah blog, umumnya hanya berupa perubahan warna teks ketika cursor menyentuh link. Dengan melakukan modifikasi pada KODE css yang terdapat pada template, hover bisa kita rubah sehingga ketika cursor menyentuh link, maka tidak hanya warna teks saja yang berubah. Beberapa KODE tambahan, seperti background, border, style teks dan ukuran font mampu memberikan nuansa yang berbeda ketika sebuah link tersentuh oleh cursor.

Sebuah demo di bawah ini bisa sebagai contoh bentuk hover link yang coba kita buat.

Membuat Elemen baru di atas dan di bawah header - Template Tata letak

Elemen baru di sekitar header sangat dibutuhkan oleh blogger karena dengan adanya Elemen tersebut membuat blogger bisa menambahkan gadget baru, terutama digunakan untuk menambah ketersediaan fasilitas pelengkap blog yang berupa menu horizontal. Dua tempat yang tersedia memungkinkan blogger menggunakan posisi yang paling tepat untuk meletakkan menu horizontal, sehingga penampilan blog menjadi semakin menarik.

Cara membuat Elemen baru di atas dan di bawah header :

Mungkinkah bangsa ini menjadi baik ?

Aku bukanlah tokoh nasional yang mempunyai keahlian lebih pada didiplin ilmu tertentu. Aku juga bukanlah paranormal yang pintar meramal masa depan orang atau bangsa. Aku hanyalah sekedar 'cah ndeso klutuk yang bahkan kejar paket-A saja nggak lulus. Sedihnya..., sekalipun aku nggak bau universitas, nggak bisa ngomong inggris, nggak ngerti tentang cara korupsi dan suap-menyuap (tentu saja klo cuma nyuapin bayi pakai nasi jagung aku bisa!) , saat sekarang aku jadi turut bingung. Bagaimanapun keadaan ku, aku tetaplah  seorang anak bangsa dari sebuah bangsa bingung (BB). Kalau sekarang orang-orang lagi pada ribut tentang omongan "sang bapak presiden yang lagi bingung", ketika team delapan yang dibikinnya menghasilkan produk yang bikin bingung,  justru aku saat ini sedang bingung sendiri memikirkan cara seperti apa yang mampu membuat bangsa ini cepat lepas dari penyakit bingung. Penyakit bingung ini rupanya tumbuh karena salah didik yang dilakukan mereka yang mengaku sebagai  tokoh besar bangsa yang selama ini menjadi orang tua tiri bangsa. Mereka sibuk memperkaya diri dengan korupsi dan membikin kroni untuk melanggengkan jabatannya sebagai orang tua tiri dengan mengabaikan kelangsungan hidup anak dan cucunya. Baik masa depan kehidupan mental , spiritual ataupun kehidupan ekonominya.

Cara mempercepat peningkatan ranking blog

Membuat blog memang bukan untuk dinikmati sendiri. Hanya orang nggak waras seperti Dul Kenthir bila membuat blog hanya untuk dibaca sendiri. Kamu bisa bayangkan! Orang membuat blog tidaklah mudah karena harus meluangkan waktu dan mencurahkan segala kemampuan untuk mendapatkan sebuah posting yang berkwalitas dan diharapkan memberi manfaat bagi orang lain. Pembuatan posting seringkali membutuhkan waktu berjam-jam dan membuat blogger harus begadang hingga larut hingga bangun pun jadi kesiangan. Akankah semua yang dilakukan dengan susah payah ini hanya akan dinikmati sendiri? Diketawain sendiri? Hanya orang gila yang punya pikiran seperti ini !

Bagaimana supaya blog menjadi lebih cepat dikenal atau dalam istilah bloggernya ; meningkatkan rating dan popularitas blog! Beberapa tips di bawah ini semoga bermanfaat bagi kalian :

Memotong gambar dengan Adobe Photoshop; Panduan Editing Gambar Posting BloGGeR

Menyertakan gambar dalam sebuah posting mestinya memerlukan beberapa pertimbangan sebelum gambar diterbitkan. Baik ukuran, fokus gambar yang akan ditampilkan atau mungkin pengurangan suatu bagian dari gambar perlu dilakukan untuk membuat sebuah gambar menjadi kelihatan lebih cantik dan menarik. Dengan menggunakan Adobe Photoshop, kita dapat melakukan pemotongan gambar dalam waktu yang relatif singkat.

Cara sederhana memotong gambar menggunakan Adobe Photoshop :

  1. Adobe Photoshop : Buka Adobe Photoshop.
  2. File Gambar : Ambil file gambar yang akan dipotong dengan cara :

BB, Bau Badan dan Bangsa Bingung

Meskipun istilah BB tidak langsung menunjuk pada sesuatu hal yang negatif, tapi penggunaan istilah BB mengarah pada suatu penilaian yang cenderung negatif. " Ampun, dah, BBnya!", atau "Gila! Nggak tahan aku 'ma BBnya!" , atau mungkin, "Cakep sih cakep, tapi BBnya itu!".

BB yang kurang sedap timbul dari pola hidup yang tidak sehat, yaitu di sebabkan karena ketika seseorang mandi dia lebih suka menggunakan sabun hanya untuk membersihkan bagian-bagian tubuh yang mudah dilihat orang, seperti wajah, dada, leher, tangan, perut, bawah perut dan

Menyalin foto dari layar PC dengan Adobe Photoshop: Panduan Praktis BloGGeR

Mungkin beberapa diantara kita pernah mengalami kesulitan untuk menyimpan gambar yang tampak di layar PC. Beberapa teks atau gambar memang menjadi sulit untuk disimpan ketika gambar/teks yang terlihat tidak disertai link tempat gambar/teks tersebut disimpan. Untuk mengatasi permasalahan seperti ini, gunakan saja Adobe Photoshop. Selain memungkinkan kita untuk dapat membuat foto secara langsung dari sebuah layar monitor, Adobe Photoshop juga meyediakan banyak sekali fasilitas dan fungsi yang berkaitan dengan gambar, seperti : memperbesar/memperkecil photo, memotong gambar, merotasi, membuat dan mewarnai gambar, membuat animasi (digabungkan dengan Adobe ImsgeReady), membuat effect pada teks atau gambar dan beberapa fungsi yang lain.

Cara untuk menyalin gambar/photo/teks menggunakan Adobe Photoshop :

Blog Walking

Dari namanya saja sudah sangat jelas! Istilah kerennye "ngelayab" pergi nonton dari satu blog ke blog yang lain. Kegiatan yang lebih bermanfaat daripada keluyuran malam dengan tujuan nggak karuan.Sambil "mabok" lagi! Blog walking sebenarnya bentuk aktivitas yang sangat dibutuhkan oleh setiap orang. Tidak hanya blogger semata yang mendapatkan manfaat dari jalan-jalan mengunjungi blog. Banyak manfaat yang dapat kita gali karena "rajin membaca dan bersilaturahmi".

Manfaat blog baru

Setiap orang memiliki keinginan dan selera yang berbeda. Begitupun kaitanya dengan blog. Ada orang yang punya sebuah blog saja karena memang maunya seperi itu. Yang lain lagi punya puluhan blog meskipun akhirnya tidak semua blog termanfaatkan dengan baik apalagi maksimal. Orang yang berbeda mengatakan cukup dua blog saja. Sebenarnya berapa banyakkah blog yang ideal satu orang?

Tidak ada batas jumlah kepemilikan blog untuk seseorang dan tidak ada juga standar ideal berkaitan dengan jumlah blog yang harus dimiliki. Kepemilikan sebuah blog atau banyak blog sebenarnya dapat dikalkulasikan oleh yang bersangkutan berkaitan dengan kemampuannya untuk bisa secara rutin melakukan posting. Belum tentu karena hanya punya sebuah blog kemudian jumlah postingnya menumpuk.Belum tentu pula punya puluhan blog tetapi postingnya kosong melompong. Bukankah posting juga bisa dilakukan oleh orang lain atau dengan hanya sekedar copy paste milik blogger lain?

Cara Membuat blog baru tanpa email baru; Revisi Panduan BloGGeR

Kemarin aku ketemu si Miun. Dia dengan bangga bilang. "Mas Yot aku sudah punya dua blog sekarang. Aku buat email baru pakai data adik ku trus aku buat daftar blog yang baru". Kelihatan senang sekali si Miun dengan blog barunya. Kepada orang sekampung dia ceritakan tentang blognya yang sekarang menjadi bertambah satu. Aku ikut senang juga melihat kebahagiaannya. Dengan bertambahnya blog setidaknya semangat '45 si Miun untuk pergi ngelayab malam akan jauh berkurang.

Habis "wedhus" terbitlah "kucing"

Setelah kemarin aku cerita tentang "wedhus dhugul" yang bertarung mengadu kepalanya demi rumput di kandang, ternyata cerita tentang wedhus masih berlanjut terus hingga detik ini. Cerita tentang dunia hewan memang tak ada habisnya, seperti panjang dan lebarnya kisah "nyentrik" bangsa kita tercinta .

Setelah masa persidangan yang panjang dan melelahkan, tiba-tiba saja seorang anak manusia seperti "kesurupan". Berani ngomong tentang "rahasia korpsnya". Entah setan atau Tuhan yang membuat "kegaduhan baru" ini. Dari sanubari yang paling dalam, si Bego, temanku yang sedikit "kurang ganep" dan seharusnya tidak mungkin "nyandak" otaknya sempat ngomong kepada ku. "Mas, Yot, kemarin aku lihat tipi, mas", ia nyengir kuda ke arah ku kemudian melanjutkan, "bapak ku terus saja bilang 'gila!'gila!'gila!'...saat barengan nonton

Animasi, film, artis dan kemajuan teknologi animasi

Apakah sebenarnya animasi ? Pada dasarnya animasi adalah suatu trik yang dilakukan untuk memanipulasi gambar dengan cara memadukan atau merangkai sejumlah gambar menjadi sebuah obyek yang dinamis/bergerak. Perubahan yang dilakukan bisa berupa warna atau bentuk gambar. Pada awal pertumbuhannya, animasi di buat secara manual hanya dengan memanfaatkan ketrampilan melukis/menggambar. Untuk menciptakan sebuah obyek bergerak, dibutuhkan puluhan hingga ribuan gambar yang dirangkai menjadi satu hingga tercipta sebuah gambar yang hidup. Hasil dari proses penciptaan animasi ...

Mencari file hosting gratis untuk javascript dan css

Semakin berkurangnya layanan gratis yang bisa kita manfaatkan untuk upload javascript memang sedikit membuat pusing para blogger yang membutuhkan free file hosting guna upload sekaligus menyimpan javascript dan css. Sangat jauh berbeda jika kita bandingkan dengan banyaknya free image hosting yang ada. Mungkin beberapa alamat di bawah ini bisa anda manfaatkan untuk upload sekaligus menyimpan file-file anda :

Solusi terdekat upload gambar animasi

Bingung cari free image hosting untuk gambar animasi atau gambar dengan ukuran besar? Anda tidak perlu bingung untuk mengatasi masalah ini. Kalau kita jeli, selain bisa upload di blogger (di halaman posting) sebenarnya ada free image hosting yang sangat dekat dengan kita dan bahkan layanan ini diberikan oleh google. Lakukan login di blogger, kemudian lanjutkan dengan klik di sini maka problem tentang upload gambar sekaligus tempat menyimpannya sudah tidak lagi menjadi persoalan. Satu hal yang jelas, dengan menggunakan layanan yang diberikan google tentunya ada kelebihan yang dapat kita manfaatkan. Layanan dan akses serta loading! Itulah yang kita harapkan bisa membantu kita untuk menjaga supaya loading blog tetap terjaga. Satu keuntungan yang lain apabila menggunakan fasilitas dari picasa adalah, kita diberi ruang simpan gambar sebesar 1024 MB. Sebuah kapasitas simpan yang cukup besar. Itupun bisa kita perbesar lagi dengan cara membuat blog baru. Dengan penambahan blog sama artinya kita menambah kapasitas simpan menjadi dua atau tiga kali lipat tergantung jumlah blog yang kita punya. Kalau kita hitung-hitung dengan kebebasan yang diberikan blogger dalam membuat blog (satu email bisa untuk buat banyak blog), artinya kita mempunyai ruang upload dan simpan gambar dengan kapasitas yang tidak terbatas! Asyik, khan?!

Dua pilihan tampilan menarik bagi blogger

Menentukan pilihan tampilan blog sebetulnya bukan sesuatu yang sulit karena kebutuhan tentang tampilan sebenarnya sangat bergantung kepada selera yang empunya blog dan materi posting blog itu sendiri. Memang, blog dengan bentuk simple atau minimalis cenderung memberi keuntungan pada sisi cepatnya akses atau loading blog, karena beban blog yang tidak menjadi terlalu berat. Minimalis juga tidaklah berarti jelek. Bagus tidaknya blog sebenarnya juga tergantung pada kualitas posting yang disuguhkan. Aktualitas, kepakeman (posting yang dapat dipertanggung jawabkan dari isi materi dan kwalitasnya), dan frekuensi posting yang terjaga mampu membuat blog dengan tampilan simple menjadi sangat menarik untuk di obrak-abrik isinya dari ujung teratas hingga ujung terbawah. Tentu saja tampilan minimalis seperti yang saya sebutkan, selain materi posting yang "oke", haruslah diimbangi dengan tampilan fisik blog yang tertata rapi dengan paduan warna yang menarik. Manusia bukanlah binatang yang tidak mengenal keindahan, karena sekecil apapun, setiap manusia diberikan naluri untuk mengerti dan bisa menikmatinya. Hal ini tentunya akan berbeda dengan temanku, si Panjul. Dia sama sekali tidak pernah bisa merasakan apalagi menikmati keindahan. Yang dia tahu dalam hidup hanyalah urusan makanan dan perut keroncongan.

Tutorial Blogger! Blogger Tutorial! Panduan Blogger! Penting!

Penting..., dan memang dibutuhkan sekali. Panduan bagi blogger yang berupa tutorial untuk memandu blogger-blogger muda meniti langkah menuju jenjang yang lebih tinggi hingga menggapai gelar sebagai blogger andal atau blogger senior dan berbagai sebutan yang lain, benar-benar sangat dibutuhkan. Kecenderungan yang muncul pada "Yang Mulia" blogger senior terkadang membuat heran bagi blogger pemula. Mereka malu dan merasa gengsi untuk memberikan "tutorial dasar" bagi pemula karena takut dianggap kampungan oleh sesama blogger senior saat mencoba mengupas kembali "kerak atau intip garing" yang membuat mereka tumbuh sebesar sekarang. Kesombongankah atau takut dianggap kampungankah  yang melingkupi "perut" mereka ?! 

Tips Menulis KODE CSS

Cara menulis KODE CSS yang benar menjadi salah satu kunci bagi sebuah blog untuk bisa loading dengan kecepatan optimal. Pada banyak template sering sekali kita jumpai penulisan kode CSS yang menyimpang dari standar penulisan yang menjadi patokan bagi kepentingan loading sebuah blog. Meskipun cara penulisan yang dilakukan tidak menyimpang dari standar penulisan KODE, namun penulisan KODE yang terlalu panjang atau tidak praktis akan membuat pembacaan KODE oleh browser mejadi terlalu lama. Terlebih apabila kode css yang dipergunakan sudah tidak memenuhi standar penulisan kode css yang berlaku pada saat ini. beberapa contoh di bawah ini bisa anda gunakan sebagai pembanding dengan metode penulisan kode css pada template yang anda gunakan :

Pola Elemen Laman berubah setelah compress CSS ?

Compress KODE CSS memang membuat loading blog semakin cepat. Hal ini disebabkan karena muatan KODE CSS template semakin berkurang dengan hilangnya beberapa bagian KODE yang tidak diperlukan seperti spasi, misalnya. Aku hanya mengingatkan kepada sesama rekan blogger yang mau atau sudah melakukan compress css, dan berakibat tatanan elemen pada "Elemen laman" menjadi berubah tidak sempurna untuk tidak terlalu risau. Dari kejadian yang aku alami setelah melakukan compress, perubahan tatanan elemen halaman blog bisa dibetulkan kembali hanya dengan menambah tanda ";", pada setiap akhir penulisan kode CSS sebelum tanda "}".

Read More Klasik Tampil Cantik

Read More

Sekali lagi tentang "read more" yang "kecil tapi sering banyak di raba-raba orang". Banyak cara dan trik yang telah dibuat untuk membuat read more terlihat "lebih molek" dan "mantap dan enak disentuh". Dari sekian banyak tips dan trik, tutorial blogger, panduan blogger cara membuat read more baik di blogspot ataupun di New Blogger Template, kaya'nya blom ada yang memanfaatkan "table" untuk membuat sebuah read more. Jika kita mencermati penggunaan table, sebenarnya ada sisi menarik sebuah desain yang memanfaatkan kode ini. Tanpa banyak kode tambahan, sebuah desain table akan terlihat seperti memanfaatkan efek 3 dimensi. Inilah kelebihan dan keindahan special yang tidak dimiliki yang lain (barang klasik yang selalu tampil cantik!). Jika dibandingkan pembuatan read more yang menggunakan berbagai accecories tambahan, tentu saja read more ini sangat jauh lebih enteng dan sama sekali tak berpengaruh terhadap loading blog. Mo buat?

Tak perlu obrak-abrik template hanya demi Read More

Mengobrak-abrik template demi sebuah "Read More"? Jika itu dilakukan tahun 2009 (saat posting ini dibuat) memang dirasa sangat perlu karena memang readmore plugins belum tersedia. Tetapi jika saat ini, aku kira memang tak perlu harus repot-repot membuat readmore algi. Blogger telah sediakan dalam bentuk plugin yang sudah terintegrasi. Jika kita gunakan posting mode Edit HTML maka hanya perlu menambahkan kode <--more--> diantara teks posting yang akan dipotong menjadi "readmore". Untuk mode Compose silahkan klik fitur Insert Jump Break.

Cara Mengganti Template

Punya template hasil karya sendiri atau hasil modifikasi sendiri dari template yang sudah disediakan blogger tentunya menjadi kebanggaan tersendiri bagi seorang blogger. Untuk bisa mewujudkan harapan seperti ini tentu saja harus dimulai dengan semangat yang tinggi untuk mau belajar dengan keras semua hal yang berkaitan dengan template. Tidak perlu harus dengan modal kecerdasan tinggi dan basic ilmu yang sesuai dengan bidang IT atau KODE HTML dan segala KODE yang berbau web. Cukup dengan semangat kemandirian dan "keogahan" akan hal-hal instan. Seperti halnya temanku Paijo yang cuma sekolah sampai kelas 5 SD, hanya dalam tempo 2 bulan dia sudah punya blog hasil modifikasi sendiri dengan penampilan yang bisa membuat blogger-blogger senior berdecak kagum. Untuk memulainya bisa kita lakukan dengan mencoba mengganti template awal saat buat blog dengan template-template bawaan blogger. Dari template ini , yang disediakan cukup banyak variasi, kita bisa membandingkan susunan KODE HTML yang digunakan sebagai pembentuk template.

Mempercepat Loading Blog dengan Compress CSS: Tutorial BloGGeR Anget

Tutorial BloGGeR tentang CSS perlu juga di bahas karena banyak sekali pengaruh kode CSS terhadap blog.
Loading blog yang lelet seperti siput narik motor kehabisan bensin menjadi persoalan klasik yang membuat hampir semua blogger sering mendongkol karenanya. Bagaimana mengatasi masalah ini? Ada banyak solusi yang mungkin kita tempuh, dari yang gratis hingga yang perlu banyak ongkos. Bagi mereka yang kantongnya setebal pantat bu Lina tentunya nggak pusing mengatasi masalah klasik ini. Tinggal keluarin do'it dan ...yab..., semua udah ngacir kayak si Mandra. Lain lagi ma si Panjul. Boro-boro nambah ongkos buat langganan yang bisa tancap gas, orang klo mau ngeblog saja dia mesti ngurangin jatah rokok. He...hehh...Setali tiga uang ma aku sebenarnya. Sama-sama bokek. Tapi meski bokek aku bener-bener syukur ma Yang Di Atas. Orang kepepet biasanya banyak dikasih jalan keluar. Hasil muter-muter keliling dunia aku ketemu ma tukang compress. E... lumayan. Nggak bayar, kok. Nggak kayak tukang tambal ban yang mesthi bayar cemban. Klo kamu kepingin, datang saja ke sana. Compress saja CSS kamu. Ditanggung tambah entheng, Njul. Klo, nggak percaya coba saja, dah. Kamu bisa pilih 3 macam compress-an. Compress biasa, compress sedengan dan yang ke tiga compress abis-abisan. Ya, dari pada kamu mesti compress sendiri kan susah. Belum klo masih harus manggil jig-jag (wals-machine). Ouw..., bisa abis kamu punya gubug.

Menyederhanakan KODE Gambar untuk Posting: Panduan BloGGeR

Mencoba menggunakan kode html sendiri yang berbeda dari kode html image default blogger seperti yang dapat dijumpai di box posting (pada mode Edit HTML, selain lebih pendek (ringkas), cara seperti ini bisa digunakan untuk melatih diri memahami dan mengembangkan kode html. Manfaatnya tentu saja tak hanya di halaman posting saja, namun akan terus berkembang hingga blogger semakin memahami tentang template dan kode pembentuknya.

Saat upload image di halaman posting, 4 pilihan posisi image diberikan agar image dapat diletakkan dalam beberapa posisi berbeda.
  1. Image di kiri (left).
  2. Image di tengah (centre).
  3. Image di kanan (right).
  4. Image di tak satupun (none).

Istilah-istilah dalam blog -2

Kembali kita lanjutkan untuk memahami istilah-istilah dalam dunia blog sebagai penambah wawasan serta untuk lebih meningkatkan pemahaman seputar blog, template, posting dan semua yang terkait dengan dunia blogger.

Mental "Wedhus" Bangsa "Tolol" Tukang "Korup"

Pagi ini aku sudah nyampe di "Kali Garing" (;sungai kering), bersama Slamet, Mandra , Ponidi dan bu Lina. .Tuh, lho..., bu guru yang cantik, yang sempat jadi guru aku kala ngikutin kejar paket di Balai Desa. Seneng, dhah sekali-kali pergi mancing ma wanita cantik. Aku sendiri heran, kenapa, ya, bu Lina yang cantik (guru, lagi!) mau keroyo-royo (bersusah-susah, Pon! Dasar, goblogh! Masa keroyo-royo saja nggak ngerti. Katanya asli jowo, masa bahasa gituan saja nggak dhong! O.. dasar Ponidi!) ikutan mancing di "kali garing", yang klo ke sana mesthi menempuh jarak 2 km dan harus jalan kaki. Itupun mesti melewati banyak "galengan" (;pematang) sawah puanjaaaaaang banget. Kali garing sebenarnya bukanlah sungai yang benar-benar kering tanpa air sama sekali. Sungai itu memang di kenal sejak dulu kala dengan nama "Kali Garing"dan meskipun namannya seperti itu, tapi ikannya luar biasa banyaknya. Matahari masih hangat-hangat tahi kerbau karena jam masih nangkring di pinggir kali ...eh ..., maksudku di angka 7. Yang sering nangkring di di pinggir kali khan si Mandra. Habis dia nggak punya WC, sih.

Rahasia Kecerdasan

Mbul, sudah beberapa hari ini aku kan nggak posting gambar kesukaanku, lho, Mbul. Tu, lho mbul, gambar bunga yang hidup, tu ! Rasanya pusing deh kepala klo belom posting yang ada gambar wanita cantiknya. Ah..., kamu, Mbul. Bisanya cuma peringas-peringis kayak sapi di kasih tulang saja. Posting apa, ya, mbul? Kali-kali kamu, dong mbul yang bikin posting. E..., siapa tahu tar kamu jadi blogger kondang kayak akang Rohman. Kayak artis, deh Mbul. Kemana mana pakai dasi ma sepatu "kelimis" yang klo kena sinar matahari bisa bikin orang pingcan. (Nuwun sewu, kang Rohman. Nopo injih mekaten ?! Nyuwun ngapunten namung guyon!) He...he...he...Lha gimana, orang dhuwitnya mengalir kaya air bengawan solo, kok, Mbul. Blogger sedunia juga jadi tahu, lho, mbul! Ah, sebenernya aku sih kepingin juga. Gimana, ya rasanya jadi blogger ngetop...top ...top...top ...top..., itu?! Bukan pesimis sebenarnya aku, Mbul.... Tapi bagaimana mungkin, orang modalku cuman "pacul gerang" (;cangkul tua berkarat). Udah rumah saja di lereng gunung, sekolah TK saja nggak tamat. E....Nyoba ngikutin kejar paket nggak lulus juga. Kamu tahu mbul, kenapa aku aku nggak lulus kejar paket ? Tapi tolong jangan cerita ke orang-orang, ya, Mbul?! Sini-sini, Mbul, tak bilangin. Pelan-pelan saja tar kedengaran orang. Aku tarik kepala si Jambul, lalu aku berbisik di kupingnya yang sepanjang daun kelapa. Iya ..., aku nggak bo'ong. Emang telinga si Jambul panjang banget, kok. Kalau dia jalan saja kupingnya mesti di "samperke" (diletakkan) di pundaknya. Nggak tahu, aku. Kata orang si Jambul waktu kecil nakal banget. Klo orang tuanya marah, kuping si Jambul di tarik dari ujung desa sampe ke rumah. Tapi aku juga nggak percaya. Masa gitu, sih. Pasti bo'ong, dah! Sehabis aku bisikin, wajah si jambul "plola-plolo" kayak kepala "lohan" milik tetangga ku. Aku jadi heran sendiri. Apa sih yang bikin Jambul "plola-plolo". Ngapain sih, Mbul ? "Ah, dasar, gila, kamu", tiba-tiba si Jambul mengumpat sambil memelengkan kepalanya ke arah ku" ah....dasar gila", kembali dia menoleh dengan dahi berkerenyit. Aku hampir ketawa melihat wajah tuanya yang semakin lucu, "jadi selama ini kamu nggak berangkat ke Balai Desa untuk ngikutin kejar paket, tapi malahan pergi ke pasar ?" Aku mengangguk sambil menyahut, Iya..Mbul. Gimana lagi. Otak ku udah nggak nyambung klo di kasih pelajaran ma gurunya. Yang lebih sedih dan bikin aku jadi males ya itu. Gurunya laki semua! Kamu tahu kan, mbul kalau aku paling senang di ajar ma guru wanita. Heran aku, Mbul. Klo gurunya wanita aku mudah sekali nangkap pelajaranya. Orang kemarin dulu waktu pak Naryo sakit dan nggak bisa mengajar, bu Lina yang gantiin, aku "cepet mudheng" (bisa mudah mengerti), kok! Bener, Mbul, waktu itu aku jadi kayak einstein. Semua soal aku telan dalam waktu 5 menit selesai. Nggak ada yang salah satupun. Heran khan, Mbul?! O...., kalau kamu lihat bu Lina saat itu pasti mata kamu nggak bisa berkedip. Ia menghampiri meja ku, sambil membawa jawaban soal yang aku buat. Cantik banget, Mbul. Gaunya hijau dan ...baunya, Mbul....Harum sekali. Kayak bunga bakung, Mbul (ah ... keliru enggak, ya, aku. Yang aku tahu tentang bunga nggak banyak, sih!). Dia melihat aku dengan terheran-heran. Setelah dekat dia bertanya. "Yot.... Aku heran. Orang secerdas kamu mestinya nggak ikut kejar paket, Yot. Kamu sangat cepat mengerjakan soal dan tak ada satupun yang salah. Kenapa kamu dulu sampai nggak sekolah ?", Aku nggak berani melihat wajahnya. Habis dekat banget, sih. Aku malu sendiri karena aku kuwatir dia tahu kalau aku cerdas hanya saat itu saja. Hanya karena dia yang mengajar. Benar, aku tetap nggak berani mengangkat wajah ku. Aku cuma bisa tertunduk sambil menikmati harum baju bu Lina. Hidungku kempas kempis seperti hidung kelinci. Ah ... Malamnya aku jadi nggak bisa tidur. Setiap kali aku meramkan mata, yang terlihat hanya bu Lina seorang. Masih pakai baju hijau tapi bukan yang dipakai waktu mengajar. Pakai itu lho, Mbul. Yang kayak kaos "engklek", tuh (kaos dalam)! Si Jambul hanya bisa geleng-geleng kepala. Sambil terus berjalan dia terus saja bergumam "dasar gila!".

Aku terus berjalan di samping Jambul. Dalam hati aku bersyukur kepanya karena berkat si Jambul, foto seorang wanita cantik kembali mengisi posting ku!!! "Makasih, Mbul !"

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

Percepat Koneksi dan Loading Smart Haier D1200P


Hadirnya Smart modem D 1200P dalam bentuk paket bundling sungguh merupakan kesejukan tersendiri bagi mereka yang berkantong tipis seperti aku dan Sarju (ya, kan, Ju?!). Bagiku dengan kehadiran modem berharga terjangkau ini merupakan dewi penolong yang membuatku tak perlu lagi ngelembur di warnet. Nyaman untuk ukuranku. Bagaimana nggak nyaman, wong aku sekarang bisa ngeblog sambil "remis" (bahasa Indonesia: makan camilan, kalau nggak jelas bisa tanya si Sarju!)gorengan pohung hasil panen bapak ku di belakang rumah dan tiduran di kasur kerepesku. Ya, meski kadang kadang ada rasa jengkel juga ketika tiba-tiba loading jadi kayak kura-kura di boncengin gajah (lelet kata si Sarju). Tapi belakangan ini hati bener-bener ayem. Si bocah bandel D 1200P-ku, tiba-tiba saja jalannya udah nggak megal-megol lagi kayak pantat si Sarju. Instalasi ulang! Itulah yang ku lakukan setelah kasak-kusuk ma teman-teman ngomongin tentang si bandel. Ada dua langkah yang harus di tempuh untuk membuat si bandel nggak lagi megal-megol :

1. Lakukan instalasi ulang dengan menginstall Driver baru Haier D 1200P. Untuk mendapatkan software drivernya bisa download di http://www.smart.co.id/

2. Driver baru ini terutama berfungsi untuk meningkatkan kecepatan koneksi. Setelah aku coba , sangat jauh lebih cepat daripada driver bawaan dari paket modemnya. O...ya, supaya nggak bingung, setelah kamu masuk ke smart.co.id, kamu lihat saja di pojok kanan bagian tengah, KLIK "Setting dan Download". Setelah itu ada banyak pilihan, silahkan KLIK di "Smart Haier D 1200P"

3. Petunjuk Instalasi bisa di baca setelah download karena disertakan 1 paket dengan driver baru tersebut. Buat yang sementara ini sudah pakai si bandel, saya kira nggak akan mengalami kesulitan dalam instalasi ulang.

4. Langkah selanjutnya adalah untuk mempercepat loading dan download si bandel.

- Lakukan perubahan terhadap nomor phone number yang digunakan. Kamu bisa buat dua macam koneksi : pakai#777 dan yang satunya lagi yang baru. Coba saja nanti bandingkan hasilnya. Dari pengamatan selama saya menggunakannya, di saat phone number yang lama untuk koneksi sekalipun nggak mampu, dengan cara yang baru ini kita tetap dapat tersambung dengan amat mudahnya.

- Koneksi baru yang mujarab ini, sebagai berikut:

1. Create New Connection --> (Next) -->
2. Connect to the Internet --> (Next) -->
3. Setup my connection manually --> (Next) -->
4. Connect using a dial-up modem --> (Next) -->
5. Modem-VIA Telecom CBP USB Modem CDM (COM ...) --> (Next) -->
6. ISP Name :isi dengan sembarang teks --> (Next) -->
7. Phone Number : *31*111111# -deret angka 1 berjumlah 6x --> (Next) -->
8. User Name -Password- Confirm Password : smart -smart- smart --> (Next) -->
9. Add a shorcut to the connection to my desktop ---> Finish

Selesai sudah !

Ju..., bangun, Ju..! Sudah rampung. Tuh pohungnya habisin!!! Wah, dasar si Sarju! Dia malahan ngorok dengan mata melotot putih sebesar bola pingpong di samping ku. Kurang asem !!! Jadi takut aku melihatnya. Persis hantu, wajahnya! Hii ...hi...

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

Trik Panduan BloGGeR: Cara Menempatkan dan Memasang Javasript

Hampir semua blog kecuali wordpress membebaskan penggunanya untuk menambahkan javascript di template/thema. Ini menjadi keuntungan tersendiri yang membuat blogger lebih bebas dalam berkreasi dan improvisasi. Bahkan, Blogdetik yang pada awalnya tak memberi kesempatan d'blogger untuk menambahkan javascript kini sudah banyak memberi kelonggaran untuk menggunakannya meskipun dalam beberapa hal masih tak sebebas di blogger.

Meskipun sepertinya menggunakan javascript gampang dan tinggal pasang, sebenarnya ada trik khusus yang perlu dicermati saat javascript dipergunakan. Karena sifatnya penambahan, tidak bisa dihindari bahwa akibat yang timbul tentunya berupa peningkatan beban pada template yang berkorelasi dengan tingkat kecepatan akses dan loading blog. Penempatan yang tidak tepat juga mengakibatkan fungsi yang seharusnya muncul diawal loading menjadi terkendala karena penempatan yang salah. Bukan persoalan yang rumit, tetapi membutuhkan

Membongkar Pondasi Panduan BloGGeR dan BlogDETIK: Template dan Elemen Pembentuknya

Kembali kita akan mengupas isi dalamnya blog. Saat ini kita akan mencoba memahami lebih dalam soal template, terutama apa saja yang terdapat di dalamnya sehingga kita dapat melakukan aktivitas sebagai seorang blogger. Membicarakan template tak akan lepas dari HTML (Hyper Text Markup Language).  HTML merupakan file teks murni yang dapat dibuat dengan editor teks sesuai selera (sembarang/bebas) dan dikenal sebagai web page.  Dokumen HTML umumnya berisi informasi ataupun interface aplikasi di dalam internet.
Secara sederhana dapat dikatakan, bahwa template dibangun oleh paduan/kumpulan KODE yang disebut sebagai:
  1. KODE CSS (diletakkan di bagian head).
  2. KODE HTML (di letakkan di bagian body), dan
  3. KODE berupa script yang kita kenal sebagai javascript (bisa di bagian head atau body).
Pada perkembangan hingga dewasa ini, peran javascrip menjadi sangat dominan karena kemampuan script ini untuk dikembangkan mejadi semacam bentuk program yang dapat menciptakan banyak inovasi hingga blog tampil sangat atraktif, interaktif dan cerdas.

Secara umum Elemen pembentuk template yang berupa dokumen HTML dinyatakan

Sebuah Panduan Dasar BloGGeR: Mengenal dan Belajar Istilah-Istilah dalam Dunia BloGGeR » 1

Memahami atau belajar tentang istilah-istilah dalam dunia blog merupakan sebuah Panduan Blogger, Tutorian BloGGeR, panduan BlogDETIK dan Tutorial BlogDETIK penting yang harus dipelajari oleh para blogger. Ya ... meskipun kadang-kadang mencoba memahami istilah-istilah dalam dunia blog sering juga terasakan antara penting dan tidak penting. Mengapa bisa demikian? Istilah ini menjadi sangat penting ketika lingkup posting atau blog yang kita kelola mengupas tentang segala aktivitas dan pernak-pernik blog. Berbeda apabila bidang posting yang kita tekuni jauh dari hal yang berkaitan dengan kepentingan penggunaan istilah-istilah yang berkaitan dengan blog. Sebagai contoh, apabila posting hanya berkaitan dengan masalah pertanian dan segala hal yang berhubungan dengan dunia pertanian. Tentunya istilah-istilah dalam blog menjadi tidak relevan lagi untuk digunakan. meskipun demikian, belajar memahami suatu hal yang baru tidak merugikan. Bertambahnya pengetahuan dimanapun pasti akan sangat bermanfaat bagi hidup. tidak hanya untuk kepentingan pribadi, tetapi siapa tahu apa yang kita kuasai menjadi manfaat bagi orang lain? Begitu, kan, Dul ?

Karena kalau kita bahas dalam satu kali posting akan memakan waktu dan tempat yang cukup panjang, oleh karena secara bertahap akan kita ungkap terlebih dahulu istilah-istilah yang paling sering digunakan.

Istilah-Istilah Dalam Dunia Blog Bagian I:

Cara Membuat Penambahan Widget Baru; Satu Tutorial BloGGer Penting.

Langkah Penambahan Widget Baru dari Blodspot dan Penambahan Widget dari Luar Blogspot melalui "HTML/Javascript"


LOGGIN
BLOGGER
==>
Design
Rancangan
===>
Elemen
Laman
==>
Tambah
GADGET
==>

Lanjutkan dengan :


HTML/
Javascript
=========>
Tambahkan
KODE/Javascript
====== >
SIMPAN/
Save


Untuk mengetahui secara detail soal template memang mengharuskan kita lebih banyak belajar. Hal baru ini benar-benar menarik dan membuat kita tertantang untuk mengetahui kedalamannya. Banyak hal yang belum kita kenal membuat kita perlu menguak lebih dalam lagi secara telaten satu demi satu. Mengapa pada masa awal ini kita terus berkutat ngurusin template? Ya, memang inilah yang harus dikuasai terlebih dahulu. Template inilah ruang kerja kita. Tanpa mengetahui segala fasilitas beserta fungsinya tentu akan mengganggu optimalisasi kerja. Ya, kalau pas kebetulan tidak ada masalah, kalau suatu ketika muncul masalah, sementara kita hanya tahu tentang membuat posting, pasti kebingungan yang akan muncul. Melalui pemahaman akan template ini pula, kemampuan kita untuk berkreasi dan membuat inovasi baru dalam memperindah template mejadi tersalurkan.

Menambah widget menjadi satu dari sekian banyak kemungkinan yang dapat

Cara Mengatur Jumlah Posting : Sekelumit Panduan BloGGeR ttg Pentingnya Mengatur Jumlah Posting

Mengatur jumlah posting di halaman utama merupakan tutorial BloGGeR yang akan menjadi panduan penting dalam mengatur blog berkaitan dengan percepatan peningkatan ranking dan masuknya komentar pengunjung. Kalau kita mengamati blog milik para blogger senior akan terlihat bahwa setiap halaman blog mereka hanya akan terlihat satu buah postingan semata. Satu keuntungan dengan menampilkan satu posting pada halaman utama adalah membuat koneksi dan loading sebuah blog lebih cepat dan lebih lancar karena muatan yang akan termunculkan mejadi lebih ringan. Kalau kita jeli melihat fasilitas dalam template yang disediakan oleh blogger.com, maka dengan amat mudahnya kita dapat membuat tampilan blog pada halaman muka, seperti para blogger senior tersebut. keuntungan yang lain dengan model tampilan seperti itu adalah membuat pembaca lebih fokus untuk menyimak seluruh materi posting yang tampil "solo". Bersama kita akan menguak cara membuat satu posting di halaman muka ini.

Cara mengatur jumlah posting di halaman utama :

  1. Login ke Blogger.
  2. KLIK "Pengaturan"
  3. KLIK "Format"
  4. Lihat pada fitur

    Panduan BloGGeR dan Tutorial BloGGeR (Halaman Posting):

    "Tampilkan"
    .
  5. Atur jumlah posting di halaman muka dengan merubah angka yang tertera, mulai dari angka satu hingga jumlah yang kita inginkan. Posisikan pengturan pada kategori posting, karena ada 2 pilihan : hari dan posting.
  6. Pada keterangan di bawahnya jelas terlihat, bahwa apabila posting di atur dalam kategori hari, maka jumlah posting akan diberlakukan hingga 500 jumlah posting. Sesuatu yang jelas tidak mungkin bagi seseorang untuk melakukanya.
  7. Setelah menentukan jumlah poting pada halaman utama, KLIK "Simpan Setelan".
  8. Lihat hasilnya dengan membuka blog.

Dengan model baru ini, blog akan tampil seperti layaknya para blogger senior. Gitu, kan, Dul?!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

Antara Gubug, Gubhug dan Manusia

Gubug! Seperti itulah orang menyebutnya. Sebuah bangunan tempat tinggal yang pada akhirnya orang jawa menyebut gubug sebagai ungkapan indah untuk merendahkan hati. "Monggo, kula aturi pinarak wonten gubug kawulo!", begitulah orang jawa yang tahu sopan santun dan pandai merendah menyampaikan ucapan salam kepada seseorang untuk mau singgah ke rumahnya. Dalam bahasa Indonesia kira-kira seperti ini : "Mari, silahkan mampir ke rumah (gubug) saya!" Menjadi sangat indah tatkala dibarengi dengan hati yang tulus.

Seperti saya ungkapkan di atas, gubug sesungguhnya merupakan tempat tinggal "terburuk" untuk manusia. Dibuat apa adanya dari beberapa batang kayu dan bambu dengan atap daun-daunan atau bila uang mencukupi mereka belikan plastik. Pada saat ini kata gubug hanya diperuntukkan bagi sebuah bangunan di kebun atau

Panduan Terlengkap Membuat Email di Yahoo: Lanjutkan Ikuti Panduan dan Tutorial BloGGeR


Setelah Punya Email Segera buat blog dan ikuti panduan BloGGeR.

Punya email tidak harus cuma satu. Setelah punya di Gmail, kita juga bisa buat lagi di Yahoo-mail. Siapa tahu kamu penyuka "poker" on line, dengan banyak email berarti kamu bisa nambah account lagi buat "moker". Kayak temanku Paijo, tuh. Masak punya email nyampe dua puluh sembilan. Semua hanya gara-gara si racun "poker". Gila, atuh si paijo, kata teman-temanku!

Cara Membuat Email di Yahoo :

  1. Ketik http://login.yahoo.com di adress bar kemudian KLIK ENTER. Atau daripada jarimu patah, KLIK saja di samping ini Yahoo-Mail.
  2. KLIK "Sign Up" di ujung kanan bawah.
  3. Isi lembar registrasi secara lengkap. Klo mau contoh pengisiannya, arahkan cursor di atas link di bawah ini (klik juga bisa) :
    Contoh isi registrasi di Yahoo
  4. Pengisian halaman registrasi hampir sama dengan di Gmail (bisa lihat di posting sebelumnya), hanya untuk di yahoo-mail pertanyaan dan jawaban harus di buat 2 kali.
    • Pertanyaan bisa pilih yang tersedia atau di buat sendiri.
    • Saat mengisi karakter yang disediakan oleh yahoo, (type the code shown)apabila karakter yang tersedia susah di baca, bisa KLIK Try a new code, supaya Kodenya di ganti.
    • Password atau kode rahasia minimal 8 karakter dan sebaiknya diisi dengan paduan huruf dan angka.
    • Setelah semua pengisian lengkap, sebaiknya data formulir registrasi di copy dan disimpan untuk jaga-jaga apabila suatu waktu lupa kode atau alamat emailnya.
    • Setelah semua di isi dan dicek ulang KLIK "Create My Account"
    • Pada langkah terakhir ini sering kita harus ulangi hingga 3 kali. Itu biasa dan bukan masalah karena merupakan kebijakan dari pihak Yahoo, terkecuali bila terjadi terus menerus harus di lakukan cek ulang pada pengisian halaman registrasi. Kemungkina ada kesalahan pengisian.
  5. Pada tahap ini akan ditunjukkan sebagian isi registrasi kamu. Copy paste dan simpan untuk dokumentasi.
  6. KLIK "Continue" untuk melihat email anda. Selesai !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

 
GR | Edited by | gubhug reyot