Bisnis Kecil Modal Kecil: Blogger Stuff

Showing posts with label Blogger Stuff. Show all posts

Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya

Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.

Web Hosting

Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.

<?php
// Silence is golden.
?>

Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<?php error_reporting( 0 );?>
<?php
//Memperbaiki kesalahan pemberitahuan pada debug
$nameError = '';
$emailError = '';
$commentError = '';
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 //Mengecek apakah chaptcha rahasia terisi
 if(trim($_POST['checking']) !== '') {
  $captchaError = true;
 } else {
  //Mengecek apakah kolom nama sudah diisi
  if(trim($_POST['contactName']) === '') {
   $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
   $hasError = true;
  } else {
   $name = trim($_POST['contactName']);
  }
  //Mengecek apakah kolom alamat email sudah diisi dan valid
  if(trim($_POST['email']) === '')  {
   $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong
   $hasError = true;
  } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) {
   $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid
   $hasError = true;
  } else {
   $email = trim($_POST['email']);
  }
  //Mengecek apakah kolom isi pesan sudah disi
  if(trim($_POST['comments']) === '') {
   $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong
   $hasError = true;
  } else {
   if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
   } else {
    $comments = trim($_POST['comments']);
   }
  }
  //Mengirimkan pesan, jika semua kolom telah diisi dengan valid
  if(!isset($hasError)) {
   $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda
   $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
   $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
   $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email
   $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
   mail($emailTo, $subject, $body, $headers);
   if($sendCopy == true) {
    $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
    $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
    mail($email, $subject, $body, $headers);
   }
   $emailSent = true;
  }
 }
} ?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
<link rel="stylesheet" href="/css/style.css.php"/>
</head>
<body>
<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h3>Terima kasih, <?=$name;?></h3>
 <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p>
<?php } else { ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
  <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p>
 <?php } ?>
 <form action="contact-form.php" id="contactForm" method="post">
  <p class="contact-form-author">
   <label for="contactName">Nama <small>*</small></label>
   <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" />
   <?php if($nameError != '') { ?>
    <span class="error"><?=$nameError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-email">
   <label for="email">Email <small>*</small></label>
   <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" />
   <?php if($emailError != '') { ?>
    <span class="error"><?=$emailError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-message">
   <label for="commentsText">Pesan <small>*</small></label>
   <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
   <?php if($commentError != '') { ?>
    <span class="error"><?=$commentError;?></span>
   <?php } ?>
  </p>
  <p class="inline">
   <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label>
  </p>
  <p class="screenReader">
   <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
   </p><!--Chaptca rahasia-->
   <p class="contact-form-submitted">
    <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" />
   </p>
 </form><!-- #contactForm -->
<?php } ?>
</body>
</html>

Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)

Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.

<?php header("Content-type: text/css"); ?>
body,
input,
textarea {
 color: #444;
 font: 93.75%/1.6em Georgia, serif;
}
body {
 background: #fff;
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
}
body:before, body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
p {
 font-size: 1em;
 line-height: 1.6em;
 margin-bottom: .8em;
 margin-top: 0;
}
small,
.error {
 color: #f00;
 font-size: .8em;
 line-height: 2em;
}
h3 {
 font-size: 1.3333em;
 line-height: 1.2em;
 margin-bottom: .6em;
}
input,
textarea {
 font-size: 1em; /* Corrects font size not being inherited in all browsers */
 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input {
 line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
 *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
input[type=text],
input[type=email],
textarea {
 color: #666;
 border: 1px solid #ddd;
 border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
 color: #111;
}
input[type=text],
input[type=email] {
 padding: 6px;
 width: 50%;
}
input[type=text]#checking {
 width: 10%;
}
input[type="checkbox"] {
 box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
 margin-right: 6px;
 padding: 0; /* Addresses excess padding in IE8/9 */
}
label.screenReader {
 margin-right: 6px;
}
input[type="submit"] {
 border: 1px solid #ddd;
 border-color: #ccc #ccc #bbb #ccc;
 border-radius: 3px;
 background: #fafafa; /* Old browsers */
 background: -moz-linear-gradient(top,  #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* IE10+ */
 background: linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 2px 1px #fff;
 color: rgba(0,0,0,.8);
 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
 font: 1em/1.6em Georgia, serif;
 padding: .4em .8em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input[type="submit"]:hover {
 background: #f5f5f5; /* Old browsers */
 background: -moz-linear-gradient(top,  #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
 background: linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
 border-color: #bbb #bbb #aaa #bbb;
}
input[type="submit"]:focus,
input[type="submit"]:active {
 border-color: #aaa #bbb #bbb #bbb;
 box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
 box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
textarea,
.contact-form-author input[type="text"],
.contact-form-email input[type="text"] {
 display: block;
}
textarea {
 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
 padding: 6px 0 6px 6px;
 resize: vertical;
 vertical-align: top; /* Improves readability and alignment in all browsers */
 width: 95%;
}
@media screen and (max-width:800px) {
 body {
  font-size: .8667em;
 }
}
@media screen and (max-width:320px) {
 body {
  font-size: .8em;
 }
}
@media screen and (max-width:240px) {
 body {
  font-size: .7333em;
 }
}

Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
ob_end_flush();
?>

Direktori css — Dua *file* dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan `<link rel="stylesheet" href="/css/style.css.php"/>` pada *file* contact-form.php

Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.

# Do not remove this line, otherwise mod_rewrite rules will stop working
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# Prevents directory  listing
IndexIgnore *

# Strong HTACCESS Protection
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
# END Browser Cache

Isi public_html — Isi keseluruhan public_html (subdomain) yang terdiri dari satu *folder* css dan tiga buah file (.htaccess, index.php, dan contact-form.php).

Implementasi Formulir Kontak dalam Blog

Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.

<object type="text/html" data="h**p://namasubdomain/contact-form.php"></object>

Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object & letakkan di bawah ]]></b:skin>.

<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/kontak.html"'>
<style>
object {
  overflow: hidden;
  height:630px;
  width:100%;
}
</style>
</b:if>

Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.

Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.

Bahan Bacaan: How to create a built-in contact form for your WordPress theme oleh Jean-Baptiste Jung

Formulir Kontak Manual

Posted by rike No comments

Web Hosting

<?php
// Silence is golden.
?>

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<?php error_reporting( 0 );?>
<?php
//Memperbaiki kesalahan pemberitahuan pada debug
$nameError = '';
$emailError = '';
$commentError = '';
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 //Mengecek apakah chaptcha rahasia terisi
 if(trim($_POST['checking']) !== '') {
  $captchaError = true;
 } else {
  //Mengecek apakah kolom nama sudah diisi
  if(trim($_POST['contactName']) === '') {
   $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
   $hasError = true;
  } else {
   $name = trim($_POST['contactName']);
  }
  //Mengecek apakah kolom alamat email sudah diisi dan valid
  if(trim($_POST['email']) === '')  {
   $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong
   $hasError = true;
  } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) {
   $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid
   $hasError = true;
  } else {
   $email = trim($_POST['email']);
  }
  //Mengecek apakah kolom isi pesan sudah disi
  if(trim($_POST['comments']) === '') {
   $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong
   $hasError = true;
  } else {
   if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
   } else {
    $comments = trim($_POST['comments']);
   }
  }
  //Mengirimkan pesan, jika semua kolom telah diisi dengan valid
  if(!isset($hasError)) {
   $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda
   $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
   $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
   $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email
   $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
   mail($emailTo, $subject, $body, $headers);
   if($sendCopy == true) {
    $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
    $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
    mail($email, $subject, $body, $headers);
   }
   $emailSent = true;
  }
 }
} ?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
<link rel="stylesheet" href="/css/style.css.php"/>
</head>
<body>
<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h3>Terima kasih, <?=$name;?></h3>
 <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p>
