Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Cara Membuat Tabel dengan HTML

Ditulis oleh Unknown pada hari Senin, Desember 24, 2012 2 komentar
Label: ,

Kawan semua tahukan apa itu tabel ? Jika tidak, sungguh terlalu ^_^
Namun yang dimaksud disini adalah tabel yang dibuat dengan HTML (hyper text markup language).
Langsung saja kita lihat contoh penulisan data diri dengan menggunakan tabel di bawah :

Nama : Rii Ramadhan
Hobi: Blogging

Itu hanyalah contoh kecil penulisan yang menggunakan tabel, sebenarnya jika anda paham pembuatannya maka tabel tersebut akan jauh lebih menarik.
Harus anda pahami tag inti penyusun sebuah tabel itu ialah :
  • <table>  berfungsi sebagai tag pembuka tabel 
  • <tr> berfungsi sebagai tag untuk membuat baris dalam tabel karena tr sendiri merupakan singkatan dari (Table rows)
  • <td> berfungsi untuk membuat kolom, dan tag ini berada dalam tag tr
Agar anda lebih memahami tentang pembuatan tabel dalam html, silahkan perhatikan contoh tabel di bawah berikut kode HTML nya :

Ini tabel dengan atribut colspan=2
Ini baris 2 kolom 1 Ini baris 2 kolom 2
Ini kodenya :
<table align="center" border="1">
<tr>
<td align="center" colspan="2">Ini tabel dengan atribut colspan=2</td>
</tr>
<tr>
<td>Ini baris 2 kolom 1</td>
<td>Ini baris 2 kolom 2</td>
</tr>
</table>
atribut colspan=2 itu artinya untuk menyatukan 2 buah kolom menjadi 1, atau yang kita kenal dengan istilah Merge jika dalam Ms.Excel.

Loh ko lebar ya ?
bagaimana agar lebar nya sesuai yang kita kehendaki ?
Tinggal tambahkan saja atribut "width" di dalam tag table dan berikan nilainya bisa dalam satuan % atau pixel.

Contohnya saya akan buat tabel tersebut memiliki lebar 300px maka hasilnya seperti ini :

Ini tabel dengan atribut colspan=2
Ini baris 2 kolom 1 Ini baris 2 kolom 2
Ini kodenya :
<table align="center" border="1" width="300px">
<tr>
<td align="center" colspan="2">Ini tabel dengan atribut colspan=2</td>
</tr>
<tr>
<td>Ini baris 2 kolom 1</td>
<td>Ini baris 2 kolom 2</td>
</tr>
</table>

Lalu anda bisa mengkreasikannya dengan memberikan warna ataupun mengganti jenis huruf seperti tabel yang saya buat di bawah ini :
Baris 1 kolom 1 baris 1 kolom 2 baris 1 kolom 3
baris 2 kolom 1 baris 2 kolom 2baris 2 kolom 3
baris 3 kolom 1baris 3 kolom 2baris 3 kolom 3

Ini kodenya :
<table align="center" border="2px" cellspacing="0">
<tr align="center" bgcolor="blue" style="font-family: virtual dj; font-weight: normal; text-transform: uppercase;">
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr align="center">
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
<tr align="center">
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
</tr>
</table>

Nah, apakah anda sudah mengerti tentang pembuatan tabel dengan html ?
Jika masih bingung silahkan untuk bertanya ^_^

Cara Membuat Breadcrumb yang SEO

Ditulis oleh Unknown pada hari Kamis, Juni 14, 2012 0 komentar
Label:

Ada banyak trik untuk membuat blog kita menjadi blog yang baik di serp google, diantaranya adalah dengan membuat navigasi breadcrumb, selain akan memperindah blog kita, tujuan utama dari pembuatan navigasi breadcrumb ini adalah untuk meningkatkan kualitas blog kita di serp google.
Jika anda belum tahu, ini contoh navigasi breadcrumb di Cyber Blog :

Contoh Navigari Breadcrumb

Jika sobat pengen membuatnya, caranya mudah saja, pertama anda cari kode <b:includable id='post' var='post'> pada Edit Html setelah ketemu lalu anda copy paste kode di bawah ini tepat di bawahnya :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Posisi kamu  &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
Setelah itu kemudian sobat cari kode ]]></b:skin> setelah ketemu, kemudian copy paste kode di bawah ini tepat diatasnya :
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Terakhir, sobat simpan template.
Selesai..
Jika sobat ingin copy paste posting ini, tolong sertakan juga link sumbernya :)

Cara Membuat Blog Agar Tidak Bisa di Copy Paste

Ditulis oleh Unknown pada hari Jumat, Mei 04, 2012 5 komentar
Label:

Halo sobat Cyber Blog,,
Membuat suatu tulisan di blog ataupun website adalah suatu kebanggan, apalagi jika banyak orang yang mengamalkannya, senang sekali rasanya, namun lain halnya jika ada orang yang sembarangan copy paste artikel kita, tentu kita akan sangat merasa kesal apalagi mereka memposting kembali artikel yang kita buat tanpa mencantumkan sumbernya
Banyak trik yang berserakan di dunia maya tentang cara membuat blog agar tidak di bisa di copypaste, namun kebanyakan hanya sekedar membuat script yang berisi pesan semacam,, jangan klik kanan, dsb. Cara ini tentu tidak ampuh karena setelah kita centang kotak kecil yang bertuliskan prevent this message, artikel atau tulisan dapat di copypaste dengan leluasa. 
Ada satu trik sederhan yang mungkin cukup aman untuk menjaga blog kawan semua agar tidak bisa di copy, cara kerjanya pengunjung tidak akan bisa mengklik kanan, namun tidak muncul pesan apa-apa.

Nah, tanpa basa-basi lagi mendingan kita langsung praktik aja yuu....
  • Langkah pertama :
