Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...

16 Februari 2010

Tips Optimalisasi Setting Komputer (PC)

Seperti hari-hari pertama menggunakan mobil baru, jam-jam pertama memakai komputer baru juga berpengaruh terhadap pemakaian berikutnya. Pada saat-saat yang kurang menyenangkan ini, user perlu untuk melakukan beberapa hal penting. Dan persiapan ini harus dilakukan sejak saat pertama komputer siap digunakan. Setelah diinstalasi dengan sistem operasi dan aplikasi-aplikasi yang diperlukan sehari-hari. Sebelum dipacu hingga batas kecepatan. Sebelum menggunakannya untuk bersenang-senang.

Pada mobil baru, kali pertama yang lazim kita lakukan adalah mengatur seat pada posisi ternyaman dan kemiringan spion untuk pandangan ke belakang paling optimal. Kemudian, membiasakan diri dengan beragam panel, kedalaman pedal gas, kopling, dan pedal rem.

Semua aktivitas ini masih ditambah dengan memenuhi semua memori di perangkat audio dengan gelombang radio favorit. Tidak ketinggalan menambah beberapa aksesoris ringan seperti cutting sticker dan pengharum kabin. Terakhir, jangan lupa untuk mencoba beberapa kilometer perjalanan sebelum menekan pedal gas hingga ke batas merah speedometer.

Sebuah PC yang baru juga membutuhkan sentuhan-sentuhan seperti mobil baru, sebelum siap menjadi PC yang sempurna. Sekarang, mari kita beri sentuhan-sentuhan yang diinginkan PC baru itu.



  • Judul: 31 Jurus Menyempurnakan PC

  • Pengarang: MUH. ANTAR TEMMANGINGNGI

  • Total Halaman: 15

  • Password: linggih-blog.com

  • Download e-Booknya di sini

15 Februari 2010

"iframe" tag HTML

Embed Dokumen HTML menggunakan tag <iframe>


Adakah cara untuk menyisipkan situs lain secara aktual ke web/blog? Jika itu yang menjadi pertanyaan anda sekarang maka penggunaan tag <iframe> bisa menjadi salah satu jawaban dari beberapa solusi yang ada. Hasil dari penggunaan tag <iframe> ibarat seperti anda menonton televisi dalam televisi.

Tag <iframe> biasanya berisi dokumen HTML, contoh simpelnya seperti di bawah ini:

[html collapse="false"]
<iframe src="http://www.wikipedia.com" style="width: 100%; height: 300px"></iframe>
[/html]

Hasilnya akan seperti ini:



Membuat external link yang akan dimuat pada area <iframe>



Sekarang saatnya coba menambahkan link yang mana apabila di klik akan dimuat (dibuka) pada area <iframe>. Contoh codenya seperti di bawah ini:

[html collapse="false"]
<div><a href="http://www.lexus.com" target="internal">Lexus</a> | <a href="http://www.tokobagus.com" target="internal">Toko Bagus</a> | <a href="http://www.lapan.go.id" target="internal">NASA Indonesia</a> | <a href="http://www.msn.com" target="internal">MSN</a> | <a href="http://www.ebay.com" target="internal">eBay</a> | <a href="http://www.wordpress.com" target="internal">Wordpress</a></div>
<iframe src="http://www.tokobagus.com" style="width: 100%; height: 300px" name="internal"></iframe>
[/html]

Hasilnya akan seperti ini:




Menyisipkan atribut "name" pada tag <iframe> dan memakai atribut "target" = "internal" pada tag <a> maka halaman yang diklik akan di load (dimuat) pada area <iframe>

Menghilangkan Garis batas tepi <iframe>



Kebanyakan orang tertarik untuk menghilangkan garis batas tepi <iframe> agar tidak terlalu kelihatan pemakaian <iframe> pada dokumen html mereka. Hal ini bisa dilakukan dengan menambahkan beberapa atribut HTML seperi di bawah ini:

[html collapse="false"]
<iframe src="http://www.tokobagus.com" style="width: 100%; height: 500px" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>
[/html]

Maka hasilnya akan seperti ini:



Jika anda ingin menghilangkan scrollbar pastikan tinggi dari <iframe> harus mencakup semua halaman web untuk menghindari terpotongnya objek halaman dalam <iframe>

base64_decode WordPress Footer

Edit base64_decode Footer WordPress



Barangkali pernah mengalami, suatu ketika ingin memodifikasi footer wordpress yang pada umumnya konten footer nggak jauh dari link designer ataupun author theme. Anda ingin merubah linknya jadi 'no follow' atau menghilangkan sama sekali link designer dan authornya kecuali link alamat wordpress anda sendiri, tapi nggak tahunya kode diproteksi dengan 'base64_decode' seperti di bawah ini

[php]
<? eval(gzinflate(str_rot13(base64_decode( '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')))); ?>
[/php]

Nah... bingung kan, tuh kode mau diapain. Jika asal hapus aja, pasti deh waktu blog dibuka ada pesan error php. Ada cara paling gampang mengakalinya. Pertama biarkan saja kode apa adanya jangan dirubah dahulu. Upload semua file theme, kemudian buka homepage blog wordpress anda. Blok semua text footer, jika anda menggunakan browser firefox, klik kanan pada bagian yang diblok tadi kemudian klik pada pilihan "View Selection Source"

Contoh hasil dari "View Selection Source" seperti di bawah ini:

[html collapse="false"]
<!– start footer –>
<span style="margin-left:10px">Copyright 2009 <a href="http://www.website-anda.com/" title="Title website anda">Website-Anda.com</a> | <a href="http://www.designer-website.com" title="Free Wordpress theme">Link Designer</a> | <a href="http://www.author-website.com/" title="About Author Website">Author Website</a></span>
[/html]

Selanjutnya tinggal edit konten footernya sesuai keinginan, misal link designer dan authornya ingin anda jadikan 'nofollow' atau dihilangkan sama sekali kecuali link blog wordpress anda sendiri: (tambahkan kode php => '<?php wp_footer(); ?>' di bawah kode html footer yang telah anda ganti)

Edit link jadi 'nofollow'

[php collapse="false"]
<!– start footer –>
<span style="margin-left:10px">Copyright 2009 <a href="http://www.website-anda.com/" title="Title website anda">Website-Anda.com</a> | <a href="http://www.designer-website.com" target="_blank" rel="nofollow" title="Free Wordpress theme">Link Designer</a> | <a href="http://www.author-website.com/" target="_blank" rel="nofollow" title="About Author Website">Author Website</a></span>
<?php wp_footer(); ?>
[/php]

Hapus link designer dan authornya kecuali link blog wordpress anda

[php collapse="false"]
<!– start footer –>
<span style="margin-left:10px">Copyright 2009 <a href="http://www.website-anda.com/" title="Title website anda">Website-Anda.com</a>
<?php wp_footer(); ?>
[/php]

Setelah itu ganti kode 'base64_decode Footer WordPress' nya dengan kode di atas. Upload file php footer ke webserver.

Selesai.

Clear RAM Space

Trik Mendongkrak Kecepatan Komputer Dengan Membersihkan Space RAM




Anda pasti pernah mengalami ketika menggunakan komputer semakin lama, diiringi dengan semakin melambatnya sistem windows yang anda pakai. Hal ini biasanya dialami ketika komputer digunakan untuk bekerja dengan banyak program yang terbuka/dijalankan secara bersamaan.

Hal di atas terjadi dikarenakan RAM memori yang anda gunakan full (penuh) dengan program yang baru saja ditutup padahal anda tidak membutuhkannya lagi, tak jarang walaupun program sudah ditutup tetapi masih saja komputer berjalan lambat. Nah.. Untuk mengakalinya, gunakan trik seperti di bawah ini;


  1. Buka 'Notepad' dan ketikkan => 'FreeMem=Space(128000000)' <= tanpa tanda petik. Terserah isikan nilainya berapa saja, disarankan 128000000, 256000000, atau 512000000 (sesuaikan angkanya, disarankan maksimal setengah dari kapasitas RAM)

  2. Kemudian simpan dengan nama misalnya 'freshram.vbs'
    Ketika menyimpan pilih "All Files" pada pilihan "Save as type"

  3. Ketika anda merasa komputer berjalan lambat, jalankan file 'freshram.vbs' dengan klik dua kali atau klik kanan kemudian pilih 'Open'

  4. Selesai



Coba saja, have fun...

Tips Optimalisasi CSS File

Trik Memperkecil Ukuran File CSS


Sudah jelas jika semakin kecil ukuran file CSS maka logikanya semakin cepat pula browser meload file CSS. Ada beberapa trik yang dapat dilakukan untuk memperkecil (optimalkan) ukuran file CSS, berikut beberapa diantaranya:

BUAT FILE CSS DALAM SATU SINGLE FILE

