HTML Dasar

   Informasi di dalam WWW(Word Wide Web)menggunakan format HTML. Didalam HTML kita mengenal Hyper Text yaitu adanya link ke suatu dokumen, suatu alamat mesin bahkan ke suatu gambar, suara. Banyak software yang digunakan untuk membuat WWW dengan format HTML. Yang akan kita bahas disini adalah yang paling dasar yaitu mengunakan notepad, dimana notepad lah software yang biasanya langsung udah ada dikomputer pada saat komputer aktif, dan notepad biasanya terletak pada accesories.
Langkah pertama yang dilakukan yaitu

Klik notepad

Simpan file dalam suatu folder dalam format nama_file.HTML%htm

Kemudian jalankan dengan Internet Explorer

Cara menjalakan

Klik Run, cari nama file html/htm

Klik Ok

Adapun perintah perintah dasar dari HTML adalah sebagai berikut:

1. <H1> sampai <H6>
   <H1>  </H1>font ukuran besar
   <H2>  </H2>
    ....         ....
   <H6>   </H6>font semakin kecil
   
2. <HR>
   Fungsi : perintah untuk membuat garis horizontal penuh layar
   cth :

   ---

   
   
3. <I>
   Fungsi : membuat teks miring
4. <B>
   Fungsi : membuat teks tebal
5. <U>
   Fungsi : membuat teks bergaris bawah
6. <CENTER>
   Fungsi : membuat text ke tengah layar
7. <ALIGN>
   Fungsi : Membuat teks rata kiri dan rata kanan
   Sintak
   <P ALIGN=right>untuk rata kanan
   <P ALIGN=left>untuk rata kiri
   <P ALIGN=center>untuk rata tengah
   <P ALIGN=justify>untuk rata kiri dan rata kanan atau
   <H?ALIGN=right>
   <H?ALIGN=left>
   <H?ALIGN=center>
   <H?ALIGN=justify>
   
   Contoh pemakaian:
   <H2 Align=right>Selamat Datang Ke Website Kami <H2>
   

Cara Membuat Simbol / Logo TM , Registered Trademark, Copyright, Derajat, dll. di Website dan Blog

Membuat Simbol / Logo TradeMark ( TM ), Registered, Copyright,  Derajat, dan simbol-simbol lain di Website dan Blog. Dari tema tersebut kang salman mempuntai beberapa tips sederhana mengenai cara membuat Logo Trademark (TM) untuk di aplikasikan di blog atau website kita. Ada yang bilang dengan memasang simbol ini membuat blognya menjadi lebih mantap dan profesional. Kalau menurut kalian bagaimana?

Silakan simak cara membuatnya di bawah ini :

• Untuk membuat TradeMark alias TM

TM adalah singkatan dari TradeMark atau merek dagang. Cara membuat tulisan TM nya seperti squiterz™ adalah sebagai berikut  : tambahkan kode &trade; setelahkata squiterz

• Kode untuk membuat Registered trademark

SimbolRegitered Trademark adalah simbol yang diberikan untuk mengenali merekdagang yang sudah terdaftar. Coba perhatikan contoh ini : squiterz®  .Silahkan tambahkan &reg; setelah tulisan sobat.

• Kode  Simbol Copyright

SimbolCopyright adalah lsimbol untuk hak cipta. Coba perhatikan template blogsobat pada bagian bawah(bagian credit) akan selalu ada simbol ini jikasobat menggunakan template yang sudah jadi. Perhatikan contoh ini : kumpulan informasi maya© . Silahkan letakkan kode &copy; setelah tulisan sobat

• Kode untuk simbol Double Right Pointing (»)

Kalausimbol yang satu ini bagusnya untuk membuat suatu sub dari suatu menuatau untuk rincian yang arahnya ke kanan, berikut kodenya&raquo;

• Kode untuk membuat simbol Double Left Pointing («)

Kebalikan dari simbol di atas. Kalau yang ini arahnya ke kiri, berikut kodenya &laquo;

• Kode untuk membuat simbol Em-Dash

