Kesalahan SEO yang kerap dilakukan Blogger

SEO memang selalu menjadi topik utama dalam dunia Blogging. Tidak mengenal Platform, Biarpun Wordpress, Blogger, Jmoola, Typepad dll, mereka mempunyai langkah SEO mereka sendiri. Wordpress memang selalu menjadi no 1, tersedianya plugin SEO kerap memudahkan Blogger yang menggunakan Wordpress. Terus, Bagaimana dengan Blogger ?

Apa itu SEO ?

SEO ( Search Engine Optimization ) adalah suatu tindakan/ kegiantan agar Search Engine seperti Google dapat mudah mengcrawl blog pelaku SEO sehingga dapat menjadi no 1 di Ranking Search Engine seperti Google.

Part 1 Kesalahan SEO yang kerap dilakukan oleh Blogger

Part 2 Pengertian Rel='archives' dan rel='tag'

Part 3 ......Pending........

Baca kembali cara membuat artikel yang berkualitas

Macam-Macam SEO

White Hat SEO

White Hat SEO adalah Kegiatan SEO yang mematuhi peraturan Search Engine. Jenis SEO ini tidak beresiko terkena banned dari Google.

Black Hat SEO

Black Hat SEO adalah kegiatan SEO yang melanggar peraturan Search Engine. Jenis SEO ini dapat meningkatkan ranking di Google secara cepat tetapi jika ketahuan dapat terkena penalty ( penurunan rank ) dari Google.

Kesalahan dalam SEO

1. Menggunakan Keyword secara berlebihan

Ini merupakan kesalahan yang sering dilakukakn oleh blogger. Menggunakan Meta Keyword memang masih menjadi pembicaraan. Meskipun Matt Cut sudah menjelaskan bahwa Google tidak menggunakan Meta Keyword dalam Search Rankingnya, tetapi kita dapat memasangnya agar Google lebih mengerti tentang blog kita.
Mengapa menjadi masalah ?
Contoh :
Perusahaan A bernama Anvac memiliki Meta Keyword : Blogger, SEO, Make money.
Perusahaan B bernama banca memiliki Meta Keyword : Blogger, SEO, Make money, Anvac.
Dari ke atas sudah jelas bahwa Perusahaan B telah memanipulasi Keywordnya
Note : Selalu gunakan maksimal 10 Meta Keyword

2. Judul Posting

Umumnya, judul posting adalah H3, lalu dengan SEO kita Ubah H2.
Ada yang berkata bahwa H1 lebih bagus dalam judul ?
Baiklah H1 hanya boleh dipakai ‘satu kali’ / 1 dan maksimal ‘dua kali’ / 2 dalam blog, sehingga menggunakan H1 dalam judul blog sangat bertentangan.
Kita anggap saja
H1 : Judul Blog
H2 : Judul posting
H3 : Sub Posting
H4 : Bagian dari Sub Posting
H tidak hanya ukuran tetapi juga bagian, Inilah SEO yang benar

3. Penggunaan Rel = Follow, Index, NoIndex dan dofollow

Umumnya Google hanya mengenal nofollow, archive, canocial ,tag dll
Lalu bagaimana dengan ;
Rel = Follow, Index, NoIndex, dofollow, dll
Ini salah besar, Google tidak mengenal itu dan hanya membiarkannya saja
Jika anda ingin link menjadi dofollow / follow/ terindex, cukup hapus rel=nofollow saja.

Dari Saya

Memang kita kerap melakukan kesalahan dalam SEO, tetapi dengan penjelasan saya, semoga anda dapat melakukan SEO yang benar. Anda boleh meng-share artikel ini dengan catatan menyertakan Link balik.
Note : Posting selanjutnya tentang rel archive dan rel = tag jadi berlangganan dengan kami, yang berlangganan dapat mengakses info lebih cepat dari yang lain

7 Langkah SEO yang harus dilakukan oleh Blogger