Ketika pengguna (visitor) membuka halaman web dengan banyak objek (seperti misalnya gambar atau script) akan membutuhkan HTTP request yang mana request ini akan memperlambat waktu respon halaman web. Semakin banyak objek yang diload (dimuat) otomatis waktu respon halaman web akan semakin lambat. Logikanya 1 File CSS = 1 HTTP Request. Maka buat 1 file css untuk semua halaman web, contohnya dapat anda lihat seperti ilustrasi di bawah ini (mempunyai 3 halaman web dengan 3 file CSS Yang berbeda)

[css collapse="false"]
<link rel="stylesheet" type="text/css" href="konten.css" />
<link rel="stylesheet" type="text/css" href="tentang.css" />
<link rel="stylesheet" type="text/css" href="kontak.css" />
[/css]

Maka sebaiknya gabungkan beberapa file CSS tersebut menjadi satu file CSS. Misal setelah digabungkan akan diberi nama baru "codesaya.css" penulisan code setelahnya akan menjadi seperti ini:

[css collapse="false"]
<link rel="stylesheet" type="text/css" href="codesaya.css" />
[/css]

BUAT EXTERNAL FILE CSS

Seperti yang anda lihat pada code di atas, merupakan bentuk dari External Style CSS. Menggunakan external file CSS kenyataannya dapat meload halaman web lebih cepat karena file CSS sudah masuk dalam cache browser, Jadi ketika dibuka kembali maka browser tinggal memuat ulang (reload) file css dari cache yang tersimpan di komputer. Lain halnya dengan menggunakan Inline Style CSS yang disisipkan diantara code HTML, browser akan selalu reload CSS untuk setiap halaman yang dibuka. Memang dengan menggunakan inline CSS dapat mengurangi jumlah HTTP request, tetapi kekurangannya meningkatkan ukuran file dokumen web & selalu reload inline css. Lain halnya dengan menggunakan external file CSS.

SELALU TEMPATKAN CSS PADA BAGIAN HEADER

Menempatkan code css pada bagian header akan mempercepat loading halaman web, hal ini dikarenakan setiap code pada bagian header menjadi prioritas untuk diload. Lihat contohnya seperti di bawah:

Sebelum

[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<style>
body {
font-family:arial;
margin:0;padding:0;
}

h1 {
font-weight:850px;
margin:5px 0;
}
code css dan seterusnya.......
</style>
</head>
</html>
[/html]

Sesudah

[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<link rel="stylesheet" type="text/css" href="codesaya.css"/>
</head>
</html>
[/html]

MENGGABUNGKAN STYLE YANG SAMA

Kesalahan yang sering kali dilakukan, padahal dapat dibuat penulisan code CSS yang lebih simple. Ilustrasinya seperti dapat anda lihat di bawah ini:

Sebelum

[css collapse="false"]
h1 {padding:5px 0; font-family:arial; font-weight:650;}
#konten .heading {padding:5px 0; font-family:arial; font-weight:650;}
#konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]

Sesudah

[css collapse="false"]
h1, #konten .heading, #konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]

Namun dalam beberapa kasus, code css tidak dapat digabung menjadi satu atau hanya sebagian saja yang dapat digabung dikarenakan misalnya terdapat property yang sama tetapi dengan value yang berbeda. Contoh dapat anda lihat seperti di bawah:

Sebelum

[css collapse="false"]
#coba a.home {padding:5px; font-family:arial; font-weight:650; background:#fff url(home.gif) no-repeat}
#coba a.konten {padding:5px; font-family:arial; font-weight:650; background:#fff url(konten.gif) no-repeat}
#coba a.kontak {padding:5px; font-family:arial; font-weight:650; background:#fff url(kontak.gif) no-repeat}
#coba a.tentang {padding:5px; font-family:arial; font-weight:650; background:#fff url(tentang.gif) no-repeat}
[/css]

Dapat anda lihat setiap selector 'id' mempunyai property yang sama, namun salah satu diantaranya property "background" untuk setiap selector "id" mempunyai value yang berbeda. Maka penggabungan code CSS dapat juga dilakukan namun pengecualian untuk properties "background". Hasilnya akan seperti ini:

[css collapse="false"]
#coba a {padding:5px; font-family:arial; font-weight:650; background:#fff no-repeat}
#coba a.home {background:url(home.gif)}
#coba a.konten {background:url(konten.gif)}
#coba a.kontak {background:url(kontak.gif)}
#coba a.tentang {background:url(tentang.gif)}
[/css]

Kurangi Jumlah Line Breaks

Untuk setiap selector yang mempunyai beberapa property, disarankan property dan value nya dijadikan satu baris saja. Ilustrasinya seperti di bawah ini:

Sebelum

[css collapse="false"]
h2 {
font-family:arial;
padding:0;
margin:5px 0;
color:#000;
text-decoration:none;
}
[/css]

Sesudah

[css collapse="false"]
h2 {font-family:arial;padding:0;margin:5px 0;color:#000;text-decoration:none;}
[/css]

HILANGKAN TITIK KOMA (semicolon/';'}) TERAKHIR

Sebelum

[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none;}
[/css]

Sesudah

[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none}
[/css]

GUNAKAN SIMPLE COMMENT

Sebelum

[css collapse="false"]
/************************************/
/* Properties Header */
/************************************/
[/css]

Sesudah

[css collapse="false"]
/* Properties Header */
[/css]

SINGKAT KODE WARNA JIKA MEMUNGKINKAN

Sebelum

[css collapse="false"]
.konten {
color:#000000
<!-- atau -->
color:#FF0000
<!-- atau -->
color:#FFCC00
}
[/css]

Sesudah

[css collapse="false"]
.konten {
color:#000
<!-- atau -->
color:#F00
<!-- atau -->
color:#FC0
<!-- Namun Yang Seperti Ini Tidak Bisa DiRubah -->
color:#5B8BE3
<!-- atau -->
color:#1E5F07
<!-- atau -->
color:#171452
}
[/css]

HILANGKAN "px"

Sebelum

[css collapse="false"]
h1 {padding:0px; margin:0px;}
[/css]

Sesudah

[css collapse="false"]
h1 {padding:0; margin:0}
[/css]

GUNAKAN CSS COMPRESSION TOOLS

Jika anda malas untuk memekai cara manual seperti di atas. Gunakan tool online gratis di bawah ini:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

Image Slider Web/Blog

Trik Membuat Slider Image (Gambar) Pada Web/blog



Tentu saja web/blog lebih terlihat menarik dengan menambahkan animasi, seperti contoh yang akan dibahas di sini adalah membuat dan menambahkan slide image (gambar) pada website / blog. Seperti apa contoh slider image, langsung lihat saja contohnya pada halaman ini.

Slider Image yang akan dibuat akan mempunyai beberapa fitur antara lain:

  1. Slideshow dengan gambar disertai deskripsi singkatnya
  2. Tombol "Play, Pause, Next, dan Previous".
  3. Kecepatan / delay waktu slideshow yang dapat disesuaikan
  4. Script yang dapat disesuaikan dengan ukuran gambar yang dipakai

OK langsung saja, begini tahapan pembuatannya. Sebelumnya download dahulu bahannya di halaman ini.

Pertama buat dulu css nya seperti di bawah ini:

[css]
<style type="text/css">
#slider {
width: 300px;
height: 186px;
position: relative;
overflow: hidden;
}

#slider a:link, #slider a:active {
color: #FF0;
text-decoration: none;
}

#slider a:hover {
color: #F00;
}

#mask-gallery {
overflow: hidden;
}

#gallery {
list-style: none;
margin: 0;
padding: 0;
z-index: 0;
width: 900px;
overflow: hidden;
}

#gallery li {
float: left;
}

#mask-excerpt {
position: absolute;
top: 0;
left: 0;
z-index: 500px;
width: 100px;
overflow: hidden;
}

#excerpt {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100px;
background-color: #000;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #fff;
}

#excerpt li {
padding: 5px;
}

</style>
[/css]

Ganti ukuran gambar sesuai dengan gambar anda. Selanjutnya Copy dan pastekan kode script di bawah di atas atau di bawah kode css yang baru anda buat.

[jscript]
<script>
$(document).ready(function() {

var speed = 5000;


$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

var run = setInterval('newsscoller(0)', speed);

$('#gallery li:first, #excerpt li:first').addClass('selected');

$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);

return false;
});

$('#btn-next').click(function () {
newsscoller(0);
return false;
});

$('#btn-prev').click(function () {
newsscoller(1);
return false;
});

$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed);
}
);
});

function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

if (prev) {

var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');

var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');

$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);

}

</script>
[/jscript]