Simbolyang satu ini mirip dengan tanda kurang/minus. Hanya saja ini lebihpanjang, dan mungkin lebih cocok sebagai pemberi jarak antara link satudengan link lainnya, dan bisa juga dijadikan sebagai bahan pembentuksmile tidur, berikut kodenya&#151;

• Kode untuk membuat simbol Degree atau Derajat (°)

ntuk membuat simbol derajat atau Degree seperti kode seperti berikut &deg;

• Kode untuk membuat simbol per

 ½ kodenya: &frac12;     ¼  kodenya :&frac14;

• Kode untuk membuat simbol Inverted exclamation mark atau tanda Seru terbalik

Mungkinini hanya sebagai simbol untuk menambah daya tarik tulisan anda. Simbol ini sama saja dengan simbol/tanda seru (!), namun ini bentuknya terbalik (¡), berikut kode untuk membuatnya : &iexcl;

 

Nah sobat informasi maya mungkin itulah yang bisa squiterz bagikan, selamat mencoba.

 

Membuat Link feedback blog di homepage

Link Feedback Blog di Homepage – Feedback sangat penting buat blog untuk membuat blog lebih hidup dengan masukan, kritik maupun saran dari para pengunjung. Adakalanya penempatan feedback blog ini terdapat di dalam postingan dan tidak diberikan link dari homepage, atau paling tidak link ini selalu muncul disetiap halaman.

 Pada postingan ini kami akan berbagi cara membuat link feedback blog di homepage dengan sebuah image feedback ayng berada disebelah sisi halaman blog. Seperti ini :

 Caranya membuat feedback blog ini adalah sebagai berikut :

1. Masuk ke edit template html anda

2. Copy kode berikut dan letakkan sebelum kode skin ]]></b:skin>

</
#feedB_off a {
position: absolute;
width: 25px;
height: 85px;
z-index: 1;
top: 200px;
left:960px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmLuJLPObHPSsB_tRYvPtOpIXb9OiLAjXhSt9kppdPZjH1UIJWXggjZouA0IpUfC2CRj8ppzroQqaUhzwRGFQQ1PEDjqaOJIhP2uCARCyp5KyuFdx_AQrJb7z0T6GORnZDGd581MFUCI/s288/feedback_off.png");
}

#feedB_off a:hover {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinV2brtZayIqkwD-TNSrVZJo3p5fnIV-p6b4SKWs8mK7OvVDnfhnsMj5bhs4TFf41JMb8x6L5_DxgVdVp-p-L3Ix2tR5ux1MGvkBVDM4X1HI7d_pg_SnsjuzIDRrtYCT2_g8f0-CPe9-4/s288/feedback_on.png");
cursor:pointer;cursor:hand;
} >

3. Lalu letakkan kode berikut ini setelah kode <body>

</<div id="feedB_off">
<a href="URL FEEDBACK BLOG ANDA" target="_blank"></a>
</div>>

Lihat hasilnya dan selamat mencoba

Cara membuat daftar isi auto

Daftar judul postingan cukup penting agar pengunjung betah berlama-lama di blog kita. Karena semakin banyak postingan kita maka akan semakin banyak juga pilihan bagi pengunjung untuk membaca artikel yang telah kita buat. Dan dengan daftar ini pengunjung akan lebih mudah memilih judul artikel atau postingan yang akan dibaca.

Daftar judul ini hampir sama dengan kategori, bedanya daftar ini dilengkapi scroll bar sehingga dapat menghemat tempat serta memiliki pemberitahuan artikel mana saja yang baru sehingga pengunjung dapat menilik artikel-artikel terbaru kita.

Berikut adalah cara mudahnya untuk ditempel di sidebar  :

1. Login ke blogspot anda
2. klik “Tata Letak” atau “Layout”
3. Klik Tambah Gadget di sebelah kiri atau kanan Layout
4. Pilih HTML/Java Script
5. Kemudian paste (ctrl+v) kode berikut ke dalam gadget HTML/Java Script :

<div style="overflow: auto; width: 200px; height: 100px; text-align: left;"> <script src="http://fullmusic1975.fileave.com/daftarisiotomatis.js"><br /></script> <script src=" squiterzx.blogspot.com"><br /></script> </div>

    6. Simpan dan selesai

 

