Friday, 12 August 2011

Membuat column widget dengan table

Sudah gak Asing lagi dengan  3 kolom pada footer, 2 kolom, bahkan 4 kolom, tentunya dengan tips yang beragam pula, Banyak jalan menuju Indonesia, banyak jalan pula untuk membuat kolom pada widget, salah satunya dengan memanfaatkan table yang pembahasannya sudah di singgung pada artikel HTML untuk Table

Seperti biasa saya hanya mengembangkan konsep dasar, untuk itulah mengapa saya sering memposting artikel yang sedikit aneh bahkan beda dari blogger blogger lainnya, karena saya hanya belajar bagaimana menemukan mencari sesuatu yang baru berdasarkan konsep yang sederhana alias konep dasar.
Masih ingat kan dengan pembahasan table, baik saya agak simpel saja sekarang,
 Konsep dasar:
<table border=”1″>
<tr><td>Kolom ke 1</td><td>Kolom Ke 2</td><td>Kolom ke 3</td></tr>
</table>
Hasilnya:
Kolom ke 1 Kolom Ke 2 Kolom ke 3
Berdasarkan konsep tadi mari kita aplikasikan ke dalam template blogger kita, di sini saya aplikasikan untuk membagi Header menjadi beberapa kolom?

Membuat Header Menjadi Tiga Kolom

Berikut contoh kodenya:
<table><tr><td><b:section
class=’header’ id=’header’ maxwidgets=’1′
showaddelement=’no’><b:widget id=’Header1′ locked=’true’
title=’Dunia Blogger (Header)’
type=’Header’/></b:section></td><td><b:section class=’header’ id=’heade2′ preferred=’yes’></b:section></td><td><b:section class=’header’ id=’heade3′ preferred=’yes’></b:section></td></tr></table>


Silahkan
Pelajari sendiri yah, sesuaikan blok warna pada kode di bawah sesuai
kode paling atas. besar kemungkinan penjelasannya kan ada pada kotak
komentar jadi berkomentar yah:)




Berikut Tampilan Layout yang akan Blogger Tampilkan:


Sedangkan Hasil pada Blognya kurang lebih pada gaambar di bawah ini:








Masing Masing Panah menunjukan Kolom,



Untuk modifikasi ukuran, warna, border, dan lainnya saya sarankan membaca artikel HTML untuk Table , dan Silahkan berexperiment dan jangan takut mencoba.
Posted by Unknown at 03:04 0 comments

Membersihkan template

Jumat, 12 Agustus 2011

Membersihkan Template Blogspot

Membersihkan template Ada sebagian blogger yang suka gonta-ganti template, hal ini memang dapat dilakukan di blogspot. Kadang kala karena sering ganti template ada yang error pada template yang baru atau ada yang tertinggal, walaupun sudah memakai template yang berbeda. Eror dapat terjadi karena berbagai hal seperti menambah widget atau gonta ganti template karena tujuan membuat blog memang untuk belajar dll.

Ini agak susah menjelaskannya, intinya membersihkan template lah gitu.

Cara membersihkan template sebelum diganti

2 langkah sederhana

1. Hapus kode diantara kode <body>....................</body>
2. Ganti template dengan template baru

Nah mudah bukan, sebagai catatan saja saya buatkan langkah langkah secara detail dibawah ini:

Langkah Pertama

1. Pergilah ke dasbor blogger
2. Tuju Rancangan
3. Klik "Edit HTML"
4. Download template lengkap untuk berjaga jaga
5. Beri tanda centang pada kotak "Expan template widget"
6. Cari kode <body> dan </body>
7. Hapus kode yang berada diantara kode tersebut
8. Save

Langkah kedua

Ganti template dengan template baru.
ini cara ganti template atau dengan cara edit template

Sekarang template blogspot anda sudah bersih dengan template baru. Anda dapat menambah widget atau gadget sesui dengan keperluan blog anda. Dengan membersihkan template terlebih dahulu diharapkan mengurangi error dikemudian hari. Demikian kawan semoga dapat membantu.
Posted by Unknown at 02:36 0 comments

Color pada table

HTML Color - bgcolor

The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page's main background (<body>) and in tables. For additional background styling, check out CSS Backgrounds. The HTML to change the background color is simple:

Syntax

<TAGNAME bgcolor="value"> Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.

HTML Code:

<body bgcolor="Silver">
<p>We set the background...</p>
</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.

HTML Code:

<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table>

<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>
<td>A blue colored table background using RGB values "rgb(0, 0, 255)".</td>
</tr></table>

Table Bgcolors:

A lime colored table background using color names.
A red colored table background using hexadecimal values "#FF0000".
A blue colored table background using RGB values "rgb(0, 0, 255)".

Adding Color to Table Rows & Columns

Here's a few common examples of "bgcolor" and font color

HTML Code:

<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>

Alternating Colors:

This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!

Background Color and Font Color Together!

Check out this "Scoreboard" we made with the use of font color and bgcolor!

HTML Code:

<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00" align="right">Green Bay</font></td>
<td><font color="#FFFFFF">13</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD" align="right">New England</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
</table>

Scoreboard:

Green Bay13
New England27

HTML Code:

<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
This paragraph tag has...
</font></p>
</td></tr>
</table>

Colored Paragraph:

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.
Posted by Unknown at 02:09 0 comments

Menukar bacground





Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<script type="text/javascript">
var background= new Array()
background="Masukkan URL background di sini"
document.write("<style>");
document.write("body {");
document.write(' background:url("' + background + '") repeat top center;');
document.write(" }");
document.write("</style>");
</script>

OK, Save.
DONE.
Posted by Unknown at 01:43 0 comments

Menambah side bar sebelah kiri

Rabu, 13 Juli 2011