Var Speed= 5000, yang berarti mengatur delay untuk setiap pergantian gambar (semakin kecil nilainya maka semakin cepat delay pergantian gambarnya). "$('#mask-gallery').scrollTo(next_image, 800)" dan "$('#mask-excerpt').scrollTo(next_excerpt, 800)", nilai 800 mengatur kecepatan perpindahan slide (semakin kecil nilainya maka akan semakin cepat).

Selanjutnya buat konten yang mana harus diisikan antara kode <body> sampai dengan </body>. Contohnya seperti di bawah:

[html]
<div id="slider">

<div id="mask-gallery">
<ul id="gallery">
<li><img src="images/gambar1.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar2.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar3.jpg" width="300" height="186" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Isikan diskripsi singkat untuk gambar <a href="#">slideshow yang pertama</a></li>
<li>Selanjutnya bagian ini untuk deskripsi singkat <a href="#">gambar yang kedua</a></li>
<li>Dan ini merupakan deskripsi singkat untuk <a href="#">gambar yang ketiga</a></li>
</ul>
</div>
</div>

<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
[/html]

Nah sekarang link kan script file "jquery.scrollTo" dan "jquery-1.3.1.min" dalam folder "js" yang baru saja anda download diantara kode <head> sampai </head>. Cara link nya contohnya seperti di bawah ini:

[jscript collapse="false"]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
[/jscript]

Untuk pengguna blogger "src=..." gantikan dengan alamat url dimana script file tersebut anda upload. Jika anda mempunyai account gmail, upload file anda di google sites. Lihat hasilnya di sini.

Kode Warna HTML

Cara Tercepat Mengetahui Kode Warna HTML




Warna jika mau menghitung berapa jumlahnya mungkin bisa mencapai ratusan ribu atau bahkan jutaan kombinasi warna yang berbeda. Coba saja kalau tidak percaya, sebagai contoh warna putih jika ditulis dengan kode html akan seperti ini => #FFFFFF. Dengan kata lain terdiri dari kombinasi 6 digit kode huruf, atau jika dituliskan dengan bilangan berarti ratusan ribu.

Nah bagi anda yang sering otak-atik software pengolah gambar pasti tidak asing dengan kode warna HTML. Jika suatu misal anda ingin mengetahui kode warna html tertentu dari suatu objek, apa yang akan anda lakukan? Apakah mengambil sampel dari objek warna kemudian menyamakannya secara manual, memang cara ini bisa dilakukan namun kurang praktis dan memakan sedikit waktu.

Sekarang ada tool gratis "Instant Eyedropper" yang dapat mengetahui kode warna html dalam hitungan detik. Tertarik untuk mencobanya, ikuti langkah-langkahnya penggunaannya seperti di bawah ini:

Pertama download program gratisnya di sini, kemudian install pada komputer anda

Setelah terinstal jalankan "Instant Eyedropper", setelah itu klik "Instant Eyedropper" yang berada pada System Tray Taskbar Windows seperti gambar di bawah ini:

Instant Eyedropper pencari kode warna html dan kode warna lainnya

Kemudian klik pada icon "Instant Eyedropper" dan tahan, arahkan pada objek warna yang ingin anda cari seperti gambar di bawah ini:

Instant Eyedropper pencari kode warna html

Selesai... Cukup cepat kan dari pada memakai cara manual. "Instant Eyedropper" juga dapat diatur output kode warnanya seperti "HTML, Hex, Delphi Hex, VB Hex, RGB dan HSB."

Disable Navbar Blogspot

Cara Menghilangkan NavBar Blogger Pada Halaman Paling Atas


Bagi sebagian orang yang hosting blog mereka pada platform blogspot mungkin pernah mengeluhkan atau merasa terganggu dengan navbar blogger yang biasanya tampil pada halaman paling atas. Jika ingin menghilangkan (menghapus) melalui quick setting yang biasanya berada pada sebelah pojok kanan bawah, namun menu delete (hapus) tidak tersedia, hanya tersedia pilihan untuk merubah tampilan warna. Biasanya navbar ini aktif jika anda menggunakan template standar dari blogger.

Bagi anda yang menggunakan template standar blogger atau yang memodifikasi template standar blogger dan ingin menghilangkan navbar blogger, trik berikut ini dapat anda pakai. Ada beberapa alasan orang menghilangkan navbar blogger ini diantaranya; Blog anda akan kelihatan lebih profesional dan yang kedua menghemat tempat pada halaman paling atas. Namun dengan memasang navbar blogger ini juga mempunyai kelebihan antara lain; Memudahkan pengguna untuk mengedit halaman atau login ke akun blogger dan yang kedua sedikit lebih mendatangkan traffic ke blog anda karena jika orang lain membuka blog yang navbar blog nya aktif kemudian klik tombol 'Next' kemungkinan halaman blog anda yang selanjutnya akan muncul.

Ok langsung saja, begini caranya menghapus navbar blogger:

  1. Login ke Blogger menggunakan akun blogger anda.
  2. Klik pada layout
  3. Klik lagi pada bagian 'Edit HTML'.
  4. Cari kode berikut ini => ]]></b:skin>, kemudian kopi dan pastekan kode di bawah ini di atas kode ]]></b:skin>
  5. [css] #navbar-iframe { display: none !important; } [/css]
  6. Jika sudah klik tombol Save Template (simpan template)
  7. Selesai sekarang lihat preview blog anda, navbar blogger pada halaman paling atas sudah hilang.

Auto Readmore Blogspot

Membuat Read More Otomatis Blogspot



Kalau biasanya membuat readmore di blogspot pada paragraf pertama posting anda wajib mengetikkan kode ini => <span class="fullpost"> pada tab edit HTML, namun sekarang ada trik (Readmore Otomatis) yang memudahkan anda membuat readmore tanpa harus mengetikkan kode di atas.

Jika ingin memakai cara lama (dengan mengetikkan kode di atas => <span class="fullpost">), maka hal berikut ini yang harus anda lakukan. Pertama login ke akun blogger anda, navigasikan ke tab 'Layout' (Tata Letak) klik 'Edit HTML', kemudian cari kode berikut ini ]]></b:skin>. Copy dan pastekan kode berikut di bawah kode ]]></b:skin>:

[css collapse="false"]
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
[/css]

Kemudian cari lagi kode ini <p><data:post.body/></p> dan tambahkan kode berikut di bawahnya:

[xml collapse="false"]
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More.. (Ganti Read More.. dengan kata terserah anda contoh 'Selengkapnya')</a>
</b:if>
[/xml]

Agar paragraf postingan baru anda pada halaman utama blogspot terpotong maka ketika membuat posting navigasikan ke mode 'Edit HTML'. Ketikkan kode <span class="fullpost"> sebelum kata / kalimat depan yang ingin anda potong, dan tulis kode </span> setelah akhir kalimat yang ingin anda potong.

Cara ini bisa anda pakai untuk membuat read more, namun ada cara satu lagi yang lebih praktis. Cara ini secara otomatis akan membuat readmore untuk anda, berikut tahapan yang harus anda lakukan: Login ke blogger anda => 'LayOut' (Tata Letak) => klik pada bagian 'Edit HTML'. Temukan kode berikut <data:post.body/> (agar lebih mudah gunakan shortcut keyboard dengan mengetikkan 'Ctrl + F, kemudian pastekan kode tersebut). Ganti kode <data:post.body/> dengan kode di bawah ini:

[xml]
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/>
<script type='text/javascript'>
var blogID = "780351826145379977"
function retriveSummaryPost<data:post.id/>(json){document.getElementById("summary<data:post.id/>").innerHTML
= json.entry.summary.$t + "..."}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement("script");
script.src = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/"+POSTID+"?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>";
script.type = "text/javascript"; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);

}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>("<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div>
</b:if>
[/xml]

Ganti var blogID = "780351826145379977", jika tidak tahu dimana mencari BlogID anda login dulu ke blogger => arahkan ke bagian posting => lihat pada address bar. Contoh "http://www.blogger.com/posts.g?blogID=XXXXXXXXXXX". XXXXXXXXXXX adalah BlogID anda.

Selesai... Sekarang setiap kali anda posting maka secara otomatis pada halaman utama cuplikan posting anda akan terpotong.

http://www.bloggertipandtrick.net/how-to-add-auto-read-more-feature-with/

Dreamweaver Layout 3

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 3)




Jika pada bagian ke-2 template yang anda lihat sama persis dengan previewnya, selanjutnya tahap penyempurnaan akhir dapat anda praktekkan seperti yang tertulis di bawah.

Modifikasi kode 'Header'



Pada tag 'header (#header)' tambahkan kode berikut ini pada mode edit css (style.css) => position: relative; <= Kemudian tambahkan kode di bawah ini:

[css]
#header ul {
margin: 0;
list-style: none;
float: left;
right: 0px;
bottom: 0px;
position: absolute;
}

