Gaptek32

Javascript - Operator

2013-02-09T07:27:00.003-08:00

Artikel tentang Javascript ini memiliki keterkaitan dari 1s/d selesai (lihat postingan sebelumnya). Untuk itu bila anda belum faham di artikel ini dan seterusnya, saya sarankan buka lagi postingan mengenai Javasvript yang sebelumnya. Mengingat bahwa posting mengenai JavaScript ini sengaja saya buat terpisah dengan tujuan dalam pemahaman mengenai Javascript ini mudah untuk dipelajari.

JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.

Operator pada JavaScript terbagi menjadi enam, yaitu :

Aritmatika Operator
Assignment Operator (=)
Bitwise Operator (Pemanipulasian bit)
Comparison Operator (Operator Pembanding)
Logikal Operator
String Operator

Operator Aritmatika

Operator dalam JavaScript sangat mirip dengan operator yang muncul dalam bahasa pemrograman lain. Definisi operator adalah simbol yang digunakan untuk melakukan operasi. Yang paling sering digunakan operasi ini seperti Operator Aritmetika. Sesuai dengan fungsinya, operator aritmatika melakukan operasi perhitungan aritmatika. JavaScript mendukung operator standard aritmatika seperti penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator modulus (%). Lihat tabel 1

Tabel 1 : Tabel Aritmatik

Operator	Definisi	Contoh	value y	hasil x
+	Penambahan	x=y+2	5	7
-	Pengurangan	x= y-2	5	3
*	Pengkalian	x= y * 2	5	10
/	Pembagian	x= y / 2	5	2.5
%	Modulus	x= y % 2	5	1
++	Increment	x=++y	6	6
++	Increment	x=y++	6	5
--	Decrement	x=--y	4	4
--	Decrement	x=y--	4	5

Operator Assignment

Seperti kebanyakan bahasa pemograman lainnya, untuk memberikan sebuah nilai kepada suatu variable menggunakan tanda sama dengan (=). Operator pemberi nilai "sama dengan" adalah suatu operator binari yang digunakan untuk memberi nilai dari sisi kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai sebelah kanan

Contoh Tugas :
x = 5000 ;
Pada Contoh Tugas diatas, bahwa x adalah variable, sama dengan (=) adalah operator, 5000 adalah nilai untuk variable, dan x = 5000 adalah expresi

Tabel 2 : Tabel Assignment Operator

Operator	Keterangan	Penyingkatan	Contoh
=	Sama dengan	x = y	x = y
+=	ditambah sama dengan	x += y	x = x + y
-=	Dikurangi Sama Dengan	x -= y	x = x - y
/=	Dibagi Sama Dengan	x /= y	x = x / y
%=	Modulus Sama Dengan	x %= y	x = x % y

Contoh Tugas;

var x = 5000 ;
var y = 2500 ;
x -= y
alert(x);

Bitwise Operator

Operator pembanding/Operator Bitwise diterapkan pada perbandingan pada data numerik dan data string serta tidak dapat dilakukan pada nilai Boolean. Masing-masing operan harus memiliki tipe yang sama. Lihat Tebel 3:

Tabel 3 : Operator Pembanding

Operator	Keteranga	Contoh	Contoh Bolean
==	Sama dengan	x == y	True
!=	Tidak sama dengan	x != y	True
>	Lebih besar dari	x > y	False
<	Lebih kecil dari	x < y	True
>=	Lebih besas sama dengan	x >= y	False
<=	Lebih kecil sama dengan	x <= y	False

Contoh Tugas :

var x = 4;
var y = 5; if(x < y){
 alert("x lebih besar dari y");
}
else if(x > y ) {
 alert("x lebih kecil dari y");
}

Logical Operator

Operator logika digunakan untuk menentukan logika antara variabel atau nilai. Numerik lebih besar/lebih kecil dengan String atau sebaliknya. Hasil dari Logikal dapat menggunakan sebuah nilai Boolean (false atau True).
lihat tabel 4

Tabel 4 : Operator Logika

Logika	Keteranga	Contoh	Contoh Bolean
&&	And	x > 100 && y < 1	True
\|\|	Or	x == 6 \|\| y == 6	True
!	Not (! adalah suatu unary operator yang mempertahankan nilai ekspresi.)	! (x == y)	True

Contoh Tugas :

var x = 76;
if(x >= 80){
alert("Nilai = A");
}else if(x >= 70 && x < 80){
alert("Nilai = B");
}else if(x >= 60 && x < 70){
alert("Nilai = C");
}else{
alert("Nilai = D");
}

String Operator

Operator juga dapat digunakan untuk menambahkan variabel string atau nilai-nilai teks bersama-sama. Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda petik tunggal (’) atau tanda petik ganda (”). String memiliki beberapa operator, yaitu concatenation (penggabungan) dan operator konversi. Kita mulai dengan String concatenation.

Concatenation (Penggabungan)

Operasi yang paling umum dilakukan adalah dengan string concatenation. Rangkaian adalah proses menggabungkan dua string menjadi satu string lagi. Sebagai contoh, kita bisa menggabungkan string "teks1" dan "teks2" ke dalam string satu kesatuan.

Contoh Tugas ;

var string1 = "penggabungan"; // String Pertama
var string2 = "string"; // String kedua
stringConcat = string1 + string2; // Menggabungkan string dengan (+)
document.write (stringConcat); // Menggabungan string

Dalam contoh di atas, kita menggunakan 2 (dua) variabel string. Ingat string dikelilingi oleh salah satu tanda kutip tunggal (' ') atau ganda (" "). Pada baris 3 (tiga) nampak "stringConcat = string1 + string2" dan kita menggunakan operator (+) untuk menggabungkan kedua string "string1 + string2". Sebelum penggabungan, kita memiliki dua string, yaitu "penggabungan" dan "string". Setelah penggabungan dengan operator (+), kita memanggil string tersebut dengan document.write (stringConcat);

Operator Konversi

Seperti namanya, yaitu konvert yang artinya merubah. Apa saja yang dapat diubah oleh operator konversi ini.

parseInt, untuk mengubah string menjadi Integer
parseFloat, untuk mengubah string menjadi Float

Fungsi parseInt;
Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk bilangan bulat / integer.

<script language="javascript">
stringInteger = "2.5"
diTambah = 3 + parseInt(stringInteger);
document.write(diTambah);
</script>

maka nilai variabel "diTambah" saat ini adalah 5 hasil dari "2+3" (nilai pecahan dari (2.5) dibulatkan menjadi 2) .

Fungsi parseFloat ;
parseFloat() digunakan untuk konversi dari tipe data string ke tipe data numerik bilangan pecahan / floating

<script language="javascript">
stringFloat = "2.5"
diTambah = 3 + parseFloat(stringInteger);
document.write(diTambah);
</script>

maka nilai variabel "diTambah" saat ini adalah 5.5 hasil dari "2.5+3".

Javascript - Variable

2013-02-01T07:25:00.000-08:00

Dalam JavaScript, pendeklarasian sebuah variabel sifatnya opsional, artinya kita dapat mendeklarasikan atau tidak hal tersebut tidak menjadi masalah, karena JavaScript memiliki sifat “Weakly Typed”, Artinya JavaScript tidak membutuhkan pendeklarasian tipe data, kita hanya perlu mendeklarasikan nama variable dan isinya. Dan untuk penggunaan variable cukup menggunakan var

Aturan Pendeklarasian Variabel

Aturan penulisan variabel :

Dapat menggunakan Huruf atau UnderScore di awal variable, selebihnya terserah
Dapat menggunakan karakter $ (dolar)
Tidak dapat menggunakan spasi
Javascript bersifat case sensitive, artinya huruf kecil dan huruf besar adalah berbeda.
Yang terpenting kombinasikan karakter-karakter yang diperbolehkan untuk menciptakan nama variabel yang sekira-kira mudah dimengerti oleh orang lain, terutama yang membuatnya.
Kita dapat mendeklarasikan variabel JavaScript dengan awalan kata kunci var

Contoh pendeklarasian variabel yang dapat kita gunakan :
var dekLarasi ;
var $dekLarasi ;
var _dekLarasi ;
var dek_Larasi ;
var dekLarasi132 ;

Contoh pendeklarasian variabel yang tidak dapat kita gunakan :
var 32dekLarasi ; //Selain awalan huruf atau underscore tidak diperbolehkan
var dek Larasi ; //Tidak dapat menggunakan spasi

Pendeklarasian Variable

Nah sekarang bagaimana kita menggunakan Deklarasi Variable JavaScript ini,
Contoh penulisan deklarasi variable:

var dekLarasi;
alert(dekLarasi);

Maka hasil yang akan kita dapat menghasilkan Pesan "undefined". Ini dikarenakan tidak ada nilai/value pada variable.

Variable Assignment

Untuk menyimpan sesuatu dalam variabel, Anda dapat menggunakan sebuah simbol sama dengan (=). setelah itu kita dapat menyimpan sebuah integer, float, string teks dan nilai-nilai Boolean dalam variabel (Nilai Boolean adalah Ya / Tidak, Benar / Salah, 1 atau 0.) Ketiga, angka, string, dan boolean, disebut sebagai tipe data sederhana. Serta tipe data sederhana ini juga dapat menyimpan sebuah objek dalam variabel, objek seperti Window, Navigator, dan benda-benda Dokumen Anda bertemu sebelumnya.

Dalam terminologi pemrograman, variabel merupakan tempat penyimpanan. Anda dapat menyimpan hal-hal dalam variabel sehingga Anda dapat memanggilnya nanti. Pikirkan variabel sebagai Nomor telepon. Anda dapat menulis nomor tersebut pada buku telepon. Tulis label pada buku telepon misal "nomor telepon Ibu". Anda akan memiliki cara cepat untuk mengidentifikasi apa jenis informasi yang telah disimpan dalam buku telepon. Suatu hari mungkin anda memutuskan untuk Meneleponnya. Jika demikian, Anda dapat dengan cepat menemukan nomor telepon ibu anda dengan melihat label pada buku telepon dengan nomor yang telah kita simpan.

Baca keterangan dan terminologi di atas untuk mempermudah dan mempersingkat dalam penjelasan ini. Untuk menetapkan nilai ke variabel, isi nilai setelah tanda sama dengan, dan pastikan Anda mengakhiri setiap baris dengan tanda titik koma (;). Pastikan juga, bahwa Anda memiliki ruang/spasi antara var dengan nama variabel/deklarasi.

Contoh penulisan variable dengan memberikan sebuah nilai :

var nelPhone ="Hay Mom";
alert(nelPhone);

Didalam JavaScript diperbolehkan untuk menggambarkan lebih dari satu nama variabel dalam satu baris, untuk var cukup satu kali saja, dan masing-masing nama variabel dipisahkan tanda koma. Sebagai contoh:
var a=2, b=5, c=8;

Case sensitif
JavaScript membedakan huruf besar dan kecil (case sensitif), sehingga harus diwaspadai antara penulisan nelPhone adalah berbeda dengan Nelphone bagi JavaScript.

