TSJ

Selasa, 12 Mei 2009

Dasar-Dasar HTML(Hyper Text Mark up Language)

Sebuah Home Page, Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Bila para pembaca sekalian tidak senang mengutak-atik file HTML pada blogger,itu sebenarnya wajar, apalagi untuk yang pemula (saya juga). Sebab, kemungkinan takut terjadi apa-apa pada blognya (hayo ngaku?). Sebenarnya ga usah takut, Bahasa HTML berbeda dengan Bahasa Pemrogaman yang membutuhkan logika tingkat tinggi(walaupun bentuknya sama-sama rumit), HTML cuma butuh kreativitas kita, kok bisa gimana? Karena keindahan sebuah Home Page tergantung bagaimana kita memadukan warna dan bidang yang di bentuk dari Bahasa HTML tadi.. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR

kode :

<img src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif" border="0" height="17" width="90">

keterangan :

yang warna biru adalah lokasi gambar kamu.

height="17" width="90" adalah ukuran lebar dan tinggi gambar

hasil :

* CARA MEMBUAT LINK

Kode :

<a href="http://blog-triks.blogspot.com" >trik blog </a>

Keterangan :

Text warna biru adalah link yang dituju.

Tulisan "trik blog" adalah tulisan yang ditampilkan.

Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :

<a href="http://blog-triks.blogspot.com" target="_blank"><img src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif" border="0" height="17" width="90"> </a>

Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://trik-tips.blogspot.com"

Hasil :

trik blog (dibuka pada window yg sama)

(dibuka pada window baru)

* CARA MENGETENGAHKAN TEXT/GAMBAR

Kode :

<center>text</center>

Keterangan :

Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU

Kode :

 

Keterangan :

Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH

Kode :

text

text

text

Hasil :

Tebal

Miring

Garis Bawah

* MEMBERI WARNA TEXT

 text 

 text 

Keterangan :

Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.

Hasil :

Merah

biru

* KODE-KODE WARNA

Warna	Kode
	#000000
	#999999
	#FFFFFF
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#9900FF
	#FF6600

Kode2 warna selengkapnya bisa dilihat DISINI

* PENULISAN KARAKTER-KARAKTER KHUSUS

Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :

Karakter	Kode
>	>
<	<
&	&
"	"
(spasi)

Cara Membuat Menu Tab View

Unknown tips-trik No comments

Sobat blogger pastinya sudah tau yang dinamakan tabview, banyak sekali web page dan blog yang sudah menggunakan tabview/ tabmenu dalam blognya. Fungsi utamanya adalah untuk menghemat space yang ada di halaman web kita, dan membuat blog/web lebih terlihat rapi.
Tab view itu contohnya seperti ini, seperti yang saya gunakan pada blog saya :

Banyak Sekali kegunaan Tab view ini,bentuknya yang mungil nan imut ini bisa menampung berbagai contents yang yang sangat di perlukan dalam blog kita. Contohnya seperti punyaku yang ada disamping kanan itu,bisa dilihat sendiri.

Langsung Saja...

Beginilah cara untuk membuat menu tab view tersebut

1. PErtama anda harus Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width:  90px; /* Lebar Menu Utama Atas */  text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Yang perlu di perhatikan adalah text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if undefinedTab.tagName == &quot;A&quot;)
    {
      i++;
      Tab.href      = &quot;javascript:tabview_switchundefined&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
      Tab.className = undefinedi == id) ? &quot;Active&quot; : &quot;&quot;;
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == &#39;Page&#39;)
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+&quot;px&quot;;
      Page.style.overflow = &quot;auto&quot;;
      Page.style.display  = undefinedi == id) ? &#39;block&#39; : &#39;none&#39;;
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined&#39;TabView&#39;);
</script>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Cara Membuat Read More(Baca Selanjutnya..)

Unknown tips-trik No comments

Pada Default Blog Tempate postingan akan ditampilkan full memanjang kebawah. Beberapa memang ada , template yang menampilkan postingnnya sebagian,trus kalo mau baca lanjutannya harus klik dulu di link Read More/Baca selanjutnya/apalah istilahnya...Disini masalahnya, Kalo postingan full memanjang kebawah blog kita akan terlihat panjang banget(kalau postingannya panjang),berantakan, dan kurang simple. Ini menjadikan keindahan dan kecantikan blog kita jadi berkurang , jadinya pembacanya pun kurang tertarik/bosan dengan postingannya (nglihat postingannya aja langsung pusing...). Tapi masalah tersebut bisa diatasi. Jika kamu ingin postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (gunakan CTRL+F untuk mencari kodenya) :

<data:post.body/>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>.fullpost{display:none;}</style>

<data:post.body/>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : sementara sisanya yaitu keseluruhan posting letakkan di antara kode dan 
Selamat Mencoba...

Cara Mengganti Icon Pada Address Bar

Unknown tips-trik No comments

Dalam blog atau website seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Nha,terus kalo pengen di ganti gimana? bisa tidak? Jawabannya bisa, dan caranya pun mudah sekali. Bagi teman-teman yang mau merubah tampilan faviconnya(favorite icon), ini dia caranya cekidot
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini aku kasih contoh gambar beserta linknya

Link Gambar:

Generator Kode Warna HTML

Unknown tips-trik No comments

Dalam mendesain blog ataupun website,pastinya kita tidak akan terlepas dari gradiasi. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut kode warna HTML. Oleh karena kebutuhan tersebut, saya coba sediakan untuk semuanya generator kode warna HTML berikut. Selamat berkreasi,semoga membuatmu bermakna dan berwarna

Untuk Kode Warna Generator Terbaru silakan Klik disini

TSJ

Selasa, 12 Mei 2009

Dasar-Dasar HTML(Hyper Text Mark up Language)

Cara Membuat Menu Tab View

Cara Membuat Read More(Baca Selanjutnya..)

Cara Mengganti Icon Pada Address Bar

Minggu, 10 Mei 2009

Generator Kode Warna HTML

Label

Popular Posts

Arsip Blog

Followers