#header li {
float: left;
display: inline;
}

#header li a:link,#header li a:visited {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #4E4E4E;
padding: 34px 20px 20px 20px;
margin-right: 0.5em;
}

#header li a:hover,#header li a:active {
color: #060;
border-bottom: none;
}

#header li a.aktif {
background: url(../images/img03.jpg) no-repeat center top;
cursor: default;
color: #333;
}
[/css]

Modifikasi kode 'Konten Utama (maincontent)'



Tambahkan kode berikut ini => text-align: justify;

Modifikasi kode 'footer'



Tambahkan ID Tag seperti di bawah ini:

[css collapse="false"]
#footer p {
color: #fff;
font-size: 0.75em;
padding: 15px;
text-align: center;
font-family: arial;
font-weight: bolder;
margin: 0;
clear: both;
}
[/css]

Div Tag tambahan



Tambahkan id Tag seperti di bawah ini:

[css]
#logogambar p.text1 {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-style: italic;
margin: 0 0 0 15px;
padding: 90px 20px 0px 30px;
font-size: 30px;
color: #FFFFFF;
}
[/css]

Tambahkan juga kode ini untuk sliding tab sidebar:



[css]
#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
font:12px arial;
}

#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}

a.selected {
text-decoration:underline !important;
color:#4b412f !important;
}

#scroller-header {
background:url(../images/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}

#scroller-body {
background:url(../images/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}

#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}

#panel div {
float:left;
}

#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}

#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}

#panel ul li.last {
border-bottom:none !important;
}
[/css]

Nah selanjut tinggal menambahkan konten yang anda ingin tulis. Sebelumnya download dulu file tambahannya di link ini. Extract filenya, tempatkan gambar pada folder 'images' dan yang lainnya (file javascript) buatkan folder tersendiri. Beri nama folder 'js', tempatkan 'jquery.scrollTo.js' dan 'jquery-1.3.1.min.js' di folder 'js. Selanjutnya tambahkan kode berikut ini diantara tag <head> & </head>:

[jscript]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>

