Tempatnya Belajar dan Berbagi

Written By Unknown on Minggu, 08 September 2013 | Minggu, September 08, 2013

Tempatnya Belajar dan Berbagi

Menaikkan Traffic Blog Dengan Autosurf Traffic Exchange

Posted: 06 Sep 2013 11:47 PM PDT


Sudah lama saya tidak menulis tentang SEO, setelah tips meningkatkan Alexa rank dengan mendaftar ke berbagai search engine.  Kali ini saya punya tips satu lagi untuk meningkatkan trafik untuk blog anda. Yaitu dengan menggunakan program Autosurf Traffic Exchange. Autosurf Traffic Exchange intinya  seperti blog walking, tetapi bedanya ini ada institusi yang menangani, dengan submit alamat URL anda, maka Web/blog anda bakal di perlihatkan ke seluruh penjuru dunia.

Kelebihan Autosurf Traffic Exchange ini adalah
  1. Meningkatkan traffic pengunjung secara instant dan cepat 
  2. Mempercepat peningkatan Link Popularity pada Alexa dan PR (untuk Alexa anda harus pasang widget Alexa asli dari situsnya, sedang untuk Google PR, blog anda sebaiknya daftarkan dulu di Google.com/addurl dan Google.com/webmasters/tools, usahakan juga pasang tracker Google.com/analytics)
  3. Mencegah Link popularity/PR drop karena blog tidak pernah dapat visitor
  4. Blog yg terlihat ramai memberi kesan baik pada visitor dan blogger lain
Sedangkan kekurangan dan autosurf traffic exchange adalah :
  1. Semakin otomatis dan instant, semakin jelek kualitas visitornya (visitor sekedar numpang lewat) 
  2. Pengunjung sebagian besar hanya memiliki 2 tujuan, yaitu Traffic dan Uang 
  3. Peningkatan traffic yg tidak wajar, tidak stabil dan berlebihan karena traffic exchange, kurang disukai Search Engine, jadi sebaiknya digunakan seperlunya dan sewajar mungkin, misal; biasanya anda dapatvisitor 50 perhari, jangan langsung dikebut jadi 1000 visitor besoknya, itu namanya tidak wajar dan bisa-bisa anda kena penalty 
Salah satu situs autosurf traffic exchange ini adalah Autosurfing. Cara kerja Autosurfing yang satu ini cukup mudah, cukup kalian luangkan sedikit jendela pada browser yang sedang kalian jalankan untuk mengoperasikan Autosurfing ini. Dan lebih simpelnya lagi ketika kita menjalankan Autosurfing ini kita tidak perlu login terlebih dahuludengan menggunakan Autosurfing yang satu ini maka aktivitas posting di Blogger, Wordpress, Blogwalking, dan sebagainya tidak akan terganggu cukup sediakan satu jendela untuk Autosurfing ini di browser yang kalian jalankan. Karena Autosurfing ini bisa dibilang cukup fair dengan rasio 1 : 1 (satu banding satu) yang dimiliki, misalnya Autosurfing ini berjalan sampai 1000 surfing di jendela browser yang anda jalankan maka blog yang kalian daftarkan di Autosurfing ini akan memiliki 1000 hits atau 1000 pengunjung juga dalam waktu yang bersamaan. 

Tapi anda tidak usah kawatir bakalan meng-klik 1000 site karena Autosurfing ini bekerja secara otomatis dengan perputaran sites yang dikunjungi selama 15 detik. Jadi setiap 15 detik kita akan berpindah sites secara otomatis begitu pula dengan hits atau pengunjung yang kita dapatkan otomatis bertambah setiap 15 detik. Jika anda tertarik, klik banner yang ada di bawah ini untuk mendaftar di Autosurf.


Demikian tadi tips SEO dengan menggunakan program Autosurf, masih banyak lagi program autosurf traffic exchange yang beredar di internet, pada tutorial SEO selanjutnya saya akan berikan lagi tips menaikkan ranking blog dengan menggunakan upmyrank. Silahkan dicoba dan semoga bermanfaat
jangan lupa untuk berlangganan dan follow blog ini.

Membuat Subdomain Pada Domain CO.CC

Posted: 06 Sep 2013 11:47 PM PDT