Keterangan :

• Tulisan merah merupakan lebar (width)  dan tinggi (heigth) kotak daftar isi, silahkan atur sesuai  dengan selera anda anda
• Tulisan hijau, ganti dengan alamat blog anda

Selamat mencoba dan Semoga bermanfaat....

Membuat variasi font pada teks

Sebuah Web ataupun Blog diharapkan memberi tampilan yang indah dan menarik. Salah satunya mengan memberikan variasi pada teks sesuai dengan selera kita,seperti memberi warna pada teks, memberi ukuran besar kecil dll. Dan kali ini saya akan memberi contoh bagaimana cara penulisan dalam HTML, agar tulisan lebih bervariasi.

Nama-nama Font bisa anda lihat dibagian paling bawah halaman ini. Daftar font yang saya contohkan saya ambil dari nama-nama font yang di pakai di Notepad, versi script western.
Untuk memberi warna pada teks anda, silahkan lihat dan pilih warna dan kodenya yang ada  pada Tabel kode warna di : http://adhy.yn.lt/colour?id=Mandan87&url=http://mandan87.mw.lt  Atau KLIK DISINI

OK...!!!, sekarang silahkan anda perhatikan perbedaan contoh-contoh berikut :

1. Teks standart :

<font>Teks dengan fon standart</font>

berikut hasilnya :

Teks dengan font standart

2. Teks dengan nilai besar-kecil :

<font size="6">Teks dengan ukuran font</font>

 berikut hasilnya :

Tek dengan ukuran font

3. Teks dengan nilai ukuran dan berwarna :

<span style="color: #FF0000; font-size: 45px;">Teks dengan nilai ukuran dan berwarna merah</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna merah

<span style="color: #ffff20; font-size: 50px">Teks dengan nilai ukuran dan berwarna kuning</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna kuning

<span style="color: #009600; font-size: 30px;">Teks dengan nilai ukuran dan berwarna hijau</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna hijau

<span style="color: #1418ff; font-size: 20px;">Teks dengan nilai ukuran dan berwarna biru</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna biru

4. Teks berwarna dengan besar 30px,font Goudy Stout :

<span style="color: #1418ff; font-size: 30px"><span style="font-family: Goudy Stout,sans-serif;">Teks berwarna dengan besar 30px,font Goudy Stout</span></span>

berikut hasilnya :
Teks berwarna dengan besar 30px,font Goudy Stout

Gimana mudah kan....?
Berikut ini daftar macam-macam font untuk anda coba terapkan pada artikel anda :

Nama-nama Font

Agency FB Algerian Arial Arial Rounded MT Baskerville Old Face Bauhaus 93 Bell MT Berlin Sans FB ArialBernard MT Blackadder ITC Bodoni MT Bodoni MT Poster Book Antiqua Bookman Old Style Bradley Hand ITC Britannic Broadway Brush Script MT Calibri Century Gothic Century Schoolbook Chiller Colonna MT Comic Sans MS Cooper Copperplate Gothic Courier Curlz MT Edwardian Script ITC Elephant Engravers MT Eras ITC Felix Titling Fixedsys Footlight MT Forte Franklin Gothic Freestyle Script French Script MT Futura Md BT Gabriola Georgia Gigi Gill Sans Gloucester MT Goudy Old Style Goudy Stout Haettenschweiler Harlow Solid Harrington High Tower Text Impact Informal Roman okermanJ Juice ITC Kristen ITC Kunstler Script Latin Lucida Calligraphy Lucida Console Lucida Handwriting Lucida Sans Magneto Maiandra GD Matura MT Script Capitals Microsoft Sans Serif Mistral Modern Modern No. 20 Monotype Corsiva MS Sans Serif MS Serif Niagara Engraved Niagara Solid OCR-A BT Old English Text MT Onyx Palace Script MT Palatino Linotype Papyrus Playbill Poor Richard Pristina Rage Ravie Rockwell Roman ArialScript Script MT Segoe Print Segoe Script Segoe UI ArialShowcard Gothic Small Fonts Snap ITC Stencil System Tahoma Tempus Sans ITC Terminal Times New Roman Trebuchet MS Tw Cen MT Verdana Viner Hand ITC Vivaldi Vladimir Script

