Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Semua Post
Memberi Efek Taburan Bintang di Blog

Memberi Efek Taburan Bintang di Blog

Sebelumnya saya berbagi salah satu cara untuk mempercantik blog, yaitu Memberi Efek Taburan Hati di Blog, pada postingan kali ini saya akan membahas mengenai cara Memberi Efek Taburan Bintang di Blog. Sebenarnya efek ini sama saja dengan efek taburan hati dan Efek Daun Berjatuhan, hanya tampilannya saja yang berbeda dan juga kode script-nya.

Untuk menerapkan efek ini pada blog bisa melalui edit template, ataupun lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :
  • Pada dashboard blogger klik Template > Edit html
  • Beri centang pada Expand Template Widget
  • Cari kode </body> lalu letakkan kode script efek di atas kode </body>, berikut script-nya:
    Efek bintang berwarna kuning,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/>
    Efek bintang berwarna biru,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/>
    Efek bintang berwarna oren,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/>
    Efek bintang berwarna pink,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/>
  • Terakhir klik Save Template.
Untuk cara kedua melalui Gadget :
  • Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
  • Letakkan script dibawah ini pada gadget.
    Efek bintang berwarna kuning,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/></script>
    Efek bintang berwarna biru,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/></script>
    Efek bintang berwarna oren,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/></script>
    Efek bintang berwarna pink,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/></script>
  •  Lalu klik Simpan / Save.
Selesai,,, silakan lihat hasilnya pada blog sobat.
Write a comment √ Read More... »
Memberi Efek Taburan Hati di Blog

Memberi Efek Taburan Hati di Blog

Memberi Efek Taburan Hati di Blog
Kali ini saya akan berbagi salah satu cara untuk mempercantik blog, yaitu dengan memberi efek taburan hati pada sebuah blog, sebelumnya saya juga sudah membahas mengenai cara Membuat Efek Daun Berjatuhan di Blog, Memberi Efek Hujan Salju di Blog, dll.

Untuk menerapkan efek ini pada blog ada dua cara, pertama lewat edit template, yang kedua lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :
  • Pada dashboard blogger klik Template > Edit html
  • Beri centang pada Expand Template Widget
  • Cari kode </body> lalu letakkan script efek di atas kode </body>, berikut script-nya:
    <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>
  • Terakhir klik Save Template.
Untuk cara kedua melalui Gadget :
  • Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
  • Letakkan script dibawah ini pada gadget.
    <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/></script>
  •  Lalu klik Simpan / Save.
Selesai,,, silakan lihat hasilnya pada blog sobat.
Write a comment √ Read More... »

Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog

Spoiler atau tombol Show/Hide Pada artikel Blog 

Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog - Spoiler, hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,Seperti yang Sobat - sobat lihat gambar disamping itulah contoh SPOILER atau tombol Show / hide  . oke sebelum kita mulai silahkan lihat tutorial nya dibawah ini

Ikuti langkah - langkah dibawah ini :

  1. Login ke blogger masing - masing
  2. setelah itu buatlah Entri baru terlebih dahulu .
  3. klik Edit html yang ada disebelah Compose
  4. letakkan kode - kode dibawah ini sesuai keinginan tulisan anda .



<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>

NB :
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar




<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>

NB :
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>

NB :
  • Huruf warna putih (judul spoiler) bisa di ganti dengan kata yang lain nya.
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar 

Semoga Bermanfaat..
Write a comment √ Read More... »

Cara Dan Tutorial Optimasi Blog Blogspot Terbaru

Optimasi Blog Blogspot Terbaru
Kali ini saya akan berbagi Cara dan Tutorial Optimasi Blog Blogspot Terbaru. Silahkan anda perhatikan  kode-kode di bawah ini adalah sebuah kode yang tidak asing di Mata para blogger, mungkin anda akan beranggapan kode itu banyak di Google.., memang ini sebernarnya kalau di cari di Google banyak sekali Tapi perlu anda ketahui ini adalah sebuah hasil modifikasi yang sedikit disesuaikan dengan SEO yang ada di WP.


Langsung saja disimak caranya berikut ini:

Submit Sitemap di Webmaster Google - (Perlu di Perhatikan)

// Gunakan ini jika Postingan anda di bawah 500 //
atom.xml?redirect=false&start-index=1&max-results=500

//Gunakan ini Untuk Blog dengan posting kurang dari 1000 //
atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500

//Gunakan ini untuk Blog dengan postingan kurang dari 1500, tapi lebih 1000 //
atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500
atom.xml?redirect=false&start-index=1001&max-results=500
Sekarang Masuk ke HTML Blog.  Perhatikanlah kode-kode di bawah ini, jika anda tertarik untuk menggunakannya, maka tinggal sesuaikan, mana yang perlu anda ganti.

Letakkan Kode di bawah ini tepat di Bawah kode <head>