Kali ini saya akan memberikan tutorial membuat subdomain di domain co.cc. Artikel ini merupakan bagian dari rangkaian belajar membuat blog dengan mesin wordpress memanfaatkan domain gratis co.cc dan hosting gratis webhost. Artikel sebelumnya tentang tutorial membuat dimain co.cc, tutorial membuat hosting 000webhost dengan domain co.cc dan cara membuat blog wrodpress terkenal mungkin sudah Anda baca dan ikuti secara seksama. Jika anda lupa coba buka kembali artikel-artikel diatas.

Membuat sub domain untuk domain.co.cc memang yang paling banyak diminati saat ini mengingat keunggulan domain.co.cc yang cukup sederhana, mudah diingat dan tidak kalah menarik dengan domain berbayar. Oleh karena itu pada postingan kali ini saya mencoba menulis tutorial lengkap membuat subdomain pada domain co.cc yang dihosting di webhost sedikit mengulas bagaimana membuat sub domain pada domain.co.cc yang telah di hosting pada server gratis webhost.

Membuat subdomain apakah untuk keperluan membuat blog, forum atau yang lainnya. Misalkan domain.co.cc utama Anda telah diinstal wordpress dan ingin membuat subdomain yang digunakan untuk keperluan komunitas blog Anda seperti membuat subdomain untuk forum, maka nama domainnya menjadi forum.domain.co.cc atau sebaliknya domain utama telah diinstal website template atau joomla dan Anda ingin membuat blog dan tidak ingin memilih domain baru dan lebih memilih untuk membuat subdomain pada domain utama Anda misalkan subdomain untuk blog contoh: blog.domain.co.cc.

Kita langsung saja, cara membuat subdomain cukup sederhana saja Anda tinggal login ke account webhost dimana domain utama co.cc telah terdaftar. Kemudian menuju pada control panel (Go to CPanel) Lalu klik Subdomain. Perhatikan Screenshoot di bawah ini,


Catatan: 
Membuat subdomain untuk domain.co.cc bukan pada account co.cc Anda tapi pada account hosting, dalam hal ini account webhost Anda!
Kemudian ketik subdomain yang Anda inginkan pada kotak yang disediakan contoh: adik.helmiikhwanul. co.cc. jika Anda ingin membuat blog dengan subdomain atau Anda ingin membuat sebuah forum untuk domain utama Anda hingga menjadi forum.domain.co.cc maka ketik forum. Setelah menentukan subdomain lalu klik Create. Lebih jelas perhatikan screenshot dibawah ini,


Sejauh ini Anda telah berhasil membuat subdomain untuk domain.co.cc Anda. dan pada contoh di atas berarti subdomain Anda adalah blog.domainanda.co.cc. Blog sebagai sub domain yang Anda masukan otomatis menjadi sebuah directory (folder) pada Public Html di hosting webhost Anda. Contoh: /home/a5720183/public_html/blog.

Selanjutnya Adalah menginstal software yang diperlukan untuk subdomain tersebut apakah Anda memerlukan sebuah sotware untuk forum, blog, joomla, atau lainnya. Untuk menginstal software yang diperlukan Anda cukup menggunakan jasa Fantastico Autoinstaller. Caranya kembali ke Cpanel kemudian cari Fantastico Autoinstaller yang berada pada kumpulan Software / Services. Sejauh ini webhost menyediakan beberapa mesin yang bisa diinstal melalui Fantastico Autoinstaller diantaranya, WordPress, b2evolution, Joomla, Drupal, phpwebsite, phpbb, simplemachines (SMF) atau Coppermine untuk album photo online Anda.

Pilih salah satu software yang Anda perlukan kemudian klik New Installation. Misalkan Anda membuat sebuah forum dan menggunakan SMF simple machines, maka klik New Installation di SMF. Lalu ada 3 yang harus diisi dari 5 langkah, pertama Install in directory, pada Install in directory ketikan subdomain yang Anda buat sebelumnya, pada Admin access data ketika nama Admin untuk login pada software yang akan Anda instal nantinya, pada Password tentu saja ketikan password pilihan Anda. Lebih jauh perhatikan screenshot di bawah ini,


Setelah klik Instal tunggu beberapa saat hingga proses instalasi Fantastico Autoinstaller komplit. Setelah sekitar 2-5 menit lalu klik [Back to Auto-installer] lalu perhatikan software yang tadi di instal dan klik View Installation Details. Disana Anda akan mendapat informasi tentang akses ke software yang diinstal, admin area, admin username dan password.

