Membuat Efek Memindahkan Gambar Dengan jQuery

Gambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom, kali ini saya akan berbagi  lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini, geser salah satu gambar yang ada disana.:

Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :

1. Login dulu di Blogger dengan akun anda.
2. Pada dashboard pilih Rancangan >> edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Klik Download template lengkap untuk jaga-jaga.
5. Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
   

   .drag_gambar img { cursor: move;}

6. Selanjutnya simpan script berikut diatas kode </head>
   

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

   <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>

   <script type='text/javascript'>

   $(document).ready(function() {

   $(&quot;div.drag_gambar img&quot;).draggable();

   });

   </script>

   Keterangan :
   Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah.
   
   
7. Kemudian klik Save/Simpan Template 
8. Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :
   

   <div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Read More

Bagaimana Agar Template Anda SEO Friendly?

Selamat siang  temen-temen blogger semua, bagaimana kabar anda? Semoga baik-baik aja, kali ini saya akan berbagi lagi dengan anda semua. Topik yang saya bahas adalah bagaimana  agar template yang kita pakai SEO friendly. Terkadang kita memilih template dari penyedia situs template gratisan di internet hanya sekedar memenuhi selera keindahan, tapi kita lupa apakah template yang kita pakai sudah SEO friendly atau belum. Pada tutorial kali akan dibahas cara memanipulasi template blogger agar SEO friendly, khususnya dengan memberi tag h1 untuk judul postingan. Namun, jika Anda melakukannya secara sembarangan bisa jadi malah justru terjadi multiple tag h1 pada halaman Anda.

Seperti kita ketahui semua, banyak template blog yang bagus secara design diluar sana, kebanyakan dari template tersebut mementingkan masalah design. Kita yang akan memakainya perlu sedikit memodifikasi agar optimal. Baiklah, langsung saja saya akan berikan kepada temen-temen semua langkah-langkah dalam mengoptimalkan template yang kita pakai agar lebih SEO friendly

1. Pertama yang mesti anda lakukan tentu login dulu di Blogger 
2. Kemudian klik Rancangan >> edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Klik Download template lengkap untuk jaga-jaga.

Manipulasi Tag Heading Judul Postingan

Cari kode berikut ini..

<b:if  cond='data:post.title'>
<h3 class='post-title  entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Setelah ketemu Ganti semua kode di atas dengan kode dibawah ini.

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

Manipulasi Tag Heading Judul Blog

Cari lagi kode di bawah ini

<h1 class='title' style='background: transparent;  border-width: 0px'>
<b:include name='title'/>
</h1>

Selanjutnya Ganti dengan kode berikut ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Cari kode berikut ini

<h1  class='title'>
<b:include name='title'/>
</h1>

Ganti dengan kode berikut ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>

Terakhir, Set CSS Anda

Cari kode css judul postingan dan judul blog Anda. Misal kodenya seperti ini. Cari yang mirip.

.post h3 {
..................................
}

.post h3 a, .post h3 a:visited{
..................................................
}

.post h3 a:hover {
....................................
}

Ganti kodenya dengan kode di bawah ini

.post h1, .post h2 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{

display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
color:$textcolor;
}

Catatan: Kalau tidak berhasil, ganti hanya kode H3 nya..

Langkah terakhir, cari lagi kode css judul blog. Cari yang mirip dengan kode di bawah ini

#header h1 {
............................
}

Setelah itu Ganti dengan kode di bawah ini

#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Kemudian Save/Simpan template anda, selesai....

Ikuti semua langkah-langkah diatas, jika semuanya sudah anda lakukan dengan benar maka sekarang di halaman index Anda, halaman utama blog, judul blog memiki tag h1 dan judul postingan bukan tag h1. Sementara ketika google index halaman postingan Anda, judul postingan otomatis berubah ke tag h1 dan judul blog tidak lagi menggunakan tag h1. Hasilnya, tidak ada lagi tag h1 ganda yang akan menimbulkan kekhawatiran untuk peringkat Anda. Oya.. ada yang lupa, jika ada diantara temen-temen yang belum mengetahui menfaat SEO bagi kelangsungan blog, saya pernah membahasnya pada tips dasar-dasar SEO. Demikian tadi tutorial step by step untuk mengedit template blogger agar SEO Friendly ini adalah hanya salah satu cara untuk meningkatkan SERP, selamat mencoba dan semoga bermanfaat.

Read More

Bagaimana Cara Memilih Nama Blog Yang Baik?