Melakukan langkah SEO dapat membuat blog anda menjadi rangking satu di Google dan akhirnya dan membuat traffic meningkat dan pendapatan online bertambah ( jika anda menjalankannya ). Terdapat 7 langkah SEO yang harus dilakukan oleh Blogger . Simak artikel berikut

1. Menggunakan Keyword di Judul

Jika anda membuat judul , usahakan menambah keyword di judul. Hal ini sangat penting untuk menambah potensi artikel anda masuk di Google dengan rangking <30. Menggunakan keyword jangan terlalu banyak karena nanti bisa dianggap Spam oleh Google.

1.1 Menggunakan dua Keyword di Judul

Banyak SEO expert berpendapat bahwa memasukkan maksimal dua keyword dapat memaksimalkan potensi artikel mejadi ranking satu. Hal ini mungkin benar tetapi jangan selalu gunakan cara ini jika anda masih Newbie dalam SEO.

1.2 Gunakan Keyword di Judul Blog

Menggunakan Keyword di judul blog dapat sangat penting karena sebelumnya judul blog ini adalah " Indonesia Blogger Trick" lalu berubah menjadi " Trik Blogger" Untuk memaksimalkan keyword dan hasilnya adalah peningkatan traffic dari hari ke hari.

1.3 Penggunakan keyword di title link dan alt maupun title gambar

Selalu gunakan title di link maupun alt dan title di gambar dan akan lebih baik jika anda membidik keyword yang tepat

2. Raihlah backlink ke artikel, bukan ke blog

Memberi / Mendapat backlink dari blog lain ke artikel lebih aman daripada homepagenya karena bisa saja 2 blog saling memberi link dan mereka tidak mengetahuinya. Melakukan link ke blog lain di artikel justru merupakan kekuatan SEO dan ini merupakan bisnis "Paid Links yang aman" selama tidak berlebihan.
Baca kembali : http://www.trikblogger.net/2013/05/perbedaan-iklan-dengan-paid-links.html untuk penjelasan tentang paid links

2.1 Mendapat backlin secara gratis

2.1.a 

Anda dapat mendapat backlink ke artikel secara gratis dengan melakukan interlink atau memberi link kepada blog sendiri. Hal ini dapat meningkatkan Page Rank anda secara gratis dengan aman ( asal tidak berlebihan, maksimal interlink di artikel kira kira 4-5 )

2.1.b

Selain melakukan interlink, anda dapat mendapat backlink secara gratis melalui pencuri konten. Hal ini telah dibahas di aritkelku sebelumnya. Baca kembali : "Cara mendapat backlink dari Pencuri konten"

3. Percepat kecepatan Blog anda

Mempercepat kecepatan blog anda dapat berdampak sangat baik karena Google dapat menghukum blog yang memiliki kecepatan yang lemot. Saya sudah memberi tutorial cara menggabung javascript , yang berguna sekali dalam mempercepat kecepatan blog anda. Dapat dibaca sini : "Cara meringkas dan menggabung javascript"

4. Melakukan analisa sebelum membuat artikel

Sebelum membuat artikel, setidaknya anda membuat analisa terlebih dahulu. Dengan menggunakan Google Keyword planner ( pengganti google keyword tool ) maka anda dapat mengetahui pesaing anda, kesempatan menjadi no satu dan apakah sering disearch atau tidak di Google.

Dapat dibuka disini : https://adwords.google.com/ko/KeywordPlanner/Home‎

5. Membuat Permalink menjadi SEO friendly

Blogger secara default memilih permalink yang digunakan di artikel anda tapi anda dapat mengeditnya sesuka hati. Usahakan gunakan keyword di permalink dan bidik secara tepat.

6. Mengoptimalkan gambar agar SEO friendly

Selalu pasang alt dan title tag di gambar. Tidak lupa saat anda mau mengupload gambar usahkan namanya begini : nama-gambar-anda bukan nama gambar anda karena spasi akan dihitung sebagai %20 atau _ yang artinya kehilangan nilai SEO nya.Selalu hilangkan link nya agar pagerank tidak berpindah tempat secara sia-sia.