Selamat Anda telah membuat subdomain! Jika pertama yang Anda lihat subdomainnya adalah http://domain.co.cc/forum jangan khawatir coba akses dengan http://forum.domain.co.cc. Selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Modifikasi Kotak Pencarian di Blog

Posted: 06 Sep 2013 11:47 PM PDT


Sebuah blog sudah pasti sangat membutuhkan kotak pencarian atau search box. Kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya. Dengan kotak pencarian ini juga akan memudahkan pengunjung untuk menemukan artikel pada blog seperti artikel yang sudah lama diposting. Seperti layaknya kotak cari pada google, yahoo dan search engine lainnya, maka anda pun bisa membuatnya sendiri. Blogger sendiri sebenarnya sudah menyediakan fitur kotak cari atau kotak penelusuran ini. .

Pada tutorial blog kali ini saya akan membahas bagaimana membuat kotak penelusuran yang lebih menarik dan bisa anda atur sendiri sesuai template blog anda. Pada umumnya tombol default kotak cari ini berwarna abu-abu seperti yang sering anda temui. Anda bisa merubahnya dengan warna lain serta modifikasi kotak pencarian lainnya. Memodifikasi kotak pencarian tidaklah begitu sulit, hanya membutuhkan sedikit kesabaran untuk mengutak-atik widget ini. Kreatifitas pada kode CSS tentu diperlukan. Selain merubah warna anda pun bisa menghilangkan tombol pencarian dan menggantinya dengan gambar atau icon tertentu. Pilihan kustomisasi lainnya adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian. Dalam posting ini, anda akan melihat beberapa pilihan dan cara kustomisasi kotak pencarian, sehingga anda dapat memilih metode yang paling cocok dengan selera anda serta menyesuaikannya dengan template blog anda.

Untuk kode widget kotak pencarian sederhana untuk blogger yang biasa anda temui adalah seperti ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Bagian yang berwarna merah dengan tulisan "search-box" adalah tempat dimana nantinya akan diketikkan teks yang mau dicari. Sementara pada tulisan "search-btn" adalah tombol yang akan ditekan untuk menyampaikan perintah pencarian ke server. Secara default, kode widget kotak pencarian di atas akan menjadi seperti ini :



Namun dengan beberapa sentuhan teknik sederhana, kita dapat membuat tampilan kotak pencarian menjadi lebih cantik.

Menggunakan kode CSS untuk kustomisasi kotak pencarian
Sebagai contoh, katakanlah kita menginginkan kotak pencarian dengan menambahkan warna latar belakang. Oke, saya pilih latar belakang warna hijau muda dan warna hijau gelap sebagai garis batas. Untuk membuatnya, maka gunakan kode CSS di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Kode di atas akan menghasilkan kotak pencarian seperti di bawah ini :



Nah, kotak pencarian di atas akan kita modifikasi lagi dengan menambahkan warna latar belakang, garis tepi tombol dan warna teks pada tombol. Oke, saya pilih latar belakang warna hijau tua, garis tepi warna merah dan teks ditebalkan berwarna putih :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>
</form>
Saya sengaja membuat garis tepi dengan perintah "solid" agar kotak pencarian terlihat timbul dan bukannya datar atau flat button. Tujuannya agar orang tahu bahwa itu adalah sebuah tombol yang dapat di klik. Nilai ketebalan 1px masih dapat anda ubah lagi. Namun ada banayk blog yang memilih untuk membuat kotak pencarian tombol flat, terserah saja mau pilih yang bagaimana. Hasil kode kotak pencarian di atas seperti ini :



Sesuaikan kode-kode di atas dengan selera dan template anda. Misalnya anda ingin mengganti warna dan tebal garis tepi agar terlihat unik dan menarik. Untuk merubah warna, silahkan lihat kode warna saya.

Kustomisasi teks pada widget kotak pencarian
Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca . Misalnya anda ingin memasukkan tulisan "cari di blog ini!" atau "ketik untuk mencari". Untuk membuatnya, kita perlu menambahkan kode CSS pada menjadi seperti kode di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Maka hasilnya akan seperti di bawah ini :



Teks pada tombol pencarian juga dapat diganti dengan teks pilihan anda. Pada contoh di atas teks nya adalah "Search". Nah, anda tinggal mengganti teks tersebut pada bagian kode ini :
<input id="search-btn" value="Search" type="submit"/>
Misalnya anda ingin menggantinya dengan teks "Go!" maka kodenya akan menjadi seperti ini :
<input id="search-btn" value="Go!" type="submit"/>