Contoh ;

var nelPhone ="Hay Mom";
alert(nelPhone);  // Hasil >> Hay Mom
alert(Nelphone);  // Tidak ada

Jangkauan variable javascript

Pada dasarnya, penulisan variable JavaScript sangatlah fleksibel dan tidak terlalu rumit dan ketat, sehingga Anda tidak akan terlalu sering menerima pesan error pada saat menjalankan program. Sebagai contoh deklarasi variable di JavaScript dapat dilakukan dengan dua cara, yaitu :

Variable Lokal (explisit)

Sebuah variabel yang dideklarasikan dalam fungsi JavaScript menjadi LOKAL dan hanya dapat diakses dalam fungsi itu. (variabel memiliki ruang lingkup lokal) . Untuk mendeklarasikan suatu variabel lokal, harus diawali dengan kata kunci var
Contoh ;
var nilai = "nama_var";

Variable Global (implisit)

JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel global. Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama untuk local maupun global, tetapi dalam praktek hal tersebut tidak disarankan, karena akan membingungkan anda sendiri.
Contoh ;
nilai = "nama_var";

Tipe Data dalam Variable JavaScript

Terdapat empat (4) macam tipe data yang dimiliki oleh JavaScript. perhatikan poin contoh penulisan javascript dibawah ini ;