7. Gunakan Sub heading untuk Sub judul dan Minor Heading untuk bagian dari Sub judul

Saya telah membuat 7 bagian , setiap bagian saya setting menjadi Sub Heading dan anda akan melihat di bagian saya bagi menjadi 3, dan yang dibagi saya setting itu menjadi Minor Heading.

Penutup

Mohon maaf kalau saya sekarang jarang update posting di blog ini karena saya sibuk mengurusi 2 blog lainnya yaitu stopkorupsi.org dan jaringblogger.com. Semoga artikel ini bermanfaat bagi kita semua. Anda boleh mengopas artikel ini secara bebas dengan catatan menyertakan sumber.

Mengubah tag judul posting menjadi H1 Dynamic Heading

Pernahkah anda melihat blog yang dibuat dari Wordpress Self Hosted ( wordpress.org bukan wordpress.com ). Jika blog tersebut menggunakan framework Genesis atau Thesis pasti saat anda membuka artikel/pos di blog tersebut, judul posnya berubah menjadi H1 sedangkan saat di Homepage, judul posnya adalah H2. Ini merupakan SEO On Page karena Google dapat mengetahui mana yang lebih penting, judul blog atau judul pos/artikel blog itu. Trik ini dimakan dynamic heading.
Selain membuat blog anda menjadi dynamic heading, kode yang saya share di artikel ini dapat membuat pemasangan rel="title" otomatis di judul pos baik saat di homepage maupun saat di pos itu sendiri

Sebelum anda melakukan step ini, ada baiknya anda membackup template anda terlebih dahulu.
Baca kembali : Cara membackup template blogger

Cara memasang Dynamic Heading di Blogger

1. Buka Blogger > Template > Edit HTML

2. Cari kode seperti ini

<!--No header image -->
<div id='header-inner'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>

3. Ubah Kode tersebut menjadi seperti berikut

<!--No header image -->
<div id='header-inner'>
  <div class='titlewrapper'>
    <b:include name='title'/>
  </div>
  <b:include name='description'/>
</div>

4. Lalu coba scroll ke bawah, nanti anda akan menemukan kode seperti di bawah ini

 <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>
      <data:title/>
    </a>
  </b:if>
</b:includable>

5. Ganti dengan kode dibawah ini :

<b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl'>
          <data:title/>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl'>
        <data:title/>
      </a>
    </h2>
  </b:if>
</b:includable> 

6. Lalu Cari kode ini :

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
       Puluhan - ratusan kode
</h3>
</b:if>

Tapi beberpa template menggunakan tag H2, jadi cari juga yang seperti ini

<b:if cond='data:post.title'>
  <h2 class='post-title entry-title' itemprop='name'>
       Puluhan - ratusan kode
</h2>
</b:if>

Untuk mencarinya, anda bisa menggunakan Ctrl+F dan Cari <h3 class='post-title entry-title' itemprop='name'> atau   <h2 class='post-title entry-title' itemprop='name'>

Ganti kode tersebut menjadi kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
        <b:if cond='data:post.link'>
   <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
   <b:else/>
   <b:if cond='data:post.url'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
   <b:else/> <data:post.title/>
   </b:if>
        </b:if>
      </h1>
    </b:if>
</b:if>
    <b:if cond='data:post.title'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h2 class='post-title entry-title' itemprop='name'>
        <b:if cond='data:post.link'>
   <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
   <data:post.title/>
   </b:if>
   </b:if>
      </h2>
 </b:if>
    </b:if>
    <b:else/>
    <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
        <b:if cond='data:post.link'>
   <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
   <b:else/>
   <b:if cond='data:post.url'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
   <b:else/> <data:post.title/>
   </b:if>
        </b:if>
      </h1>
    </b:if>
    </b:if> 

Setelah itu jangan lupa simpan perubahan di template anda

Memasang tampilan persentase scroll di Blogger