Nama memang belum tentu mencerminkan sebuah kepribadian, tapi paling tidak gambaran kasar kita dapat ketika kita membaca atau mendengar sebuah nama. Seperti juga nama untuk sebuah blog, banyak yang bilang apalah arti sebuah nama, kutipan dari Shakespeare di Romeo and Juliet. Terkadang kita membuat blog tanpa perencanaan yang matang, hanya sekedar ikutan temen.  Hal ini akan menjadikan kita bingung dalam memilih nama blog, kebingungan ini bukan hal yang aneh saat kita akan membuat blog. Dulupun waktu pertama kali saya mau membuat blog juga begitu. Baiklah, di hari Minggu yang penuh dengan hujan deras ini saya akan berbagi sedikit pengalaman tentang cara memilih nama blog yang baik.

Jika Anda punya keinginan untuk menjadikan blog terkenal, maka mulailah dengan memilih nama blog yang baik. Langsung saja, di bawah ini adalah tips untuk anda bagaimana memilih nama yang baik untuk sebuah blog :

1. Nama blog harus dapat menggambarkan blog secara keseluruhan
   
   Anda bisa bayangkan, hanya dengan membaca sebaris kata, pembaca bisa mengerti blog tersebut tentang apa. Potensi terbesar orang akan mengunjungi blog melalui search engine adalah dengan memperhatikan nama blog yang paling relevan dengan artikel yang dicarinya.
   
   
2. Buatlah nama blog yang mudah diingat
   
   Agar mudah diingat, buatlah nama blog yang pendek dan jangan pula terlalu panjang. Nama blog cukup satu kata saja atau dua kata. Jika terlalu panjang akan sulit untuk diingat. Contoh kasus dapat Anda lihat pada beberapa blog yang sudah terkenal di Indonesia. Mereka membuat nama blog yang sederhana namun sangat mudah diingat.
   
   
3. Jangan terlalu banyak modifikasi ejaan
   
   Perhatikan huruf, numerik dan penggunaan notasi-notasi yang tidak perlu. Jangan menggunakan kombinasi huruf dan angka yang membuat bingung pengunjung blog. Mungkin Anda pernah menemukan bog dengan nama yang ada kombinasi huruf, angka, simbol atau notasi-notasi tertentu. Wow, sangat kacau dan tidak baik bagi mesin cari seperti google. Tapi ini menurut saya, bukan bermaksud apa-apa.
   
   
4. Nama blog harus sama dengan nama domain
   
   Banyak saya temui nama domain blog yang sangat berbeda dengan nama blog. Kelihatannya saja sepele, namun nama domain yang sama dengan nama blog akan sangat berarti dalam optimasi mesin cari. Nama blog bisa saja berbeda dengan domain blog namun usahakan masih mirip dan mendekati.
   
   
5. Nama blog harus unik
   
   Misalnya membuat nama blog seperti judul film atau hal-hal yang kontroversial. Saya yakin keunikan ini akan menjadi satu daya tarik tertentu bagi pengunjung. Unik bisa juga berupa nama yang lucu atau seram dan mengerikan. Terserah saja, pokoknya beda dari yang lain.
   
   
6. Sisipkan keyword pada nama blog yang menjadi keyword pencarian blog Anda
   
   Tips ini sangat bermanfaat bagi blog yang menargetkan pasar tertentu. Apalagi blog bisnis, maka penyisipan keyword pada nama blog sangat penting. Tujuannya adalah mengpotimalkan search engine pencarian blog Anda melalui keyword tertentu yang sudah Anda targetkan.
   
   
7. Nama blog jangan terlalu umum dan jangan pula terlalu menargetkan niche tertentu
   
   Ada untung dan ruginya jika memilih nama yang terlalu umum. Anda akan sangat mudah mencari konten berita untuk blog jika blog Anda memilih topik yang umum namun tidak fokus pada topik tertentu akan membuat pengunjung tidak betah berada di blog Anda. Memilih nama blog dengan topik yang lebih khusus akan lebih baik, namun akan perlu dipertimbangkan siapa yang menjadi target pembaca blog tersebut. Jangan pula nantinya pembaca blog kita malah hanya sedikit karena topik yang terlalu sempit. Anda dapat menggunakan layanan google trend untuk menganalisa nama blog yang akan anda pilih.

Uraian diatas hanya sekedar saran, dan mungkin masih banyak cara memilih nama blog yang bagus. Cara tersebut tidak mutlak harus demikian dan Anda bisa pilih mana yang cocok dan sesuai dengan tipe dan karakter blog Anda. Jika Anda punya pendapat lain yang bisa dibagikan, saya sangat berterimakasih. Sekian tulisan kali ini, semoga bermanfaat dan happy blogging.

Read More