String - string dapat diapit oleh petik tunggal ( ' ) atau petik ganda ( " ). Tanda petik awal dan akhir harus sama,
Numerik - Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu Integer (bilangan bulat) dan Float (bilangan pecahan)
Bolean - Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan.
Null - Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal (inisialisasi)

Lebih jelasnya lihat tabel 1 dibawa ;

Tabel 1 - type Data dalam variable javascript

Type	Contoh	Keterangan
Numerik	var x=500 ; var y=5.25 ;	type data numerik ini dapat dibagi menjadi 2 (dua) yaitu Bingangan bulat(int) var x=500; Bilangan Desimal (float)var y=5.25;
String	var x="Hay"; var y='Hay'; var z='500';	Walaupun type numerik berada dalam jangkauan variable, tetap tidak dapat dikalkulasikan meskipun bentuknya adalah angka. Ini dikarenakan type numerik diliputi dengan tanda petik (') atau (").
Bolean	var x=(y>5);	Variable boolean adalah suatu variable khusus yang berguna untuk mengevaluasi suatu kondisi tertentu. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan [contoh disamping menunjukkan bahwa jika y lebih besar dari 5 maka x akan bernilai true]
Null	var x= ;	Variabel dapat dikosongkan dengan menetapkan nilai untuk null

Javascript - Pendahuluan

2013-01-31T22:02:00.000-08:00

Tag pada javascript
Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam tag html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript itu sendiri diletakkan didalam tag <script> dan diakhiri </script>

Mengapa harus menggunakan tag HTML pada script javascript
Karena pada browsr tidak akan menganggap bahwa script sebuah javascript tanpa menggunakan tag HTML, karena itu kita membutuhkan sebuah tag untuk mengapit sebuah javascript dengan tujuan agar tag tersebut memerintahkan navigator untuk memberlakukan javascript ini sebagai mana semestinya.

Javascript yang dilakukan dengan menyisipkannya langsung ke dalam tag html (Internal)

Contoh penulisan Javascript yang ditempatkan didalam head

<html>
<title>Belajar Javascript</title>
<head>
<script type="text/javascript">
alert ("fokuskan bahwa aku diapit oleh tag script ");
</script>
</head>
<body>
</body>
<html>

Selain itu, kita juga dapat menaruh javascript ini pada elemen body
Contoh penulisan Javascript yang ditempatkan didalam body

<html>
<title>Belajar Javascript</title>
<head>
</head>
<body>
<script type="text/javascript">
alert ("fokuskan bahwa aku diapit oleh tag script"); //javascript
</script>
</body>
<html>

Lihat hasil kerja diatas [demo]

Cara kedua yaitu menaruh javascript pada bagian body lebih bagus dibandingkan dengan bila kita menyimpannya di bagian head, karena yang dibaca terlebih dahulu oleh brows adalah bagian teratas yaitu head, Lebih tepatnya untuk mengantisipasi beratnya file javascript yang ditempatkan dibagian head. tetapi ada juga yang mengharuskan JS ini ditempatkan dibagian head karena alasan tertentu.

Untuk saat ini. abaikan saja dulu seluruh elemen html, fokuskan pikiran kita pada javascript yang saya beri warna merah. yang terpenting kita sudah tahu bahwa file javascript diapit oleh tag script seperti contoh yang diatas.

Cara kedua adalah dengan melakukan pemanggilan dari luar/hosting tertentu (external)

Anggap saja kita telah menyimpan file berekstensi [dot]js atau [dot]html seperti pada google code file yang telah kita hosting guna menjalankan file js tersebut (saat ini saya tidak dapat memberikan cara untuk menyimpan file seperti google code, untuk yang ingin tahu cara menyimpan file di google code silahkan klik link [ini])

Dibawah ini adalah contoh file javascript sebelumnya yang sudah kita simpan di google code berektensi HTML

http://reader-gaptek32.googlecode.com/svn/trunk/EkstensiHtml.html

Dibawah ini adalah contoh file javascript sebelumnya yang sudah kita simpan di google code berektensi JavaScript

https://reader-gaptek32.googlecode.com/svn/trunk/Aku%20ekstensi%20js.js

Untuk menjalankan file tersebut sedikit berbeda dengan cara yang diatas/poin petama, disini kita hanya membutuhkan parameter src yang mengarah pada lokasi file eksternal.

<script src="kita-dapat-memilih-salahsatu-dari-file-diatas" type="text/javascript">
</script>

Terinspirasi dengan kata mutiara sobat Optimasi Blog "Kami manusia & tidak sempurna. :)"
Mohon dikoreksi kembali bila ada kesalahan, karena artikel kami sangat membutuhkan masukkan agar apa yang kami berikan bukan semata hanya untuk mengejar trafik melainkan untuk media pembelajaran.

JavaScript - Metode pemahaman awal Javascript

2013-01-29T19:46:00.002-08:00

Sebelum melangkah ketahap yang rumit, kita harus tahu terlebih dahulu apa itu JavaScript dalam artian pemahaman level pertama. Seperti halnya ketika kita baru mempelajari dasar-dasar CSS, awalnya yah memang harus tahu terlebih dahulu secara fungsional yang ada pada CSS, tetapi bukan berarti kita harus memaksakan diri juga untuk tahu tentang JScript hanya hitungan menit langsung mahir dalam pembelajaran javascript, yang ada malah bikin pusing dan susah untuk mencari titik terangnya.

Untuk belajar javascript, Anda sama sekali tidak perlu menjadi seorang guru web desain, setidaknya Anda memiliki pengetahuan dasar tentang bagaimana sebuah halaman web dibuat. Anda harus tahu tentang hal-hal seperti HEAD dan bagian BODY dalam sebuah halaman HTML, bagaimana membuat paragraf baru, memasukkan gambar dan hyperlink. Atau anda dapat [mempelajari beberapa struktur HTML di sini]

Referensi Javascript

Disini saya akan menggunakan beberapa referensi yang sekiranya menurut saya pribadi sangat bermanfaat dan berguna dalam pembelajaran javascript yang akan mendatang. Dan beberapa referensi ini memungkinkan di postingan saya yang mendatang akan lebih banyak merujuk pada postingan disini.

Syntax	Contoh	Keteranga
Dot/titik (.)	document.bgcolor atau document.writeIn	digunakan untuk menggabungkan syarat, misalnya objek dan properti atau objek dan metode
Objek	-	Objects mengacu pada window, document, image, table, form, button, link, dll. Objects harus mempunyai nama karena object dapat kita buat lebih dari satu jenis Hal-hal yang bisa dilakukan oleh objek disebut metode. Obyek dapat dianggap sebagai hal-hal dan metode sebagai aksi/tindakan.
Properties	document.bgcolor	Object properties didefinisikan dengan meggunakan nama object, period, dan nama properti. Dan Properti obyek didefinisikan dengan menggunakan sintaks dot 1. document merupakan object. 2. bgcolor merupakan property
Metode	document.write("your teks in here")	Metode adalah aksi yang diterapkan pada object Metode adalah apa yang dapat dilakukan oleh sebuah object 1. document merupakan object. 2. write merupakan metode.
Event	1. onLoad 2. onMouseOver 3. onClick Dan masih banyak lagi	JavaScript menggunakan perintah yang disebut event handler untuk program event. Penangan event menempatkan string sebelum event Untuk lebih jelasnya saya akan menjelaskan fungsi event pada postingan Javascript String dan Javascript function selanjutnya
Function	function peManggil(){ document.write("Hello World!"); } peManggil();	Sebuah fungsi yang telah ditulis dapat berfungsi untuk mengulangi tugas yang sama ketika dipanggil nama fungsi. Untuk menggunakannya kita membutuhkan sepasang keriting kurung {} yang mengelilingi semua pernyataan dalam suatu fungsi.
Value	Contoh value dicakup oleh ekpresi	Value mencakup pada tipe Number, String, Boolean, Null, Obyek, dan Fungsi
Variable	var deklarasi="explisit"; deklarasi="implisit";	Kata kunci variable cukup dengan hanya "var", dan variable dapat ditulis secara explisit atau implisit.
ekspresi	var nelPhone ="Hay Mom";	Ekspresi adalah perintah yang memberikan nilai pada variabel. Mereka selalu menggunakan operator penugasan, seperti sama dengan. 1. var nelPhone adalah hanya sebuah variable 2. sama dengan(=) adalah operator untuk memberikan tugas pada variable dan di akhiri dengan titik koma(;) 3. "Hay Mom" adalah sebuah nilai/value 4. maka kita membutuhkan ketiganya untuk menjadikan script ini menjadi sebuah ekspresi dalam Jscript.
Operator	- + / * Dan masih banyak lagi	Operator digunakan untuk menangani variabel. Dan fungsi aritmatika adalah bentuk dari operator.
Statement conditional	var uangSaku = 5000; if(uangSaku >= 6000){ alert("Beli roko super setengah"); } else if(uangSaku >= 70000 \|\| uangSaku == 10000){ alert("Go to TKW"); } else if(uangSaku >= 11000 && uangSaku >= 70000000){ alert("Pindah rumah ke Amerika"); } else{ alert("Manyun"); }	Statement conditional adalah perintah yang berjalan hanya dalam kondisi tertentu Kondisi memerlukan operator bitwise. Cara kerja operator bitwis membandingkan dua elemen dan kembali ke ekspresi Boolean, bisa benar atau salah. Operator logical menghubungkan dua atau lebih pada ekspresi Boolean. Dan Statement conditional mengikuti sintaks umum dari pernyataan kondisional yang berjalan jika kondisi terpenuhi.

Sumber : http://www.jqjacobs.net/web/javascript.html

Bagaimana cara membuat sub menu horizontal

2013-01-19T21:43:00.001-08:00

Melanjuti pembicaraan dari postingan saya sebelumnya yaitu bagaimana cara membuat menu horizontal. Dan pada point paling bawah pada postingan sebelumnya ada keterangan yang mana penjelasan tersebut seperti dibawah ini

Untuk membuat Submenu horizontal kita hanya memanfaatkan tag ul dan li sebagai acuan, dan tidak lepas dari CSS untuk mengaturnya agar cara kerja submenu tersebut berjalan dengan semestinya

Dan keterangan tersebut akan kita gunakan untuk sub menu horizontal ini, dan dibawah ini adalah keseluruhan dari HTML dan CSS di postingan sebelumnya

HTML

    
<div class="mental">
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

.mental {
  width:100%;
  height:25px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
	color:black;
	float: left;
	list-style: none;
	margin:0;
	padding: 0px;
	background:orange;
}
.mental li a {
	display: block;
	color:black;
	text-decoration:none;
	padding: 2px 10px 2px 10px;
}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Tahap pembuatan sub menu

Saya akan ambil sampel menu di bagian <li><a href="#">Category</a></li> yang nantinya akan menjadi induk dari anak menu (lihat kode atas dibagian menu horizontal yang saya beri warna merah) dengan catatan pindahkan terlebih dahulu penutup </li> dan taruh di akhir anak menu nantinya, contoh sampel dibawah

<li><a href="/">Category</a> 

<ul>

<li><a href='#'>Orang Jelek</a></li>

</ul>

</li> 

Lihat tag penutup <li> berwarna biru di atas yang baru saja kita pindahkan di bawah penutup anak menu, untuk warna orange adalah anak menu dari induk Category.

Untuk kode keseluruhan submenu horizontal yang baru saja kita tambahkan dapat dilihat dibawah ini ;

<div class='mental'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a>  <!--  penutup li harus dipindahkan di akhir anak menu-->
      <ul>
        <li><a href='#'>Kaya</a></li>
        <li><a href='#'>Miskin</a></li>
        <li><a href='#'>anda</a></li>
      </ul>
    </li>   <!-- letak penutup li induk yang dipindahkan pada elemen penutup anak menu-->
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

Sampai disini kita baru saja membuat submenu horizontal, sehubung kita sama sekali belum mengatur selector CSS anak menu yaitu li ul, maka yang akan terjadi adalah seperti gambar dibawah ini

Struktur tampilan submenu terlihat bopenk dan sedikit bopak

Tahap perapihan tampilan sub menu

Dalam tahap perapihan pada anak menu <li>, yang kita butuhkan yaitu bagian CSS untuk mengatur bagian properti dan value dalam perapihan selector sub menu horizontal nantinya. Dan dibawah ini adalah CSS awal perapihan dalam penampilan sub menu horizontal ;

.mental li ul {
	position: absolute;  /* penting, karena memposisikan elemen anak submenu tidak nyata */
	width: 170px;        /* mengatur lebar ul dari anak li induk */
	left: 999em;         /* memposisikan ul dari anak li induk ke arah kiri */
}
.mental li ul a {
	width: 140px;        /* pastikan nilai ini lebih kecil dari .mental li ul */
}
.mental li li a {
	float: none;           /* menetralkan posisi anak menu yang ada di .mental li ul */
	margin: 0px;
	border-bottom: 1px solid #ccc;
	height: 30px;
}
.mental li li a:hover  {

	color: #ff0000;
}
.mental li:hover ul{
	left: auto; /* menetralkan posisi left yang berada di .mental li ul saat keadaan cursor berada di atas menu */
}

Gambar hasil akhir

Hasil akhir pembuatan sub menu horizontal

Membuat submenu atau anak menu ini sama halnya seperti kita membuat menu horizontal satu induk, namun yang mengharuskan membuat submenu ini berbeda adalah dalam mengatur posisi anak menu secara vertikal seperti pengaturan CSS yang ada di atas, contoh anak menu <ul> pada selector .mental li ul mengharuskan lebar 170px, dan nilai selector .mental li ul a harus lebih kecir dari selector .mental li ul, jika tidak elemen anak menu ini akan momposisikan kembali menjadi horizontal

Kode selengkapnya

HTML

<div class='mental'>  
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a>
      <ul>
        <li><a href='#'>Kaya</a></li>
        <li><a href='#'>Miskin</a></li>
        <li><a href='#'>anda</a></li>
      </ul>
    </li>
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

CSS

.mental {
  width:100%;
  height:25px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
	color:black;
	float: left;
	list-style: none;
	margin:0;
	padding: 0px;
	background:orange;
}
.mental li a {
	display: block;
	color:black;
	text-decoration:none;
	padding: 2px 10px 2px 10px;
}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Membuat sub menu horizontal finish. Sekarang anda dapat memodif kembali dengan memanfaatkan selector a dengan menggunakan :hover :focus :active dan sebagaina, contoh

.mental li ul a:hover
.mental li ul a:focus
.mental li ul a:aktive

atau

.mental li li a:hover
.mental li li a:focus
.mental li li a:aktive

Uji Kreativitas anda, semoga bermanfaat.

Bagaimana cara membuat menu horizontal

2012-12-28T23:31:00.000-08:00

Cara membuat menu horizontal ini diharapkan sobat dapat membuatnya secara mandiri tanpa harus searching sana-sini dan pada akhirnya tidak sesuai dengan harapan. mungkin cara ini adalah cara paling sederhana sehingga bagi para pemula dapat memahami untuk mempelajari cara pembuatannya

Pertama anda buka dokumen HTML atau Notpad untuk menuliskan kerangka dibawah ini

<div class="mental">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Category</a></li>
        <li><a href="/">Contact</a></li>
    </ul>
</div>

Perhatikan bahwa tag div diberi class mental, class inilah yang akan kita gunakan saat menulis kode CSS nantinya. Karena struktur menu menggunakan tag <li> maka akan berbentuk daftar list pada browsr, lihat gambar dibawah.

Langkah ini kita baru saja membuat list calon horizontal

Berikutnya kita akan menambahkan CSS rule untuk tag mental, ul dan li agar tersusun horizontal

.mental {
  width:100%; /* panjang menu horizontal */
  height:25px; 
  background:orange; /* warna latar belakang menu horizontal */
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
  color:black;
  float: left;
  list-style: none;
  margin:0; /* atur posisi margin selector li */
  padding: 0; /* atur posisi padding selector li */
}

Lihat pengaturan CSS di atas, pada selektor .mental li digunakan untuk mengatur penampilan elemen <li>, kemudian kita telah mengatur properti posisi menu ini dengan list-style: none; agar list yang menempel pada elemen <li> tidak di ikut sertakan, sedangkan penambah float-left dengan tujuan menu ini searah dengan menu induk (lihat gambar dibawah)

Hasil akhir pembuatan menjadi list menjadi horizontal
dengan bantuan CSS

Sampai disini kita telah berhasil menyusun list ini menjadi horizontal. Namun langkah ini belum selesai, bagaimana kita dapat memodif kembali menu horizontal ini agar terlihat menarik.

Untuk selanjutnya kita akan atur kembali css selector .mental li a untuk element yang memiliki link anchor yang berada pada bagian tag <li>

.mental li a {
  display: block;
  padding: 2px 10px 2px 10px; 
  color:black; /*mengatur warna teks menu */
  text-decoration:none; /*underline pada tag a di hilangkan */
}
.mental li a:hover {
    color:BlueViolet; 
    background:Lime;
    border-radius:5px; /* w3c */
    -moz-border-radius:5px; /* mozila */
    -webkit-border-radius:5px; /* chrome */
}

Hasil akhir dari penggunaan tag a, a:focus dan a:hover

fungsi hover adalah saat cursor berada di atas elemen yang memiliki keterangan hover, maka ia akan meresfon yang terjadi pada selector yang ditindih oleh cursor

Hasil akhir dari keseluruhan dalam membuat menu horizontal

<div class='mental'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

.mental {
  width:100%;
  height:25px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
	color:black;
	float: left;
	list-style: none;
	margin:0;
	padding: 0px;
	background:orange;
}
.mental li a {
	display: block;
	color:black;
	text-decoration:none;
	padding: 2px 10px 2px 10px;
}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Selebihnya anda dapat memvariasikannya kembali dengan border dan warna kesayangan anda. Untuk membuat Submenu horizontal kita hanya memanfaatkan tag ul dan li sebagai acuan, dan tidak lepas dari CSS untuk mengaturnya agar cara kerja submenu tersebut berjalan dengan semestinya.

Dipertemuan berikutnya saya akan share bagaimana cara membuat submenu horizontal untuk menindak lanjuti dipostingan Bagaimana cara membuat menu horizontal ini.

Cara menambah Elemen Header

2012-12-20T08:24:00.000-08:00

Untuk mengatur atau menambah bagian elemen header, ada bagian-bagian tag header yang harus kalian ubah di beberapa tag HTML header tersebut sedemikian rupa dengan tujuan elemen tersebut dapat di manipulasi/ditambah, dipindah dan dihapuskan.

Dibawah ini adalah target sampel elemen header ;

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="title blog anda (Header)" type="Header">

Code di atas dapat di artikan kurang lebih seperti dibawah ini ;

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Bagian class dan id header menandakan bahwa maximal gadget header adalah 1 (satu) dan tidak dapat menambahkan element header

<b:widget id='Header1' locked='true' title='title blog anda (Header)' type='Header'>

Gadget id header1 menandakan benar terkunci dengan judul blog jenis/type header

Dari penjelasan di atas, dapat disimpulkan bahwa maximal gadget header adalah 1 (satu) dan tidak dapat ditambah, dipindah dan dihapuskan.
Berikut adalah gambaran dari penjelasan tentang header di atas ;

Maxwidget : Jumlah maximal yang akan ditampilkan
Showaddelement : Perintah ini untuk mengatur apakah penambahan (add a widget/tambah gadget) pada Section/Bagian Gadget diperbolehkan atau tidak
Locket : mengatur apakah element yang dituju (header) dikunci atau tidak (dipindah dan dihapuskan)

Untuk mensiasati gadget header agar dapat ditambah, dipindah dan dihapuskan adalah dengan merubah bagian HTML class, id dan widget dengan langkah sebagai berikut ;

Masuk pada Edit HTML dan jangan lupa untuk mencentang kotak widget expand
cari kode <div id='header-wrapper'>
Lihat kode dibawahnya terdapat kode kurang lebih seperti di bawah ini

<b:widget id='Header1' locked='true' title='title blog anda (Header)' type='Header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ubah kode true menjadi false
Ubah angka 1 menjadi 2 atau 3 sesuai dengan kebutuhan
Ubah no menjadi yes bila anda ingin memindahkan elemen header
Sehingga kode tersebut menjadi seperti dibawah ini

<b:widget id='Header1' locked='false' title='title blog anda (Header)' type='Header'>

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Bila dirasa sudah cukup simpan setingan

Note ;

Bila ingin tahu hasil pengaturan di atas, silahkan tuju halaman tata letak dan lihat dibagian elemen header, apakah terjadi sesuatu atau tidak

Perbedaan dari fungsi margin dengan padding

2012-12-10T06:00:00.000-08:00

Seperti yang sering sekali kita melihat dari sekian banyak kode yang ada pada kode script CSS, sering kita menemukan kedua kode tersebut. Dan sedikit penjelasan dari fungsi margin dengan padding, bahwa kedua fungsi tersebut sebenarnya hampir sama walaupun keduanya berbeda, dan dibawah ini akan di jelaskan fungsi dari margin dan padding tersebut.

Dan fungsi dari margin dengan padding dapat saya simpulkan seperti gambar di atas

Margin

Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.

Contoh pengkodean dari margin tersebut seperti dibawah ini

body {
Margin-top : 10px ;
Margin-rigth : 5px;
Margin-bottom : 0px;
Margin-left : 5px;
}

yang menjadi patokan dari fungsi ini adalah dimulai dari atas, kanan, bawah dan kiri, atau bila berdasarkan talar kita adalah searah dengan jarum jam.
Dari keterangan dari pengkodean margin di atas, dapat di gabungkan menjadi


Margin : 10px 5px 0px 5px; /*atas 5, kanan 5, bawah 0, kiri 10*/
Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini
Margin : 10px 5px 0px; /*atas 5, kanan 0, bawah 5, kiri 0*/

Seperti yang saya katakan diatas yang telah saya singgung mengenai Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini, ini menandakah bahwa value kanan 5px mengisi kekosongan value yang berada dibagian kiri. Jadi yang dapat saya simpulkan adalah bila kita menggunakan metode seperti ini maka margin tidak lagi mengikuti dengan arah jarum jam melainkan dari atas kebagian bawa, dan dari kanan kebagian kiri

Padding

Seperti yang telah saya terangkan di atas bahwa fungsi margin dengan padding sebenarnya hampir sama walaupun keduanya berbeda, dan yang membuat berbeda dari fungsi padding ini yaitu fungsi padding mengatur seleksi batas jarak pada bagian dalam (lihat gambar)

Contoh pengkodean dari Padding tersebut seperti dibawah ini

body {Padding-top : 15px ;
Padding-rigth : 5px;
Padding-bottom : 15px;
Padding-left : 5px;
}

Dari keterangan pengkodean dari Padding di atas, dapat di gabungkan menjadi

Padding : 15px 5px 15px 5px
atau bila value seperti ini dapat di singkat kembali seperti ini
Padding : 15px 5px;

Silahkan di praktekkan kembali untuk mengetahui lebih jauh tentang fungsi dari kedua fungsi margin dan padding ini.

5 style tampilan thread comment dengan CSS

2012-11-30T23:25:00.002-08:00

5 style tampilan thread comment dengan CSS - Sempat sebelumnya gaptek32 share langsung 8 style blockquote, dan kini dalam postingan ini gaptek32 kembali dengan sharenya 5 style tampilan thread comment sekaligus dengan CSS, semoga sobat semua menyukai dengan tampilan thread comment nya. Dan berikut adalah cara penginstalannya,

Masuk terlebih dahulu pada blog yang ingin dipasang thread comment
Dashboard
Pilih menu Template
Edit HTML
Centang Expand Template Widget, lanjutkan
Cari kode ]]></b:skin>
Taruh salah-satu dari kode thread comment ini di atas kode ]]></b:skin>