<meta content='Kode Verifikasi Google' name='google-site-verification'/>
<meta content='Kode Verifikasi' name='msvalidate.01'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
<meta content='Kode Verifikasi Technorati ' name='TechnoratiVerifyID'/>
<meta content='Kode Verifikasi Bing' name='y_key'/>
<meta content='Kode Verifikasi Markosweb' name='markosweb.com/validation'/>
<link href='https://plus.google.com/id_google+ anda' rel='author'/>
<link href='http://www.nama-blog-anda.com/p/sitemap_2836.html' rel='contents'/>

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == &quot;http://www.nama-blog-amda.com/&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
// ----------------------------------------------------------------------------------------------//
<meta content='Deskripsi Blog' name='Description'/>
<meta content='Keywords 1, - Keywords 15' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta content='index,follow,noodp,noydir' name='robots'/>
<meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
// ----------------------------------------------------------------------------------------------//
<meta content='all' name='robots'/> diganti <meta content='index,follow' name='robots'/> // recommend
<meta content='all' name='googlebot'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Webcrawlers'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='ZyBorg'/>
<meta content='all' name='Spiders'/>
<meta content='all' name='audience'/>
<meta content='all,index,follow' name='alexabot'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='English' name='Language'/>
<meta content='document' name='resource-type'/>
<meta content='Global' name='Distribution'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='no-cache' http-equiv='cache-control'/>
<meta content='no-cache' http-equiv='pragma'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='United States' name='geo.placename'/>
<meta content='usa' name='geo.region'/>

Keterangan:
Kode yang saya berikan warna Merah:

Pertama:
Saya Menyarankan anda untuk memasukkan Keywords hanya: 15 keywords ( ke-15 keywords tersebut benar-benar sudah Mantap di jadikan "Kata Kunci"

Kenapa harus 15 ??
Karena jika lebih dari 15 maka status "keywords tersebut" tidak valid -- Cara mengetahuinya adalah
1. Instal Add-ons "SeoQuake" di Mozilla --
2. Buka Blog anda lewat Mozilla
3. Perhatikan di bagian Add-Ons SeoQuake disana ada pilihan DIAGNOSIS . Maka anda bisa melihat hasilnya, apa saja yang sudah valid sama yang belum valid.

Ke-dua:
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>

Disini saya membuang kode: data:blog.pageName + &quot;, &quot; +
Sehingga menjadi:
<meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>

Alasannya adalah: Agar tidak terjadi Duplicat Tittle dan Cepat Masuk Index !
karena hal ini nanti jika di lihat souce code nya, maka title blog akan berdampingan dengan judul Postingan

Untuk yang Warna Hijau:
Anda  hanya mengganti dengan nama blog anda masing-masing dan kode-kode verifikasi, jika belum mendapatkan kode verifikasi, saya sarankan silahkan di daftarkan agar mendapatkan kodenya.

Semoga Artikel Cara atau Tutorial Optimasi Blog Blogspot Terbaru ini dapat bermanfaat.
Write a comment √ Read More... »

Mengatasi Duplikasi Deskripsi Meta

Duplikasi deskripsi meta pernah di alami blog ini, hal ini terjadi karena Google menemui deskripsi yang sama pada setiap halaman yg di crawl oleh Google spider pada laman blog ini, contoh :

Duplikasi deskripsi meta

Pada gambar diatas terdapat deskripsi yang sama, baik itu pada Homepage, halaman, maupun postingan, hal ini tentu tidak baik buat SEO, karena deskripsi yg sama dapat merusak relevansi pencarian, dan Google menganggapnya sebagai duplikasi konten, oleh sebab itu hal tersebut perlu kita perbaiki. Jika sobat belum tahu cara mengetahui duplikat konten silakan baca Cara Mengetahui Duplikat Konten.

Untuk memperbaiki masalah tersebut, langkah yang saya lakukan adalah sebagai berikut :
  • Login ke akun blogger
  • Klik pada Template.
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Pada kode
    <meta content='Deskripsi'  name='description'/>
    <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
    Sedikit saya tambah kode menjadi :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='Deskripsi'  name='description'/>
    <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
    </b:if>
    Dengan begini meta description & meta keywords di tampilkan hanya untuk halaman utama (homepage).
  • Terakhir klik Simpan Template.
Selain masalah diatas Duplikasi deskripsi meta juga bisa terjadi pada fungsi arsip, karna dalam sebuah arsip terdapat berbagai link dalam satu content , hal ini kadang juga di anggap sebagai duplikat konten oleh google.

Jika Sobat mengalami masalah ini Sobat cukup mematikan fungsi arsip, caranya dengan menambahkan kode berikut dibawah kode <head> :
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>

Sekian dulu postingan kali ini, semoga bisa membantu Sobat yang ingin Mengatasi Duplikasi deskripsi meta.
Write a comment √ Read More... »