$(document).ready(function() {
$('#mask').css({'height':$('#panel-1').height()});
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
$('#panel div').width($('#mask').width());
$('a[rel=panel]').click(function () {
var panelheight = $($(this).attr('href')).height();
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
$('#mask').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
[/jscript]

Pada bagian tag <body> dibawahnya cari dan hapus tulisan "Content for id "header" Goes Here". Untuk header kontennya akan diisikan dengan navigasi menu, ambil contoh menu yang akan dipakai antara lain "Home, gallery, tentang, link, dan kontak". Maka "Content for id "header" Goes Here" ganti dengan kode di bawah ini:

[html collapse="false"]
<ul>
<li><a href="#" class="aktif">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Kontak</a></li>
</ul>
[/html]

"<a href="#" ganti dengan alamat link url anda. Selanjutnya cari kode "<div id="logogambar"></div>" ganti dengan:

[html collapse="false"]
<div id="logogambar">
<p class="text1">&#8220;Tulis kata-kata sakti anda <br />
pada bagian ini&#8221;</p></div>
[/html]

Selanjutnya cari tulisan "Content for id "maincontent" Goes Here" dan ganti dengan konten inti yang ingin anda tulis.
Cari lagi tulisan "Content for id "footer" Goes Here" dan ganti dengan footer anda, contoh: "<p>Copyright @ 2009 nama-websiteblog-anda.com</p>"


Yang terakhir cari "Content for id "sidebar" Goes Here" dan ganti dengan kode di bawah ini:

[html]
<div id="scroller-body">
<div id="mask">
<div id="panel">
<div id="panel-1">
<ul>
<li>Populer</li>
<li>Populer 2</li>
<li>Populer 3</li>
<li>Populer 4</li>
<li>Populer 5</li>
<li>Populer 6</li>
<li>Populer 7</li>
<li>Populer 8</li>
<li class="last">Populer 9</li>
</ul>
</div>
<div id="panel-2">
<ul>
<li>Komentar 1</li>
<li>Komentar 2</li>
<li>Komentar 3</li>
<li>Komentar 4</li>
<li>Komentar 5</li>
<li>Komentar 6</li>
<li class="last">Komentar 7</li>
</ul>
</div>
<div id="panel-3">
<ul>
<li>Recent post 1</li>
<li>Recent Post 2</li>
<li class="last">Recent Post 3</li>
</ul>
</div>
<div id="panel-4">
<ul>
<li><a href="#">Categories 1</a></li>
<li><a href="#">Categories 2</a></li>
<li><a href="#">Categories 3</a></li>
<li><a href="#">Categories 4</a></li>
<li>Categories 5</li>
<li>Categories 6</li>
<li>Categories 7</li>
<li>Categories 8</li>
<li>Categories 9</li>
<li>Categories 10</li>
<li>Categories 11</li>
<li>Categories 12</li>
<li>Categories 13</li>
<li>Categories 14</li>
<li>Categories 15</li>
<li>Categories 16</li>
<li>Categories 17</li>
<li>Categories 18</li>
<li>Categories 19</li>
<li>Categories 20</li>
<li>Categories 21</li>
<li>Categories 22</li>
<li>Categories 23</li>
<li class="last">Categories 24</li>
</ul>
</div>
</div>
</div>
</div>
[/html]

Nah sudah jadi, coba preview pada halaman browser dengan klik tombol 'F12'. Atau lihat contohnya di halaman ini.

Jika masih ada yang belum jelas silahkan hubungi saya di halaman ini, atau cukup dengan mengisikan komentar pada kotak komentar di bawah. Terima kasih sudah meluangkan waktu mampir di blog saya.

Dreamweaver Layout 2

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 2)




Postingan kali ini adalah penyempurnaan layout website menggunakan Dreamweaver (lanjutan dari bagian 1). Jika pada bagian 1 hanya membuat layout mentahnya saja, kali ini menambahkan beberapa background gambar, menambahkan navigasi menu vertikal dan horizontal dan yang pasti tujuan utamanya adalah membuat tampilan layout website menjadi kelihatan lebih enak dipandang.

Modifikasi kode 'body'



Sebelum mulai download dulu file gambarnya di sini. Sesudah itu extract file rar dan kopikan seluruh gambar di direktori 'images', kemudian modifikasi code 'body' "background-color: #EEE;" menjadi "background: url(../images/img01.jpg) repeat-x left top #EEE;".

Modifikasi kode 'Header'

Untuk tag id 'header' ganti kode "background-color: #0C9;" menjadi "background: url(../images/img01.jpg) repeat-x left top;". Ganti kode "height: 120px;" menjadi "height: 91px;"

Modifikasi kode 'Konten Utama (maincontent)'



Ganti "padding: 0px;" menjadi "padding: 5px 10px;", dan ganti kode "width: 550px;" menjadi "width: 520px;". Dan hapus kode "background-color: #fc0;", atau sesuaikan warba backgroundnya sesuai dengan selera anda. Kemudian ganti kode "height: 400px;" menjadi "height: auto;", yang berarti tinggi dari konten utama anda menyesuaikan dengan panjangnya tulisan yang anda buat.

Modifikasi kode sidebar



Hapus "background-color: #36F;", ganti "padding: 0px;" menjadi "padding: 5px 10px;", tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Modifikasi kode 'footer'



Hapus "background-color: #CFC;" dan ganti dengan "background: url(../images/footer.png) no-repeat;", ganti height: 50px;" menjadi "height: 47px;" sesuaikan dengan tinggi background gambar footer, tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Div Tag tambahan



Tambahkan kode di bawah ini pada bagian edit code css:

[css collapse="false"]
#logogambar {
width: 850px;
height: 209px;
background: url(../images/image-logo.jpg) no-repeat;
}
[/css]

Kemudian dari mode 'css source (style.css)' pindahkan ke mode 'Source Code'. Copy dan pastekan tag berikut ini => "<div id="logogambar"></div>" <= di bawah tag kode "<div id="header">Content for id "header" Goes Here</div>".

Untuk dapat memodifikasi kode css ini maka klik pilihan edit 'Code' dan klik pada "style.css" seperti yang yang dapat anda lihat pada gambar di bawah ini. ('layout-bagian-2.css' pada gambar di bawah yang saya pakai jika pada lembar kerja anda adalah 'style.css')

Edit mode css code


Dapat anda lihat hasil setengah jadinya di halaman ini. Bagian dua cukup sampai di sini, tunggu kelanjutannya pada bagian 3.

14 Februari 2010

Dreamweaver Layout 1

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 1)




Banyak orang yang pertama kali menggunakan Adobe Dreamweaver sebelum mulai mencoba sudah merasa terintimidasi karena mungkin bingung dengan banyaknya panel dan fitur yang ada di dalamnya. Jujur saja pertama kali saya menggunakan aplikasi ini memang merasa demikian.

Jika anda merasa demikian, jangan khawatir.. nggak usah takut, namanya juga masih belajar seperti saya ini. Dimana-mana dalam melakukan suatu hal baru yang kompleks pasti tidak ada yang dapat dilakukan dalam waktu singkat. Yang penting berani mencoba, terus belajar dan jangan dikerjakan setengah-setengah, nanti hasilnya pasti setengah-setengah juga. OK langsung mulai saja, sebelum ada baiknya anda membuat satu folder untuk menyimpan file-file yang akan anda buat. Beri nama folder tersebut dengan nama terserah anda contoh 'project', kemudian buka adobe dreamweaver. Setelah terbuka lihat menu bagian atas, klik pada menu 'Site' kemudian klik 'New Site', klik tab 'Advanced'. Pada bagian 'Site name' isikan nama project yang akan anda buat, contoh 'project'. Pada kotak isian 'Local root folder' klik pada logo folder disebelah kanannya dan arahkan pada folder tempat menyimpan file yang baru saja anda buat, contoh 'C:\My Document\project\'. 'Default images folder' arahkan pada folder di dalam folder tempat menyimpan file anda contoh 'C:\My Document\project\images\'. Klik OK.

Nah sekarang pada halaman pembuka dreamweaver klik pada menu 'File' di pojok kiri atas dan pilih 'New' atau supaya lebih cepat gunakan shortcut keybord windows dengan menekan 'Ctrl + N'. Setelah terbuka kotak dialog 'New Document', pada kolom 'Page Type:' pilih 'HTML', 'Layout' pilih 'none', kemudian tekan OK. Lembar kerja HTML baru anda sudah keluar, simpan lembar kerja tersebut dengan nama 'index.html'. Secara otomatis dokumen ini akan tersimpan di root folder anda (project), karena site project yang sedang aktif (sedang anda buka) adalah site 'project'. Dapat anda lihat pada panel sebelah kanan bagian tab 'Files' akan terdapat file HTML dengan nama index yang baru saja anda simpan.

Sekarang buat file CSS untuk layout yang akan anda buat, ikuti langkah-langkahnya seperti di bawah ini:

  1. Pada tab bagian atas pilih tab 'Common', selanjutnya klik pada 'Insert Div Tag' untuk lebih jelasnya dapat anda lihat gambarnya seperti di bawah ini:
    Insert Div Tag
  2. Setelah anda klik akan keluar dialog 'Insert Div tag', pada bagian 'Insert' pilih 'At insertion point' dan yang lainnya biarkan saja kosong, kemudian klik pada tombol 'New CSS Rule'. Pilih 'Tag (redifines an HTML element)' pada dropdown menu 'Selector Type'. Kemudian di bawahnya pada 'Selector Name:' pilih 'body'. Di bawah 'Selector Name:' bagian 'Rule Definition:' pilih 'New Style Sheet File', kemudian klik OK. Simpan file tersebut di directory root situs project anda, karena contoh di atas direktori rootnya 'C:\My Document\project' maka buatlah folder di dalam folder 'project' dan beri nama folder tersebut dengan nama terserah anda suatu misal 'css'. Simpan file tersebut di dalam folder css dengan nama terserah anda, misal 'style.css'. Kemudian akan muncul kotak dialog css rule, Pada kolom 'Category' klik pada 'Background' => pada jendela bagian kanan 'Background-color' silahkan pilih sendiri warna background yang menurut anda cocok, misal ketikkan di situ kode warna '#EEE'. Kemudian pada kotak kategori lagi klik pada 'Box', setting 'margin' dan 'padding' biarkan checkboxnya tercentang 'Same for all' dan isikan masing-masing dengan value '0'. Kemudian masih pada kolom 'category' klik pada 'block', pada jendela sebelah kanan pilih 'center' untuk 'Text-align' nya, klik OK. Pada kotak dialog 'Insert Div Tag' klik OK lagi.
  3. Kemudian klik lagi pada ikon 'Insert Div Tag', setelah keluar kotak dialog 'Insert Div Tag' pada bagian 'Insert' pilih 'After start of tag' sebelah kanannya pastikan tag 'body' terpilih, kemudian klik tombol 'New CSS Rule'. Kotak dialog 'New CSS Rule' akan keluar, 'Selector Type' pilih 'ID (applies to only one HTML element), 'Selector Name' pada kotak di bawahnya isikan dengan '#wrapper'. Pastikan 'Rule Definition:' yang terpilih adalah CSS yang baru saja anda buat (style.css). Klik Ok. Selanjutnya akan keluar kotak dialog 'CSS Rule Definition' untuk '#wrapper'. 'Background' isikan terserah anda, contoh di sini saya isikan dengan '#FFF' atau warna background putih. 'Block' pada bagian 'Text-align' pilih 'Left', 'Box' tentukan terserah anda contoh yang saya pakai di sini '850px'. Pada bagian 'Margin' hilangkan tanda check untuk 'Same for all', isikan 'top' dan 'bottom' dengan '0', 'Right' dan 'Left' isikan dengan 'auto'. Klik OK, Klik OK lagi.
  4. Nah akan muncul pada jendela design konten yang berisikan 'Content for id "wrapper" Goes Here', hapus tulisan itu. Selanjutnya buat tag headernya, klik pada 'Insert Div Tag' lagi => pada bagian 'Insert' pilih 'After start of tag', sebelah kanannya pastikan terpilih '<div id="wrapper">. Kemudian klik 'New CSS Rule'. 'Selector Type' pilih 'Compound (based on your selection)', 'Selector Name' isikan dengan '#header', selalu pastikan 'Rule Definitionnya' yang terpilih adalah css yang baru saja anda buat (style.css). Klik OK.
  5. Selanjutnya kotak dialog 'CSS Rule Definition' untuk id header akan keluar, klik pada 'Box'. Isikan 'Padding' dan 'Margin' dengan '0', 'Height' isikan dengan '120'. Kemudian klik pada background dan isikan kode warnanya dengan '#0C9. Jangan khawatir pemberian warna ini hanya akan digunakan sebagai tanda pembeda dengan div tag lainnya nanti. Klik 'OK', klik 'OK' lagi.
  6. Sekarang buat div tag untuk konten utama, klik pada'Insert Div Tag' => pada bagian 'Insert' pilih 'After tag', kolom sebelah kanannya pastikan terpilih '<div id="header"> => klik tombol 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' => 'Selector Type:' = 'Compound (based on your selection)', 'Selector Name:' isikan dengan '#maincontent' => klik OK. Selanjutnya pada jendela 'CSS Rule Definition' untuk 'maincontent' pada bagian 'Box' category isikan 'Padding' dan 'Margin' '0', 'Height' isikan dengan '400'. Pada bagian 'Background' categori isikan warna backgroundnya dengan '#FC0'. Klik OK, klik OK lagi.
  7. Giliran membuat sidebar sekarang, langkahnya sama 'Insert Div Tag' => 'Insert' pilih 'After tag' sebelah kanannya pastikan '<div id="maincontent"> yang terpilih, kemudian klik 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', ketikkan #sidebar pada kotak 'Selector Name'. Klik Ok. Pada jendela dokumen 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Paddingnya' '0', 'background color' tentukan dengan kode warna '#36F'. Klik OK, Klik OK lagi.
  8. Nah sekarang div tag yang terakhir, sama seperti di atas klik pada 'Insert Div Tag', selanjutnya 'Insert' pilih 'After tag' kolom sebelah kanannya pilih '<div id="sidebar">', klik tombol 'New CSS Rule'. Pada jendela 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', isikan '#footer' pada kotak 'Selector Name', Klik OK. Pada jendela dialog 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Padding' nya '0', 'Height' = '50px'. Background warnanya '#CFC'. Klik Ok, Klik OK lagi.


Nah sampai di sini kira-kira untuk membuat layout mentah sudah setengah jadi, tinggal mengatur penempatan masing-masing div tag. Jika anda preview di browser (tekan tombol F12) dapat anda lihat masing-masing div tag berjajar dari atas ke bawah. Sidebar belum diposisikan sebagaimana mestinya, untuk mengaturnya perlu modifikasi sedikit kode css yang baru saja anda buat, ikuti langkah-langkahnya seperti di bawah ini:

  1. Umumnya sidebar terletak disebelah kanan atau kiri dari konten utama (main content), tapi melihat layout yang baru saja dibuat, komponen 'maincontent' dan 'sidebar' mempunyai lebar yang sama. Maka dari itu ukuran lebar 'maincontent' dan 'sidebar' perlu dikecilkan. Untuk 'maincontent' lebarnya mengikut lebar div tag 'wrapper' sebesar 850px, kecilkan ukuran lebarnya kira-kira sebesar '550px'. Caranya pada tab 'Css Styles' yang terletak di panel sebelah kanan klik pada '#maincontent', tambahkan properties 'width' dengan klik pada 'Add Property' pada kotak 'Properties for "maincontent"'. Anda dapat mengetikkan secara manual atau scroll down ke bawah dan cari nama properti 'width', isikan valuenya dengan nilai '550px'. Masih pada 'Properties for "maincontent"', klik lagi pada 'Add Property' dan ketikkan 'float' => isikan valuenya dengan 'left'. nah sekarang sidebar dan footer sudah bergeser ke sebelah kanan maincontent.
  2. Nah sekarang tinggal menyesuaikan sidebar, pada panel sebelah kanan klik pada '#sidebar'. Tambahkan properti 'width' dan isikan valuenya dengan nilai 28px, kemudian masih dalam properties untuk sidebar tambahkan 'float' dan isikan valuenya dengan 'right'.
  3. Selanjut yang terakhir untuk footer, klik pada #footer. Pada properties untuk '#footer' klik pada 'Add Property' dan ketikkan 'clear' => isikan valuenya dengan 'both'. Coba sekarang preview di browser.


Nah sekarang layout mentah sudah jadi, header diatas, maincontent ditengah, sidebar di pinggir dan footer di bawah seperti layaknya konsep design suatu web pada umumnya. Capek ah.. kapan-kapan saya posting bagian keduanya.

Jika mau tahu hasilnya, lihat di halaman ini

Office 2007 - 2003 Converter

Convert Dokumen Dari Microsoft Offile 2007 ke Office 2003



Mungkin anda pernah mengalami ketika akan membuka dokumen yang awalnya dibuat pada lembar kerja Microsoft Office 2007 sama sekali tidak bisa dibuka pada versi sebelumnya Microsoft Office 2003.

Misalnya dokumen microsof word 2007 yang disimpan dalam format 'Word Document' tidak akan bisa dibuka pada program MS Word 2003, karena pada MS Word 2003 filenya dikenali dengan nama file extention 'docx'. Sudah tentu file extention ini hanya bisa dibuka pada Microsoft Office 2007. Berikut sebagian dari penamaan file name extention yang ada pada Microsoft Office 2007:


  1. File Extention MS Word 2007

    • docx - Word 2007 XML Document

    • docm - Word 2007 XML Macro-Enabled Document

    • dotx - Word 2007 XML Template

    • dotm - Word 2007 XML Macro-Enabled Template



  2. File Extention MS Excel 2007

    • xlsx - Excel 2007 XML Workbook

    • xlsm - Excel 2007 XML Macro-Enabled Workbook

    • xltx - Excel 2007 XML Template

    • xltm - Excel 2007 XML Macro-Enabled Template

    • xlsb - Excel 2007 binary workbook (BIFF12)

    • xlam - Excel 2007 XML Macro-Enabled Add-In



  3. File Extention MS PowerPoint 2007

    • pptx - PowerPoint 2007 XML Presentation

    • pptm - PowerPoint 2007 Macro-Enabled XML Presentation

    • potx - PowerPoint 2007 XML Template

    • potm - PowerPoint 2007 Macro-Enabled XML Template

    • ppam - PowerPoint 2007 Macro-Enabled XML Add-In

    • ppsx - PowerPoint 2007 XML Show

    • ppsm - PowerPoint 2007 Macro-Enabled XML Show





Nah kalau memang pembaca ada yang pernah mengalami kesulitan membuaka dokumen MS Office 2007 pada MS Office 2003 nggak usah khawatir. Ada tool sederhana yang dapat merubah format dokumen office 2007 ke office 2003, tinggal instal di komputer anda kemudian convert dokumen MS Office 2007 yang ingin dibuka. Silahkan download programnya di sini.

Default Program Problem

Tanda Centang 'Always use the selected program to open this kind of program' Non Aktif (buram)




Kemarin iseng-iseng buat file javascript untuk merubah setting registry dan setelah jadi coba saya buka, eh.. ternyata kebukanya selalu di program Adobe Dreamweaver. Karena memang dari awal file extention js di komputer saya setting default dijalankan oleh program ini. Saya coba berbagai macam cara termasuk dengan menjalankan command promt windows tetap saja terbuka di dreamweaver

Saya coba lagi merubah default program untuk file js ini menggunakan explorer windows, eh.. ternyata malah makin kacau. Nggak berhenti-berhenti explorer menjalankan file js ini hingga konsumsi processor full capacity (100% usage). Di coba force end task melalui jendela task manager nggak bisa-bisa, mau nggak mau restart komputer. Setelah restart, saya coba kembalikan default program untuk file js ini ke dreamweaver, anehnya default program untuk file js ini tetap dijalankan oleh explorer. Ternyata awal mula permasalahan ini timbul ketika memilih default program explorer, saya centang checkbox 'Always use the selected program to open this kind of program'. Ketika akan saya kembalikan default program file js ini ke dreamweaver, checkbox tersebut blur (tidak aktif/tidak dapat diklik).

Nah.. barangkali pembaca ada yang mengalami permasalahan seperti yang saya alami, begini solusinya: Buka registry editor windows dengan cara jalankan menu run command (Windows + Ctrl R) ketikkan 'regedit'. Navigasikan ke:

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\[extention anda contoh: .js]

Jika registry windows tidak bisa dibuka (ter-lock oleh program tertentu), lihat solusinya di sini:

http://linggihnote.blogspot.com/2010/10/exe-windows-media-center-problem.html

Expand file extention, cari dan hapus folder 'UserChoice'. Setelah terhapus kembali ke file yang ingin anda rubah default programnya, contoh dalam kasus saya file extention .js => klik kanan => 'Open With' pilih program default anda.

Selesai program default sudah berubah.

Trik Enable "Registry Editor"

Mengaktifkan Kembali Tool Registry Editor yang Di 'Disable' oleh Administrator




Jika pada artikel yang lalu tentang cara mengaktifkan kembali folder option yang di disable oleh administrator, kali ini saya mencoba posting cara mengaktifkan kembali tool windows 'Registry Editor' yang di disable. Dengan merubah settingan registry editor dengan benar sesuai kebutuhan, banyak yang bisa anda lakukan seperti misalnya antara lain; tweak performance windows, merampingkan item-item klik kanan, mengakali license software dan masih banyak lagi.

Tentu saja tool windows yang satu ini sangat rawan bahaya apabila cara memakainya (merubah value) asal-asalan. Demi alasan keamanan kebanyakan pada komputer yang dipakai untuk umum, suatu misal kantor ataupun warnet, toll ini sering kali dihilangkan. Atau barangkali jika komputer anda di rumah registry tidak bisa dibuka, mungkin gara-gara tidak sengaja mendisable dan nggak tahu cara mengenable lagi. Biasanya jika di disable dan kemudian anda mencoba membukanya maka akan keluar announcement yang kurang lebih bertuliskan 'Registry Editing has been disabled by your administrator'. Jika iya maka trik yang satu ini mungkin bisa anda gunakan.

Copy dan pastekan kode di bawah ini pada Notepad

[text collapse="false"]
'Enable Registry Editing'

'Menghindari error jika nilainya tidak ada
On Error Resume Next

Set WshShell = WScript.CreateObject(&quot;WScript.Shell&quot;)

'Menghapus nilai registry DisableRegistryTools
WshShell.RegDelete &quot;HKCU\Software\Microsoft\Windows\CurrentVersion\Policies\System\DisableRegistryTools&quot;
WshShell.RegDelete &quot;HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System\DisableRegistryTools&quot;

'menampilkan pesan
Message = &quot;Sekarang Registry Editor Bisa di Buka&quot;

X = MsgBox(Message, vbOKOnly, &quot;Selesai&quot;)
Set WshShell = Nothing
Set fso = Nothing
[/text]

Setelah itu simpan dengan dengan nama terserah anda dengan file extention vbs. Contoh simpan dengan nama 'buka.vbs'. Jika sudah tutup notepad tadi, selanjutnya buka Visual Basic script yang baru saja anda buat dengan cara klik dua kali atau klik kanan kemudian klik open. Maka selanjutnya akan keluar kotak dialog yang bertuliskan "Sekarang Registry Editor Bisa di Buka". Sudah selesai, registry editor sekarang dapat di buka. Untuk mengetesnya jalankan run command dialog dengan cara klik 'start' => 'run', atau 'Windows + R'. Pada kotak run ketik 'regedit', dan bim salabim.. registry editor anda terbuka.

Jika tidak mau ketahuan registry windows baru saja dibuka oleh anda maka disable kembali registry editor dengan cara menuliskan kode di bawah ini pada lembar kerja notepad, kemudian simpan dengan file extension 'reg'. Contoh simpan dengan nama 'tutup.reg'.

[text collapse="false"]
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\System]
&quot;DisableRegistryTools&quot;=dword:00000001
[/text]