Apa kabar sahabat. Bagaimana kabarnya ? Melihat tampilan blog saya yang lebih ringan, tertarik gak mengunjungi blog saya terus ? Ha ha ha. Baiklah, apakah kalian penasaran dengan kotak kecil di kanan yang muncul disaat kalian meng-scroll blog anda ? Di kotak kecil terdapat berapa persen anda mengscroll blog saya, tetapi apakah anda ingin memasangnya juga di blog anda ? Baiklah simak artikel berikut
Note : Saya belum mencobanya di Firefox dan IE tetapi kalau untuk firefox 4+ saya kira / kayaknya baik baik saja, kalau IE biarlah yang makai komentar :)

CSS

Baiklah langsung buka Blogger terlebih dahulu
Lalu buka Blogger >> Template >> Edit HTML
Nah pasang kode berikut diatas */]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: &#8221; &#8221;;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

 Tempat pemanggilan

Pasang kode ini diatas <body>

<div id='scroll'/>

Javascript

Untuk javascriptnya, pasang kode javascript berikut diatas </body>

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

Setelah ini, anda harus memasang jquery di blog anda. Tapi jika sudah ada baik versi lebih lama maupun baru, anda tidak perlu memasang kode dibawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Taruh diatas </head>
Note : Melihat kode javascript diatas, disana sebenarnya tidak diperlukan jquery tapi setelah saya coba di suatu template, kode ini tidak berfungsi tanpa jquery jadi buat jaga-jaga pasanglah jquery
Pertama-tama coba tanpa jquery, jika bisa ya sudah, jika tidak pakai jquery. Jika tetep tida bisa memakai jquery berarti ada masalah dalam scriptnya. Silahkan hubungi saya melalui komentar

5 Jenis aplikasi yang diperlukan Blogger

Banyak sekali aplikasi yang tersedia untuk window, entah gunanya apa seperti antivirus, utility, word processor dll. Tiap orang selalu memiliki kebutuhan akan aplikasi yang berbeda, lalu apa jenis aplikasi yang diperlukan oleh Blogger ?

1. Tool / Aplikasi SEO

Anda perlu menginstal aplikasi SEO di PC anda, aplikasi SEO dapat memonitor backlink, rangking di Google, menganalisa nilai SEO dll. Ada banyak aplikasi SEO dan saya sarankan pilih yang bagus

Aplikasi SEO bagus dan gratis adalah Traffic Travis, banyak sekali fungsinya.

Silahkan di download : http://www.traffictravis.com/register

Dan juga SEO Power suite, yang lebih lengkap lagi

http://www.seopowersuite.com/

2. Photo Maker / Editor

Terkadang anda tidak menemukan gambar di Google image yang anda inginkan, anda bisa membuat gambar itu sendiri atau mengedit yang telah ada. Anda dapat menggunakan tool berbayar yang bagus seperti Photoshop atau Corel Draw. Tapi jika anda ingin gratis, anda bisa mencoba Photoscape dan Inkscape

3. Photo Compressor

Anda setiap mengupload gambar ke Blogger / Picasa sebelumnya, gambar harus di compress dulu agar lebih ringan ukurannya. Manfaatnya adalah meningkatkan loading blog. Ada banyak photo compressor yang bisa anda coba, anda bisa mencoba yang saya gunakan yaitu file optimizer yang dapat mengcompress hampir semua format gambar termasuk juga gif

Download : http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

4. Window live Writer

Yah ini bukan jenis aplikasi, melainkan nama aplikasi. Setiap orang tahu bahwa wordpress dan blogger memiliki tampilan yang jelek dalam waktu penulisan postnya ( saya sudah pernah mencoba wordpress dan hampir tidak ada bedanya dengan blogger ), jadi saya sarankan anda gunakan Window Live Writer. Terdapat plugin yang dapat berguna dalam penulisan artikel menggunakan aplikasi tersebut. Mudah kok menggunakannya, dan enaknya dapat di simpan.