selamat mencoba dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

Cara Buat Kotak atau Teks Area

Saat yang lalu saya menjelaskan cara membuat tabel. Dan pada tutorial blog kali ini hampir mirip dengan tabel, sama-sama berbentuk kotak. Tapi kotak yang ini berfungsi sebagai teks area dan bentuknya lebih sederhana, tapi tetap indah dan rajin. Cara buat kotak ini mudah, hanya dengan menggunakan atribut html : <fieldset>

Berikut kodenya silahkan anda copy, bila anda berminat :

Kotak 1

<fieldset>
Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Teks anda disini

Kotak 2

<fieldset><br>
<legend><b>Judul Teks disini</b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Kotak 3

<fieldset><br>
<legend><b><fieldset>Judul Teks disini</fieldset></b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Nah.....,mudah kan...?
Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Cara menambahkan pengatur ukuran teks

Menambahkan pengatur ukuran teks atau Resizer Text, memiliki kegunaan tersendiri bagi pengunjung yang merasa ukuran teks pada blog kita kurang jelas atau terlalu kecil. Dengan cara ini kita memberi kebebasan pada pengunjung untuk merubah ukuran teks sesuai dengan selera pembaca. Sehingga pengunjung betul - betul merasa nyaman membaca artikel atau posting yang kita suguhkan.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML. 

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :

.textresize {
padding-left:20px;
padding-top:5px;
}

6. Kemudian Copy kode di bawah ini dan taruh diantara ]]></b:skin> dan tag </head> :

<script language='JavaScript' type='text/javascript'>
function changeFontSize(inc)
{
var p = document.getElementsByTagName(&#39;p&#39;);
for(n=0; n&lt;p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace(&quot;px&quot;, &quot;&quot;));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + &#39;px&#39;;
}
}
</script>

7. Bila anda ingin fitur ini diletakkan diarea posting, Cari kode di bawah ini atau yang mirip dengan kode ini :

<div class='post-header-line-1'/>

8. Tambahkan kode dibawah ini setelah baris di atas.:

<span class='textresize'>
Text Size :<a href='javascript:changeFontSize(1)'> [+]</a> | <a href='javascript:changeFontSize(-1)'> [-]</a>
</span>

9. Simpan Template.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Cara membuat Bar mengambang atau Floating Bar on Top pada blog

Floating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, ataupun rekomendasi tertentu. Hal ini pemilik blog berharap, pengunjung langsung melihat Floating Bar tersebut dan tertarik untuk melihat.
Fitur ini sangat menarik dan memang diperlukan bila blog anda memang fokus atau sekedar tambahan untuk cari uang. Selain itu Floating Bar berguna juga bila anda ingin merekomendasikan atau mengabarkan suatu acara yang anda adakan.

 Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh tepat sebelum kode </head>

<style type="text/css"> #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: #fff; width: 620px; visibility: hidden; z-index: 100; } </style> <script type="text/javascript"> var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 200 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</body>

7. Copy kode di bawah ini dan taruh tepat sebelum kode </body> :

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2nZYcroq3ugfi2dgNZ6RVkuBcXy_XvERsiwxlMna9dPefYqZVWANOBXvdHEujS-SnvtzI0Zw19APMVSl1VtJ82guB_44IrcIIeV_xkVePmWjr_nk5lZnMVMIf6tm3V44OpZd2ylU8tK-f/h80/close.png" align="right" border="0" />
<a href="YOUR LINK" onclick="closebar(); return true">DISINI TEKS ATAU SCRIPT IKLAN MILIK ANDA
</div>

Catatan :
Silahkan anda ganti teks berwarna merah dengan Teks, Script iklan atau banner milik anda.

8. Simpan Template.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.dan jangan lupa join di blog ini

Cara pasang meta tag lengkap

Kali ini kami bagikan cara lengkap pasang meta tag, mengingat ada permintaan sobat blogger yang menginginkan pasang meta tag lebih lengkap, .... tak masalah, sebab setiap hari memang selalu saja ada yang masih belajar ngeblog Bagi yang belum baca cara yang lebih sederhana, silahkan anda baca di entri berikut ini:

OK....., silahkan anda ikuti langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
                                              <b:include data='blog' name='all-head-content'/>

5. Copy kode di bawah ini dan taruh setelah kode diatas :

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
<meta content='NAMA PENULIS' name='author'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='Indosesia' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>

6. Simpan Template

Saya ingatkan kembali, Cara memilih kata kunci silahkan anda bisa gunakan layanan gratis dari google, sehingga anda bisa tahu seberapa banyak kata kunci yang dicari dan ditulis pengunjung pada mesin pencari google.
Anda bisa ikuti Link dibawah ini :

https://adwords.google.com/select/KeywordToolExternal

Semakin banyak pengunjung yang mencari atau menulis sebuah kata kunci yang kita gunakan, maka akan semakin baik dan lebih banyak kemungkinan pengunjung akan datang ke web ataupun blog kita.

Selamat mencoba dan Semoga bermanfaat....

Cara membuat link senggol

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
 slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
 // creates the target paths
 var list_elements = navigation_id + " li.sliding-element";
 var link_elements = list_elements + " a";
 
 // initiates the timer used for the sliding animation
 var timer = 0;
 
 // creates the slide animation for all list elements
 $(list_elements).each(function(i)
 {
  // margin left = - ([width of element] + [total vertical padding of element])
  $(this).css("margin-left","-180px");
  // updates timer
  timer = (timer*multiplier + time);
  $(this).animate({ marginLeft: "0" }, timer);
  $(this).animate({ marginLeft: "15px" }, timer);
  $(this).animate({ marginLeft: "0" }, timer);
 });

 // creates the hover-slide effect for all link elements  
 $(link_elements).each(function(i)
 {
  $(this).hover(
  function()
  {
   $(this).animate({ paddingLeft: pad_out }, 150);
  }, 
  function()
  {
   $(this).animate({ paddingLeft: pad_in }, 150);
  });
 });
}

//]]>
</script>

<style type="text/css">
ul.listpanah {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-48_ZllhbC_P5FzqFIZWZ9c-sPtHt9DGNSWQw6x0c5MRo_AjcfLXwoUFocNsQ4toQH7toMvOoRRVY3QoLEtP03RmLbugXWgkAUtRbYL6TuafkoVZnO1xTZvLH58SdlSkC7wqQO9V146-/s12/List+6.jpg');}

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>

Langkah selanjutnya anda tinggal menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

                                       
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

                                                              
4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class  id="sliding-navigation">  
<ul class="listpanah">
  
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   1</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL  2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   3</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   4</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL 10</a></li>
 
</ul></div>

Ok...., Selamat mencoba dan Semoga bermanfaat....

cara pasang icon yahoo Messenger

Untuk membuat simbol Yahoo Messenger di blogger yang menunjukkan status anda dan pengunjung bisa langsung chat dgn anda, langkah-langkahnya adalah sebagai berikut:
1. Langka Pertama masuk klik Layout
2. Klik edit HTML
3. Kemudian add widget
4. Pilih edit HTML menu
5. Silahkan copy salah satu kode berikut

a.Contoh 1

<a href="ymsgr:sendIM?your id"><img src="http://yuor ID&m=g&t=0 border="0 /> </a>

b.Contoh 2

<a href="ymsgr:sendIM?yuor Id"><img border="0" src="http://id YAHOO mu&m=g&t=2"/></a>

c.Contoh 3

<a href="ymsgr:your ID"><img src="http://oalamt yahoo loe&m=g&t=2 border="0 /> </a><br />

6. save setting
Selesai selamat mencoba!!GOOD LUCK

cara membuat menu multi kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti ini:

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

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

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama


5. Silahkan masukkan kode dibawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

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

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

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

Silahkan dicoba,,semoga berhasil!!!
Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Cara pasang read more

Untuk membuat Read More agar tidak memakan tempat,supaya artikel yang tampil lebih pendek ikuti langkah – langkah berikut:

1. Sign in di blogger anda dengan->Setting->Formatting

2.Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">

</div>

 3. Klik tombol yang bertuliskan Save Settings

Pemasangan kode ini supaya pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu ditext area saat posting

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :


1. Klik menu Dasboard->Layout->Edit HTML


2. Klik tulisan Download Full Template


Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula dgn upload lagi data tersebut


3. Jangan lupa beri tanda centang pada kotak di samping tulisan "Expand Widget Template"


4. Silahkan anda cari kode berikut pada kode template milik sobat :

<div class='post-header-line-1'/>
<div class='post-body'>

atau

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

5. Copy kode HTML di bawah ini kemudian paste di bawah kode diatas

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;} </style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;} </style>

6. Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

<p><data:post.body/></p>

7. Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

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


</b:if>

anda bisa mengganti kata Read More pada kode ini sesuai keinginan anda

8. klik tombol bertuliskan Save Template

9. Selesai,

 Cara Posting Artikel nya


1. Klik menu Posting->jangan lupa tulis posting di Edit HTML bukan di Compose karena kode dibawah ini tidak akan muncul di halamana compose

Secara otomatis akan timbul kode seperti ini

<div class="fullpost">



</div>

2. Tulisankan artikel yang ingin tampak pada blog sebelum kode dibawah ini

<div class="fullpost">

3. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode dibawah ini :

</div>

4. Klik tombol PUBLISH POST->Silakan lihat blog anda,,


Untung postingan yang anda buat sebelum pasang read more silakan edit dan tambahkan kode dibawah ini secara manual dengan format dibawah ini

Artikel yang ingin tampil dipostingan

<div class="fullpost">

Sisa Artikel anda

</div>

warna merah adalah kode yang harus anda tambahkan dipostingan yang sedang anda edit



Selamat mencoba!!! semoga berhasil :z

Cara memasang search engine

Selain label, untuk mempercepat pencarian kategori yang kita inginkan maka dipasang search engine untuk blog anda,caranya sebagai berikut:

1.Login ke blog anda ->Layout->add gadget
2.Pilih HTML/Javascript
3.Masukkan kode berikut

<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get"> <br /><input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

4.Ganti tulisan AlamatBlogAnda dengan URL atau alamat blog anda
5.Kemudian Save Setting
6.Preview dan lihat hasil kerja anda ...GOOD Luck...

Contoh Tulisan Berjalan

1. Teks berjalan dari kanan ke kiri

 <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

2. Teks berjalan dari kiri ke kanan

 <marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

3. Teks berjalan bolak balik

 <marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

4. Teks berjalan dari atas ke bawah

  <marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

5. Teks berjalan dari bawah ke atas

  <marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

 6. Teks berjalan mondar-mandir

 <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

7. Teks berjalan zig-zag nembus

 <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

semoga berguna bagi anda.............

Cara membuat tanggal otomatis update

1. Login ke blogger dengan ID anda.
2. Klik Rancangan. 3. KLik tab Edit HTML. 
4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<style type="text/css"> div.tanggal { margin:15px; width:150px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px;  border:2px solid blue; padding:5px; }</style>

Catatan : Anda bisa merubah nilai "px" dalam kode diatas, dan mengganti warna border sesuai selera anda.
 6. Simpan template.
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="tanggal"><center><script type='text/javascript'> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var daym=mydate.getDate() var month=mydate.getMonth() if (daym<10) daym="0"+daym var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu") var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember") document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>")  </script></center></div>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Cara Membuat Judul Blog Bergerak

Dalam postingan kali ini kami akan membahas tentang Cara Membuat Judul Blog Bergerak.Knapa judul blognya bergerak ? tujuanya mungkin supaya Blog jadi terlihat dinamis.Judul blog kita jadinya akan terlihat berjalan pada title bar browser.Sebagai contoh lihat disini
Buat kamu yang ingin membuat Judul Blog Bergerak silakan ikuti tutorial Cara Membuat Judul Blog Bergerak Berikut ini.

1.LOGIN ke blogger.

2.Kemudian klik Tata Letak Kemudian Klik Lagi Edit HTML.

3.Selanjutnya cari kode berikut ini.

<title><data:blog.pageTitle/></title>

