Cara pembuatan Roll Menu
Contoh-contoh Bentuk Overflow
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 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
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
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
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. 
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 :
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
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 :
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 «
Scroller bar sederhana.
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 :
Javascript Show Image on Mouseover
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:
D E M O
Daftar Nama Warna dan Kode Warna :

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 :
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 :
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
1. Box sederhana :
Contoh penggunaan atribut style :
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>
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode <head>.
- Copy dan paste-kan link icon di bawah kode <head>
- Klik Simpan Template (Save Template).
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.
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode <head> atau </head>.
- Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
- Klik Simpan Template (Save Template).
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode <head> atau </head>.
- Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
- Klik Simpan Template (Save Template).
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode <head> atau </head>.
- Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
- Klik Simpan Template (Save Template).
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode <head> atau </head>.
- Copy dan paste-kan javascript di bawah kode <head> atau di atas kode </head>
- Klik Simpan Template (Save Template).
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Klik Download Template Lengkap (Download Full Template) » Proses Backup template.
- Simpan file template di folder PC.
- Cari kode syntax body.
- Lakukan perubahan pada syntax body sesuai panduan di bawah.
- Klik Simpan Template (Save Template).
| 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 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 :
- Menggunakan Teks --> contoh : black, green, blue, magenta, darkgreen, lightyellow, dst.
- Menggunakan Angka dan Huruf
contoh : #fff, #000, #ffeeff, #fd0000, #5fa54c, dst.
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!
Sebuah demo di bawah ini bisa sebagai contoh bentuk hover link yang coba kita buat.
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 :
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.- Adobe Photoshop : Buka Adobe Photoshop.
- File Gambar : Ambil file gambar yang akan dipotong dengan cara :
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
Cara untuk menyalin gambar/photo/teks menggunakan Adobe Photoshop :
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?
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




| 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?
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.
Saat upload image di halaman posting, 4 pilihan posisi image diberikan agar image dapat diletakkan dalam beberapa posisi berbeda.
- Image di kiri (left).
- Image di tengah (centre).
- Image di kanan (right).
- Image di tak satupun (none).
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.
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 «

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 «
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
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:
- KODE CSS (diletakkan di bagian head).
- KODE HTML (di letakkan di bagian body), dan
- KODE berupa script yang kita kenal sebagai javascript (bisa di bagian head atau body).
Secara umum Elemen pembentuk template yang berupa dokumen HTML dinyatakan
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:
Langkah Penambahan Widget Baru dari Blodspot dan Penambahan Widget dari Luar Blogspot melalui "HTML/Javascript"
BLOGGER
Rancangan
Laman
GADGET
Lanjutkan dengan :
Javascript
KODE/Javascript
Save
Menambah widget menjadi satu dari sekian banyak kemungkinan yang dapat
Cara mengatur jumlah posting di halaman utama :
- Login ke Blogger.
- KLIK "Pengaturan"
- KLIK "Format"
- Lihat pada fitur
Panduan BloGGeR dan Tutorial BloGGeR (Halaman Posting):
"Tampilkan". - 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.
- 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.
- Setelah menentukan jumlah poting pada halaman utama, KLIK "Simpan Setelan".
- 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 «






.jpg)