5. Code / HTML Editor

Anda dapat menggunakan Notepad ++ dalam pengeditan kode atau HTML. Ada banyak aplikasi yang lain sebenarnya, salah satunya adalah codelobster. Jenis aplikasi ini berguna untuk yang suka otak atik HTML, yang pasti aplikasi seperti Notepad++ dll lebih baik daripada aplikasi seperti notepad dan microsoft word, jadi saya sarankan menginstal salah satunya .

Penggunaan Jenis Efek jQuery Modal Dialog

Penggunaan Jenis Efek jQuery Modal Dialog - Ada banyak cara untuk menampilkan lightbox overlay dengan bermacam efek. Seperti yang sedang ngetrend saat ini adalah pengggunaan style lightbox untuk menampilkan efek pada widget dengan beberapa cara modern yang salah satunya mereka gunakan adalah menggunakan CSS transisi dan animasi untuk membuat efek pada kotak dialog saat muncul. Dalam desain user interface, modal dialog dikenal sebagai jendela tampilan baru kotak dialog yang mengharuskan pengguna untuk berinteraksi sebelum mereka dapat kembali ke operasi tampilan induk, sehingga mencegah alur kerja pada tampilan utama. Di Web/blog, Modal Dialog sering digunakan untuk menampilkan gambar secara rinci ataupun widget lainnya, dalam pola yang dikenal sebagai Lightbox. Efek lightbox sering juga disebut Modal Window atau Modal Dialog karena tampilan jendela sering digunakan untuk menampilkan kotak dialog. Apabila ingin mengkombinasikan untuk membuat kotak dialog dengan beberapa macam efek pada blog anda, berikut adalah cara untuk menggunakan jQuery Modal Dialog dengan CSS transisi dan animasi.

Pertama masuk Edit HTML template dan pasang kode berikut ini di atas kode </head>

<link href='http://mas-andes.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/>
<script src='http://mas-andes.googlecode.com/svn/trunk/modernizr.custom.js' type='text/javascript'/>

