BOLEH ASYIK: Html Css

Tampilkan postingan dengan label Html Css. Tampilkan semua postingan

Minggu, 06 Februari 2011

Membuat Text Area

Apa itu text area? Definisinya sudah sangat jelas, biar lebih jelas lagi saya paparkan definisi singkat dan fungsi dari penggunaan text area pada blogger. Text area adalah tempat yang disiapkan untuk menyimpan tulisan dengan membentuk area. Biasanya text area ini digunakan untuk menyimpan kode HTML atau bisa juga text lain dengan tujuan untuk mempemudah pengunjung menyalin apa yang ada di dalam text area tersebut. Contoh penggunaan text area biasanya sebagai tempat kode link banner yang siap untuk disalin oleh pengunjung, atau bisa juga pesan admin kepada pengunjung.

Berikut kode untuk membuat text area:

<p align="center"><textarea name="code" rows="5" cols="20">masukkan text atau kode HTML anda di sini</textarea></p>

rows="5" /*Menunjukkan tinggi text area. /*
cols="20" /*Menunjukkan lebar text area. /*

Contoh penerapannya langsung:

<p align="center"><textarea name="code" rows="5" cols="20"><a href="http://bolehasyik.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1rPKBgf9_Udpd7hwBQ_US5RgjP1qKF6K71CMVmImJDeNVLwGFA0VIzoibvxP3lZUNIRk-KcG9vCQUWXEgBhezK6_xR8-Cry1VRm9OeuieU99MghPCdM3cJZETRJI2ybsCd2xHpygth8/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></textarea></p>

Maka hasilnya menjadi:

Ada cara lain yang lebih memudahkan pengunjung untuk mendapatkan kode HTML yang disediakan oleh kita yaitu dengan memberikan variasi penambahan tombol Select All atau Highlight All. Hanya ikuti langkah mudah berikut untuk mengubah kode text area dengan Select All atau Highlight All.

<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55">masukkan text atau kode HTML anda di sini</textarea></p></form>

<div align="center"> /*Menunjukkan posisi tombol Select All./*
value="Select All" /*Tulisan yang akan muncul di tombol dan dapat diganti terserah anda seperti Highlight All. /*

Contoh penerapannya langsung:

<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55"><a href="http://bolehasyik.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1rPKBgf9_Udpd7hwBQ_US5RgjP1qKF6K71CMVmImJDeNVLwGFA0VIzoibvxP3lZUNIRk-KcG9vCQUWXEgBhezK6_xR8-Cry1VRm9OeuieU99MghPCdM3cJZETRJI2ybsCd2xHpygth8/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></textarea></p></form>

Maka hasilnya menjadi:

Bagaimana? Siap untuk bertukar link menggunakan text area ini dengan sahabat blogger lain. Selamat mencoba.

Jumat, 28 Januari 2011

Cara Mudah Membuat Menu Navigasi Horizontal Ajaib

Apa itu tombol navigasi?

Tombol navigasi adalah tombol yang digunakan oleh pembaca blog untuk memudahkan mereka dalam menjamah dan mendapatkan berbagai informasi yang tersedia pada blog tersebut. Tombol navigasi ini biasanya berada di atas header blog atau di bawahnya, atau biasa juga pada bagian sidebar blog yang biasa dikenal dengan sebutan Menu Navigasi Vertical. Pada postingan terdahulu telah dijelaskan bagaimana cara membuat navigasi juga, yaitu navigasi breadcrumb tapi fungsi dan peletakan navigasi ini berbeda dengan navigasi yang akan saya jelaskan sekarang. Navigasi Breadcrumb tersebut terletak di atas posting blog, jika anda lupa atau hanya sekedar ingin mengetahuinya lebih lanjut apa itu navigasi breadcrumb bisa dibaca kembali di Cara Membuat Menu Navigasi Breadcrumb.

Baiklah kita fokus kembali pada topic utama judul postingan ini. Berikut langkah-langkah yang harus anda ikuti untuk membuat menu navigasi horizontal pada blogger:

1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Page Element, lalu Add a Gadget.

2. Masukkan kode berikut pada HTML/Javascript gadget anda:

Hasilnya menjadi:

Anda dapat memberikan variasi warna dan pengaturan kode CSS lain agar terlihat lebih indah seperti:

Berikut keterangan kode penting yang harus anda ganti:

width="620" height="28" /*Sesuaikan dengan ukuran lebar main-wrapper blog anda dan ubah juga tinggi menu tab sesuai selera anda. /*

href='#'"> <a href="#" /*Tanda "#" ini anda ubah sesuai dengan url blog yang anda inginkan. /*

Pengaturan warna saya rasa anda sudah mngerti, lihat saja kata color pada kode CSS. Jika anda ingin dengan mudah menentukan warna yang anda inginkan, saya sudah membuatkannya kode warna slider tab. Silakan check kode warna yang anda inginkan di sini atau pilihan fasilitas kode warna lainnya melalui label warna berdasarkan kategori di sini.

Demikian sharing tutorial cara mudah membuat menu navigasi horizontal pada blogger. Ohya, apakah anda masih bingung mengapa judul postingan ini diganti dan dimana letak keajaiban menu navigasi horizontalnya? Coba anda hover atau sorot link menu pada tab navigasi, seolah-olah warna link tersebut menyala dan berubah warna setelah kita sentuh dengan mouse arrow kita. Mungkin ini hanya berlaku di postingan ini, semoga juga berlaku pada gadget blogger anda ketika mencobanya. Akhirnya misteri blogger pemula mengenai tutorial membuat menu navigasi horizontal telah terpecahkan dengan segala keajaiban yang ada di sini.

Selamat mencoba dan semoga anda puas dengan hasil yang anda buat.

Kamis, 27 Januari 2011

Cara Menghilangkan Tanda Obeng Blogger

menghilangkan tanda obeng dan tang widget blogger

Tanda obeng atau tang ini merupakan salah satu fasilitas yang diberikan oleh Blogger untuk mempercepat proses pengeditan. Dengan tersedianya tanda obeng atau tang yang muncul pada blog ini sebenarnya sangat berguna karena tidak semua pengeditan dapat dilakukan pada menu Edit HTML Blogger. Hal ini juga sebenarnya bukanlah masalah, karena tanda tersebut hanya akan muncul pada saat sedang login di account blog. Apabila sign out dari account, maka tanda itu hilang dan tidak akan muncul kembali. Mungkin bagi sebagian blogger hal ini tidak begitu mengganggu karena dengan adanya icon obeng dan tang justru memudahkan kita untuk mempercepat pengeditan tapi jika anda bersikeras tetap ingin menghilangkannya tidak jadi persoalan karena sekarang anda bisa ikuti langkah berikut ini untuk menghilangkan tanda obeng dan tang di blogger:

Untuk menghilangkan tanda obeng dan tang tersebut, maka ada beberapa cara yang akan saya jelaskan, yaitu:
1. Dengan menghilangkan tanda centang pada setting posting blog yang disediakan Blogger.

Berikut petunjuknya:
Log in account Blogger, lalu pilih Design > Page Element, kemudian klik Edit pada contoh kolom widget Blog Posts, seperti yang terlihat pada gambar di atas:

Setelah Anda klik Edit, maka akan terbuka halaman baru dan hasilnya akan muncul seperti gambar di atas. Anda hanya perlu menghilangkan tanda centang pada menu Show Quick Editing. Setelah Anda hilangkan tanda centang pada menu Tunjukkan Pengeditan Cepat, lalu simpan.

Note: Cara ini kurang efektif karena jarang berhasil dan anda dapat gunakan cara lain untuk menghilangkan tanda ini secara permanen namun bisa dimunculkan kembali bila Anda menginginkannya.

2. Memasukkan script atau kode html pada menu Edit HTML untuk menghilangkan tanda obeng atau tang blogger. Caranya adalah dengan mengikuti langkah-langkah sebagai berikut:

Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, dan carilah kode berikut ]]></b:skin>. Tambahkan kode berikut tepat diatas kode yang telah disebutkan tadi, setelah ditambahkan langsun Save Template dan lihatlah hasilnya.

.quickedit {display:none;}

Note: Bila anda ingin menampilkan kembali tanda obeng dan tang tersebut pada blog, anda hanya perlu menghapus kode html diatas.

Lakukan langkah-langkah di atas dengan benar sesuai dengan petunjuk yang ada dan lihat hasilnya, kini tanda obeng atau tang dapat dihilangkan. Selamat mencoba.

Rabu, 26 Januari 2011

Tahun Copyright Berganti Otomatis

membuat tahun copyright blog berganti otomatis

Ketika membuat sebuah website atau juga blog, biasanya di bagian footer ditampilkan Copyright ©, disertai tahun pertama kali web tersebut mulai online sampai tahun saat sekarang. Memang keberadaan copyright di bagian footer ini sering diabaikan namun paling tidak kita sebagai pemilik blog sudah berusaha untuk melindungi hasil karya ciptaannya. Dalam dunia blog tentu kita tidak menginginkan apabila hasil kerja keras kita disalin kembali tanpa persetujuan dari kita. Dengan memasang copyright di bagian footer setidaknya kita mempunyai hak atas kepemilikan konten blog. Dan bagi siapa saja yang ingin memilikinya tentu harus meminta persetujuan dari pemiliknya. Bagi yang belum tau untuk mengganti tahun copyright secara otomatis pada tutorial sharing ini, mungkin setiap berganti tahun akan mengubahnya secara manual. Kalo seperti itu, meskipun setahun sekali tetap saja agak merepotkan. Padahal kalo bisa membuatnya secara otomatis kenapa tidak dicoba untuk membuatnya berganti sacara otomatis.

Biasanya Copyright yang terpasang di bagian footer memiliki susunan seperti ini:

Angka 2010 menandakan blog tersebut mulai diterbitkan.

Susunan seperti di atas tidaklah mutlak, tetapi masih bisa dikreasikan dengan tahun pada saat sekarang. Sehingga bentuk tampilannya menjadi:

Atau pula dikreasikan menjadi:

Angka 2010 akan secara otomatis berganti seiring dengan pergantian tahun. Berikut ini script yang berfungsi untuk membuat tahun pada copyright menjadi berganti otomatis:

<script language="JavaScript">

    </script> <a href="http://bolehasyik.blogspot.com"> Misteri Blogger Pemula </a></center>

Jika anda hendak membuatnya, masukkan script di atas di bagian footer blog anda atau gadget HTML/Javascript. Silakan ganti angka 2010 dengan tahun pertama kali website atau blog dibuat, sertakan nama dan alamat URL web atau blog anda.

Rabu, 12 Januari 2011

Menambahkan Iklan Melayang

Iklan ini cukup unik dan menarik karena dapat bergerak melayang ke atas dan ke bawah mengikuti pergerakan kursor. Bagi pemilik situs yang sedang monetasi situs-situsnya tentu kode yang digunakan untuk membuat iklan melayang ini sangat berguna karena sedikit memaksa pengunjung blog melakukan klik pada iklan yang disediakannya. Mungkin bagi sebagian pengunjung ada yang merasa risih dan terganggu akan kehadiran penerapan kode ini, tapi kembali pada hak pemilik situs apakah tertarik menerapkan kode ini atau tidak karena tidak semua pengunjung merasa terganggu, apalagi jika pengunjung tersebut benar-benar membutuhkan informasi yang diinginkannya dan informasi tersebut dianggap berharga.

Langsung saja ikuti petunjuk singkat di bawah ini kawan, berikut praktek menambahkan iklan melayang di blogger:
1. Seperti biasa masuk ke dalam kustomisasi blog. Klik tab Design (Tata Letak) > Page Element (Elemen Halaman).
2. Tambahkan gadget HTML/JavaScript, lalu masukkan kode iklan di bawah ini:

Masukan kode iklan atau gambar di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

3. Klik tombol Save (Simpan) dan apa yang terjadi?
4. Lihat hasilnya, maka akan muncul iklan melayang di bagian atas. Klik link Close sebanyak dua kali dan iklanpun akan hilang.
5. Selain iklan teks, anda juga dapat memasukkan iklan berupa gambar.
6. Selamat mencoba kawan.

Minggu, 26 Desember 2010

Sekilas Tentang HTML

HTML adalah singkatan dari Hyper Text Markup Language. Fungsi HTML di dalam sebuah dokumen world wide web (www), adalah untuk membuat dan mengatur struktur tampilan dokumen tersebut agar bisa dibaca untuk dipublikasikan dan juga untuk menampilkan link atau sambungan ke halaman web lain yang ada di internet dan semua nama file dokumen HTML mempunyai ekstensi html atau htm. Dalam sebuah dokumen HTML anda terdapat tags. Tags adalah penempatan atau nilai format text yang memerintahkan browser untuk menampilkan sebuah dokumen HTML. Saya hanya akan menjelaskan beberapa sintax penting saja sebagai dasar pengetahuan anda untuk membuat template blog. Untuk membuat HTML, anda hanya cukup menggunakan notepad, meskipun sebenarnya sudah banyak software yang memudahkan kita dalam membuat dokumen HTML ini.

Sintax Dasar HTML

Berikut adalah contoh sebuah struktur dokumen HTML sederhana, tulislah contoh berikut menggunakan notepad kemudian simpanlah dalam format .html dan kemudian buka dalam browser internet favourite anda:

<html>
             <head>
<title>Test HTML</title>

   </head>
<body>
                                       Ini hanya test dokumen HTML pertamaku
</body>
</html>

Maka hasilnya adalah:

Skrip diatas hanya file HTML yang sangat sederhana. Setiap tag HTML selalu diawali tag pembuka dan diakhiri dengan tag penutup. Pada contoh tadi misalnya untuk tag <head>, maka harus diakhiri pula dengan tag </head>. Coba perhatikan terdapat tanda "/" pada setiap tag penutup. Biasanya pula dapat ditambahkan meta tag content di antara <head> dan </head> seperti yang telah dijelaskan pada pembahasan sebelumnya "Cara Menambahkan Meta Tag".

URLs

URL merupakan singkatan dari Uniform Resource Locator yang menginformasikan lokasi sebuah file pada www dan juga mengidentifikasikan layanan internet, seperti FTP, www, yang menangani file-file tersebut. Istilah ini juga dipakai untuk menunjukkan suatu tempat yang berisikan informasi di Internet seperti contoh di bawah:

Keterangan:
Protocol adalah metode transfer data dari satu komputer ke komputer lain, antara komputer client dan komputer server.

HTTP (Hyper Text Transfer Protocol)

Gopher

FTP

News

Network location adalah mesin tempat data tersebut berada.
Path adalah dokumen yang menunjukkan di direktori mana dokumen tersebut berada.
File name adalah nama file html yang berada dalam direktori web server.

Minggu, 10 Oktober 2010

Auto Hidden Chat Box

Ok guys, pada kesempatan yang berbahagia ini di tengah kesibukan akademic, saya sempatkan posting tutorial blogger untuk pemula. Sebuah penerapan kode HTML yang dapat digunakan untuk menghemat ruang blog kita. Kode tersebut digunakan untuk menyembunyikan berbagai widget namun pada tutorial ini saya contohkan aplikasi chatting untuk disembunyikan. Bagi para sobat blogger yang merasa sumpek dengan ruangan blog yang penuh dengan berbagai macam perkakas blog bisa gunakan penerapan ini di blog sobat. Berikut penampakannya:

Live Demo Auto Hidden Chat BoxKlik untuk melihat sreenshotnya

Bagaimana? Menarik bukan?

Simak tutorial berikut:

Saya bagi dalam 2 tipe penempatan chat box, sebelah kiri dan kanan.

Tampilan Widget di sebelah Kanan:

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}

* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">

function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}

function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>

<div id="hcl">
<div class="hclcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://bolehasyik.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>
<span style="float:right">
<a href="javascript:showHidehcl()">

[close]
</a></span>
</div>
</div>

<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">

var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

Tampilan Widget di sebelah Kiri:

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}

* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>

<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}

function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>

<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://bolehasyik.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>

<span style="float:right">
<a href="javascript:showHidehcr()">

[close]

</a></span>
</div>
</div>
</div>

<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Note:

#hcr {
position:fixed; /* Menunjukkan bahwa posisi widget tetap tidak bergeser dan sobat bisa ganti menjadi posisi absolute */