Menggunakan gambar sebagai tombol kotak pencarian
Seperti pengantar di atas, tombol widget dapat anda hilangkan dan menggantinya dengan gambar atau icon tertentu. Ga sulit-sulit amat koq, biasa saja. Untuk membuatnya, kita hanya perlu mengubah jenis input dari "Submit" diarahkan ke "Image" dan menentukan URL untuk gambar atau icon tersebut. Artinya anda harus menyiapkan gambar yang sudah dihosting pada tempat hosting gambar eksternal anda. Sebaiknya gunakan gambar atau ikon kecil dengan ukuran 16x16 pixel atau sedikit lebih besar dari ukuran tersebut agar pas untuk ukuran kotak pencarian. Ada banyak ikon pencarian gratis yang tersedia di internet. Misalnya saya menggunakan icon dari Iconlet tempat mencari icon gratis dengan banyak pilihan menarik. Contohnya seperti gambar icon di bawah ini :


Untuk menggunakan icon tersebut sebagai pengganti tombol kotak pencarian, maka kode yang digunakan adalah seperti di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgWgXb8al3Ohp2bj0lDQcdR2C4nIeRpDe79k14dno_N04c8uuNwM9kROBFuTvwURzmAdri1fY-EAxqO5M-MsuIX_z8NTl2jCRdi3FVyt3CO03nb5w5ycQQEc3fPL84dyWXAAxBByGDoPI/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>
Pada kode di atas, saya telah mengubah jenis input "submit" ke "image" serta menambahkan URL dari icon yang sudah saya hosting pada baris setelah "image". Agar icon tepat di samping kotak pencarian, maka saya menmbahkan margin-left dan nilai jarak 5 pixel. Hasilnya adalah seperti di bawah ini:



Temen-temen dapat mengganti icon diatas dengan icon milik anda. Yang jelas, pastikan URL icon untuk kotak pencarian anda sudah benar. Anda juga masih dapat menyesuaikan ukuran gambar serta margin yang ada pada kode di atas agar sesuai dengan template blog anda.

Sekarang anda sudah bisa membuat kotak pencarian dengan beberapa pilihan di atas. Untuk menempatkannya di blog blogger saya rasa semuanya sudah bisa kan. Sekian dari saya, selamat berkreasi dengan kotak pencarian. Bagi blogger yang sudah mahir dan punya modifikasi kotak penelusuran yang lain, jika tidak keberatan, dapat berbagi ilmu di sini. Terimakasih, semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Membuat Efek Pelangi Pada Link di Blog

Posted: 06 Sep 2013 11:47 PM PDT


Link untuk sebuah blog memiliki peran yang sangat penting, hal itu sudah saya jelaskan pada artikel saya sebelumnya pada cara membuat internal link di blog. Jika temen-temen belum baca silahkan dibuka dulu arsipnya. Pada setiap template blog memiliki bentuk tampilan link (tautan) yang berbeda-beda. Ada yang menggunakan bentuk garis bawah (underline), warna, ada pula yang menggunakan bentuk perubahan huruf.

Nah, pada tutorial kali ini saya akan memberikan tips bagaimana cara membuat link ketika disorot mouse warnanya berubah-ubah, jadi tidak hanya satu warna tapi banyak warna, bahasa kerennya rainbow effect atau efek pelangi. Untuk contoh soalnya anda bisa lihat disini. Ada dua script yang saya dapat untuk membuat efek pelangi pada blog, sangat mudah juga ternyata. Oke, langsung saja pada langkah-langkah pembuatannya :
  1. Login ke blogger dengan akun anda. 
  2. Setelah itu pilih tata letak/layout
  3. Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget
  4. Kemudian cari kode </head> 
  5. Kalau sudah ketemu letakkan script ini tepat diatasnya:
<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>
Jika dengan cara diatas kode javascript yang saya berikan terlalu panjang sehingga bisa membuat loading blog anda menjadi lamban, di bawah ini akan saya berikan kode yang sederhana. Caranya sama seperti diatas, anda tinggal meletakkan kode ini di atas </head>
<script src='http://enes-sc.googlecode.com/files/rainbowlink.js'/>
Sangat pendek bukan? Nah, sekarang tinggal anda mau pilih yang mana. Mau yang panjang atau yang pendek, hasilnya sama saja. Itu tadi tutorial kali ini, selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.
di Minggu, September 08, 2013

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)