Anda login ke akun blogger anda, kemudian ke menu rancangan/template, kemudian masuk ke bagian edit html, jangan lupa centang kotak kecil expand template widgets.
  • Langkah kedua :
Cari kode <body> , setelah ketemu copypaste kode di bawah ini tepat di bawahnya :

<script language='JavaScript1.2'>

//Disable select-text script (IE4+, NS6+)- By Andy Scott

//Exclusive permission granted to Dynamic Drive to feature script

//Visit http://www.dynamicdrive.com for this script

function disableselect(e){

return false

}

function reEnable(){

return true

}

//if IE4+

document.onselectstart=new Function (&quot;return false&quot;)

//if NS6

if (window.sidebar){

document.onmousedown=disableselect

document.onclick=reEnable

}

</script>

<script language='JavaScript'>curPage=1;

document.oncontextmenu = function(){return false}

if(document.layers) {

window.captureEvents(Event.MOUSEDOWN);

window.onmousedown = function(e){

if(e.target==document)return false;

}

}

else {

document.onmousedown = function(){return false}

}</script>
  • Terakhir simpan template anda.
Ini hanyalah salah satu trik yang bisa sobat cyber coba, semoga bermanfaat yaa..

Tool Warna

Ditulis oleh Unknown pada hari Jumat, Mei 04, 2012 4 komentar
Label:

Bagi sobat semua yang sedang membutuhkan kode warna, silahkan bisa menggunakan tool di bawah ini..Caranya tinggal menggunakan mouse anda pada warna yang diinginkan.




Ataupun bisa mengambil kode dari warna-warna yang sudah dibuatkan kodenya di bawah ini :
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000
#465584
#EEF2F7
#3A4F6C
#00000D
#434951
#555555
#777777
#DFE6EF
#345487
#F5F9FD
#3860BB
#BCD0ED
#C2CFDF
#F0F5FA
#D1DCEB
#0000033
#900000
#CCE9FD
#E4EAF2
#4C77B6
#DFE6EF
#EEF2F7
#FAFCFE
#FFFFFF
Semoga ini dapat bermanfaat bagi sobat semua yaa,,,,Salam blogger.

Cara Mengatur Lebar Blog Yang Benar

Ditulis oleh Unknown pada hari Jumat, Mei 04, 2012 5 komentar
Label:

Assalamualaikum.Wr. wb.
Cara mengatur lebar blog mungkin sudah tidak asing lagi untuk para master blogger, lain halnya dengan para pemula yang baru kenal dengan istilah edit html.
Permasalahan yang paling sering terjadi adalah ketika para pemula membuat sebuah blog dan kemudian mengkonfigurasi ulang dengan tujuan agar blognya lebih menarik, tanpa disadari ternyata ketika blognya dibuka menggunakan notebook yang sudah tentu layar monitornya rata-rata 14inch ternyata tampilannya menjadi berantakan, karena terlalu lebar, bahkan sampai ada yang terpotong. Lalu bagaimana solusinya agar blog kita ketika dibuka oleh layar monitor yang memiliki resolusi berapapun tampilannya tetap menyesuaikan dan tidak berantakan ?

Solusinya adalah hanya dengan mengganti ukurannya dengan satuan persen (%).

Kita langsung praktik yuu--->>
1. Atur Outer-Wrapper dengan satuan %
(outer wrapper adalah untuk mengatur keseluruhan blog kita, terutama adalah lebarnya)
Saya contohkan pengaturan outer wrapper blog saya :
#outer-wrapper {
width:80%;
text-align:justify;border:0.5px solid;border-radius:10px;
margin:0 auto;
padding:0
}
Sekarang perhatikan angka warna merah, dengan memberi angka 80% maka lebar keseluruhan blog saya akan mengikuti ukuran layar sebesar 80%, dimanapun anda membukanya maka blog saya tidak akan melebihi batas monitor.

2. Setelah kita atur outer-wrapper, selanjutnya kita atur lebar main-wrapper. 
Main wrapper adalah bagian untuk mengkonfigurasi ukuran bagian daerah posting blog.
Saya contohkan pengaturan nya seperti ini :
#main-wrapper {
width:65%;
float:left;
word-wrap:break-word;
overflow:hidden;
text-shadow:0 1px 0 #fff;font-family: "Comic Sans MS", cursive;
border-right:0.5px solid #000;border-bottom:0.5px solid #000;
margin:0;
padding:10px
}
Perhatikan angka berwarna merah, jadi maksudnya ukuran lebar main-wrapper anda 65% dari ukuran outer-wrapper.
3. Selanjutnya kita mengatur ukuran sidebar.
Sidebar adalah untuk mengkonfigurasi ukuran yang berisi gadget, dsb. Untuk contohnya anda lihat di bagian blog ini yang sebelah kanan, itulah sidebar
Saya beri contoh pengaturannya seperti ini :

#sidebar-wrapper {
width:28%;
float:right;
word-wrap:break-word;text-align:left;
overflow:hidden;
text-shadow:0 0px 0 #fff;
-khtml-opacity:0.0;border-bottom:0.5px solid #000;border-left:0.5px solid #000;
margin:0;
padding:5px
}
Sekarang perhatikan lagi angka warna merah di atas, jadi ukuran sidebar anda 28% dari lebar outer-wrapper.

Saya kira penjelasan ini sudah cukup bagi anda yang ingin mengatur lebar blognya agar tidak acak-acakan dan menjadi lebih rapih, selanjutnya untuk mengatur lebar header juga gunakan skala persen, jangan menggunakan fx (fixel).

Jika sobat cyber, masih merasa bingung saya bersedia untuk membantunya ^-^. Silahkan ditanyakan saja melalui form komentar.
Langganan: Postingan (Atom)