Trik Disable & Enable 'Folder Option'

Memunculkan Kembali "Folder Option" Windows Explorer Yang Sebelumnya Di 'Disable'




'Folder Option', bisa langsung anda tafsirkan dari bahasa inggris ke bahasa indonesia sebagai pengaturan folder, pilihan folder atau setting folder. Tentunya pada sistem operasi windows 'Folder Option' berfungsi sebagai pengatur/setting yang berlaku pada setiap folder windows explorer. Namun ada kalanya jika anda menggunakan komputer di warnet fitur yang satu ini dihilangkan, dan yang pasti alasannya adalah untuk membatasi ruang gerak pemakai umum (publik) demi alasan keamanan.

Dari sisi pemakai umum suatu misal bagaimana jika anda menyimpan file di media penyimpanan external (flashdisk misalnya) dan file yang ingin anda buka di komputer warnet ber attribute 'Hidden', sedangkan fitur 'Folder Option' di disable oleh admin. Untuk membuka file ber attribute 'Hidden' mau tidak mau harus merubah setting 'Hidden files and folders' pada menu 'Folder Option'.

OK langsung saja ke inti artikel, bagaimana cara memunculkan kembali fitur folder option?. Buka dahulu Local Group Policy Editor dengan cara => klik menu run command (Windows logo + R) kemudian ketikkan 'gpedit.msc'. Atau jika menu run command di disable oleh admin, klik 'Start Menu' => 'Accessories' => klik 'Command Prompt' kemudian ketik 'gpedit.msc' tekan enter.

