Membuat Blog Di WordPress.com

Jika temen-temen blogger sudah bosan dengan tampilan blogspot, dan ingin membuat blog/web di wordpress.com. Kali ini saya akan berikan tutorial cara membuat blog di wordpress.com. Membuat blog di wordpress.com sangatlah mudah, hampir sama seperti kalau kita buat blog di blogspot. Kita tinggal isi formulir yang sudah disediakan, isi semua jangan sampai ada yang kelewatan, jadi deh blognya......

Membuat Blog di Blogspot

Artikel ini seharusnya saya letakkan di awal postingan saya, tapi karena kemarin ada teman yang bertanya bagaimana membuat blog di blogspot, yah ada baiknya tutorial ini saya tulis. Salah satu penyedia Blog yang cukup populer saat ini adalah Blogspot atau Blogger. Kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih Hidup karena hasil kreasi sendiri.

Langkah-Langkah Membuat Website

Sebelum memulai tutorial ini ada baiknya saya ulas sedikit tentang definisi website secara awam agar mudah di mengerti. Website adalah sekumpulan file berupa gambar, aplikasi, kode program dan lainnya yang di simpan di suatu tempat yang di sebut sebagai server. Server adalah sebuah komputer yang selalu hidup dan online serta bisa di akses melalui internet sehingga file2 yang anda simpan di server itu bisa di buka oleh semua orang di seluruh dunia. Untuk bisa mendapatkan layanan sebuah server, maka anda harus menyewa dari perusahaan webhosting.

Tentang PPC dan Daftar Situs PPC Lokal

PPC (Pay Per Click) merupakan salah satu alternative cara yang bisa kita lakukan untuk mendapatkan tambahan penghasilan lewat blog. Dengan PPC kita akan dibayar setiap ada orang yang mengklik iklan yang kita tempatkan di blog kita, untuk besarnya bayaran per kliknya itu tergantung dari program PPC yang kita ikuti, klo PPC lokal biasanya sekitar Rp. 400 atau Rp. 300 per kliknya.

Kenapa Backlink Itu Penting?

Walaupun sudah mau Maghrib, tapi nggak apa lah saya akan mencoba menulis mengenai teknik SEO yang lain yaitu Backlink. Backlink adalah link yang mengarah pada situs web kita dari situs lain. Dengan kata lain, backlink adalah tautan link yang dapat meningkatkan posisi SERP di Google. Jumlah backlink yang dimiliki situs adalah nilai popularitas situs tersebut. Kenapa backlink itu penting? Seperti yang saya tulis diatas, backlink memberikan kekuatan untuk bersaing di posisi SERP Google. Yang pada tahap selanjutnya akan memperkuat kata kunci pada blog anda.

Sabtu, 06 Oktober 2012

Pasang animasi status page loading di blogger


Ok langsung aja ya, sesuai janji saya kemaren untuk menuliskan tutorial cara pasang gambar status page loading ini di blogger, yang belum sempat baca silahkan simak dulu info sebelumnya tentang Page preloader disini.

Pertama, pilih saja dulu salah satu animasi preloader dari dua layanan ini Preloader atau Ajaxload, kemudian simpan hasil gambar dalam format gif tersebut. Kalo sudah, silahkan upload file gambar tadi ke hosting anda (yang gratis bisa pake geocities.com)

Langkah kedua silahkan buka notepad anda, kemudian simpan kode dibawah ini dengan nama preloader.js (pastikan ekstensi berakhiran JS, bukan TXT)

var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}


Kalo sudah, silahkan upload file preloader.js ke hosting anda (yang gratis bisa pake geocities.com)

Cara Pasang di blogger:

Langsung tuju saja ke alamat EditHTML, cari tag <body> Kemudian ganti tag <body> dengan kode dibawah ini, janga lupa ganti kode warna merah dibawah dan sesuaikan sendiri dengan lokasi alamat penyimpanan gambar dan file JS anda.

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='
http://lokasi-simpan.com/gambarpreloader.gif'/></div>

<script src='
http://lokasi-simpan/preloader.js' type='text/javascript'/>

Untuk mengubah penempatan gambar loading silahkan atur sendiri pada kode text-align:center (silahkan bermain saja dengan kode center, coba ganti dengan left, right, top atau bottom). Sebenarnya masih banyak trik lainnya, silahkan dikembangkan sendiri ya.

Perhatian! saya belum dapat info apakah merubah tag <body> ini melanggar TOS blogger apa tidak, jadi saya sarankan jangan di coba langsung di blog utama. silahkan bereksperimen di blog uji coba anda . Kalau terjadi apa2 jangan salahkan saya OK! :)

Menampilkan Gambar Transparan, Mouseover Effect