<?php } else { ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
  <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p>
 <?php } ?>
 <form action="contact-form.php" id="contactForm" method="post">
  <p class="contact-form-author">
   <label for="contactName">Nama <small>*</small></label>
   <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" />
   <?php if($nameError != '') { ?>
    <span class="error"><?=$nameError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-email">
   <label for="email">Email <small>*</small></label>
   <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" />
   <?php if($emailError != '') { ?>
    <span class="error"><?=$emailError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-message">
   <label for="commentsText">Pesan <small>*</small></label>
   <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
   <?php if($commentError != '') { ?>
    <span class="error"><?=$commentError;?></span>
   <?php } ?>
  </p>
  <p class="inline">
   <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label>
  </p>
  <p class="screenReader">
   <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
   </p><!--Chaptca rahasia-->
   <p class="contact-form-submitted">
    <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" />
   </p>
 </form><!-- #contactForm -->
<?php } ?>
</body>
</html>

<?php header("Content-type: text/css"); ?>
body,
input,
textarea {
 color: #444;
 font: 93.75%/1.6em Georgia, serif;
}
body {
 background: #fff;
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
}
body:before, body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
p {
 font-size: 1em;
 line-height: 1.6em;
 margin-bottom: .8em;
 margin-top: 0;
}
small,
.error {
 color: #f00;
 font-size: .8em;
 line-height: 2em;
}
h3 {
 font-size: 1.3333em;
 line-height: 1.2em;
 margin-bottom: .6em;
}
input,
textarea {
 font-size: 1em; /* Corrects font size not being inherited in all browsers */
 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input {
 line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
 *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
input[type=text],
input[type=email],
textarea {
 color: #666;
 border: 1px solid #ddd;
 border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
 color: #111;
}
input[type=text],
input[type=email] {
 padding: 6px;
 width: 50%;
}
input[type=text]#checking {
 width: 10%;
}
input[type="checkbox"] {
 box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
 margin-right: 6px;
 padding: 0; /* Addresses excess padding in IE8/9 */
}
label.screenReader {
 margin-right: 6px;
}
input[type="submit"] {
 border: 1px solid #ddd;
 border-color: #ccc #ccc #bbb #ccc;
 border-radius: 3px;
 background: #fafafa; /* Old browsers */
 background: -moz-linear-gradient(top,  #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* IE10+ */
 background: linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 2px 1px #fff;
 color: rgba(0,0,0,.8);
 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
 font: 1em/1.6em Georgia, serif;
 padding: .4em .8em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input[type="submit"]:hover {
 background: #f5f5f5; /* Old browsers */
 background: -moz-linear-gradient(top,  #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
 background: linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
 border-color: #bbb #bbb #aaa #bbb;
}
input[type="submit"]:focus,
input[type="submit"]:active {
 border-color: #aaa #bbb #bbb #bbb;
 box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
 box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
textarea,
.contact-form-author input[type="text"],
.contact-form-email input[type="text"] {
 display: block;
}
textarea {
 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
 padding: 6px 0 6px 6px;
 resize: vertical;
 vertical-align: top; /* Improves readability and alignment in all browsers */
 width: 95%;
}
@media screen and (max-width:800px) {
 body {
  font-size: .8667em;
 }
}
@media screen and (max-width:320px) {
 body {
  font-size: .8em;
 }
}
@media screen and (max-width:240px) {
 body {
  font-size: .7333em;
 }
}

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
ob_end_flush();
?>

# Do not remove this line, otherwise mod_rewrite rules will stop working
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# Prevents directory  listing
IndexIgnore *

# Strong HTACCESS Protection
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
# END Browser Cache

Implementasi Formulir Kontak dalam Blog

<object type="text/html" data="h**p://namasubdomain/contact-form.php"></object>

<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/kontak.html"'>
<style>
object {
  overflow: hidden;
  height:630px;
  width:100%;
}
</style>
</b:if>

Bahan Bacaan: How to create a built-in contact form for your WordPress theme oleh Jean-Baptiste Jung

Peramban merupakan perangkat lunak yang berfungsi menampilkan & melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web. Jenisnya pun bermacam-macam, antara lain Internet Explorer (IE), Firefox, Chrome, Opera dan lain-lain. Di antara beberapa peramban yang telah disebutkan tersebut, mungkin dapat kita kerucutkan menjadi dua yang paling sering digunakan, yakni Firefox & Chrome. Nah, posting ini akan sedikit menjelaskan tentang optimalisasi fungsi peramban melalui “Inspect Elements’ dan sejumlah ekstensi (add-ons) yang perlu diunduh untuk menunjang aktivitas blogging.

Inspect Elements

Fungsi ini dapat kita manfaatkan, ketika melakukan klik kanan pada sebuah halaman web agar mengetahui struktur pengkodean, namun jangan disalahgunakan untuk meniru secara menyeluruh format template. Oleh karena sebuah desain situs web atau blog mempunyai hak cipta bagi perancangnya, mungkin sebuah pengecualian jika kita meletakkan taut situs perancang & meminta izin, apakah kita boleh menggunakan desain tersebut.

Kembali pada fungsi “Inspect Elements”, ketika diklik akan muncul — di bagian bawah peramban — tab yang biasanya memiliki dua kolom, sebelah kiri adalah HTML (HyperText Markup Language) dan kanan adalah CSS (Cascading Style Sheets). Meskipun ia mampu menampilkan lebih dari sekedar HTML dan CSS, apabila ditelusuri lebih mendalam.

Bagi Anda yang suka utak-atik template, “Inspect Elements” sangat berguna untuk mengatur — menambah, mengurangi, atau memperbaiki pengkodean — tampilan sebuah situs web atau blog melalui CSS (sebelah kanan). Kemudian kode itu kita salin dan tempel pada “Notepad” atau perangkat lunak teks editor kesayangan Anda. Seiring dengan perubahan pengkodean, maka tampilan situs web atau blog pada layar peramban akan berubah pula sesuai dengan kustomisasi kode. Syaratnya halaman yang diperiksa dan dikustomisasi tersebut tidak direfresh.

Inspect Element Firefox — Fungsi “Inspect Element” pada peramban Firefox.

Inspect Element Chrome — Fungsi “Inspect Element” pada peramban Chrome.

Catatan: Untuk memeriksa elemen tertentu, Anda dapat memanfaatkan “Select elements” (dilingkari dengan warna merah), kemudian pilih elemen dengan melakukan klik kiri pada tetikus.

Ekstensi (add-ons)

Firebug — untuk mengetahui struktur pengkodean suatu situs web atau blog, jika Anda terbiasa untuk menggunakannya dibanding dengan default pada tiap-tiap peramban (Firefox dan Chrome).

Color Tools — untuk mengetahui pewarnaan yang ditampilkan pada layar peramban, kebanyakkan pengguna menggunakan ekstensi “ColorZilla” (Firefox dan Chrome). Namun untuk firefox, saya lebih memilih “Rainbow Color Tools”.

Font Style — untuk mengetahui pengaturan font & line-height, sehingga diharapkan mampu menjaga irama vertikal suatu teks, walaupun ditampilkan dalam ukuran yang berbeda (Firefox dan Chrome).

Screen Capture — untuk mengambil gambar (screenshot) pada suatu halaman yang ditampilkan oleh peramban dengan ekstensi “Awesome Screenshot” (Firefox dan Chrome). Namun pada Chrome, saya lebih memilih ekstensi “Screen Capture”.

HTML5 Outliner — untuk mengetahui struktur garis bentuk HTML5 pada suatu situs web atau blog yang biasanya diperlihatkan oleh baris judul pada masing-masing elemen (Firefox dan Chrome).

HTML Microdata — untuk mengecek struktur microdata yang terdapat dalam suatu situs web atau blog. Sementara saya hanya menggunakan “Semantic Inspector” khusus pada Chrome.

Users Online — ekstensi ini dapat digunakan setelah terlebih dulu memasang script dari http://whos.amung.us, kemudian masukkan 8 – 12 karakter sitekey sesuai kode script yang dipasang dalam situs web atau blog. Umumnya penggunaan ekstensi ini adalah pada script whos.amung.us yang disembunyikan atau tidak menampilkan widget status online (Firefox dan Chrome).

Web Developer — untuk menambah sekumpulan alat yang dapat dimanfaatkan sebagai analisis rinci pada situs web atau blog. Biasanya saya menggunakannya untuk men-disable all style dalam CSS (Firefox dan Chrome).

Fungsi & ekstensi (add-ons) yang telah disebutkan di atas, hanya sebagian kecil yang mungkin dapat digunakan dalam aktivitas blogging. Tinggal sejauh mana upaya kita agar penggunaannya dapat optimal, terutama bagi peramban kesayangan. Hal ini diharapkan agar blogging bukan hanya dipandang sebuah aktivitas menulis atau menerbitkan posting semata, namun akan lebih memiliki nilai jika kita mampu belajar memahami & menyelami markah yang terkandung didalamnya. Expert? Tidak juga.

Optimalisasi Fungsi Peramban dalam Blogging

Posted by rike No comments

Inspect Elements

Catatan: Untuk memeriksa elemen tertentu, Anda dapat memanfaatkan “Select elements” (dilingkari dengan warna merah), kemudian pilih elemen dengan melakukan klik kiri pada tetikus.

Ekstensi (add-ons)

Firebug — untuk mengetahui struktur pengkodean suatu situs web atau blog, jika Anda terbiasa untuk menggunakannya dibanding dengan default pada tiap-tiap peramban (Firefox dan Chrome).

Font Style — untuk mengetahui pengaturan font & line-height, sehingga diharapkan mampu menjaga irama vertikal suatu teks, walaupun ditampilkan dalam ukuran yang berbeda (Firefox dan Chrome).

HTML5 Outliner — untuk mengetahui struktur garis bentuk HTML5 pada suatu situs web atau blog yang biasanya diperlihatkan oleh baris judul pada masing-masing elemen (Firefox dan Chrome).

HTML Microdata — untuk mengecek struktur microdata yang terdapat dalam suatu situs web atau blog. Sementara saya hanya menggunakan “Semantic Inspector” khusus pada Chrome.

Di samping mengandalkan kemampuan & keterampilan sendiri — diperoleh melalui belajar maupun pengalaman — tidak terlepas pula dengan kebutuhan alat bantu untuk mendukung blogging. Dari sekian banyak situs web yang membantu aktivitas blogging, terdapat beberapa yang menyediakan tool secara online. Nah, berikut sedikit deskripsi dari beberapa online tool yang membantu “Optimasi Blog” dalam menghasilkan karya-karyanya.

CSS with vertical rhythm

Tool ini akan membantu untuk menghitung CSS agar memiliki ritme vertikal yang konsisten. Perhitungan menggunakan pixels (px) dan M (em). Cara penggunaannya tidak sulit, kita tinggal memasukkan jenis font, ukuran font dasar, besar line-height, & ukuran font yang ditargetkan dalam skala pixels. Berikut hasil uji coba vertical rhythm berdasarkan font yang berukuran 12px dan 18px, sedangkan font yang saya gunakan adalah Georgia, Times, "Times New Roman", serif berukuran .9375em atau 15px dan line-height: 1.6em; atau 24px. (red: baca kembali posting yang berjudul Sentuhan Magis dalam Blog).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero, sed bibendum quam nunc quis quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero.

CSS Font Stack

Penggunaan sangat mudah, kita hanya perlu mengklik “Copy to Clipboard”, kemudian tempel pada kertas aplikasi seperti notepad dan sejenisnya. Tersedia pula beberapa pilihan jenis font yang akan/ingin kita gunakan dalam membangun sebuah situs web atau blog.

font-family: Georgia, Times, "Times New Roman", serif;

Variable Grid System

Sistem variabel grid adalah cara cepat untuk menghasilkan beberapa jaringan (kotak) CSS yang mendasari pembuatan situs web atau blog. File yang dihasilkan CSS didasarkan pada “Sistem Grid 960”. Salah satu manfaat dalam penggunaan tool ini adalah pengguna dapat dengan mudah mengatur responsif desain situs web atau blog-nya. Pun kita dapat melakukan berbagai kustomisasi lebar kolom, jumlah kolom, jarak antar kolom, & lebar konten.

The Responsinator

Bagaimana cara kita agar mengetahui desain situs web atau blog responsif? Tool ini dapat menjadi salah satu alternatif untuk mengamati tampilan situs web atau blog pada beberapa layar yang berbeda. Cukup dengan memasukkan alamat situs atau blog, kemudian klik “Go” atau eksekusi dengan menekan tombol Enter pada papan ketik.

HTML Entities

Sungguh sesuatu hal yang menyenangkan, ketika kita membuat pengkodean atau menulis posting/artikel dengan menggunakan entitas HTML tertentu. Ingat! Lakukan pembaharuan terhadap peramban kesayangan Anda.

Awas! Jangan menggunakan tips ini, karena mengandung ☢. Anda akan terbius atau ketagihan memakainya, apalagi jika berbintang ♈. “Khusus ♂”, harap menggunakan pengaman. Menurut penelitian, ❷ di antara ➉ peristiwa terjadi disebabkan kelalaian. Ketika ✍ perhatikan selalu tanda baca agar posting Anda tidak ter-✄ oleh pindaian para pengunjung — mendengar ♫ akan menimbulkan perasaan ♡ — gunakan ✉ atau ✆, sehingga tiap ✗ dapat diminimalisasi. Atau blog Anda akan di-asing-kan ke planet ♇.

HTML5 Outliner

Online tool ini bermanfaat untuk mengetahui format outline heading pada struktur situs web atau blog dalam HTML5, seperti h1, h2,… ,h6. Alat ini dapat melakukan pengecekan terhadap format outliner, baik melalui berkas file HTML, URL (Uniform Resource Locator), & input kode.

Lipsum Generator

Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.

Online YUI Compressor

Untuk proses pemampatan sumber kode, baik CSS maupun JavaScript, tool ini dapat diandalkan. Kita dapat memasukkan text, URL, atau file, kemudian klik “Compress” untuk melihat hasilnya. Terdapat pula beberapa opsi pemampatan yang dapat kita pergunakan, sebelum memperoleh hasil yang diinginkan. Lebih detail tentang online tool ini, silakan baca posting berjudul Kompres Kode CSS dan Javascript.

Smush.it™

Smush.it menggunakan teknik optimasi khusus untuk format gambar yang tidak perlu untuk menghapus byte dari file gambar. Ini adalah perangkat “lossless”, yang berarti mengoptimalkan gambar tanpa mengubah tampilan atau kualitas visual. Setelah Smush.it berjalan pada halaman web, akan ada laporan berapa banyak byte akan diselamatkan dengan mengoptimalkan gambar halaman dan menyediakan file zip download dengan file gambar diminimalkan.

robots.txt Checker

Berkas robots.txt (sering keliru disebut robot.txt, dalam bentuk tunggal) yang dibuat oleh webmaster untuk menandai (melarang) file & direktori dari sebuah situs web untuk diakses oleh spider mesin pencari (dan jenis-jenis robot lain). Pengecek robots.txt ini merupakan "validator" yang menganalisis sintaks dari sebuah file robots.txt untuk melihat apakah format berlaku sebagaimana ditetapkan oleh A Standard for Robot Exclusion (silakan baca dokumentasi & tutorial untuk mempelajari dasar-dasar) atau jika mengandung kesalahan dalam pengecekan.

jsFiddle

Online tool ini dapat membantu jika kita ingin membuat suatu pengkodean tertentu, dimana disediakan empat kotak dengan input kode tertentu pula, seperti HTML, CSS, JavaScript, dan Result (hasil). Pun terdapat berbagai opsi pada tab di sebelah kiri layar.

The Readability Test Tool

Alat Uji Keterbacaan menyediakan cara cepat dan mudah untuk menguji pembacaan pekerjaan kita. Ini adalah perangkat lunak pembacaan yang paling fleksibel untuk menilai formula keterbacaan. Kita dapat menguji semua, atau bagian dari suatu halaman web, atau cukup mengetik teks. Taut langsung dari halaman situs web atau blog, kemudian online tool ini akan menghitung hasil untuk halaman tersebut.

GTmetrix

Ketika kita ingin mengecek performa situs web atau blog, perangkat GTmetrix merupakan alternatif yang dapat diandalkan. Selain menilai performa, ia juga memberikan deskripsi tentang cara mengoptimalkan serta beberapa taut rekomendasi yang dapat dimanfaatkan oleh pengguna.

Di antara sekian online tool yang dapat membantu dalam aktivitas blogging di atas, mungkin masih banyak alat atau perangkat lain yang tidak dapat penulis sebutkan. Tinggal bagaimana kita memanfaatkannya, sehingga mampu ‘mendongkrak’ performa situs web atau blog yang kita kelola agar lebih efektif & efesien, berguna, serta memberikan kenyamanan di hati para pembacanya.
So, bagaimana dengan Anda?

Online Tool yang Membantu dalam Blogging

Posted by rike No comments

CSS with vertical rhythm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero, sed bibendum quam nunc quis quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero.

CSS Font Stack

font-family: Georgia, Times, "Times New Roman", serif;

Variable Grid System

The Responsinator

HTML Entities

Awas! Jangan menggunakan tips ini, karena mengandung ☢. Anda akan terbius atau ketagihan memakainya, apalagi jika berbintang ♈. “Khusus ♂”, harap menggunakan pengaman. Menurut penelitian, ❷ di antara ➉ peristiwa terjadi disebabkan kelalaian. Ketika ✍ perhatikan selalu tanda baca agar posting Anda tidak ter-✄ oleh pindaian para pengunjung — mendengar ♫ akan menimbulkan perasaan ♡ — gunakan ✉ atau ✆, sehingga tiap ✗ dapat diminimalisasi. Atau blog Anda akan di-asing-kan ke planet ♇.

HTML5 Outliner

Lipsum Generator

Online YUI Compressor

Smush.it™

robots.txt Checker

jsFiddle

The Readability Test Tool

GTmetrix

Ketika kita sedang blog walking atau mengunjungi blog narablog lain, tidak jarang kita menemukan taut langgan (subscribe). Bentuk taut berlangganan pun bermacam-macam, seperti membuat form belangganan melalui email atau hanya menggunakan teks jangkar. Feed memudahkan pengunjung untuk mendapatkan pembaharuan terbaru dari posting dalam blog kita — baik melalui email atau pengumpul feed (umpan) — sehingga layak bagi pemilik blog untuk mengaktifkan layanan tersebut. Ironisnya, tidak jarang kita menemukan taut berlangganan yang masih menggunakan bawaan default blog & ketika di klik oleh pengguna, ia tidak mengarahkan pada suatu layanan — kecuali peramban kesayangan mereka mengakomodasinya — tetapi malah mengunduh isi feed tersebut.

h**p://namablog.blogspot.com/feeds/posts/default

Nah, agar feed dalam blog dapat memenuhi kebutuhan pengunjung untuk berlangganan, baik melalui email atau layanan pengumpul, Optimasi Blog akan mendeskripsikan beberapa langkah aktivasi & pengalihan feed ke layanan FeedBurner.

Silakan kunjungi alamat FeedBurner. Jika narablog telah memiliki akun Google, sebaiknya login terlebih dulu, kemudian pergi ke layanan FeedBurner. Gambar berikut hanya merupakan contoh, abaikan beberapa feed yang telah lebih dulu Optimasi Blog daftarkan. Masukkan alamat blog Anda, kemudian eksekusi dengan mengklik tombol “Next”.

Menentukan judul dan alamat feed, isi judul sesuai dengan keinginan Anda & alamat feed — misalnya: MiMspot — maka alamat feed adalah http://feeds.feedburner.com/MiMspot. Klik tombol “Next”.

Mengidentifikasi sumber daya layanan feed, Anda bisa memilih Atom atau RSS. Klik tombol “Next”.

Anda akan dibawa kehalaman, “Selamat! Feed Anda via FeedBurner telah aktif”. Kemudian disertakan pula alamat feed Anda, seperti yang terlihat pada tautan dalam kotak hijau. Klik tombol “Next”.

Beri tanda centang pada checkbox sesuai keperluan Anda atau centang saja semua checkbox. :) Klik tombol “Next”.

Selanjutnya Anda akan dibawa ke halaman bimbingan dan arahan pengguna dalam memanfaatkan layanan FeedBurner.
Agar feed Anda mendukung berlangganan melalui email dapat dilihat pada gambar di bawah ini. Ingat eksekusi dengan tombol “Activate”, sedangkan contoh penggunaan fasilitas berlangganan dapat Anda baca pada posting bagaimana cara berlangganan?.

Aktivasi Fasilitas Berlangganan via Email

Langkah di atas tidak akan berarti, apabila Anda tidak memanfaatkannya. Agar feed blog Anda terhubung dengan FeedBurner, maka diperlukan tindakan pengalihan (redirect). Arahkan peramban Anda menuju halaman dashboard Blogger.com → Setting → Other. Kemudian tambahkan alamat feed via FeedBurner — misalnya: http://feeds.feedburner.com/MiMspot — sesuai contoh di atas dan jangan lupa disimpan.

Sekarang mari kita periksa dengan mengklik taut berlangganan (subscribe) pada blog Anda, apakah telah terhubung dengan FeedBurner?

Update (18 Oktober 2012): Jika dalam pendaftaran feed situs web atau blog pada layanan FeedBurner mengalami permasalahan — seperti kapasitasnya yang besar — kita dapat melakukan alternatif dengan menambahkan “?max-results=10” (angka 10 dapat dirubah) untuk membatasi kapasitas feed yang besar tersebut.

h**p://namablog.blogspot.com/feeds/posts/default?max-results=10

Pembaharuan ini sesuai dengan pertanyaan dalam kolom komentar yang disampaikan oleh @Karakter Pendidikan.

Mendaftar dan Mengalihkan Feed via FeedBurner

Posted by rike No comments

h**p://namablog.blogspot.com/feeds/posts/default

Silakan kunjungi alamat FeedBurner. Jika narablog telah memiliki akun Google, sebaiknya login terlebih dulu, kemudian pergi ke layanan FeedBurner. Gambar berikut hanya merupakan contoh, abaikan beberapa feed yang telah lebih dulu Optimasi Blog daftarkan. Masukkan alamat blog Anda, kemudian eksekusi dengan mengklik tombol “Next”.

Menentukan judul dan alamat feed, isi judul sesuai dengan keinginan Anda & alamat feed — misalnya: MiMspot — maka alamat feed adalah http://feeds.feedburner.com/MiMspot. Klik tombol “Next”.

Mengidentifikasi sumber daya layanan feed, Anda bisa memilih Atom atau RSS. Klik tombol “Next”.

Anda akan dibawa kehalaman, “Selamat! Feed Anda via FeedBurner telah aktif”. Kemudian disertakan pula alamat feed Anda, seperti yang terlihat pada tautan dalam kotak hijau. Klik tombol “Next”.

Beri tanda centang pada checkbox sesuai keperluan Anda atau centang saja semua checkbox. :) Klik tombol “Next”.

Selanjutnya Anda akan dibawa ke halaman bimbingan dan arahan pengguna dalam memanfaatkan layanan FeedBurner.
Agar feed Anda mendukung berlangganan melalui email dapat dilihat pada gambar di bawah ini. Ingat eksekusi dengan tombol “Activate”, sedangkan contoh penggunaan fasilitas berlangganan dapat Anda baca pada posting bagaimana cara berlangganan?.

Langkah di atas tidak akan berarti, apabila Anda tidak memanfaatkannya. Agar feed blog Anda terhubung dengan FeedBurner, maka diperlukan tindakan pengalihan (redirect). Arahkan peramban Anda menuju halaman dashboard Blogger.com → Setting → Other. Kemudian tambahkan alamat feed via FeedBurner — misalnya: http://feeds.feedburner.com/MiMspot — sesuai contoh di atas dan jangan lupa disimpan.

Sekarang mari kita periksa dengan mengklik taut berlangganan (subscribe) pada blog Anda, apakah telah terhubung dengan FeedBurner?

h**p://namablog.blogspot.com/feeds/posts/default?max-results=10

Pembaharuan ini sesuai dengan pertanyaan dalam kolom komentar yang disampaikan oleh @Karakter Pendidikan.

Jika Anda membaca beberapa posting sebelumnya, seperti Cara Mendaftarkan Blogger di Google Search Engine, Cara Mendaftar Blogger di Search Engine Yahoo & MSN, serta Search Engine Baru dari Microsoft. Sebaiknya menggunakan rekomendasi posting ini sebagai pembaharuan dari ketiga posting yang telah disebutkan di atas.

Ketika sebuah situs web atau blog telah siap untuk dipublikasikan, maka yang perlu dilakukan adalah mendaftarkannya ke beberapa mesin pencari. Hal ini dilakukan untuk memudahkan indeks mesin pencari pada situs web atau blog tersebut, sehingga ketika pengguna mengetikkan kata kunci diharapkan situs web atau blog yang didaftarkan — termasuk posting — akan muncul dalam hasil pencarian. Meskipun dalam kondisi lain, tidak semua pengunjung berasal dari hasil penelusuran pada mesin pencari. Nah, supaya tidak mengambang, langsung saja kita ulas tentang cara mendaftar situs web atau blog ke beberapa mesin pencari sesuai dengan tema/judul posting.

Mendaftarkan Situs Web atau blog ke Google

Klik tautan berikut untuk menuju ke halaman Google Webmaster Tools
Login dengan menggunakan akun Google Anda.

Jika Anda pengguna Blogger™, maka akan tampak satu atau lebih situs Blogger™ yang Anda kelola. Namun jika belum ada, klik tombol “Add a Site” dan tambahkan URL situs web atau blog yang akan didaftarkan. Eksekusi dengan menekan tombol “Continue”.

Ketika situs web atau blog Anda sudah berada dalam daftar Google Webmaster Tools, klik tombol “Manage Site” di samping situs web atau blog yang ingin Anda kelola. Kemudian pilih “Verify this site”.
Selanjutnya akan ditampilkan halaman Recommended method, umumnya metode verifikasi menggunakan Meta tag. Apabila metode verifikasi Meta tag tidak terlihat, klik “Alternate methods”.
Salin tag HTML yang muncul & ikuti langkah-langkah sesuai petunjuk layar. Biarkan tampilan layar pada halaman ini tetap hidup (on).
Buka tab baru pada peramban & masuk ke akun situs web atau blog Anda.
Tempel Meta tag pada template, yaitu memasukkan kode meta di antara <head>…</head> atau pada Blogger™ letakkan saja di atas <b:skin><![CDATA[/*. Simpan perubahan template.

Kembali ke Google Webmaster Tools, klik “Verify”.
Selanjutnya, menambah sitemap seperti pada gambar di bawah ini. Pilih situs web atau blog yang ingin ditambahkan sitemapnya dengan mengklik “Optimization” → “Sitemaps”.

Untuk Blogger™ — atau situs lain — masukkan “sitemap.xml” (huruf kecil & tanpa tanda petik).
Jika Anda masih ragu-ragu, klik tombol “Test Sitemap”. Setelah yakin, klik tombol “Submit”.

Mendaftarkan Situs Web atau blog ke Yahoo & Bing

Sesuai rilis berita di Webmaster Center Blog Bing dikatakan bahwa Bing Webmaster Tools sekarang akan menampilkan data yang terintegrasi dengan Yahoo dalam wilayah dan laporan tertentu. Mengingat usaha gabungan merupakan Aliansi Penelusuran, maka sangat masuk akal untuk menampilkan data yang relevan dari kedua mesin dalam akun webmaster. Jadi jangan heran ketika Anda melakukan submit situs melalui Yahoo akan diarahkan ke Webmaster Tools Bing.

Sebaiknya terlebih dulu Anda telah memiliki akun di Bing, seperti hotmail dan sebagainya. Kemudian klik tautan berikut untuk menuju ke halaman Bing Webmaster Tools. Anda tinggal memasukkan URL (Uniform Resource Locator) situs web atau blog pada “Add a Site”, kemudian eksekusi dengan menekan tombol “Add”. Selanjutnya, proses verifikasi & submit sitemap akan dilalui dengan langkah yang mudah.

Sitemap Blogger™, dilakukan dengan menambahkan sitemap.xml di belakang URL, contoh: h**p://namablog.blogspot.com/sitemap.xml. Ini juga merupakan pembaharuan dari posting yang berjudul Submit Sitemap Blogger.com di Google Webmaster Tools dan Solusi Submit Sitemap di Webmaster Tools.

Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing

Posted by rike No comments

Mendaftarkan Situs Web atau blog ke Google

Klik tautan berikut untuk menuju ke halaman Google Webmaster Tools
Login dengan menggunakan akun Google Anda.

Jika Anda pengguna Blogger™, maka akan tampak satu atau lebih situs Blogger™ yang Anda kelola. Namun jika belum ada, klik tombol “Add a Site” dan tambahkan URL situs web atau blog yang akan didaftarkan. Eksekusi dengan menekan tombol “Continue”.

Ketika situs web atau blog Anda sudah berada dalam daftar Google Webmaster Tools, klik tombol “Manage Site” di samping situs web atau blog yang ingin Anda kelola. Kemudian pilih “Verify this site”.
Selanjutnya akan ditampilkan halaman Recommended method, umumnya metode verifikasi menggunakan Meta tag. Apabila metode verifikasi Meta tag tidak terlihat, klik “Alternate methods”.
Salin tag HTML yang muncul & ikuti langkah-langkah sesuai petunjuk layar. Biarkan tampilan layar pada halaman ini tetap hidup (on).
Buka tab baru pada peramban & masuk ke akun situs web atau blog Anda.
Tempel Meta tag pada template, yaitu memasukkan kode meta di antara <head>…</head> atau pada Blogger™ letakkan saja di atas <b:skin><![CDATA[/*. Simpan perubahan template.

Kembali ke Google Webmaster Tools, klik “Verify”.
Selanjutnya, menambah sitemap seperti pada gambar di bawah ini. Pilih situs web atau blog yang ingin ditambahkan sitemapnya dengan mengklik “Optimization” → “Sitemaps”.

Untuk Blogger™ — atau situs lain — masukkan “sitemap.xml” (huruf kecil & tanpa tanda petik).
Jika Anda masih ragu-ragu, klik tombol “Test Sitemap”. Setelah yakin, klik tombol “Submit”.

Mendaftarkan Situs Web atau blog ke Yahoo & Bing

Hampir semua narablog memiliki akun facebook dan/atau mungkin pula akun twitter. Tidak jarang kita menggunakan website social network tersebut sebagai salah satu aktivitas keseharian, baik hanya sekedar ngobrol maupun kegiatan yang lain. Dalam dunia blog, facebook & twitter mungkin lebih dikenal dengan istilah sebagai “ajang promosi”.

Bagaimana Anda melakukan update di facebook & twitter, jika posting telah diterbitkan di blog Anda? Mungkin Anda akan mengunjungi ke kedua website social network tersebut dan melakukan update secara manual. Salah satu alternatif agar posting yang diterbitkan akan ter-update secara otomatis di akun facebook & twitter Anda adalah dengan menggunakan layanan twitterfeed.

Twitterfeed merupakan web penyedia layanan update posting otomatis, baik di facebook maupun twitter. Update posting itu dilakukan dengan mengirimkan feed—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website social network tersebut.

Caranya cukup mudah, Anda tinggal mendaftar di Twitterfeed dan memasukkan feed blog Anda dengan benar. Kemudian Anda perlu melakukan penambahan autority (wewenang) ke akun facebook & twitter, agar feed yang dikirim melalui twitterfeed dapat diterima dengan baik oleh kedua website social network tersebut. Anda pun dapat melakukan kostumisasi feed (update posting), seperti: menampilkan judul posting saja dan/atau disertai dengan ringkasan pendek isi posting.

Berikut ini merupakan “penampakkan” (screenshot) update posting yang dimaksud pada uraian di atas.

Twitterfeed to Facebook — Twitterfeed via facebook

Twitterfeed to Twitter — Twitterfeed via twitter

Otomatis Update Posting di Facebook dan Twitter

Posted by rike No comments

Twitterfeed merupakan web penyedia layanan update posting otomatis, baik di facebook maupun twitter. Update posting itu dilakukan dengan mengirimkan feed—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website social network tersebut.

Berikut ini merupakan “penampakkan” (screenshot) update posting yang dimaksud pada uraian di atas.

Font yang digunakan dalam blog ini berukuran 120% (setara dengan 1.2em) dan mengadopsi google web fonts yang berbasis keluarga ‘serif’ (font:120% 'Crimson Text', georgia, serif;). Sedangkan pada title blog digunakan google web fonts tangerine, masih termasuk juga ke dalam keluarga ‘serif’.

Dalam template blogspot, google web fonts otomatis dapat di load melalui Rancangan (Design)→“Perancang Template” (baca posting: Font untuk Template Blogger). Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen variable definitions, contoh:

   <Variable name="bodyfont" description="Body Text Font"
             type="font" default="normal normal 80% Georgia, Serif" value="normal normal 80% Georgia, Serif">
   <Variable name="outerfont" description="Outer Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?

Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
        font-family: serif;
      }
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
      }
      .wf-loading p {
        font-family: serif;
        font-size: 16px;
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
      }

Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.

Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.

Google Web Fonts

Posted by rike No comments

   <Variable name="bodyfont" description="Body Text Font"
             type="font" default="normal normal 80% Georgia, Serif" value="normal normal 80% Georgia, Serif">
   <Variable name="outerfont" description="Outer Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?

Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
        font-family: serif;
      }
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
      }
      .wf-loading p {
        font-family: serif;
        font-size: 16px;
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
      }

Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.

Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.

Beberapa bulan yang lalu, Blogger telah mengumumkan beberapa font baru untuk desainer template. Ya, beberapa bulan yang lalu itu hanya dapat diakses dari Draft Blogger. Kemarin, Blogger tidak hanya diluncurkan Font Web untuk SEMUA pengguna Blogger, tetapi juga mengumumkan bahwa mereka telah menambahkan 35 font tambahan untuk campuran, untuk total 77 grand font!

Siap untuk mendapatkan pengalaman dengan pilihan font baru?

Cukup masuk ke tab Advanced Designer Template Blogger untuk blog Anda, pilih jenis teks yang ingin perubahan (Post Title, Judul Blog, dll) dan klik pada salah satu Font Web baru untuk pratinjau. Jangan khawatir, tidak akan ada perubahan di blog Anda sampai Anda memilih "Terapkan ke Blog", dan ini berarti Anda dapat bermain-main dengan semua font dan hanya beralih bila Anda siap.

Jika Anda menggunakan template yang dikustomisasi, Anda dapat menggunakan berbagai font dari direktori font Google. Baca pengaturan instalasi.

Font untuk Template Blogger

Posted by rike No comments

Jika Anda menggunakan template yang dikustomisasi, Anda dapat menggunakan berbagai font dari direktori font Google. Baca pengaturan instalasi.

Ini adalah layanan gratis dan disediakan oleh http://www.onlineleaf.com/. Fitur ini memberikan cara yang berfungsi penuh dan sederhana untuk membantu website yang Anda jalankan menghasilkan energi lebih sedikit. Ia menyembunyikan animasi berat, serta widget-widget yang banyak.

Ketika pengunjung anda tidak aktif, maka fitur akan menampilkan Standby Screen, dengan teks "Energy saving mode".

Hal ini sangat mudah untuk ditambahkan ke situs Web atau blog dalam beberapa detik.

Masuk ke dashboard Blogger Anda -> Desain -> Edit HTML.

Anda tidak perlu untuk mengklik pada "Expand Template Widget".

Gulir ke bawah ke tempat anda melihat tag </head> dari template Anda.

Sekarang salin kode di bawah ini dan paste tepat sebelum tag </head>.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Fitur siaga ini menggunakan jQuery Javascript Library, jadi jika Anda menggunakan perpustakaan Javascript atau kode lain, tambahkan kode di bawah dari kode di atas:

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>

Waktu tidak aktif

Juga Anda dapat dengan mudah menentukan berapa lama waktu pengunjung Anda harus aktif, untuk mesin untuk membuka layar siaga, dengan menambahkan ?time = X dimana X harus diganti dengan jumlah detik Anda ingin menentukan interval waktu. Contohnya bisa jadi:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

.. yang akan mengatur waktu tidak aktif sampai 2 menit (120 detik).

Jika Anda menggunakan WordPress, hanya men-download plugin lalu mengaktifkannya dan segala sesuatu siap bekerja langsung.

Cara Tambahkan Mode Energy Saving Untuk Blog atau Website

Posted by rike No comments

Ketika pengunjung anda tidak aktif, maka fitur akan menampilkan Standby Screen, dengan teks "Energy saving mode".

Hal ini sangat mudah untuk ditambahkan ke situs Web atau blog dalam beberapa detik.

Masuk ke dashboard Blogger Anda -> Desain -> Edit HTML.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Fitur siaga ini menggunakan jQuery Javascript Library, jadi jika Anda menggunakan perpustakaan Javascript atau kode lain, tambahkan kode di bawah dari kode di atas:

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

.. yang akan mengatur waktu tidak aktif sampai 2 menit (120 detik).

Jika Anda menggunakan WordPress, hanya men-download plugin lalu mengaktifkannya dan segala sesuatu siap bekerja langsung.

Setelah meluncurkan fitur statistik blog untuk blogger yang kini telah meluncurkan sebuah widget Blog's Stat bersama dengan widget Popular Post. Ini adalah dua widget baru yang telah ditambahkan blogger di draft.blogger untuk diuji.

Blog�s stats

widget ini menampilkan total tampilan halaman gadget blog.Tampil dalam berbagai gaya dan juga dilengkapi dengan grafik sparkline opsional. Lihat gambar di bawah.

Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.

2 Gadget baru untuk Blogger

Posted by rike No comments

Blog�s stats

widget ini menampilkan total tampilan halaman gadget blog.Tampil dalam berbagai gaya dan juga dilengkapi dengan grafik sparkline opsional. Lihat gambar di bawah.

Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.

Sumber : Compress Javascript dengan YUI Compressor by O-OM.

Mungkin kamu tahu & mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain : Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain. Atau kamu ingin mendefinisikan & menambahkan "dan lain-lain" dalam komentar.

Dalam trik blogger kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS & javascript agar sedikit banyaknya dapat lebih cepat loading. Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah Online YUI Compressor. Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Adapun cara menggunakan Online YUI Compressor dapat direview seperti ulasan berikut :

Masukkan kode javascript dalam kotak "Code".

Pilih secara dropdown jenis file pada "File Type".

Selanjutnya untuk opsi-opsi kosongkan.

Klik tombol "Compress"

Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".

Copy kode tersebut & paste di antara tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam blog kamu.

Contoh :

Javascript otomatis readmore.

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Catatan :

Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site Online YUI Compressor.

Hasilnya setelah dikompres & dimasukkan dalam full kode Javascript otomatis readmore.

//]]>

</script>

Semoga bermanfaat...

Kompres Kode CSS dan Javascript

Posted by rike No comments

Sumber : Compress Javascript dengan YUI Compressor by O-OM.

Adapun cara menggunakan Online YUI Compressor dapat direview seperti ulasan berikut :

Masukkan kode javascript dalam kotak "Code".

Pilih secara dropdown jenis file pada "File Type".

Selanjutnya untuk opsi-opsi kosongkan.

Klik tombol "Compress"

Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".

Copy kode tersebut & paste di antara tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam blog kamu.

Contoh :

Javascript otomatis readmore.

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Catatan :

Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site Online YUI Compressor.

Hasilnya setelah dikompres & dimasukkan dalam full kode Javascript otomatis readmore.

//]]>

</script>

Semoga bermanfaat...

Akhirnya blogger menampilkan banyak fitur-fitur baru untuk optimasi pengguna yang menggunakan blog di blogspot.

Kali ini saya akan membeberkan fitur-fitur apa saja yang telah disediakan oleh blogger :

1. Template Designer

Sebuah fitur yang sangat luar biasa ditambahkan ke blogger yang memungkinkan para blogger untuk membuat tema yang indah untuk blog mereka melalui program tunggal. fitur ini dapat dibaca di Blogger.buzz.

2. New sharing buttons

Pilihan ini adalah pilihan lain yang baru-baru ini ditambahkan. Sekarang kamu tidak perlu menambahkan tombol bookmark sosial untuk blogger secara manual. Ini dapat dengan mudah ditambahkan tetapi pergi ke PAGE ELEMENT>> BLOG POST.

3. Memasukkan Video Player

Blogger telah memperkenalkan sebuah pemutar video yang lebih baik untuk video yang menyerupai pemutar YouTube.

Player ini memungkinkan melihat video dengan full-screen. Player baru ini juga memiliki antarmuka pengguna yang lebih baik, seperti animasi seekbar (bar merah di sepanjang bagian bawah video) dan tombol yang lebih besar. Anda juga dapat klik kanan pada play untuk melihat informasi lebih lanjut tentang video, seperti kinerja pemutaran ("Tampilkan Video Info") atau jaringan kecepatan ("Take Speed Test").

Video yang akan Anda upload akan terlihat di blog Anda tetapi tidak di YouTube.

4. Pratinjau Posting yang lebih baik

Selain blogger desainer juga menambahkan opsi baru yang lebih baik pasca pratinjau. Sebelum Anda mempublikasikan posting, jika Anda ingin melihat posting Anda untuk melihat bagaimana sebenarnya akan tampak, tekan saja tombol Preview pada halaman Post Baru. Anda akan melihat jendela baru terbuka dengan tampilan yang lebih akurat.

5. Penambahan Amazon Associaties gadget.

Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.

Dengan fitur ini, Anda dapat mencari Amazon langsung dari editor Blogger dan menambahkan gambar dan link ke produk Amazon tepat ke posting Anda. pembaca Anda akan mendapatkan komisi Anda setiap kali mereka membeli produk yang Anda rekomendasikan, dan jika Anda belum memiliki account Amazon Associates, Anda dapat sign up secara gratis tanpa meninggalkan Blogger.

6. Blogger stats

Fitur ini telah saya jelaskan pada postingan sebelumnya tentang Statistik blog.

So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.

Fitur-fitur baru pada Blogger

Posted by rike No comments

5. Penambahan Amazon Associaties gadget.

Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.

So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.

Sekitar 1 (satu) bulan OB meninggalkan dunia on-line, termasuk blogging. Bertapa mencari ilham di dasar seribu sungai (hanya becanda). Bukannya bosan melainkan kesibukan pindah homebase dan mendirikan usaha sendiri di tempat baru tersebut. Alhamdulillah sekarang sudah rampung kira-kira 75%. Sekarang OB menyempatkan membuat satu postingan yang sekiranya menambah daftar trik blogger di hati dan pikiran para blogger. Kok, jadi dramatis gini... Trik blogger ini masih terkait dengan posting sebelumnya tentang promosi blog dengan facebook, coba tebak? Betul sekali. Setelah pamer blog di facebook, tentunya ingin pula plugin di facebook muncul di blog kamu.

Kemudian OB tidak akan menjelaskan secara detail tentang kodenya yang seperti apa, karena kode tersebut otomatis tampil pada saat kamu mengkostumisasi plugin ini di layanan pengembang plugin sosial facebook. Demo salah satu plugin tersebut (Like Button) dapat kamu lihat di kiri bawah (footer) blog ini.

Arahkan alamat browser kamu ke Facebook Developers.

Kamu akan di bawa ke halaman kumpulan plugin sosial yang dapat diterapkan dalam blog kamu, seperti ; Like Button, Activity Feed, Recommendations, Like Box, Login Button, Friendpile, Comments, dan Live Stream.

Contoh Terapan I (Like Button) :

-> Klik link yang bertuliskan Like Button.

-> Isi form sesuai dengan keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

URL to Like diisi dengan alamat blog kamu.

-> Setelah selesai klik "Get Code", maka akan muncul kode sesuai dengan isian form tersebut.

-> Copy kode dalam kotak iframe ke blog kamu.

-> Sign-in ke akun blogger kamu.

-> Kemudian klik Design (Rancangan) --> Add Gadget (Tambah Gadget).

-> Dalam jendela pop-up yang tampil, pilih HTML/JavaScript dengan mengklik tanda + di kanannya.

-> Paste kode iframe dari plugin sosial facebook.

-> Selesai.

Contoh Terapan II (Like Box) :

-> Klik link yang bertuliskan Like Box.

-> Isi form sesuai keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

Facebook Page ID diisi dengan ID halaman facebook kamu.

Untuk membuat halaman baru di facebook silakan dibuka kembali posting tentang promosi blog dengan facebook.

-> Selanjutnya lakukan langkah yang sama dengan contoh terapan I.

Catatan :

Langkah dalam mengkostumisasi plugin sosial lainnya lebih kurang sama dengan contoh terapan di atas.

Selamat memajang plugin sosial facebook di blog kamu...

Plugin Sosial dari Facebook

Posted by rike No comments

Arahkan alamat browser kamu ke Facebook Developers.

Kamu akan di bawa ke halaman kumpulan plugin sosial yang dapat diterapkan dalam blog kamu, seperti ; Like Button, Activity Feed, Recommendations, Like Box, Login Button, Friendpile, Comments, dan Live Stream.

Contoh Terapan I (Like Button) :

-> Klik link yang bertuliskan Like Button.

-> Isi form sesuai dengan keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

URL to Like diisi dengan alamat blog kamu.

-> Setelah selesai klik "Get Code", maka akan muncul kode sesuai dengan isian form tersebut.

Contoh Terapan II (Like Box) :

-> Klik link yang bertuliskan Like Box.

-> Isi form sesuai keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

Facebook Page ID diisi dengan ID halaman facebook kamu.

Untuk membuat halaman baru di facebook silakan dibuka kembali posting tentang promosi blog dengan facebook.

Banyak cara untuk mempromosikan blog kamu, seperti; mendaftarkan blog ke search engine (google, yahoo & bing), blog directory, technorati, tukaran link, dan sebagainya. Apabila OB memposting tentang promosi blog di facebook, mungkin sudah terdengar basi. Eit..., jangan langsung divonis dong! Dan kemungkinan lainnya ini merupakan sesuatu yang baru di mata kita parablogger. Apa iya sih? Umumnya promosi blog di facebook adalah hal yang lazim. Hanya dengan memasukkan alamat blog (situs web) di informasi kontak dalam pengaturan profil selesai deh. Namun yang akan kita diskusikan dalam posting ini tidak sesederhana itu. Penasaran khan? Daripada main teka-teki, yuk kita langsung urai benang merahnya.

Metode promosi blog di facebook yang akan kita bicarakan di sini adalah dengan membuat "Halaman Resmi" tanpa membuat akun baru [ Akun Facebook OB | Demo ].

Silakan sign-in ke akun facebook kamu.

Kemudian klik link berikut untuk membuat halaman baru di facebook.

Kamu akan dibawa ke halaman seperti yang ditunjukkan oleh gambar di bawah ini :

Di kolom kiri terdapat form untuk membuat "Halaman Resmi".

Pada "Buat Halaman untuk:", pilih "Merek, produk, atau organisasi.

Setelah itu akan muncul dropdown menu dan pilih option Situs Web (paling bawah). Seperti yang diperlihatkan oleh gambar berikut :

Beri "Nama Halaman" sesuai dengan tema blog kamu serta jangan lupa untuk untuk memberi tanda centang pada teks pernyataan di bawahnya. Di bawah ini screenshotnya :

Terakhir klik button "Buat Halaman Resmi".

Catatan :

Langkah selanjutnya mirip dengan ketika pertama kali kamu menggunakan akun facebook.

Bagaimana mengisi halaman baru facebook tersebut?

Untuk mengisi halaman tersebut sama dengan pada saat kamu mengisi akun facebook kamu (Apa yang Anda pokirkan?) di "Dinding". Bedanya mungkin hanya terletak pada isi pesan yang kamu tulis. Oleh karena halaman baru tersebut akan digunakan untuk promosi blog, maka kamu hanya perlu menaruh kata/kalimat yang berkaitan dengan blog. Agar lebih terdefinisi kata/kalimat tersebut dilampiri dengan tautan ke posting blog kamu.

Contoh menurut cara OB :

Copy 2 - 3 kalimat pada awal suatu posting.

Paste ke "Dinding" halaman resmi, kemudian OB tautkan ke alamat posting yang bersangkutan.

Setiap ada postingan baru, OB akan melakukan hal yang sama seperti pada point 1 dan 2.

Catatan :

Setiap pesan dalam dinding halaman yang telah dibuat dapat ditampilkan ke akun facebook kamu dengan cara mengklik "bagikan" (footer masing-masing pesan).

Untuk berpindah ke halaman lain (pada saat kamu telah login di facebook), klik "Akun" --> "Kelola Halaman".

Selamat berpromosi blog di facebook via halaman resmi...

Promosi Blog dengan Facebook

Posted by rike No comments

Metode promosi blog di facebook yang akan kita bicarakan di sini adalah dengan membuat "Halaman Resmi" tanpa membuat akun baru [ Akun Facebook OB | Demo ].

Silakan sign-in ke akun facebook kamu.

Kemudian klik link berikut untuk membuat halaman baru di facebook.

Kamu akan dibawa ke halaman seperti yang ditunjukkan oleh gambar di bawah ini :

Di kolom kiri terdapat form untuk membuat "Halaman Resmi".

Pada "Buat Halaman untuk:", pilih "Merek, produk, atau organisasi.

Setelah itu akan muncul dropdown menu dan pilih option Situs Web (paling bawah). Seperti yang diperlihatkan oleh gambar berikut :

Beri "Nama Halaman" sesuai dengan tema blog kamu serta jangan lupa untuk untuk memberi tanda centang pada teks pernyataan di bawahnya. Di bawah ini screenshotnya :

Terakhir klik button "Buat Halaman Resmi".

Contoh menurut cara OB :

Copy 2 - 3 kalimat pada awal suatu posting.

Paste ke "Dinding" halaman resmi, kemudian OB tautkan ke alamat posting yang bersangkutan.

Setiap ada postingan baru, OB akan melakukan hal yang sama seperti pada point 1 dan 2.

Catatan :

Setiap pesan dalam dinding halaman yang telah dibuat dapat ditampilkan ke akun facebook kamu dengan cara mengklik "bagikan" (footer masing-masing pesan).

Untuk berpindah ke halaman lain (pada saat kamu telah login di facebook), klik "Akun" --> "Kelola Halaman".

Selamat berpromosi blog di facebook via halaman resmi...

What's New Here?

Web Hosting

Implementasi Formulir Kontak dalam Blog

Web Hosting

Implementasi Formulir Kontak dalam Blog

Inspect Elements

Ekstensi (add-ons)

Inspect Elements

Ekstensi (add-ons)

Mendaftarkan Situs Web atau blog ke Google

Mendaftarkan Situs Web atau blog ke Yahoo & Bing

Mendaftarkan Situs Web atau blog ke Google

Mendaftarkan Situs Web atau blog ke Yahoo & Bing

Popular Post

Blog�s stats

Popular Post

Blog�s stats

Popular Posts

Blog Archives