Selanjutnya akan mucul jendela 'Local Group Policy Editor', pada jendela sebelah kiri klik 'User Configuration' => 'Administratif Templates' => 'Windows Components' => 'Windows Explorer'. Klik pada 'Windows Explorer' dan lihat jendela sebelah kanan, cari item 'Remove the Folder Option menu item from the Tools menu'. Klik dua kali 'Remove the Folder Option menu item from the Tools menu' atau klik kanan kemudian klik 'Edit', ganti value yang awalnya 'Not Configured' atau 'Enabled' ke 'Disabled'. Klik 'Apply' => 'OK' => tutup 'Local Group Policy Editor'. Restart windows explorer => klik menu 'Tools' dan lihat hasilnya, folder option sudah aktif kembali.

Jika ingin memunculkan 'Hidden Files' klik 'Folder Option' => navigasigan ke tab 'View' => pada menu 'Hidden files and folders' centang 'Show hidden files, folders, and drives'. Klik 'Apply' => klik lagi 'OK'. Selesai files anda yang ber attribute hidden sudah kelihatan dan bisa segera dibuka.

Lalu bagaimana cara menonaktifkan fitur 'Folder Option ini'? Gampang, ulangi langkah di atas dari mengetikkan command 'gpedit.msc' dan serusnya, rubah valuenya dari 'Disable' ke 'Not Configured' atau 'Enabled'.

Force Delete File/Folder

Hapus Paksa File/Folder Di Windows Menggunakan Program Gratis Unlocker Atau LockHunter



Pernahkan anda mengalami pesan error seperti yang tampak pada gambar di bawah, ketika akan mencoba menghapus file atau folder?

Unlocker dan LockHunter Hapus paksa file asing

Pesan error yang biasanya muncul antara lain:




  • Cannot delete file: Access is denied.

  • There has been a sharing violation.

  • The source or destination file may be in use.

  • The file is in use by another program or user.

  • Make sure the disk is not full or write-protected and that the file is not currently in use.



Sudah mencoba segala upaya, namun tetap saja sulit dihapus. Bagi yang mengalami tidak usah khawatir, cobalah program yang satu ini 'Unlocker'. Program ini dibuat untuk memudahkan pengguna sistem operasi Windows menghapus file atau folder yang ter-lock oleh suatu proses dengan melakukan langkah yang cukup simpel. Setelah program terinstal di komputer anda, klik kanan pada file atau folder yang ingin dihapus. Pilih 'Unlocker', selanjutnya pilih opsi yang ada pada jendela unlocker seperti gambar di bawah ini:

Unlocker hapus file atau folder yang susah dihapus

Namun jika proses hapus tidak dapat di-execute pada saat itu juga, biasanya anda akan menerima pesan konfirmasi 'The object could not be deleted. Do you want to perform the requested delete operation at next reboot?' (Objek tidak dapat dihapus. Apakan anda ingin menghapus file yang diminta setelah komputer restart). Klik yes, kemudian restrart komputer/PC. Setelah komputer/PC restart, file/folder akan dihapus sesuai jadwal.



Namun sayangnya program ini hanya dapat berjalan pada sistem operasi windows 32 bit. Untuk anda yang memakai sistem operasi windows 64bit cobalah 'LockHunter'. Program ini sama fungsinya seperti 'Unlocker' namun bedanya 'LockHunter' support 32bit dan 64bit Operating System.

Download: Unlocker LockHunter

Kontak Form Blogspot

Membuat Form Kontak di Platform Blogspot Dengan Memanfaatkan Free Online Form Generator



Jika artikel yang lalu sedikit mengulas tentang 'Cara membuat form kontak menggunakan google docs', kali ini saya ingin sharing trik yang tidak jauh beda dengan artikel sebelumnya. Bedanya trik yang satu ini kelihatan lebih original sehingga jika dilihat sekilas mirip dengan form kontak yang dipakai oleh kebanyakan situs web pada umumnya.

OK langsung saja mulai, langkah-langkah yang perlu anda lakukan adalah:

  1. Daftar dulu di situs ini. Gratis
  2. Setelah daftar dan verifikasi email, masuk ke halaman member area. Pada panel tab sebelah kanan klik 'Create a new form'. Berikut text field yang wajib anda isi:
    • Web form Name: Isikan dengan nama form anda. Nama yang anda isikan akan muncul sebagai nama pengirim di kotak masuk email ketika emailmeform mengirimkan alert (pemberitahuan) bahwa ada seseorang yang mengirimkan email via form kontak anda.
    • Recipients Emails: Isikan dengan alamat email anda. Pesan yang ditulis oleh visitor melalui form kontak akan di forward ke alamat email anda.
    • Spam Email address: Optional. Alamat email untuk spam.
    • Thank you page: Isikan dengan alamat url redirect ketika tombol kirim form kontak diklik. Sebelumnya buat dahulu Halaman terima kasih ini, pada 'blogger dashboard''Entry Baru' → tuliskan konten/isi halaman terima kasih anda.

      Contoh: 'Terima kasih telah menghubungi saya. Pesan anda akan saya balas secepatnya'. Klik terbitkan entry → Lihat blog → copy alamat url dari halaman blog yang baru saja anda buat kemudian pastekan pada text field 'Thank you page' emailmeform.
    • Number of fields: Isikan berapa jumlah text field yang ingin anda buat. Default 4, Kemudian klik next.

  3. Pada halaman 'Web Form Creation Wizard - Step 2 of 7', jika blog anda berbahasa Indonesia ganti 'Your Name' dengan 'Nama' misalnya, 'Your Email Address' ganti dengan 'Alamat email', 'Subject' dengan 'Subjek', 'Message' dengan 'Pesan'.
    • Pada kolom 'Text Effects' sesuaikan dengan selera anda apakah teks mau dibuat tebal atau normal.
    • Kolom 'Field Type' biarkan saja setting default.
    • Kolom 'Required?' sesuaikan dengan keinginan anda. Masing-masing kotak isian dapat diatur dengan 'Yes' (Wajib diisi) dan 'No' (Tidak Wajib/optional). Kemudian klik next.

  4. Pada halaman 'Web Form Creation Wizard - Step 3 of 7' pada kolom 'Size and Details' sesuaikan column (Cols) setiap field form kontak anda. Semakin banyak jumlah angka yang anda masukkan semakin lebar pula kotak isian form kontak. Untuk kotak isian Pesan (message) jumlah baris (Rows) isi sesuai dengan selera anda. Semakin banyak jumlahnya, akan semakin panjang ke bawah kotak isian kontak form pada bagian message (pesan). Klik next.
  5. Pada halaman 'Web Form Creation Wizard - Step 4 of 7', 'font', 'color' isikan sesuai dengan selera.
    • 'Form Description', 'Header', 'Footer', 'Style CSS' biarkan saja kosong, Jika menguasai HTML dan CSS silahkan dimodifikasi jika anda berkenan.
    • 'Send Button Name' ganti text 'Send email' dengan 'Kirim email'.
    • 'Send Button alignment' sesuaikan posisinya menurut selera anda, ada tiga pilihan; 'Left' (kiri), 'Middle' (tengah), dan 'Right' (kanan).
    • 'Include a Clear button' centang check box 'yes' ganti nama 'Clear' dengan nama pilihan anda, misalnya ganti dengan 'Reset'.
    • 'Anti Spam' jika fitur ini ingin anda pasang check 'Show Image with Letters and Numbers', jika tidak klik 'None'. Anti spam ini jika di aktifkan maka visitor yang akan mengirimkan email kepada anda wajib mengetik code verikasi pada kotak isian anti spam.
    • 'Image Verification' atur properti dari tampilan 'Anti Spam'.
    • 'Display Mode' biarkan saja defaultnya. Klik next.

  6. Pada halaman 'Web Form Creation Wizard - Step 5 of 7' sesuaikan properties pesan anda, atau biarkan saja pakai setting default. Klik next.
  7. Pada halaman 'Web Form Creation Wizard - Step 6 of 7' adalah preview dari form kontak yang baru saja anda buat. Jika sudah sesuai dengan yang anda inginkan klik Finish, jika masih memerlukan penyesuaian klik Back.
  8. Pada halaman terakhir 'Web Form Creation Wizard' klik pada 'Get the HTML Code'. Simpan code tersebut di notepad, yang nanti akan di pasang pada blog anda.