Ini maksudnya apa ya? ok, dari pada saya jelasin panjang lebar coba rekan lihat dulu samplenya di zoomtemplate.com, kalo sudah coba sekarang arahkan mouse ke gambar yang ada dihalaman postingan..nah disitu rekan akan melihat efek dimana gambar yang semula terang akan menjadi redup atau bisa juga sebaliknya dari redup menjadi terang ketika dilewati mouse. Mungkin sudah cukup jelas maksudnya ya, langsung aja ke bahasan selanjutnya :)

Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)



<img src="Url lokasi simpan gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)



<img src="Url lokasi simpan gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>


Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

 .post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}


Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.


Breaking News: zoomtemplate.com sudah mencapai tahapan final, untuk desain template sengaja saya buat khusus dengan memasang berbagai efek istimewa dan beberapa teknik koding yang masih jarang digunakan di template yang ada selama ini. Semoga cepat kelar ya..dan ditunggu juga untuk sumbangan template rekan lainnya. thanks

Animasi gambar Opacity menggunakan jQuery

Postingan kali ini sebenarnya cuman memperbaiki tutorial sebelumnya mengenai tranparansi gambar menggunakan CSS Opacity. Kok memperbaiki, emang ada yang salah ya? sejujurnya gak ada kok, masalahnya hanya pada tampilan di browser..dimana CSS opacity ternyata kurang begitu berjalan dengan baik pada beberapa browser versi jadul, salah satunya di IE6. Selain itu efek animasi yang ditampilkan juga kurang begitu mantap dan terlihat kasar.  Nah sayang banget tuh punya efek animasi gambar yang ok tapi gak support di browser lawas, untuk itu kali ini saya coba mengenalkan efek animasi yang lain menggunakan Opacity via jQuery.



Efek blur tranparansi yang ditampilkan menggunakan Opacity jQuery ternyata lebih halus jika dibanding dengan Opacity CSS, dan sepertinya juga support di semua browser, asalkan pada browsernya tetap mengaktifkan Enable Javascript lho ya hehehe. Untuk melihat contoh efek gambar yang dihasilkan jQuery silahkan langsung aja ke Blog baru saya Free Blogger Templates Gallery.

OK, langsung ke tutorial saja ya...

Buka halaman Edit HTML kemudian letakan script dibawah ini di bawah kode ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.efekanimasi&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>


Contoh manual memasang efeknya pada gambar :

<img
class="efekanimasi" src="url alamat gambar"/>

Sebenarnya ada cara lain yang lebih mudah dimana kita bisa langsung mengaktifkan efek gambar ini disemua image pada halaman posting. Caranya, copy paste aja script dibawah ini, dan letakan saja dibawah kode ]]></b:skin> atau dibawah script yang sudah kita masukan sebelumnya.

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>


Good Luck :)

Mengembalikan dan Mengaktifkan Komentar Avatar Blogger pada Custom Template

Secara default sebenarnya komentar avatar pada blogger sudah bisa rekan aktifkan langsung tanpa merubah apapun pada tempate yang belum dimodifkasi. Tapi ini akan bermasalah bila template yang digunakan saat ini sudah menggunakan custom template. Nah biar komentar avatar ini bisa tampil kembali caranya sangat mudah, ikuti saja tutorial dibawah ini:


Mengaktifkan Komentar Avatar Blogger Pada Custom Template 

Pertama cari kode dibawah ini.

<dl id='comments-block'>

Kemudian ganti kode diatas dengan kode dibawah ini.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Setelah mengganti kode diatas, kemudian cari baris kode dibawah ini.

<a expr:name='data:comment.anchorName'/>

Kemudian letakan kode dibawah ini setelah kode diatas.

<b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
 </b:if>


Untuk mengaktifkan atau menonaktifkan gambar profil dalam komentar, buka halaman Pengaturan - Komentar. Lalu beri tanda check "Ya" pada "Tampilkan gambar profil dalam komentar?"

Mengembalikan Komentar Avatar  jika menggunakan avatar dari MyBloglog

Sebelumnya saya pernah menulis tutorial memasang komentar avatar menggunakan mybloglog, nah bila rekan hanya ingin menggunakan avatar standar blogger, rekan bisa dengan mudah mengembalikannya. ikuti tutorial dibawah ini.

Untuk memudahkan rekan menghapus kodenya, pertama coba cari dulu kode dibawah ini

<b:loop values='data:post.comments' var='comment'>

Kemudian lihat baris kode dibawahnya seperti ini

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>


Kalo sudah ketemu, tinggal hapus aja semua kode diatas, kemudian ikuti kembali cara mengaktifkan komentar avatar seperti yang tertulis diatas.