Kemudian pasang kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var ModalEffects=(function(){function init(){var overlay=document.querySelector('.md-overlay');[].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){var modal=document.querySelector('#'+el.getAttribute('data-modal')),close=modal.querySelector('.md-close');function removeModal(hasPerspective){classie.remove(modal,'md-show');if(hasPerspective){classie.remove(document.documentElement,'md-perspective')}}function removeModalHandler(){removeModal(classie.has(el,'md-setperspective'))}el.addEventListener('click',function(ev){classie.add(modal,'md-show');overlay.removeEventListener('click',removeModalHandler);overlay.addEventListener('click',removeModalHandler);if(classie.has(el,'md-setperspective')){setTimeout(function(){classie.add(document.documentElement,'md-perspective')},25)}});close.addEventListener('click',function(ev){ev.stopPropagation();removeModalHandler()})})}init()})();
(function(window){'use strict';function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)")}var hasClass,addClass,removeClass;if('classList'in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c)};addClass=function(elem,c){elem.classList.add(c)};removeClass=function(elem,c){elem.classList.remove(c)}}else{hasClass=function(elem,c){return classReg(c).test(elem.className)};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+' '+c}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c),' ')}}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c)}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==='function'&&define.amd){define(classie)}else{window.classie=classie}})(window);
//]]>
</script>

Kemudian Simpan template.

Struktur HTML modal dialog:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog <a class="md-close">&#215;</a></h3>
        <div>
            <p>Disini Isi Konten Kotak Dialog</p>
        </div>
    </div>
</div>

<!-- Tombol untuk menampilkan modal dialog -->
<button class="md-trigger" data-modal="modal-1">Open Dialog</button>
<div class="md-overlay"></div>

class md-effect-1 dan ID modal-1 adalah tipe efek yang di gunakan (Konfigurasi lihat tabel).
<p>Disini Isi Konten Kotak Dialog</p> adalah isi dari kotak dialog.

Untuk menentukan masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini:

class	id	effect
md-effect-1	modal-1	Fade in & Scale
md-effect-2	modal-2	Slide in (right)
md-effect-3	modal-3	Slide in (bottom)
md-effect-4	modal-4	Newspaper
md-effect-5	modal-5	Fall
md-effect-6	modal-6	Side Fall
md-effect-7	modal-7	Sticky Up
md-effect-8	modal-8	3D Flip (horizontal)
md-effect-9	modal-9	3D Flip (vertical)
md-effect-10	modal-10	3D Sign
md-effect-11	modal-11	Super Scaled
md-effect-12	modal-12	Just Me
md-effect-13	modal-13	3D Slit
md-effect-14	modal-14	3D Rotate Bottom
md-effect-15	modal-15	3D Rotate In Left
md-effect-16	modal-16	Blur
md-effect-17	modal-17	Let me in
md-effect-18	modal-18	Make way!
md-effect-19	modal-19	Slip from top

Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo.

Demikian untuk tata cara menerapkan dan Penggunaan Jenis Efek jQuery Modal Dialog, Selebihnya bisa berkreasi sendiri di blog masing-masing.

jQuery Efek fadeIn dan fadeOut Page Load Blog

jQuery Efek fadeIn dan fadeOut Page Load Blog – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karena banyaknya javascript yang saya gunakan sehingga pada saat loading membuka halaman tampilannya sedikit terganggu dan terlihat kurang rapi. Untuk mengatasi hal ini maka timbul inspirasi untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Namun perlu diketahui, ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan maka supaya tidak terlihat saya menggunakan cara ini untuk menutupi kemungkinan tersebut. Mungkin apabila di antara kalian ada yang mengalami masalah seperti halnya dengan blog ini, bisa menggunakan cara ini sebagai alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya.

Efek fadeIn Page Load Blog

Efek ini yang saya gunakan pada blog ini, demonya bisa di lihat saat membuka salah satu halaman di blog ini. Walaupun sederhana namun lumayan untuk memanipulasi loading halaman blog. Script yang di gunakan seperti dibawah ini, cara memasangnya masuk ke Edit HTML lalu taruh di atas kode </body>

<script type='text/javascript'>
$(document).ready(function () {
 $('body').hide().fadeIn(5000).delay(500)
});
</script>

Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS body{display:none} untuk menyembunyikan body sebelum script berjalan.

Efek fadeIn dan fadeOut Page Load Blog

Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman). Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut tidak berjalan. Untuk menerapkannya kedalam blog caranya sama seperti langkah di atas, dengan menaruhnya di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 $("body").css("z-index", "-10");
 $("body").fadeIn(5000);
 $("a").click(function (event) {
  event.preventDefault();
  linkLocation = this.href;
  $("body").fadeOut(1000, redirectPage);
 });

 function redirectPage() {
  window.location = linkLocation;
 }
});
//]]>
</script>

DEMO

Namun sebelum menerapkan cara di atas juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

Cara Menambahkan jQuery Pada Template Blogger

Cara Menambahkan jQuery Pada Template Blogger - Mungkin sahabat sudah tidak asing lagi dengan istilah jQuery. Apa itu jQuery?  jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Secara sederhana, jQuery sangat diperlukan untuk membuat web dinamis. JQuery akan menampilkan efek, animasi, dan fungsi-fungsi yang sangat menarik lainnya. Banyak plugin / trik yang menggunakan jQuery dan tidak akan berjalan tanpa jQuery. Ukurang jQuery ini sangat kecil dan tidak membuat loading blog jadi berat cuman 100kb.

Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Pemasangan jQuery, hanya 1 dalam template. Tidak boleh ada 2 script atau lebih, karena akan mengakibatkan beberapa script tidak akan bekerja. Apabila ingin mengganti dengan yang terbaru, cukup ganti link-nya saja. Apabila ada tips, trik, atau tutorial yang menggunakan jQuery, sobat tidak perlu menambahkannya lagi.

4. Simpan template.