#hcr {
position:absolute; /* Menunjukkan bahwa posisi widget tetap dapat bergeser dengan menggeser scroll */

top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa kalian ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left; border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (sebaiknya tidak perlu diganti jika kalian mengedit kode lain pada style) */
padding:10px;
}

Alhamdulillah, semoga dengan tutorial yang sesederhana ini dapat bermanfaat. Selamat mencoba! Ohya, pilihan model dan warna tab pemicunya dapat diubah sendiri:

http://img202.imageshack.us/img202/8018/copyofcbblue.png

http://img714.imageshack.us/img714/6969/cbblue.png

http://img43.imageshack.us/img43/7977/copy3ofcbblue.png

http://img571.imageshack.us/img571/2107/copy2ofcbblue.png

Memodifikasi Tampilan NavBar

Navbar pada blogger memang dapat diubah yaitu dengan mengganti design dan juga warnanya secara default. Akan tetapi guys, sebaiknya sobat memilih navbar sesuai dengan warna dan tampilan design blog yang sobat miliki. Okay, saya akan jelaskan terlebih dahulu praktek mengganti tampilan navbar blogger:

1. Pastikan sobat sudah masuk ke dalam bagian dashboard blogger, setelah itu click tab Design, lalu Page Element.

2. Pada bagian navbar click link Edit.