1. Tampilan thread comment V1

.comments {font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51)}
.comments 
.comments-content a{color:#3B5998 !important}
.comments h2,
.comments h3,
.comments h4{
font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;font-size:16px}
.comments 
.comments-content 
.comment{margin:0 0 0;padding:10px 10px;border-top:1px solid #e9e9e9;border-left:1px solid #ccc}
.comments 
.comment 
.comment-header,
.comments 
.comment 
.comment-actions,
.comments 
.comment 
.comment-actions a,
.comments .comment 
.comment-thread
.inline-thread,
.comments 
.comment 
.continue{
margin:0 0 0;padding:0 0 0;border:none;background:transparent}
.comments 
.comment 
.comment-header{
margin-bottom:4px}
.comments 
.comment 
.comment-header 
.datetime a{
color:#808080 !important
}.comments 
.comment 
.comment-actions a{padding-right:5px}
.comments 
.thread-toggle 
.thread-arrow{
width:7px;height:7px;padding-right:4px
}.comments 
.comment 
.avatar-image-container,
.comments 
.comment 
.avatar-image-container img{
width:50px;height:50px;max-width:none;max-height:none;border:none;padding:0;margin:0;outline:none}.comments .comment .comment-block{margin:0 0 0 60px !important}.comments .comment .comment-thread.inline-thread{margin:7px 0 0 22px}.comments .comment .comment-thread.inline-thread ol{margin:7px 0 10px !important}.comments .comment .comment-thread.inline-thread .comment{background-color:#EDEFF4;padding:5px 5px 0;margin:1px 0 0;border:none;border-bottom:1px solid #D2D9E7}.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img{width:32px;height:32px}.comments .comment .comment-thread.inline-thread .comment .comment-block{margin:0 0 0 40px !important}.comments .comment .comment-content{text-align:left}
.comments 
.comments-content 
.icon.blog-author {
display: none
}.comments 
.comments-content 
.blog-author:after {
content:"\2039\2002 Admin";margin-left:10px;color:#ccc;font-size:13px;
}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment:last-child{
border-left:2px solid #A8B2CE !important
}
.comments-content span.comment-actions{position:absolute;top:0;right:0;height:20px}.comments .comments-content span.comment-actions a{font-size:12px;padding:4px;color:#333 !important;}.comments .comments-content .item-control{display:inline}#comment-editor{width:101%!important} .comment-form{width:101%;max-width:101%}

Tampilan thread comment V1

2. Tampilan thread comment V2

#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4MRqmRvck8fcr2YwTmR9rkrSNoFXSYcZcZTvk_VB8XXMzaih-ufV1LkcDhMkz2jRgKf8cZw931iRNLE4mgpWAndMgH6HH96HBHEHg27rpx9hyphenhyphenLhsWlm-oeVl_gDoKZ595yUZ8WD8pmqX/s400/icon_comments.png) no-repeat 3px .3em;width:528px;font-size:16pxt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:560px;}.comment-form {width:560px;}#comments-block{border:0 solid #ccc;width:510px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}#comments-block .avatar-image-container img {background-color: transparent;background-image: url(http://img1.blogblog.com/img/anon36.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}.comments .comments-content .icon.blog-author {background-repeat: no-repeat;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAC30lEQVQ4ja1UTUiiURRtI9MirJ1JEJIlmBDaONCYRQvRoLKwf6yIyp8sI4ZgQFHaFC0iC2YrRITjYlathqAWMW1atdGBwTLNLm1apdau7vn4lCalmYERHu9779177r3nnmvF09NTxf9abz7KZDJpXV3deWNjI6nVauzSfwJjAHVtba0E38PDw00qlYosFgv19/fTyspKk2gjgd2bYHK5/HNDQwNpNJoIZ1Hp8/net7S00Pj4OM3NzVE4HNbyubK+vh7v1Nzc/KksGEcyKpVK6urqot7eXjKZTId6vf6X0WikqakpcjqdAI11dHQc6nQ6MpvN1NPTQwaDQVcClkwmP05MTFwAyO120/T0NI2OjpLdbieHw0Fer1cAHBsbK95vbGwkUqmUtlyZ7+7v77/Mzs4mAbSwsED8DYCbYDCYxI4z7hEMd/l8PgS/spytr69Xt7e3X42MjAhAm5ubiWw2e8JvYQ50srq6mpicnCSPx0OLi4tXe3t71SWcFdrPhFJbW5tA+Pz8fObu7m6b36tE46rb29ttq9V6g2Yg2ODgoGDPfudFMACBUHCByDD2+/2X/PZaV1KbzXYJO5TrcrkE+4GBASqCcUfS0BFAQDaXAF7SfX19Na80WKPVatPICJnBFmt5eTn9krMDXj8eHh5OZ2ZmrtE1GHMGEZaBtDANCoUCZ4GGpaWl68fHx1P4if6/N2Bra6uaDROFMlBCd3d3igG+8zhhJ86WOCAFAoHE/v5+aQPEyFD2Ny5D4A7tR9dQOs5DQ0NCRgAqyIb5+8r2khIw7ogJc8iZEItX0BE7ZQAGZ3HP4B5ACAThMvn6cjr7sLa29hNlsN4umL/dTCZzzMMuZAmi+XfMQt3lTl8gYCQSibOfuhwYlicWi53lcrkdKDsUCrWyiIXZBBhz1Ip7FvJOPB4/42/Hn/7PmgojEo1GlZ2dnWnmRmj/0dGRsjB6ot3f/zmK6j940f6qt+yfAdOYXbY4BoePAAAAAElFTkSuQmCC);}.comments .comments-content .loadmore a {border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}.comments .continue {border-top: 2px solid #cccccc;}.comments .comments-content .datetime a{float: right;color: #00000;}.comment-block .comment-footer a:link, a:visited {color:#000000;}.comments .avatar-image-container {border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.comments .continue a{color:#000000;}#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD5EChPo_V036R27aI4Hz2pF56DjEVPSSoU8a33pAb0Re1d8roV_V-elY8gk_Ak3oWCM-GfhWOLqjZwZTVqzhW4g9tLZsqOl6_88VVMb-23Br_LxVqxL8u_QhOU7x5rTklOWCeBfYIKhn/s0/header-shadow.png) top repeat-x;margin:10px auto 0;margin:10px 0;padding:10px 10px;border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;}.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }.avatar-image-container {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}.avatar-image-container:hover {-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}/* Delete Comment */.item-control {display: inline;}

Tampilan thread comment V2

3. Tampilan thread comment V3

.comments {font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51)} 
.comments 
.comments-content a{color:#3B5998 !important} 
.comments h2, 
.comments h3, 
.comments h4{ font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;font-size:16px} 
.comments 
.comments-content 
.comment{margin:0 0 0;padding:10px 10px;border-top:1px solid #e9e9e9;border-left:1px solid #ccc} 
.comments 
.comment 
.comment-header, 
.comments 
.comment 
.comment-actions, 
.comments 
.comment 
.comment-actions a, 
.comments 
.comment 
.comment-thread 
.inline-thread, 
.comments 
.comment 
.continue{ margin:0 0 0;padding:0 0 0;border:none;background:transparent} 
.comments 
.comment 
.comment-header{ margin-bottom:4px} 
.comments 
.comment 
.comment-header 
.datetime a{ color:#808080 !important }
.comments 
.comment 
.comment-actions a{padding-right:5px} 
.comments 
.thread-toggle 
.thread-arrow{ width:7px;height:7px;padding-right:4px }
.comments 
.comment 
.avatar-image-container, 
.comments 
.comment 
.avatar-image-container img{ width:50px;height:50px;max-width:none;max-height:none;border:none;padding:0;margin:0;outline:none}
.comments 
.comment 
.comment-block{margin:0 0 0 60px !important}
.comments 
.comment 
.comment-thread
.inline-thread{margin:7px 0 0 22px}
.comments 
.comment 
.comment-thread
.inline-thread ol{margin:7px 0 10px !important}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment{background-color:#EDEFF4;padding:5px 5px 0;margin:1px 0 0;border:none;border-bottom:1px solid #D2D9E7}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.avatar-image-container,
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.avatar-image-container img{width:32px;height:32px}
.comments 
.comment 
.comment-thread
.inline-thread 
.comment 
.comment-block{margin:0 0 0 40px !important}
.comments 
.comment 
.comment-content{text-align:left} 
.comments 
.comments-content 
.icon.blog-author { display: none }
.comments 
.comments-content 
.blog-author:after { content:"\2039\2002 Admin";margin-left:10px;color:#ccc;font-size:13px; } 
.comments 
.comment 
.comment-thread 
.inline-thread 
.comment:last-child{ border-left:2px solid #A8B2CE !important } 
.comments-content span
.comment-actions{position:absolute;top:0;right:0;height:20px}
.comments 
.comments-content span
.comment-actions a{font-size:12px;padding:4px;color:#333 !important;}
.comments 
.comments-content 
.item-control{display:inline}
#comment-editor{width:101%!important} 
.comment-form{width:101%;max-width:101%}

Tampilan thread comment V3

4. Tampilan thread comment V4

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wmdWVnNLSRBRzE0trUnbaAYU3Z4k0nl4iz-RPvz4jgwxo7z9v91HN7m2THk-h5gY6CQ6K1D1rjOE2RKL0_Q1KeVnRLqLX_1ni08YkkcE9LMw_uCzLEX70V_U0sf3hIf27Kw0p-m_u0M/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Tampilan thread comment V4

5. Tampilan thread comment V5

.comments .avatar-image-container{max-height:50px;max-width:50px;height:50px;width:50px; border-radius:29px;padding:2px;border:2px solid #39E939;box-shadow:-1px -1px 1px #444,2px 2px 4px #444;background:#1B3CFA;margin:2px 4px 2px 2px;}
.comments .avatar-image-container img{width:50px;max-width:50px;height:50px;max-height:50px;border-radius:25px;border:0 solid #FE081C !important;}
.comments .comment-block{margin-left:75px;}

Tampilan thread comment V5

Jika sudah selesai dengan pilihan 5 style tampilan thread comment
save/simpan

Cara daftar Alexa rank dan verifikasi blog di Alexa rank

2012-11-22T00:51:00.002-08:00

Alexa rank - adalah sebuah web yang merangking sebuah web/blog dari jumlah teratas sampai terbawah. seperti yang kita ketahui, semakin mengurangnya jumlah alexarank berarti semakin bagus pula web/blog dimata berbagai mesin pencarian dan para pesaing web/blog lainnya. Perlu diketahui bahwa para advertiser saling berbondong-bondong dan antusias untuk mencari website mana yang alexaranknya menipis. Apalagi bila alexaranknya menurun di setiap harinya,

Mengapa Alexarank diburu dan menjadi patokan para advertiser - karena web/log yang diketahui alexaranknya sedikit, tanda bahwa web/blog tersebut memang dalam trafiknya bagus dan banyak pelancong setiap harinya. Nah sudah taukan mengapa para advertiser lebih memilih jumlah alexanya lebih sedikit.

Bila sudah memahami manfaat Alexa rank, sekarang yang kita butuhkan hanya menginstal alexa rank ke blog kita. tapi sebelum ke tahap penginstalan kita diharuskan mendaftar terlebih dahulu pada website alexa untuk mesubmit blog kita pada alexa dan mengambil kode scriptnya. caranya seperti dibawah ini ;

Cara mendaftarkan blog pada Alexa rank

klik alexarank untuk melengkapi form pendaftaran

Jika sudah, sobat buka Email yang barusan didaftarkan di Alexarank untuk verifikasi link pendaftaran alexa
Jika sudah, maka sobat akan dibawa pada halaman seperti gambar dibawah ini untuk memasukkan pasword alexa milik sobat

Untuk tahap ini, setelah sobat selesai membuat password alexa, kemudian sobat pilih menu menu "Site Tool" yang ada di bagian atas, lalu lihat kebagian paling bawah ada gambar "Claim Your Site" Sobat klik gambar tersebut

Setelah tahap atas selesai, kemudian pada tahap berikutnya sobat masukan "URL blog sobat" kemudian klik "Claim Your Site"

Kemudian sobat akan dibawa ke halaman "Plans an Princing" (Rekomendasi, sobat pilih "free sign up" jika ingin membuat free acount site)

Setelah itu sobat diharuskan mengisi URL yang ada di kotak
Setelah itu sobat akan dibawa ke halaman "Dasbor Alexa rank" kemudian lihat kebawah ada sederetan kode HTML itu untuk petunjuk pemasangan dan kode veririfikasi alexa untuk blog sobat, dan dibawah ini adalah contoh kode veririfikasi alexa milik gaptek32

<meta content='UKfo47vEsUUl4S68dqv5RAcdJI4' name='alexaVerifyID'/>

Note :

Jangan menutup jendela "Dashbord Alexarank" sebelum memasukkan kode ID verifikasi dari alexa rank pada template sobat

Setelah mendapatkan kode dari alexa, sekarang tuju blog sobat pada halaman Edit HTML untuk memasukkan kode tersebut pada blog/template sobat

Masuk pada blog/template sobat di halaman Edit HTML
Cari kode <head> atau </head>
Kemudian masukkan kode alexarank dibawah <head> atau diatas </head> yang barusan kode didapat dari Alexa rank
Jika sudah save
Kembali pada dashbord Alexarank untuk Verifikasi ID alexa

Kembali pada brows Alexa rank untuk konfirmasi bahwa kode ID tersebut telah terpasang pada blog sobat

Kembali pada dashbord Alexarank untuk Verifikasi bahwa blog sobat telah terpasang kode dari alexa rank
Kemudian lihat dibawah ada tombol "Verify My ID"
Klik tombol "Verify My ID"

Cara mengambil kode alexa rank untuk widget/gadget blog

Selanjutnya untuk cara memasang widget alexa rank, sobat kembali ke menu "Site Tool" (masih pada Alexa rank yang letaknya pada navigasi menu atas)
Jika sudah, lihat dibagian bawah Ada sederetan gambar, lalu pilih gambar "Alexa Site Widget" Klik gambar tersebut

Lalu sobat akan dibawa pada halaman seperti gambar dibawah ini untuk memasukkan URL dan memilih salah satu widget yang diinginkan untuk dipasang pada blog sobat

Setelah sudah memasukkan Url Blog sobat, lalu sobat kembali akan dihadapkan oleh sebuah halaman, yang disini adalah halaman Kode Widgets yang harus dipasang pada widget yang siap untuk di pasang pada blog,

Cara memasukkan kode alexa pada widget

Masukkan kode html Alexa Widget pada blog dengan cara masuk ke Blogger, Tata Letak, Tambah Gadget, pilih HTML/Javascript. paste kode Alexa Widget ke HTML/Javascript
Simpan.

Ok, semoga bermanfaat dan yang terpenting adalah isinya dapat difahami :)

Tips mengatasi error "Google Code Subversion Repository"

2012-11-18T00:02:00.001-08:00

Google Code Subversion Repository - disebabkan karena terjadinya error pada kode javascript yang telah tertanam pada blog, baik itu pada widget maupun pada bagian template si pemilik blog tersebut. dan biasanya pesan ini akan muncul pada brows firefox, untuk browser yang lain saya juga belum tahu. dan sepengetahuan saya mengapa terjadinya error Google Code Subversion Repository itu dikarenakan kode JS (seperti yang kita ketahui bahwa kode JS banyak jenisnya seperti recent comment artikel terkait dsb yang di upload pada googlecode) si pemilik telah kadaluarsa/dihapus/dipindahkan dan bahkan di banned oleh googlecode (bila si pemilik JS mengupload pada googlecode).

Ciri blog yang terkena error "Google Code Subversion Repository" - dengan menggunakan jendela firefox akan keluar pesan seperti gambar dibawah ini dengan otomatis pada blog yang terkena error "Google Code Subversion Repository".

kurang lebih pesan error "Google Code Subversion Repository" seperti ini.

Cara mencari sumber error - Sobat cari kode JS yang sekiranya terdapatkan error seperti recent comment, popular post dan kode-kode yang mengandung JS/pihak ketiga lainnya yang tidak muncul pada homepage/halaman posting.

Asal kira - Nah lo, bener nggak nih min gaptek32 cara mengatasi error "Google Code Subversion Repository". Untuk permaslahan ini, si admin pernah mengalami permasalahan error ini pada blog gaptek32. yah sobat boleh percaya 75% tentang keampuhan cara mengatasi error "Google Code Subversion Repository" ini, namanya juga asal kira :D .

Tips cara mempulihkan error - Coba sobat baca di point ketiga, nah bila sudah menemukan terdapat JS yang mencurigakan dengan terjangkitnya error, tinggal hapus saja kode tersebut. Dan bila sobat ingin menggunakan kode JS yang sama (seperti recent comment, popular post yang menggunakan JS/pihak ketiga). Dan dibawah ini adalah contoh kode JS recent comment milik bloggerbugis yang disimpan pada googlecode ;

<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>

Mungkin sedikit tips dari admin, jangan pernah menggunakan kode JS/pihak ketiga yang disimpan sama seperti sebelumnya, karena kemungkinan besar kode tersebut telah kadaluarsa/dihapus/dipindahkan dan bahkan di banned oleh googlecode. carilah kode tersebut yang di simpan oleh sobat yang lain.

Sobat dapat menambahkan Tips mengatasi error "Google Code Subversion Repository" untuk melengkapi Tips cara mempulihkan error ini hingga menjadi 100% :D.

Semoga dapat membantu permasalahan dengan Tips mengatasi error "Google Code Subversion Repository"

Membuat kolom footer

2012-11-16T13:16:00.002-08:00

Mungkin kalo berbicara tentang tampilan footer saya adalah termasuk yang care dengan tampilan footer agar terlihat simpel dan modis. Nah buat sobat yang ingin membuat halaman footernya ingin dirubah dan mungkin overload juga dengan pernak-pernik seperti kebanyakan frame dsb, mungkin ini salah-satu alternatif untuk merubah tampilan halaman footer.

Oia, untuk sobat yang menggunakan template bawaan oleh blogger seperti watermark, sebelumnya saya juga pernah mempostingnya disini.

4 kolom footer, sobat dapat menambahkan atau mengurangi kolom footer tersebut dengan membaca note pada point paling bawah

Untuk melanjutkan silahkan ikuti step by step dibawah ini ;
Langkah pertama

Log In Blog, Buka template -> Edit HTML -> Kasih tanda centang pada menu "expand widget tempate".
kemudian Copas CSS dibawah ini di atas kode script ]]></b:script> (untuk mempermudah dalam pencarian silahkan gunakan ctr+f atau F3)

#footer-wrapper{width:990px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px 0}
#footer-wrapper h2{background: #9B9996;font-size:12px;padding:3px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase;background:text-align:center;color:#ffffff;}
.footerwrap{background:#333;width:990px;margin-startside:auto;margin-endside:auto;text-align:center;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px 0}
.footer{font:normal 12px Arial;color:#999;line-height:1.3em}
.footer ul{list-style:none;color:#EAE9E8;margin:0;padding:0}
.footer li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCwdPy3ZcF-GkcVkx6M128DS9bOIvtuLKsGGlYMMqPpHOzFTMOf9USztQSGzIHDlWTQXzHj6CD-40HFNh7DR_t4wlDhQHNhiabyjm9sYUd-bSMQmhX3knYgri9jbd-va70g9Hz8QyMuSB/s1600/bullet.png) no-repeat 1px 5px;font:normal 13px Arial;color:#EAE9E8;text-indent:0;line-height:1.1em;margin:0;padding:2px 0 3px 16px}
.footer .widget{margin:0 0 5px;padding:0 auto}
.footer a:link,.footer a:visited{font:normal 12px Arial;color:#999;text-decoration:none}
.footer a:hover{color:#eee;text-decoration:none}
#footer1-wrapper{width:260px;float:left;margin:0;word-wrap:break-word;overflow:hidden}
#footer2-wrapper{width:240px;float:left;margin:0;word-wrap:break-word;overflow:hidden}
#footer3-wrapper{width:240px;float:left;margin:0;word-wrap:break-word;overflow:hidden}
#footer4-wrapper{width:240px;float:left;margin:0;word-wrap:break-word;overflow:hidden}

Masih pada Edit HTML, dilanjutkan untuk mencari </body>
"alternatif" biasanya bila hasil template download oleh rekan blogger, cari kode <div id='credit-footer'> atau cari yang sejenisnya
Kemudian taruh kode dibawah ini di atas kode tersebut

<div class='footerwrap'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
<div id='footer1-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/>
</div>
<div id='footer2-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'/>
</div>
<div id='footer3-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'/>
</div>
<div id='footer4-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div>
</div>

Jika sudah reveiw terlebih dahulu
Bila cocok dengan selera, langkah terakhir save/simpan

Note :

Kedua warna merah adalah lebar dari footer, silahkan sesuaikan dengan lebar dari template sobat
Warna hijau adalah warna background footer
Warna orange adalah warna judul, silahkan sesuaikan agar terlihat relefan dengan warna background footer
Warna biru adalah lebar dari tab footer
Bila ingin menambahkan satu tab footer lagi, silahkan tambahkan kode dibawah ini tepat dibawah kode yang saya beri warna Merah muda atau bila ingin menghapus satu tab dihapus saja kode yang saya beri warna Merah muda tersebut

Berkenalan dengan CSS dan HTML

2012-11-12T07:05:00.000-08:00

CSS

CSS (Cascading Style Sheet) adalah bahasa gaya yang mendefinisikan layout HTML dokumen. CSS digunakan untuk mengatur tampilan struktur isi halaman web. Misalnya, CSS bekerja dengan font, warna, margin, garis, tinggi, lebar, gambar latar belakang, posisi dan banyak hal lainnya.

Setiap aturan style CSS dibagi menjadi 3 (tiga) bagian yaitu selector, property dan value. dan penempatan CSS ini lebih efektif bila ditempatkan di antara <head> atau di atas </head> dan di apit oleh <style> dan ditutup dengan </style> . Contoh

<head>
<style type="text/css">
Selector { 
   Property:
   Value;
}
</style>
</head>

Penjelasan selector, property dan value :

Selector di awali dengan
tanda ( # ) untuk ( id ) dan,
tanda ( . ) untuk ( class )
Property dan value di apit oleh tanda kurung kurawang ( {...} )
Pembatas Property menggunakan titik dua ( : )
Pembatas Value menggunakan titik koma ( ; )

Karena css digunakan untuk mengatur tampilan struktur isi maka css harus mengacu pada elemen tertentu dari dokumen/TAG yang diformat. Contoh

h1 { color: red ;}

Elemen HTMLnya seperti dibawah

<h1> Akau adalah warna merah </h1>

Ilustrasi

h1 /*-- selector --*/
{ /*-- kurawang buka untuk diintegrasikan pada nilai selector */
color /*-- properti --*/
: /*-- penutup properti--*/
red /*-- keterangan nilai sebuah properti --*/
; /*-- penutup value --*/
} /*-- kurawang tutup --*/

Sehingga keseluruhan format ini dapat kita menulisanya menjadi :

</html>
<head>
<style type="text/css">
h1 { color: red ;}</style>
</head>
<body>
<h1> Akau adalah warna merah </h1>
</body>
<html>

Contoh di atas menunjukkan bahwa h1 { color : red; } adalah ;

Selector : h1
Property : color
Value : red;

Bila di terjemahkan adalah, mengatur h1 menjadi warna merah

HTML

HTML kepanjangan dari HyperText Markup Language adalah sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. Elemen HTML yang biasa dengan sebutan TAG digunakan untuk menyusun struktur isi halaman web. Berikut contoh sederhana dari seluruh struktur tag template ;

Tag pembuka	Isi kontent	Tag penutup	Keterangan
<html>	head, CSS, body dan lain-lain	-	Tag pembuka di dimulai dari head, body dll
<head>	Title, CSS, JS dan lain-lain	</head>	Berfungsi untuk memonitori titel dan tampilan tubuh website
<body>	Lihat artikel ini untuk mengetahui keseluruhan kode yang ada pada tubuh template	</body>	Pada bagian ini digunakan untuk membuat atau menampilkan text, link dsb
-	head, CSS, body dan lain-lain	</html>	Tag penutup dari tag html teratas

Dan dibawah ini adalah sampel Elemen Dasar HTML yang dapat kita tempatkan di tubuh body

Tag pembuka	Keterangan
<h1>...</h1>	Lazimnya tag h1 untuk judul
<p>...</p>	Paragraf
<b>...</b>	Tulisan tebal (bold)
<i>...</i>	Italic (miring)
<u>...</u>	Underline (garis bawah)
<br />	Garis baru

Study kasus :
1. buka sebuah notepad dan taruh kode dibawah ini di dalam notepad yang telah anda buka

<html>
<head>
<title>Titel</title>
</head>
<body>
<h1>Judul</h1><br />
<p>Paragraf</p><br />
<b>Huruf tebal</b><br >
<i>Huruf miring</i><br />
<u>Garis bawah</u><br />
</body>
</html>

2. Jika sudah di taruh pada notepad masing-masing,
3. kemudian Simpan dengan catatan file name di akhiri dengan .html sehingga penyimpanan file name menjadi Admin-ganteng.html
4. Buka file yang barusan anda simpan dan lihat hasilnya

Kesimpulan CSS dengan HTML

Kesimpulannya adalah dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan yang menarik, disukai mesin pencari, dan mampu mengoptimalkan dari segi penampilan website.

Submit blog pada yahoo directory

2012-11-09T09:00:00.003-08:00

Mensubmit web/blog, sangatlah di anjurkan oleh para mastah seo dan mastah-mastah lain ke berbagai mesin pencarian seperti google, yahoo, bing dan lain-lain yang memang lebih dahulu berpengalaman dalam mengoptimalkan blognya dalam persaingan mesin pencarian. Dan karena itu gaptek32 akan share cara submit blog pada yahoo terlebih dahulu, walaupun artikel ini sudah banyak yang memposting oleh sobat blogger lain. Namun untuk sumber referensi sobat yang memang kebingungan cara submit blog pada yahoo directory, yow apa salahnya bila gaptek32 sedikit membantu :)

Berikut step by step Submit blog pada yahoo directory

Masuk Halaman http://add.yahoo.com/fast/add?74294
Jika sudah, silahkan pilih Standard Consideration pada kotak yang kedua

Langkah yang harus di ketahui :

Di halaman ini anda dapat mengecek apakah website/blog sobat memang belum terdaftar pada Yahoo Directory.
Di sini juga anda harus memilih email anda yang akan dijadikan sebagai Security Email ID Please be prepared to provide a Site Security Email ID as well as the site title, URL, and a brief description.

Contoh blog yang belum terdaftar pada yahoo directory seperti ini

Bila memang blog/website anda belum terdaftar dan sobat sudah menentukan security email ID sobat langsung saja anda klik "Continue" dan anda harus login terlebih dulu ke akun Yahoo untuk meneruskan ke langkah selanjutnya
Setelah login pada akun yahoo, secara otomatis sobat akan dibawa pada halaman untuk mengisi formulir Submit Yahoo directory
Isikan Form sesuaikan dengan data blog sobat
Security ID email
Isikan email pada contact person

Jika selesai, klik submit
dan congraulation cara submit blog sobat di yahoo directory telah selesai

Note :
Perlu diingat sekali lagi bahwa layanan Yahoo! Directory Sugget a Site Standard / Free ini hanya terbuka untuk mendaftarkan blog atau website non komersial saja. Itupun tanpa jaminan waktu permohonan anda akan disetujui seperti yang tertulis pada halaman Yahoo! Directory Submit Standard:

"No time guarantee

· Due to the volume of suggestions, we cannot guarantee a timely consideration of your site."

Google Pagerank update 09 november 2012

2012-11-08T04:02:00.001-08:00

Google Pagerank update 09 november 2012
Akhirnya hari yang ditunggu-tunggu dan yang di nanti-nanti oleh para blogger maniak, blogger ria, dan semua macam jenis pecinta blogger telah tiba. yaitu google kembali update pada bulan november 2012 tenggal 09 kemarin. Dan semua usaha optimasi-optiasi yang kita lakukan serasa terbayar lunas.

Aneh bin ajaib bin takjub bin lier but seneng
Setelah mengalami 2kali sitelink error pada mesin pencarian dan brokenlink yang sangat wuah dan tak terhitung jumlahnya pada blog ini, namun google masih tetap menyayangi gaptek32 walaupun banyak masalah di blog ini. buktinya feedburner blog ini sehari sebelum mendapatkan -/+66 yaitu hanya 3, paling bantar banyaknya 4/5. Aneh bin ajaib bin takjub bin lier sama google but seneng pisan :D

Aneh bin ajaib bin takjub bin lier but seneng ke dua
Nah yang ini lebih Aneh bin ajaib bin takjub bin lier but seneng lagi, ternyata disamping mendapatkan feed yang dateng tak di undang dan pergi tak di anter, ternyata blog ini mendapatkan PR 2 :D . Si adminnya juga bingung, padahal si adminnya tuh bener-bener kaga ngarti masalah cara mengoptimalkan SEO seperti metatag, H1 H2 dst gaptek32 yakin dulur semua lebih jago dari ane.

Mungkin karena backling dan blogwalking....??
Sepengalaman ane tentang backling dan blogwalking, pada blog asuhan ane yang terdahulu ane rawat itu lebih banyak mengais backling dan blogwalking nya daripada blog yang sekarang ini. tapi tetep aja dapet PR 1 dibandingkan blog yang sekarang ini.

ISU Google PR update akhir desember menurut para mastah blogger...!!!
Nah bagi sobat yang ingin tahu kelanjutan update PR dari google, para mastah dan mastahi (mungkin mastahi sebutan untuk blogger cewek kali yah) sudah memprediksi akan terjadi PR di akhir bulan desember. yah semoga saja bener, karena memang sering sekali terjadi salah dalam perhitungan oleh mereka. tapi saya ucapkan banyak terimakasih yang sebesar-besarnya pada master-master yang sudah memberikan prediksi PR, dengan begitu kami para blogger menjadi tahu harus bagaimana bila saat prediksi itu datang.

Ucapan terimakasih dan kritik saran
saya kira sekian untuk informasi google pagerank update 9 november 2012, yang sudah di timpuk oleh google PR saya ucapkan SELAMAT untuk anda. dan ungkapan banyak terimakasih untuk semua sahabat setia blog | gaptek32 yang sering berkunjung di blog ini. bila ada krikik dan saran pada postingan-postingan blog ini yang memang tidak sependapat atau yang ingin di tanyakan sok atuh di tanyaken wae nya, haturnuhun pisan ey ka dulur sadayana :)

Cara Membuat Sidebar Berada Dikiri Dan Kanan Postingan Blog Bag.2

2012-11-02T08:33:00.001-07:00

Pembahasan kali ini adalah cara membuat dua tab sidebar berada pada posisi kiri postingan semua [SSM] , untuk lebih jelasnya silahkan buka mengenai Mengenal struktur dasar template blog, penjelasan mengenai membuat sidebar blog. dan cara membuat sidebar berada dikiri dan kanan postingan blog bag.1 untuk dijadikan bahan referensi.

S S M

Sudah dibuka bahan referensinya?? Nah bila dicermati lagi mengenai penjelasan sidebar bag.1, sebetulnya sudah terlihat jawaban semua tentang bagaimana cara membuat sidebar S,M,S S,S,M dan M,S,S. dan yang menjadi patokan adalah <div id='main-wrapper'>, karena main wrapper tersebut adalah berisi konten postingan (M) yang meliputi blok Post, blok Comment, dan bagian lain yang dapat dibuat dari opsi Add Page Element.

Contoh dasar pengkodean terstruktur S,S,M agar mudah difahami :

<div class='kirisidebar1-wrapper'>
<div class='kirisidebar2-wrapper'>
<div id='main-wrapper'>

dan untuk kode keseluruhan S,S,M yang diatas sebagai berikut ;

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

<div class='kirisidebar2-wrapper'>
<b:section class='kirisidebar2' id='kirisidebar2' preferred='yes'>
</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>

Nah terlihat jelas bahwa main wrappar (kode yang dicetak tebal) yang menjadi bahan pertimbangan. berarti untuk M,S,S sudah terbayang kan dimana letak penempatannya :) . tapi biarpun begitu, Cara Membuat Sidebar Berada Dikiri Dan Kanan Postingan Blog Bag.3 nanti akan gaptek32 share pada pertemuan berikutnya.

Note :

Untuk kode CSS/pengoptimalan tampilan sidebar, insaallah akan saya share, yang terpenting adalah tau dimana peletakkan kode nya

Buku tamu

2012-10-31T12:52:00.001-07:00

Buku Tamu ini di peruntukkan sebagai wadah silaturahmi untuk para pengunjung gaptek32 yang ingin berkomentar mengenai blog ini, pertanyaan, konsultasi, ucapan salam perkenalan. sobat juga dapat menitipkan link dan lain sebagainya asalkan link tersebut link mati. Bila ingin bertukar link silahkan buka link ini, bila ingin mengirimkan email pribadi silahkan buka link ini.

Semoga dengan buku tamu ini semakin bertambah tali persahabatan keakraban dan kekerabatan sesama blogger. dan Semoga pula dengan buku tamu ini dapat bermanfaat dan di manfaatkan untuk semua..

Terimakasih dan mohon maklum atas buku tamu sealakadarnya ini.

SALAM BLOGGER

Mengatasi halaman statis yang terpasang auto readmore

2012-10-24T09:15:00.002-07:00

Pada dasarnya, auto readmore adalah fasilitas yang mana berguna untuk memangkas hanya ringkasan artikel saja. Namun perlu diketahui, fungsi halaman statis blog kita pun kena imbasnya karena tidak bisa terlihat penuh melainkan hanya terlihat ringkasan dari halaman tersebut karena ikut terkena efek dari fungsi script Auto Readmore tersebut. dan yang lebih di sayangkan, walaupun kita sudah klik readmore pun tetap tidak ada efek sama sekali melainkan hanya itu-itu saja.

Untuk sobat yang belum tahu apa itu laman statis, di bawah adalah gambar tersimpel cara membuat laman statis tersebut ;

Nah udah tau kan, kalo gitu langsung ke inti pembuatannya.

Masuk ke Dasboard klik tanda anak panah lalu klik "Template"
Klik "Edit HTML" >> Klik "Proceed"
Klik "Expand Widget Template"
Cari kode readmore yang telah terpasang, kurang lebihnya seperti dibawah ini!

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>Read more...</a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tambahkan kode berikut tepat diatas kode berwarna merah

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

Kemudian tambahkan kode penutup berikut tepat dibawah kode berwarna hijau

</b:if>

Simpan template

Membuat Artikel terkatit dengan fungsi scrolling

2012-10-23T07:48:00.000-07:00

Artikel terkait. mungkin sahabat gaptek32 semua udah pada tau kan apa itu artikel terkait, apalagi yang sering baca koran online. Nah lebih-lebih sobat blogger, udah barang pasti udah kaga asing lagi yang namanya artikel terkait. karena dengan memasang artikel ini sudah menjadi keharusan dan wajib dicari-cari dan digunakan untuk blognya. apalagi yang ngarti tentang seo. Nah ngomong-ngomong tentang seo, Dengan memasang Artikel terkait ini juga salah-satu syarat tips seo juga loh. tapi seonya seo frendly / On page. mau tau kenapa, silahkan tanyakan sama sobat blogger yang blognya lebih merujuk ke tips seo. kalo kata-kata saya salah, tolong dibenerin yah. Tapi kalo bener tolong dikasih duit dong adminnya wkwkwk.

Yah dari pada pembicaraan semakin melebar, mending langsung ke inti persoalan. Langkah pertama ;

Masuk dulu ke blogg yang ingin dipasang artikel terkait
Tata letak kemudian Edit HTML
Centang kotak kecil "Expand Template Widget"
Cari kode ]]></b:skin>
Kemudian letakkan kode di bawah ini persis di atas ]]></b:skin>

.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Dilanjutkan dengan mencari kode <data:post.body/>
Bila sobat sudah menggunakan Autoreadmore, pastekan kode dibawah ini setelah <data:post.body/> Auto readmore tersebut.

<b:if cond='data:blog.pageType == "item"'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0;
padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/><script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('albri').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<span style="gt;Powered by <a href="http://hanyarangkuman.blogspot.com/">amir25ans Widgets </a></span>

Rubah tulisan berwarnah merah dengan kata yang sobat inginkan
Setelah itu simpan template anda dan lihat hasilnya

Penjelasan mengenai membuat sidebar blog

2012-10-23T06:35:00.000-07:00

Pada postingan Cara membuat sidebar berada dikiri dan kanan postingan blog Bag ada beberapa point yang saya ambil seperti dibawah ini.

Note :

Untuk lebih memahami postingan ini, Admin sangat menganjurkan baca juga postingan tentang Mengenal struktur dasar template blog dan Mengenal struktur dasar kode body
Buka tiga tab sekaligus untuk dijadikan sumber referensinya
Ilustrasi Sidebar berada dikiri dan kanan diantara postingan, saya akan menyingkat kata-kata yang harus dipahami terlebuh dahulu

Postingan yang selanjutnya akan disingkat [M]
Sidebar yang selanjutnya akan disingkat [S]
Contoh pada postingan ini adalah Sidebar, Main, Sidebar berarti akan disingkat menjadi [S,M,S]

Jadi inti permasalahannya ada pada singkatan (untuk selanjutnya saya akan menggunakan kata aba-aba untuk mengganti kata singkatan)

Nah untuk pemahaman ketingkat selanjutnya, saya akan memberi sedikit gambaran dan ilustrasi berikut aba-aba (singkatan) yang telah saya sederhanakan.

S M S

S S M

M S S

Dimungkinkan terget yang ingin dibahas oleh Admin mengenai Cara membuat sidebar hanya tiga yaitu S,M,S S,S,M dan MSS. Untuk pemostingan / penjelasan mengenai Cara membuat sidebar akan berkala, Admin tidak pasti juga pada postingan berikutnya mengenai Cara membuat sidebar.

Untuk penjelasan kali ini saya kira sudah cukup, tapi bila sobat ada yang ingin ditanyakan silahkan bertanya melalui komentar.

Verifikasi Gaptek32 di Technorati : RWGWV2REEZEW

2012-10-21T23:08:00.002-07:00

Pada postingan sebelumnya ane pernah memposting tentang Verifikasi gaptek32 ke technorati : blablabla, pada saati itu memang yang pertama kalinya mendaftarkan blog ini juga sudah men claim http://gaptek32.blogspot.com ke mesin directory technorati. dan manfaat untuk blog ini sangat-sangat terasa begitu juga trafik blog gaptek32 langsung melejit pesat. mungkin karena ketidak tahuan dan minim pengetahuan tentang cara kerja technorati ini, secara sengaja Admin Muhamad Nurarif meng edit ulang profil dan My claimed blogs dikarenakan ada sedikit perubahan dalam deskripsi dan kata kunci yang ingin dirubah oleh si Admin, tanpa disardari trafic blog ini pun merosot begitu drastis dan dalam mesin pencarian google pun menjadi berubah entah kenapa si adminnya juga bingung.

Setelah diselidiki kembali, akhirnya si admin baru menyadari setelah membuka Email yang di lontarkan oleh si Technorati yang berisikan

This is an automatically-generated email.
Thank you for submitting your blog claim on Technorati. Technorati will need to verify that you are an author of the site http://gaptek32.blogspot.com/ by looking for a unique code. We have just assigned the claim token RWGWV2REEZEW to this claim. Please visit http://technorati.com/account/ for more details, including how to use the claim token.
Thank you.

Yah mau tidak mau Amin harus memposting ulang dengan judul Verifikasi Gaptek32 di Technorati : RWGWV2REEZEW guna meng claim kembali blog ini ke technorati. dan semoga postingan ini dapat dijadikan pelajaran berharga untuk sahabat semua juga untuk si admin karena ketidak tahuan tentang masalah ini. dan besar harapan blog ini mendapatkan Email kembali seperti yang pernah dikirimkan oleh pihak technorati seperti dibawah ini

This is an automatically-generated email.
Congratulations, your claim is now complete! Please allow 24 to 48 hours for Authority and recent posts to begin showing for your site now that it has been successfully claimed. Once they are there, we will update your site's Authority once per day.
At first you may not see your site listed in the Technorati Blog Directory for all of the categories you've selected. As you write blog posts around those topics, you should see your Topical Authority in those categories begin to rise.

Percaya atau tidak, technorati sangat berpengaruh besar untuk blog ini dalam mesin search engine.

Cara membuat sidebar berada dikiri dan kanan postingan blog Bag.1

2012-10-20T09:48:00.001-07:00

Pada postingan sebelumnya ane ngeshare hanya baru pernak-pernik yang sekiranya dibutuhkan sebagai pelengkap blog, dan jarang memberikan tips dan trik ke inti mendesign sebuah template, walaupun hanya beberapa. Nah untuk Postingan kali ini sekiranya dapat sedikit membantu lebih jauh cara membuat / mendesign template. dan postingan kali ini dipokuskan tentang cara membuat sidebar berada dikiri dan kanan template blog.

Note :

Untuk lebih memahami postingan ini, Admin sangat menganjurkan baca juga postingan tentang Mengenal struktur dasar template blog dan Mengenal struktur dasar kode body
Buka tiga tab sekaligus untuk dijadikan sumber referensinya
Ilustrasi Sidebar berada dikiri dan kanan diantara postingan, saya akan menyingkat kata-kata yang harus dipahami terlebuh dahulu

Postingan yang selanjutnya akan disingkat [M]
Sidebar yang selanjutnya akan disingkat [S]
Contoh pada postingan ini adalah Sidebar, Main, Sidebar berarti akan disingkat menjadi [S,M,S]

Jadi inti permasalahannya ada pada singkatan (untuk selanjutnya saya akan menggunakan kata aba-aba untuk mengganti kata singkatan)
Untuk lebih jelasnya saya akan membahas kembali tentang permasalahan aba-aba ini pada postingan berikutnya.

Pada dasarnya (saya ambil kode simple untuk lebih mudah untuk dipahami) kode keseluruhan body yang ada pada template blog seperti dibawah ini (terkecuali template bawaan yang telah disediakan oleh blogger)

<div id='content-wrapper'>

 <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>

<!-- end content-wrapper -->

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

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

<!-- spacer for skins that want sidebar and main to be the same height-->

Coba sobat perhatikan kode yang berwarna merah diatas betul sob, kode yang berwarna merah adalah kode sidebar yang mana letak posisi sidebar tersebut berada disamping kanan main wrapper (Kontent postingan blog). dan untuk kode yang berwarna abu-abu harap di abaikan, karena kita akan sedikit lebih mempokuskan cara menambahakan sidebar kiri dan kanan diantara postingan blog

Apabila ingin menambahkan sidebar baru di sebelah kiri, maka kode sidebar yang diatas ada yang harus di tambahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini (lihat tembahan warna orange pada script dibawah) ;

<div id='content-wrapper'>

<div class='sidebarL-wrapper'>
<b:section class='sidebar' id='sidebar1' 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>
<!-- end content-wrapper -->

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

<div class='clear'> </div>
<!-- spacer for skins that want sidebar and main to be the same height-->

Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar dengan cara yang sangat sederhana, walaupun tidak mengerti maksud dari kode-kode HTML nya.

Langkah selanjutnya adalah menuju ke bagian CSS. Kode inilah yang memonitori kode yang berada dibagian body. Coba lihat kode CSS yang ada dibawah ini, anggap lebar blog, lebar postingan blog, sidebar kanan dan sidebar kiri blog (masing-masing lebar selector template yang telah saya beri warna biru) sama dengan lebar template blog sobat.

#outer-wrapper {width: 840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
#main-wrapper {width: 410px;float: left;word-wrap: break-word;overflow: hidden;}
#sidebarL-wrapper {width: 220px;float: left;padding-left:10px; word-wrap:break-word; overflow: hidden;}
#sidebarR-wrapper {width: 180px;float: right;padding-right:10px;word-wrap:break-word;overflow: hidden;}

Membuat gambar animasi melayang disamping / pojok blog

2012-10-20T07:50:00.001-07:00

Ada sedikit kesalahan pada setiap judul gaptek32 yang harus diluruskan. pada dasarnya, judul ini dan pada postingan sebelum-sebelumnya ada kesalahan entah sedikit atau malah fatal pada judul yang sudah ane Publishkan dengan awalan judul "MEMBUAT" yang seharusnya "MEMASANG" seperti contoh kesalahan pada judul postingan kali ini "MEMBUAT GAMBAR ANIMASI MELAYANG DISAMPING / POJOK BLOG" yang seharusnya "MEMASANG GAMBAR ANIMASI MELAYANG DISAMPING / POJOK BLOG" . Secara logika, ane yakin sobat sudah memahami letak kesalahan di judul yang seperti ini.

Pertanyaannya, mengapa si Admin masih menggunakan judul yang memang sudah tahu letak kesalahannya. gini sob, sederhananya ane hanya menyamakan baris Membuat dengan berinisial M persetiap label M dengan kata kunci Membuat. yah niatnya sih supaya terorganisir gitu (Asik bahasanya)

Langsung saja deh ke pokok pembahasan dan cara peletakkan Animasi melayang tersebut

Langkah pertama ;

Masuk pada blog masing-masing yang ingin dipasangkan Anmiasi melayang ini
Pada dashbord silahkan menuju pada menu template
Pilih Edit HTML
Lanjutkan
Jangan lupa untuk mencentang widget Expand
Carilah kode ]]><b:skin>
Jika sudah Pastekan CSS dibawah ini tepat di atas ]]><b:skin>

#Animasi-melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Dilanjutkan dengan mencari kode </body>
Jika sudah ketemu pastekan kode script dibawah ini tepat di atasnya

<div id='Animasi-melayang'>
<a href='http://gaptek32.blogspot.com'>
<img border='0' src='http://komunitasseo.com/public/style_emoticons/default/104.gif'/></a>
</div>

Jika sudah simpan

Note :

Ganti Kode script yang diberi warna merah dengan Alamat URL sobat.
Ganti warna Hijau dengan Alamat URL gambar milik sobat sendiri / yang sobat kehendaki
Semoga sukses

Disamping ini adalah contoh URL gambar Animasi Gambar melayang tersebut.

Memasang kode untuk cek berat blog dalam postingan

2012-10-09T21:50:00.003-07:00

Postingan yang ini juga hampir sama sob dengan postingan Memasang daftar isi dalam postingan dan Memasang kode warna dalam postingan dilihat dari sisi manfaat , tujuan yaitu untuk mempermudah pengunjung atau mengoptimalkan sebuah blog/template dan cara peletakkan kodenya pun sama didalam postingan dengan mode HTML bukan pada Compose, hanya yang membedakan adalah dari cara kegunaannya :) , seperti namanya "cek berat blog" , yah fungsinya itu :D

berikut adalah cara memasang "cek berat blog" dalam postingan. ceck this out.

Buatlah postingan baru
Kemudian pilih mode HTML bukan pada Mode Compose
Jika sudah masukkan kode script dibawah ini didalam postingan yang sudah menggunakan Mode HTML

<center>
<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr> <td height="91" valign="top"><table class="tooltop" style="border-collapse: collapse; height: 76px;"><tbody>
<tr> <td><br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr> <td colspan="5" valign="top"><b><span style="font-size: medium;">Masukkan Alamat Blog/Web Max 10 Url: </span></b></td> </tr>
<tr> <td colspan="4" valign="top"><textarea name="domain" rows="11" style="width: 100%;"></textarea></td> <td></td> </tr>
<tr> <td><input style="float: left;" type="submit" value="Check!" /></td> <td><span style="font-size: x-small;">(<a href="http://dlerist.blogspot.com/">http://dlerist.blogspot.com</a>)</span></td> <td></td> <td colspan="2"></td></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse; margin-left: auto; margin-right: auto; text-align: left;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr></tr>
</tbody></table>
<br />
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr align="left"></tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td></td> </tr>
<tr> <td height="39"></td> </tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script></center>

Jika sudah Publikasikan

Note :

Untuk melihat demo, silahkan klik link DEMO

Memasang daftar isi dalam postingan

2012-10-09T10:39:00.000-07:00

Pada postingan sebelumnya ane sudah ngeshare dengan judul Memasang kode warna dalam postingan , nah kali ini ane akan sharing cara Memasang daftar isi dalam postingan blog sobat. Untuk manfaat dan kegunaannya ane yakin sobat udah pada tahu semua dan tidak harus saya jelaskan kembali.

cara penginstalan kode ini sama seperti pada postingan sebelumnya,

yaitu memasangnya di dalam postingan dengan menaruh kode di atas pada Mode Edit HTML (bukan di compose) nya. berikut kode parse HTML tersebut ;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#daftar-isi {
background-color:#333;
border:2px solid #fafafa;
color:#fff;
margin-bottom:10px;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
box-shadow:0 1px 2px #000;
overflow:hidden;
}

#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Verdana',Arial,Sans-serif;
padding:10px 15px 11px;
color:#bbb;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
border-top:1px solid #444;border-bottom:1px solid #222;
background:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
background:-webkit-linear-gradient(top, #3c3c3c, #333);
background:-moz-linear-gradient(top, #3c3c3c, #333);
background:-o-linear-gradient(#3c3c3c, #333);
background:linear-gradient(#3c3c3c, #333));
}

#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background:-webkit-linear-gradient(top, #248AB0, #21739B);
background:-moz-linear-gradient(top, #248AB0, #21739B);
background:-o-linear-gradient(#248AB0, #21739B);
background:linear-gradient(#248AB0, #21739B));
}

#daftar-isi ol {
background-color:#333;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}

#daftar-isi li {
line-height:normal;
font:normal 11px/100% 'Verdana',Arial,Sans-serif;
margin:0 0;
padding:5px 5px 5px 15px;
white-space:nowrap;
text-align:left;
border-top:1px solid #444;border-bottom:1px solid #222;
}

#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}

#daftar-isi strong {
font-weight:bold;
font-style:italic;
color:red;
}
</style>
<script type="text/javascript">
    showNew    = true;
    accToc     = true;
    openNewTab = true;

    var maxNew     = 10,
        baru       = "Baru!",
        sDownSpeed = 600,
        sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js"></script>
<script src="http://gaptek32.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Kemudian save,