OK. Sekarang tinggal membuat code CSS untuk mengatur penempatan form kontak yang baru saja anda buat. Pada blogger dashboard masuk ke bagian 'LayOut' → klik pada 'Edit HTML' → Cari code berkut ']]></b:skin>' tanpa tanda quote. Tuliskan code CSS berikut di atas code ']]></b:skin>':

[css collapse="false"]
.formkontak {
width:415px;
height:auto;
margin:0px;
}
[/css]

Sesuaikan lebar (width) dengan setting anda. Semakin banyak angkanya semakin lebar. Selanjutnya buat posting baru untuk halaman kontak. Pada halaman posting, navigasikan ke 'Edit HTML', misalnya anda akan menuliskan:

[html collapse="false"]
<p>Anda dapat menghubungi saya dengan menggunakan kontak form di bawah ini</p>
<div class="formkontak">pastekan code HTML dari emailmeform dibagian ini</div>
[/html]

Selesai. Klik 'Terbitkan Entry'. Test form kontak yang baru saja anda buat, login ke alamat email yang anda gunakan untuk mengisi pada kotak isian 'Recipient email'. Lihat apakah pesan yang baru anda tulis sudah masuk. Untuk yang hosting sendiri (self hosting blog/web) tahap pembuatannya sama.

Contohnya dapat anda lihat di halaman email me

Tips SEO - 'Style Attribute'

Optimasi SEO dengan menyisipkan 'Style Attribute' CSS ke dalam Konten Posting


Seperti pada bahasan sebelumnya tentang 'Bagaimana menempatkan keyword pada suatu halaman website/blog', yang membahas dimana saja titik-titik kritis yang harus anda isi dengan keyword. Tidak jauh dari topik sebelumnya di atas kali ini saya mencoba memodifikasi sedikit bagaimana menyisipkan 'Style Attribute' ke dalam setiap keyword.

Maksud dari menyisipkan 'Style Attribute' ke dalam keyword adalah supaya format penulisan setiap posting anda kelihatan lebih rapi. Ok langsung saja, usaha apa saja yang biasa dilakukan untuk highlight keyword pada posting? Mungkin saja dengan memberikan atribut h2 (heading 2) pada kalimat atau paragraf, memberikan warna yang berbeda pada keyword, memberi format text tebal (bold), garis miring (emphasis), dan lain sebagainya. Bayangkan jika seumpama keyword yang ada pada posting anda cukup banyak dan anda ingin highlight semuanya, pasti kelihatan berantakan. Dalam situasi seperti ini menyisipkan 'Style Attribute' ke dalam setiap keyword anda akan sangat berguna.

Saya ambil contoh keyword diletakkan pada h2, text bold, dan garis miring. Jika anda ingin paragraf pertama dari posting anda adalah tag heading 2 (h2) jika memakai cara biasa contohnya seperti ini:


<h2>Definisi keyword (kata kunci) dalam search engine adalah beberapa kata spesifik (umumnya 2 sampai dengan 5 kata) yang diketikkan pada kotak pencarian search engine guna memperoleh informasi tertentu yang dicari.</h2>

Maka hasilnya akan seperti ini:

Definisi keyword (kata kunci) dalam search engine adalah beberapa kata spesifik (umumnya 2 sampai dengan 5 kata) yang diketikkan pada kotak pencarian search engine guna memperoleh informasi tertentu yang dicari.


Jika paragraf text lainnya kecil digabungkan huruf segede itu jelas sudah pasti tidak akan enak dipandang. Maka untuk memperkecil ukuran hurufnya seumpama anda ingin menyamakan dengan ukuran huruf paragraf yang anda pakai '1em atau bisa juga 12px' misalnya, sisipkan 'Style Attribute' ke dalam tag h2 seperti contoh di bawah ini:

<h2 style="font-size:1em; font-weight:normal;">Definisi keyword (kata kunci) dalam search engine adalah beberapa kata spesifik (umumnya 2 sampai dengan 5 kata) yang diketikkan pada kotak pencarian search engine guna memperoleh informasi tertentu yang dicari.</h2>

Maka hasilnya akan seperti ini:

Definisi keyword (kata kunci) dalam search engine adalah beberapa kata spesifik (umumnya 2 sampai dengan 5 kata) yang diketikkan pada kotak pencarian search engine guna memperoleh informasi tertentu yang dicari.


Misalnya anda ingin memberikan style attribute tebal pada setiap kata yang mungkin menurut anda adalah keyword. Kalau memakai cara yang biasa contohnya seperti ini:

<p>Gunakan <strong>kata kunci utama (primary keyword phrase)</strong> pada halaman utama website (home). <strong>Kata kunci utama</strong> ini nantinya akan terus dipakai pada halaman-halaman lain website anda. Usahakan membuat <strong>keyword</strong> yang cukup <strong>unik/spesifik</strong>, misalnya website/blog anda membahas <strong>alat musik</strong> dan kebetulan fokus pada <strong>musik klasik</strong>, <strong>primary keyword</strong> yang anda pakai bisa bertuliskan <strong>“alat musik klasik”</strong>.</p>

Maka hasilnya akan seperti ini:

Gunakan kata kunci utama (primary keyword phrase) pada halaman utama website (home). Kata kunci utama ini nantinya akan terus dipakai pada halaman-halaman lain website anda. Usahakan membuat keyword yang cukup unik/spesifik, misalnya website/blog anda membahas alat musik dan kebetulan fokus pada musik klasik, primary keyword yang anda pakai bisa bertuliskan “alat musik klasik”.

Berantakan kan, tambahkan 'Style Attribute' untuk mengakalinya seperti di bawah ini:

<p>Gunakan <strong style="font-weight:normal;">kata kunci utama (primary keyword phrase)</strong> pada halaman utama website (home). <strong style="font-weight:normal;">Kata kunci utama</strong> ini nantinya akan terus dipakai pada halaman-halaman lain website anda. Usahakan membuat <strong style="font-weight:normal;">keyword</strong> yang cukup <strong style="font-weight:normal;">unik/spesifik</strong>, misalnya website/blog anda membahas <strong style="font-weight:normal;">alat musik</strong> dan kebetulan fokus pada <strong style="font-weight:normal;">musik klasik</strong>, <strong style="font-weight:normal;">primary keyword</strong> yang anda pakai bisa bertuliskan <strong style="font-weight:normal;">“alat musik klasik”</strong>.</p>

Maka hasilnya akan seperti ini:

Gunakan kata kunci utama (primary keyword phrase) pada halaman utama website (home). Kata kunci utama ini nantinya akan terus dipakai pada halaman-halaman lain website anda. Usahakan membuat keyword yang cukup unik/spesifik, misalnya website/blog anda membahas alat musik dan kebetulan fokus pada musik klasik, primary keyword yang anda pakai bisa bertuliskan “alat musik klasik”.

Untuk garis miring (em/emphasis) lihat contohnya seperti di bawah:

<p>Mengoptimalkan <em>kata kunci (keyword)</em> pada halaman <em>website/blog</em></p>

Hasilnya akan seperti ini:

Mengoptimalkan kata kunci (keyword) pada halaman website/blog

Tambahkan atribute 'font-style: normal', seperti di bawah ini:

<p>Mengoptimalkan <em style="font-style: normal;">kata kunci (keyword)</em> pada halaman <em style="font-style: normal;">website/blog</em></p>

Dan hasilnya akan seperti ini:

Mengoptimalkan kata kunci (keyword) pada halaman website/blog

Mudah kan...
Loncat ke Atas ↑