3. Maka akan muncul window baru. Pilihlah salah satu warna yang cocok dengan design blog sobat. Click tombol Save. Pada contoh kali ini saya mengganti navbar transparent light.

Selanjutnya saya akan jelaskan bagaimana menghilangkan navbar. Meskipun navbar dapat membantu kita untuk menjelajahi blog, akan tetapi sebagian besar para blogger merasa risih termasuk saya jugalah lebih memilih untuk menyembunyikan navbar tersebut. Tujuannya untuk membuat blog tersebut benar-benar terlihat sedikit lebih unik biar tidak terlihat seperti blog yang dibuat dengan blogger . Syukur hal tersebut tidak menjadi masalah bagi pihak blogger untuk menghilangkan sedikit eksistensinya. Berikut penjelasannya:

1. Ya seperti biasa masuk ke dalam design blogger lalu click tab Edit HTML.

2. Masukkan kode berwarna merah seperti contoh di bawah ini tepat di bawah keterangan template blog atau setelah kode </title>:

-----------------------------------------------
Blogger Template Style
Name: Awesome Inc.
Designer: Tina Chen
URL: tinachen.org
-----------------------------------------------
*/
#navbar-iframe {
display: none !important;
}

3. Simpan template blog yang sudah diedit.

4. Jika kode berhasil disimpan maka akan muncul pesan perubahan telah disimpan dan click link view blog.

5. Perhatikan bahwa navbar blog sobat berhasil disingkirkan dari halaman blog.

6. Selamat mencoba.