Menambah Sidebar Sebelah Kiri

Menambah Sidebar Sebelah Kiri-Sebagian ada blogger yang ingin membuat blog mempunyai sidebar sebelah kiri dengan mengedit template sendiri. Mengedit template sendiri memang mengasikan. Kalau anda sudah sedikit mengerti dengan edit HTML tentu apa yang akan saya tulis dibawah ini mudah untuk dipahami.
Pada artikel yang lalu telah berhasil menambah sidebar di sebelah kanan kalau mau melihat silakan, agar lebih mudah memahami tutorial ini. Sedebar sebelah kiri dapat digunakan untuk menempatkan widget sesuka anda seperti label atau widget lainnya.

Cara Menambah Sidebar di Sebelah Kiri

Membuat sidebar sebelah kiri ini lebih tepatnya menambah elemen kiri, cara sangat mudah.

Masuk Dasbor Blogger

1. Pergilah ke dasbor blogger
2. Klik Rancangan, terus klik Edit HTML
3. Backup lah dulu template anda

Kode CSS

4. Cari kode CSS seperti ini.
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; 
  overflow: hidden;
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }

5. Hapus dan ganti dengan kode ini


#outer-wrapper {
  width: 910px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;
  }

#sidebar-wrapper {
  width: 200px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }

#sidebarkiri-wrapper {
  width:260px;
  float:left;
  word-wrap:break-word;
  overflow:hidden;
  }

Halaman Body

6. Cari kode seperti ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


7. Tambahkan kode ini diaatasnya
 
<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
</b:section>
</div>

Menjadi seperti ini

<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


8. Save
9. Selesai
Posted by Unknown at 01:30 0 comments

tukar background ikut suka



Dah nampak? haaa.. mende ni laa yang si hisyam ni tanya aku nak buat macamane..so, aku dengan murah hati pun nak ajar laa dia camna nak buat.. Actually bukan nak ajar dia je.. nak ajar semuaaa lah yg baca! *poyo*
Okay.. mula-mula... korang kena buat macam ni! 

1. Pergi ke Page Element > Add a Gadget > HTML/Javascript

2.Then. sila rajinkan diri copy code di bawah :

<center><script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>

<span style="font-style:italic;">aku taktau laa kaler kat bawah ni okay ke takk. sebab aku dah takde idea nak letak kaler ape. haha. so, korang click je laa kalau korang sakit mata tengok kaler hitam belegam aku ni. okbyeee</span>
<br/>

<br/>
<table border="2" width="200" height="20" bordercolor="black">
<tr bordercolor="#4BFE78"> <td
onclick="bgChange('#150517')" bgcolor="#150517">
<td
onclick="bgChange('#C9BE62')" bgcolor="#C9BE62">

<td
onclick="bgChange('#7D2252')" bgcolor="#7D2252">
<td
onclick="bgChange('#7E2217')" bgcolor="#7E2217">
<td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

<td
onclick="bgChange('#827839')" bgcolor="#827839">


</td
onclick="bgchange('#827839')"></td
onclick="bgchange('#d3d3d3')"></td
onclick="bgchange('#7e2217')"></td
onclick="bgchange('#7d2252')"></td
onclick="bgchange('#c9be62')"></td
onclick="bgchange('#150517')"></tr>
</table>

<div class='clear'></div></center>


Yang warna HIJAU tu korang tulis laa ape yg berkenan di hati. kalau taknak tulis pn takpe. just padam je. HAHA...tapi seelok2nya tulis lah. kang tetiba je orang pelik. tah mende ape tah tiba2 ade kotak2..

And, yang warna MERAH tu plak...warna yang korang pilih untuk tukar background korang tu...nak kod untuk warna-warna selain dari di atas bleh tgk dkat SINI. Ikut korang la nak pilih kaler ape yg bersesuaian dgn kondusi blog korang tu.  yang kod bawah dia tu korang jangan tanya aku. aku taktau. hahaa. kalau nak try..korang boleh explore sendiri la ea.. :) ecehhh.. then, bila da siap. SAVE macam biasa. dan tadaa! da siapp..
Posted by Unknown at 01:29 0 comments

Tuesday, 9 August 2011

Cara pasang menu scroll

CARA PASANG MENU SCROLL PADA BLOG

Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya  mengikut langkah dibawah ini.

1.Masuk ke dashboard,kemudian pilih design-->>Page elements
2.Kemudian pilih add gadget--->>HTML/JAVASCRIPT
Masukkan kod berikut:

<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 170px;">

masukkan teks atau apa apa kod yang hendak dipaparkan disini atau
</div>

Saiz kotak scroll boleh ditukar pada width(lebar)dan height)tinggi.


Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya  mengikut langkah dibawah ini.

Untuk membuat menu scroll :










kod nya adalah seperti dibawah ini : 

<div class="widget-content">
<ul style="width: 145px; height: 150px; background-color: #FFEAEA;  font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 2px ridge #52FF20; overflow: auto;">

<li><a href="http://teknikbuatblog.blogspot.com/2010/03/cara-membuat-blog.html" target="_blank">Cara membuat blog</a></li>
masukkan link seterusnya....

</li></ul></div>
  
Jika hendak letakkan nombor dihadapan senarai gantikan ul  kepada ol
ul akan memaparkan bullet dihadapan

Kod warna oren untuk kod scroll
Kod warna hijau adalah link artikel dan warna biru tajuk artikel yang hendak paparkan
Scroll akan muncul bila kandungan pada list melebihi ketinggian yang diletakkan pada kod(overflow:auto).Jadi ubahkan ketinggian pada height.

3.kemudian save untuk melihat hasilnya.

Posted by Unknown at 06:14 0 comments

Untung pantas

LinkWithin