Cara pembuatan Roll Menu
Contoh-contoh Bentuk Overflow
Overflow hidden
Overflow scroll
Cara Penulisan kode HTML Overflow
D E M O
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
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.
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 :
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.
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 :
- 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?
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).
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
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
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 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 «