4.Hapus Kode Tersebut dan ganti dengan Kode berikut ini>

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>

var txt="<data:blog.pageTitle/>";

var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

5.Kamu bisa mengganti angka 100 yang berwarna biru tersebut dengan keinginan kamu.Angka tersebut adalah kecepatan pergerakan judul blog kamu.

5.Kalo udah selesai silakan klik SAVE TEMPLATE

my forum

get your own embeddable forum with Talki

Lirik Lagu Vierra – Kesepian

A C#m D Dm
A            E        D          E
di mana kamu di mana, di sini, bukan
A           E       D          E
kemana kamu kemana, ke sini, bukan
A             E         D          E
katanya pergi sebentar, ternyata lama
A           E       D          E
tahukah aku sendiri menunggu kamu
Chorus:
A                  C#m
jangan pergi pergi lagi
aku tak mau sendiri
Dm             C#m        F#m
temani aku tuk sebentar saja
Bm                E
agar aku tak kesepian
A             E         D          E
katanya pergi sebentar, ternyata lama
A           E       D          E
tahukah aku sendiri menunggu kamu
Solo: F#m A D
F#m A B
Bm C#m Dm E
Chorus:
A                  C#m
jangan janji-janji terus
Em         F#    Bm
aku tak mau kau bohong
Dm             C#m        F#m
temani aku tuk sebentar saja
Bm                E
agar aku tak kesepian
A                  C#m
jangan pergi pergi lagi
Em         F#   Bm
aku tak mau sendiri
Dm             C#m        F#m
temani aku tuk sebentar saja
Bm                E
agar aku tak kesepian
Outro: A C#m D Dm A

Lirik Lagu Last Child – Pedih

Chorus: C G C D G
G                          Em
Engkau yang sedang patah hati
Am                        D
Menangislah dan jangan ragu ungkapkan
Bm                      Em
Betapa pedih hati yang tersakiti
Am                     D
Racun yang membunuhmu secara perlahan
G                      Em
Engkau yang saat ini pilu
Am                      D
Betapa menanggung beban kepedihan
Bm                     Em
Tumpahkan sakit itu dalam tangismu
Am                       D
Yang menusuk relung hati yang paling dalam
[chorus]
C             G
Hanya diri sendiri
C             D         G
Yang tak mungkin orang lain akan mengerti
Em                     Bm
Di sini ku temani kau dalam tangismu
C                  G     D
Bila air mata dapat cairkan hati
Em                     Bm
Kan ku cabut duri pedih dalam hatimu
C                       G          D
Agar kulihat, senyum di tidurmu malam nanti
Em
Anggaplah semua ini
Bm
Satu langkah dewasakan diri
C       D
Dan tak terpungkiri juga bagi…
G                        Em
Engkau yang hatinya terluka
Am                    D
Di peluk nestapa tersapu derita
Bm                    Em
Seiring saat keringnya air mata
Am                        D
Tak mampu menahan pedih yang tak ada habisnya
[chorus2]
C             G
Hanya diri sendiri
C             D         G
Yang tak mungkin orang lain akan mengerti
Em                     Bm
Di sini ku temani kau dalam tangismu
C        Cm        G     D
Bila air mata dapat cairkan hati
Em                     Bm
Kan ku cabut duri pedih dalam hatimu
C         Cm          G           D
Agar kulihat senyum di tidurmu malam nanti
Em
Anggaplah semua ini
Bm
Satu langkah dewasakan diri
C       D
Dan tak terpungkiri juga bagi…
interlude: G Em Am D Bm Em C D
chorus3:
C             G
Hanya diri sendiri
C             D         G
Yang tak mungkin orang lain akan mengerti
Em                     Bm
Di sini ku temani kau dalam tangismu
C        Cm        G     D
Bila air mata dapat cairkan hati
Em                     Bm
Kan ku cabut duri pedih dalam hatimu
C         Cm          G           D
Agar kulihat senyum di tidurmu malam nanti
Em
Anggaplah semua ini
Bm
Satu langkah dewasakan diri
C       D
Dan tak terpungkiri juga bagi
G
Engkau yang sedang patah hati