Tampilkan postingan dengan label tips dan trik blogger. Tampilkan semua postingan
Tampilkan postingan dengan label tips dan trik blogger. Tampilkan semua postingan
0

Meta Tag Blogger Terbaru SEO Friendly

Sabtu, 15 Juni 2013
Meta Tag
Meta Tag Blogger Terbaru SEO Friendly - Blogger telah banyak membuat fitur-fitur terbaru, diantaranya preferensi penelusuran untuk optimasi meta tag yang SEO friendly. Akan tetapi dengan fitur standar blogger, belum cukup untuk menjadi nomor 1 di Search Engine.


Kebanyakan pembuat template hanya membuat meta tag standar saja, tentunya tugas selanjutnya adalah bagi pemilik blog untuk lebih mengoptimalkan bagaimana blognya lebih berjaya di Search Engine. Tidak cukup dengan tampilan yang bagus, backlink yang banyak, konten yang bagus dsb.

Dibawah ini saya share meta tag terbaru dan terbaik untuk blogger, untuk optimasi blog sahabat. Meta tag ini sebenarnya salah rahasia meta tag blogger kawakan yaitu Agus Ramdhani aka OOM, yang telah membagikan rahasia terbesarnya dalam Optimasi SEO dengan Meta Tag untuk sahabat semua.

Bagi sahabat yang ingin menggunakan meta tag terbaik ini, ganti kode
<title><data:blog.pageTitle/></title>

dengan kode di bawah ini (Edit Nama Blog, keyword, deskripsi dll)
<!-- Meta Title Halaman Error/404 --> 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | Namablog</title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Meta Title Halaman Search -->
<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: | NamaBlog</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Meta Title Halaman Arsip -->
<title>Arsip Artikel Bulan <data:blog.pageName/> | NamaBlog</title>
<!-- Meta Descriptin Halaman Arsip -->
<meta expr:content='&quot;Arsip Artikel Bulan &quot; + data:blog.pageName + &quot; selengkapnya silahkan kunjungi di NamaBlog&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- Meta Title Halaman Pages -->
<title><data:blog.pageName/> | NamaBlog</title>
<!-- Meta Description Halaman Pages -->
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NamaBlog&quot;' name='description'/>
<b:else/>
<!-- Meta Title Halaman Label -->
<b:if cond='data:blog.searchLabel'>
<title>Pencarian pada Label :: <data:blog.pageName/> :: | NamaBlog</title>
<!-- Meta Description Halaman Label -->
<meta expr:content='&quot;Pencarian pada kategori ::&quot; + data:blog.pageName + &quot;:: selengkapnya silahkan kunjungi di NamaBLog.&quot;' name='description'/>
<b:else/>
<!-- Meta Title Halaman Utama -->
<title><data:blog.pageTitle/></title>
<!-- Meta Description Halaman utama -->
<meta expr:content='data:blog.pageTitle + &quot; Tulis deskripsi blog anda disini.&quot;' name='description'/>
</b:if>
</b:if>
</b:if>
<!-- Meta Keyword Halaman utama-->
<meta content='keyword1, keyword2, dst' name='keywords'/>
<b:else/>
<!-- Meta Title Halaman Post -->
<title><data:blog.pageName/> - NamaBlog</title>
<!-- Meta Description Halaman Post aktif -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<!-- Tampilkan jika Meta Description Halaman post tidak aktif-->
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NamaBlog&quot;' name='description'/>
</b:if>
<!-- Meta Keyword Halaman post -->
<meta expr:content='data:blog.pageName + &quot;, keyword1, keyword2, dst&quot;' name='keywords'/>
</b:if>

Lalu save template, selesai.
semoga bermanfaat.

Source
0

Cara Mempercepat Loading Blog (lazy load)

Rabu, 15 Mei 2013
lazy load

Cara Mempercepat Loading Blog (lazy load) - Jika loading blog kita menjadi ringan maka blog kita juga akan ramah dimata SEO. Karena Google menyukai blog yang mempunyai loading blog yang ringan.

Banyak keuntungan jika kita membuat loading blog kita menjadi ringan. Bukan hanya baik untuk SEO saja tetapi loading blog yang ringan juga berdampak baik bagi pengunjung yang ingin mengunjungi blog kita. Dengan Loading blog yang ringan maka pegunjung akan cepat mendapatkan apa yang dia cari pada blog kita.

Bayangkan jika loading blog kita sangat lambat, maka pengunjung akan malas mengunjungi blog kita dikarenakan si pengunjung harus menunggu loading yang lama dan itu menyebabkan kaburnya pengunjung dari blog kita.

Tidak mau kan mengalami hal yang demikian? Maka kita harus menerapkan cara ini pada blog kita jika ingin meningkatkan kualitas SEO blog kita. Berikut ini langkah-langkah pemasangannya:


Tutorial

  1. Masuk ke blogger dan buka Dasbor >> Template >> Edit HTML >> Klik Kotak Edit HTML
  2. Cari kode berikut.(CTRL+F)
  3. Sebelum melakukan pengeditan ada baiknya anda membackup template anda dulu dengan mendownload template lengkap.
  4. Cari kode </head> dan letakkan kode dibawah ini tepat diatasnya:

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

<script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/>

<script type='text/javascript'>

$(function() {$(&quot;img&quot;).lazyload({placeholder :&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7r1S2qhZ-NUkBHV8CKjAdP6IEQMsi-Q5z8IJUt6DvZAarq4bEcyGcku0v-DPl1p14BDTFCFCqUzs24wKkYVBKoilVPXTRDqR6ktzfQEhca3TJXljOddNUDlcxLwsxd5PCxbO9zo4Epcg/&quot;,threshold: 200});

});

</script>
     
     5.   Lalu Save template.

Semoga tutorial Cara Mempercepat Loading Blog (lazy load) berguna bagi sobat semua.
0

Cara Mendaftarkan Blog di Technorati.com

Selasa, 09 April 2013
Mendaftarkan Blog di Technorati.com - Apa yang harus dilakukan setelah Blog selesai dibuat..? Jawaban singkatnya adalah "Banyak..!",  tetapi dari sekian banyak hal yang harus dilakukan, saran saya, fokuslah terlebih dahulu pada 'Optimasi SEO Blog' diawali dengan mendaftarkan blog ke search engine serta ke berbagai blog directory yang banyak tersebar di Internet, tujuannya adalah agar blog yang baru dibangun akan lebih cepat dikenal.

Salah satu blog directory yang paling banyak digunakan oleh para blogger adalah Technorati, lebih dari satu juta blog telah terindex di sini.  Technorati merupakan mesin pencari blog sekaligus sebagai online book marking yang akan memperkenalkan konten blog Anda kepada jutaan pengguna internet di seluruh dunia.  Bahkan saat ini Technorati telah memperluas layanannya, selain sebagai mesin pencari blog dan sebagai tag agregator, Technorati juga dapat menghubungkan blog dengan berbagai Situs Social Networking, tentu ini akan menjadi sumber trafik yang sangat baik.

Blog yang telah terdaftar dan terindex di Technorati akan disimpan di dalam directory blog berdasarkan klasifikasi yang telah ditentukan saat mendaftarkan blog.  Pada kesempatan ini saya akan membagikan Cara Registrasi dan Claim Blog di Technorati

Cara Registrasi dan Claim Blog di Technorati

  • Anda harus membuat account terlebih dahulu, kunjungi link Registrasi Technorati 
  • Lengkapi datanya yang diperlukan dengan baik, gunakan email aktif saat pendaftaran, masukan kode captcha untuk verifikasi pendaftaran dan beri tanda mark (centang) pada agreement-nya, lalu klik �Join
  • Buka email yang digunakan saat mendaftar, lihat email masuk dari Technorati dan klik link aktifasi pendaftaran, Setelah account Anda aktif, klik link �sign in� dan masukkan username dan password dengan benar untuk melakukan melakukan claim blog.
  • Pada halaman depan situs Technorati klik 'link nama (account) Anda' yang berada disamping photo profil untuk mengakses halaman profile Anda.
  • Gulir halaman sampai bagian paling bawah pada halaman profil Anda, masukkan url blog pada Start a blog claim, (contoh http://xversailez.blogspot.com), lalu klik tombol �Claim
  • Pada halaman selanjutnya, isi formulir dengan benar.
  • Blog tittle: isi dengan title blog Anda, (contoh : Xversailez zone)
  • URL : masukkan alamat blog Anda, (contoh : http://xversailez.blogspot.com/)
  • Feed : masukkan alamat rss feed blog Anda, boleh menggunakan alamat default seperti http://xversailez.blogspot.com/feeds/posts/default, atau alamat rss feed dari penyedia layanan rss feed lainnya seperti FeedBurner.
  • Linking blogs : masukkan 3 (tiga) alamat blog yang memiliki link menuju blog Anda.  Field ini bersifat opsional, Anda boleh mengosongkannya.
  • Site description : masukkan deskripsi singkat tentang blog Anda, sesuaikan saja dengan tema blog atau sesuaikan dengan meta description yang terpasang pada dokumen HTML template blog Anda.
  • Site categories : beri tanda mark (centang) pada kategori yang sesuai dengan tema blog Anda.  Anda dapat memilih lebih dari satu kategori.
  • Site tags: isi setiap sel dengan kata kunci yang berhubungan dengan konten blog Anda, gunakan satu atau dua kata saja untuk setiap tag, jangan menggunakan kalimat yang panjang.
  • Selanjutnya klik tombol �Proceed to next the step
  • Pada halaman blog claim status, klik tombol �Return to profile
  • Pastikan pada bagian bawah halaman profil Anda, bahwa blog Anda sudah terdaftar, dibutuhkan verifikasi kode token agar blog Anda benar-benar terindex di Technorati.  Silahkan klik tombol �Check Claim� yang terdapat di bawah gambar thumbnail blog Anda.
  • Anda dapat menemukan kode token untuk verifikasi pendaftaran pada halaman berikutnya, perhatikan kode seperti ini K5N37TM7RYT4 atau bisa dicek pada kotak masuk email Anda (kode ini akan berbeda untuk setiap blog), ini adalah kode token yang harus ditempel pada salah satu artikel yang Anda publikasikan.
  • Berikutnya adalah kelanjutan dari poin diatas.  Anda harus menulis sebuah artikel yang berisi kode token tersebut, lalu publish.  Postingan bisa berisi apa saja terserah Anda, bisa halaman kosong hanya berisi kode token, atau sekalian menulis artikel seperti yang sedang Anda baca saat ini.
  • Setelah postingan dipublikasi, buka kembali situs Technorati dan klik tombol �Verify Claim Token� dan lihat hasilnya.
  • Sampai di sini ucapkan Alhamdulillah karena pekerjaan Anda Mendaftarkan Blog di Technorati telah selsesai
0

Cara Membuat Tombol Cancel Reply di Komentar Blogger

Cara Membuat Tombol Cencel Reply di Komentar Blogger - Tombol "Cancel Reply" atau "Batalkan Komentar" berfungsi untuk menutup kotak kometar ketika tidak jadi membalas komentar, setelah kita mengklik tombol "Reply" atau "Balas". Tutorial ini saya dapatkan setelah nyasar ke blog http://blog.kangismet.net.



Sebenarnya hal ini tidak terlalu essensial, akan tetapi akan sangat berguna ketika kita akan membuat komentar baru dan tidak membalas komentar yang ada. Tombol "Cancel" ini akan muncul di kiri atas pada kolom komentar. Untuk lebih jelasnya silahkan lihat screenshoot di bawah ini :




Langkah-langkahnya :

1. Login ke Blogger
2. Klik Template -> Edit HTML dan centang Expand Template Widget
3. Cari kode (replybox && (commentId !== replyParent)) { dan tambahkan kode ini setelahnya



cancelRep=document.getElementById('bc_0_'+items.length+'I');document.getElementById(domId).insertBefore(cancelRep,null);cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

4. Simpan Template.

Apabila ingin memodifikasi tampilan tombol, sobat bisa tambahkan kode ini di atas ]]></b:skin>



.comments .continue{display:none;border-top:0}.comments
.continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px
rgba(255,255,255,.3) inset;background:#e8233a;padding:5px
10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

Maka tampilannya akan berubah seperti gambar ini :




Untuk merubah tulisan "Cancel reply", misalkan dengan "Batalkan Komentar", ganti tulisan "Cancel reply" pada kode di atas.

Semoga artikel Cara Membuat Tombol Cencel Reply di Komentar Blogger ini bermanfaat.

0

Cara Mengganti Cursor Pada Blog Keren

Selasa, 11 Desember 2012
Cara Mengganti Cursor Pada Blog Keren - Sekarang Anda bisa mengganti tampilan kursor pada blog Anda agar blog Anda akan tampil lebih menarik karena tampilan kursor yang normalnya berbentuk panah berwarna putih. Mungkin Anda bosan dengan tampilan yang seperti biasa-biasa saja. Langkah ini juga tidak akan membuat blog Anda menjadi berat yang penting jika Anda mempunyai sidebar yang sebelah kiri jangan taruh script berikut ke widget sidebar sebelah kiri. Anda bisa menarunya di sidebar sebelah kanan atau lebih baik ditaruh di footer. Ok saya akan membahasnya dengan tips teknik tutorial berikut ini:
1. Klik Rancangan.

2. Elemen Laman.

3. Klik Tambah Gedget.

4. Pilih HTML/Javascript.

5. Copy dan pastekan script dibawah ini ke content HTML/Javascript.


<div class="post-body entry-content">
<span style="font-size: small;"><span style="font-family: inherit;"><style type="text/css"> body { cursor:url("http://i1003.photobucket.com/albums/af158/robotjapan/Kursor.png") ,default} </style></span></span></div>

6. Jangan lupa Save atau Simpan.

Anda bisa mengganti link kursor diatas dengan link kursor dibawah ini.


http://i886.photobucket.com/albums/ac63/AdiSangPemimpi/kursor.png


http://i34.photobucket.com/albums/d132/JuL14_ok/pinkbutterflies.gif


http://i40.photobucket.com/albums/e230/dh34sy/flame.gif


http://i425.photobucket.com/albums/pp332/hippmibjkt/sym455.jpg


http://i340.photobucket.com/albums/o350/tomrat2212/emon.gif


http://i872.photobucket.com/albums/ab288/bebe_munya/kursor1.gif


http://i872.photobucket.com/albums/ab288/bebe_munya/kursor2.gif
Terakhir apabila Anda memiliki link kursor yang lain yang cocok untuk blog Anda atau yang Anda inginkan Anda bisa menggantinya sesuka hati Anda OK gan...
0

Cara Membuat Scroll Back To Top Smooth di Blogger

Cara Membuat Smooth Scroll Back To Top di Blogger. Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth scroll back to top / kembali ke atas. Smooth sendiri berarti lembut. Jadi smooth scroll artinya menggulung dengan lembut. Untuk membuat Tombol Back to Top biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.

Tombol back to top biasanya digunakan pada blog dengan artikel yang panjang, untuk memudahkan pengunjung melihat kembali artikel di atas. Ada beberapa cara untuk menambahkan tombol back to top ini.

Di sini akan saya share cara yang termudah, tanpa Edit HTML. Hanya menambahkan widget saja. Ada dua Style yang akan saya berikan, silahkan sobat pake mana suka.

Style1 (tanpa fade in dan fade out)

Maksud tanpa fade in dan fade out di sini adalah, tombol akan langsung muncul begitu blog dibuka.

Untuk membuatnya, silahkan tambahkan widget HTML/JavaScript, masukan kode ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="Kembali ke atas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fwq_2aj4tozUOXUGHufIEYwzOh1fjet0m4qp3gVuRtWaX_CEdfovA-tZUg2TFnm1qLYteEWuF4e7ZTF8fmIeDpt9h8jyWD8dreWQZf0TQ32I4lkRADe2ybKAPY2W8csS2C7Dy1NEx_M/s400/Back-to-top.png" /></a>

Style2 (dengan fade in dan fade out)

Maksud fade in dan fade out disini adalah, tombol tidak akan langsung muncul kecuali telah di scroll ke bawah. Untuk DEMO lihat saja Blog ini sob :)

Untuk membuatnya, tambahkan widget HTML/JavaScript dan masukan kode ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fwq_2aj4tozUOXUGHufIEYwzOh1fjet0m4qp3gVuRtWaX_CEdfovA-tZUg2TFnm1qLYteEWuF4e7ZTF8fmIeDpt9h8jyWD8dreWQZf0TQ32I4lkRADe2ybKAPY2W8csS2C7Dy1NEx_M/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //jarak ke kanan / bawah
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Kembali ke Atas'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Kostumisasi

Untuk mengganti tombol, ganti image url yang berwarna merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fwq_2aj4tozUOXUGHufIEYwzOh1fjet0m4qp3gVuRtWaX_CEdfovA-tZUg2TFnm1qLYteEWuF4e7ZTF8fmIeDpt9h8jyWD8dreWQZf0TQ32I4lkRADe2ybKAPY2W8csS2C7Dy1NEx_M/s400/Back-to-top.png
Untuk mengganti tulisan Kembali ke Atas, silahkan edit juga tulisan Kembali ke Atas yang berwarna merah.

Semoga tulisan cara membuat smooth scroll back to top ini bermanfaat. Happy Blogging !

Source: http://blog.kangismet.net
0

Hack Traffic Blog

Senin, 29 Oktober 2012
Pada kesempatan kali ini saya akan menjelaskan Hack Traffic Blog,
Sebelumnya mungkin anda bertanya-tanya kenapa dalam judul artikel saya "Hack Traffic Blog". Yups, karena saya juga suka hack jadi saya juga artikel yang berbau hack. Sebelumnya saya punya ide seperti ini gara-gara teman sekelas saya minta tolong kepada saya untuk meningkatkan traffic blognya. Lalu saya tiba" punya ide seperti ini. (Ini hanya dilakukan di warnet saja)




1. Login di warnet.

2. Bobol deep freezenya. kalau anda tidak tahu cara membobolnya anda bisa lihat Disini (untuk deep freeze 4,5,6) dan Disini (untuk Deep freeze 7)

3. Setelah Deep Freezenya sudah dibobol dan deep freezenya sudah di non-aktifkan

4. Buka Browser Firefox, Ubah Home Pagenya dengan nama blog anda. lalu aktifkan lagi deep freezenya.

5. Setelah deep freezenya di aktifkan kembali, lalu coba buka firefox lagi untuk memastikan home pagenya adalah blog anda.

PERHATIAN !!! Misalnya cara ini sudah dilkukan ke 10 komputer. 1 komputer, sehari kurang lebih 10 pengunjung (pemakai komputer) berarti blog anda dikunjungi sekurang-kurangnya sebanyak 10 pengunjung. Jadi jika 10 komputer maka pengunjung blog anda sehari adalah 100 pengunjung. Coba bayangkan jika anda melakukan cara ini ke 20,50 or ke 100 komputer??? Coba bayangkan berapa banyak pengunjung blog anda dalam sehari. hahahahaha
0

Trik dan Cara Agar Posting blog di Google Memiliki Star / Tanda Bintang

Selasa, 02 Oktober 2012
icon bintang google
Hi sob,gimana kabar kalian malam ini? masih semangat ngeblog ya :D
Alhamdulillah,sore ini saya ada sedikit info yang semoga saja bermanfaat buat para blogger yang khususnya masih penasaran atau belum mengetahui bagaimana dan seperti apa penjelasan lebih rinci tutorial lengkap membuat google rich snippets ini.

Sebelum melangkah lebih jauh,apa sih fungsi dari rating google rich snippets itu gan? pertanyaan ini sobat bisa baca dan dapatkan infonya di sini.
Mohon baca artikel dengan teliti dan jangan salah langkah,karena jika mengabaikan hal ini kemungkinan besar cara akan gagal,so guys supaya trik ini bekerja di blog kamu dengan baik,simak postingan ini dengan teliti ya sob,..........tapi jangan melotot kaya gitu juga kali :D hihihihi

Seperti title dari posting kali ini,Google Rich Snippets - Cara Membuat Icon Rating Tanda Bintang di Google Serp adalah juga merupakan sebuah trik optimasi blog (salah satu kiat dalam search engine optimization -pent) agar mendapatkan posisi yang terbaik di serp (search engine result page) dari banyaknya view page atau halaman yang tampil.

Disamping itu hasil serp dengan breadcrumbs tanda bintang ini akan lebih menarik pengunjung karena tampilan yang lebih menonjol dibandingkan dengan hasil yang lain,sobat bisa lihat seperti pada gambar diatas tadi.

Bagaimana tips dan trick dalam membuat gugel rich snipet ini? sobat baca dan mari pahami bersama dengan seksama (halah! bahasane mas,biasa wae dumz :p)

Langkah dan Cara Memasang Icon Star atau Tanda Bintang di Result Google

Akan ada banyak step-step yang harus kita lakukan secara berurut,dan disini kami membagi menjadi 7 langkah,dan langkah-langkahnya adalah sebagai berikut:
#1. Pertama,sobat harus memiliki akun Google Plus (Google+),mudah kok sob,tinggal daftar aja di SINI

Syarat ini adalah untuk mendapatkan nomor ID dari akun Google+ sobat,yang nantinya akan kita gunakan sebagai verifikasi dari Google Rich Snippets yang akan kita bahas kali ini.

Setelah sobat memiliki akun Google+,coba sobat pergi ke menu Profil lalu simpan no ID yang tampil dari akun Google+ sobat,no ID ini akan tampil di address bar browser yang sobat gunakan,lihat gambar (gb.1) sob:
memasang google rich snippets
gb.1


Setelah itu,untuk sementara simpan dahulu ya gan no ID gOOgle+ milik sobat.Sebagai contoh no ID Google+ milik saya sendiri adalah 118207325935415873536
#2. Sekarang,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode (gunakan Ctrl+F untuk mempermudah pencarian)
Setelah kode tersebut sobat ketemukan,kini letakkan kode dibawah ini tepat dibawah kode <head> tersebut:

<link href='https://plus.google.com/no_id_sobat' rel='publisher'/>

misal dengan ID Google+ yang saya miliki akan menjadi seperti ini atau bisa lihat (gb.2):

<link href='https://plus.google.com/116725151301908785846' rel='publisher'/>
 
       lihat gambar:
trik google rich snippets
gb.2


Simpan template sobat.
#3. Langkah selanjutnya,masih dalam halaman yang sama,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode <body> dan tepat dibawahnya letakkan kode berikut atau lihat (gb.3):

<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>


atau lihat gambar:
rahasia google rich snippets
gb.3

Kemudian cari kode </body> dan tepat diatasnya letakkan kode penutup berikut atau lihat (gb.4):

</div></div>

lihat gambar:
trik rahasia membuat tanda bintang serp
gb.4


Simpan templates sobat.
#4. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates.Gunakan Ctrl+F dalam keyboard dan tuliskan kode berikut post-title entry-title,akan terlihat seperti gambar dibawah (gb.5) ini:
cara membuat bintang index google
gb.5

Hal ini akan menemukan secara otomatis kode yang kita cari,untuk barisan kodenya biasanya akan terlihat seperti ini:
<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>


Sekarang,sisipkan kode berikut antara barisan kode tersebut:

<span itemprop='itemreviewed'><span itemprop='description'> dan </span></span>

Sehingga akan menjadi seperti ini atau lihat (gb.6):

<span itemprop='itemreviewed'><span itemprop='description'>
<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>
</span></span>
</b:if>


Dari gambar yang berhasil saya print screen akan seperti ini:
seo google rich snippets star
gb.6


Simpan templates sobat.
#5. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
Setelah ketemu,letakkan persis dibawahnya barisan kode google rich snippets breadcrumbs ini:

Description: <span itemprop="description"><data:post.title></data:post.title></span>
Rating: <span itemprop="rating">3.5</span>
Reviewer: <span itemprop="reviewer"><data:post.author></data:post.author></span>
ItemReviewed: <span itemprop="itemreviewed"><data:post.title></data:post.title></span>


atau bisa lihat (gb.7)
index google memiliki bintang
gb.7

Bagaimana jika saya menemukan kode <data:post.body/> lebih dari satu? tidak mengapa sob,tinggal letakkan kode google rich snippets breadcrumbs tersebut tepat dibawah masing-masing kode <data:post.body/> yang ada di template blog milik sobat.

Simpan templates.
#6. Langkah berikut ini adalah yang terpenting karena mempengaruhi dalam kesuksesan cara mem-verifikasi Google Rich Snippets yang akan kita bahas ini.

Pergilah ke akun Google+ milik sobat,dan pilih menu Profil maka akan sobat lihat di sebelah kanan atas tombol 'Edit Profil',Klik tombol 'Edit Profil' tersebut dan klik link 'Kontributor Untuk' (gb.a)
Lihat gambar berikut ini:
google icon star on result
gb.a


Selanjutnya,klik link 'Tambahkan Tautan....' (gb.b)

cara memasang rating bintang
gb.b

Isi label dan url,label bisa sobat kasih nama sesuai keinginan sedangkan url sobat tuliskan alamat blog yang sobat miliki lalu klik tombol 'Simpan',lihat gambar (gb.c)
cara mengaktifkan rating star bintang snippets google
gb.c



#7. Langkah terakhir,sobat kunjungi Rich Snippets Testing Tool lihat gambar berikut (lihat gb.d):
Google Rich Snippets Testing Tool
gb.a

Isikan url blog milik sobat untuk mengetes hasil Google Rich Snippets yang baru saja kita ciptakan,jika sukses akan tampil seperti gambar dibawah ini gan:
Cara Menciptakan Google Rich Snippets Testing Tool
Semoga bermanfaat ya

Sumber: pelajaran-blog.blogspot.com
0

Cara membuat read more/baca selengkapnya di blogger

Minggu, 19 Juni 2011
Banyaknya permintaan mengenai cara buat readmore membuat saya tetap mengharuskan artikel ini ditulis. walaupun tutorial cara buat readmore sudah banyak ditulis oleh rekan blogger, sayangnya penjelasan yang diberikan kadang tidak mudah dimengerti dan malah membuat bingung, untuk itu tidak ada salahnya saya juga menulis artikel ini sebagai pelengkap agar mempermudah blogger baru bisa lebih mengerti cara membuat readmore serta cara penggunanan kode readmore pada posting.

Mungkin rekan blogger yang baru mulai membuat blog masih bingung apa itu readmore? Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Next", "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah namanya :). Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang panjang. Pengen tau cara buatnya?


Contoh ReadMore :


Pernah menemukan pesan seperti diatas?...jika pernah jangan panik, ini hanya pesan pemberitahuan dari blogger kalau layanan sedang melakukan perbaikan maintenance pada server. pesan ini hanya berlangsung kurang lebih beberapa menit setelah itu akan normal kembali. Semoga informasi ini membantu :)Readmore.. �


Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:

Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"


Langkah Kedua:

Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"


Langkah Ketiga:

Cari kode dibawah ini:
<div class='post-header-line-1'/> <div class='post-body'>

Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual)

Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.
 


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>


Lakukan Copy-Paste kode dibawah ini dibawah code diatas

<a expr:href='data:post.url'>Readmore ��</a>
</b:if>


 
Tips: Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut:

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore ��</a>
</b:if>

<div style='clear: both;'/>

Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)

Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.


Langkah Empat

Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>

Jangan lupa disimpan :)


Langkah Kelima :

Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">
</div>

ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya.


Sebagai contoh lihat cuplikan kalimat dibawah:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). (Dini rencana text yang akan dipenggal) Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.


Bagaimana cara pemenggalan kode diatas? caranya tinggal kamu lihat 2 kode pemenggalan kalimat dibawah (ingat kode hanya bekerja pada halaman editor posting)

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). <div class="fullpost"> Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.</div>


Jadi hasil posting pada halaman browser akan tampai sebagai berikut:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Readmore ��

Selamat mencoba :) happy blogging

source: http://www.o-om.com/
0

Cara Membuat Burung Terbang Di Blog

Rabu, 01 Juni 2011
Hello Pengunjung Xversailez Blog.Ok, kali ini saya ingin berbagi tentang salah satu cara memperindah tampilan blog dan sedikit membuat kita tenar di twitter, ( emang bisa ? ) gk kok saya cuma sedikit berlebihan hehehe. Fly follow twitter bird in blog atau floating twitter bird in blog atau burung follow twitter di blog menggunakan script. Sebaiknya langsung saja karena saya tidak pandai berkata-kata hehehe.

Untuk melihat demo nya bisa langsung lihat di blog saya ini :)


Berikut langkah-langkahnya:
1. Masuk (Login) ke Dashboard Blogger anda.
2. Pilih Rancangan >> Element laman
3. Kemudian Tambahkan Gadged/Widget, pilih HTML/JavaScript.


<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbO7kfblYQFnQMh2bypp0FECWhJyND9Uy81u9ztFeWpXNhO3d0Vvd7UF_fm80rCVt8wYsqXCxHl-OwZBGd7G8j5u6S3AaZs0xQEMBkFmIyRp28BLUS07quQcM0jwI66jIoZcfqYqk__Bv/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/xversailez";var tweetThisText = "Twitter - xversailez http://www.xversailez.co.cc/";tripleflapInit();
</script>


  • Ganti yang saya beri warna merah tebal dengan nama twitter kamu
  • Ganti yang saya beri warna biru tebal dengan URL blog kamu
  • Selesai :)
 Mungkin ingin menyesuaikan warna burung nya dengan layout blog kamu, saya coba bantu sedikit :D . Cukup ganti url gambar yang saya beri warna  pink tebal di atas dengan url gambar di bawah ini :














https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmXfahgbweLFssHq-c6tTu-7gwQYMADkaJoDoWww0Drn0nNUv5SkT2yDBgHyIGw2Hdp0E7KYzKwL1vLka4HTP0uNiz_E1yYRTiOprgFUlzPSDpFD4_emLS1s0dUkfsDLj-0USY5khHssvY/s1600/blue.png










https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMpbIEvn97Ho6sPErdQEE6kgKItNDAoUhCK_b247m5Gr5G-YKKqypSgxP63G_brjNQFAG1tvbVGxZD7_sHekOCHThIy-XXVCojkSuwPyaSOdLLmRceIPGF31IATHkDnCI46FAbuaerrHx/s1600/pink.png










https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVGY5zRP9dQ17L6zXlWM6zFddbIcz9UC4PSGUFdyrx0Z-Mi9CxGp31scZw2V_b6eoDbjvj65lWRf3sF-xHu0LXuNXLeLMYk0YIpvTlJFNntp_T15jdCktxt9Dy1tHpHviNRlhGXcuEXzF/s1600/purple.png











Ok saya rasa cukup :D . untuk warna yang lain mungkin bisa kamu edit sendiri.
Semoga berguna ;)
0

Cara Pasang Free SMS di Blog

Senin, 16 Mei 2011
mau juga pasang free sms di blog kalian seperti di blog saya, caranya cukup mudah, sobat tinggal ikuti tutorial Cara Pasang FREE SMS Online di Blog di bawah ini.

1.Login Ke Blogger Dengan ID sobat.

2.Klik Tata Letak .

3.Klik Tambah Gadget

4.Pilih HTML/javascript.

5.Kemudian Copy Dan Paste Kode berikut di dalamnya.


6.Klik
SIMPAN.

7.Selanjutnya tinggal sobat lihat deh hasilnya.


Selamat mencoba^_^
0

Cara membuat daftar isi sesuai label otomatis

Minggu, 08 Mei 2011
Membuat Daftar Isi Sesuai Label Yang Kita Tentukan Sendiri dan Otomatis.

Cara membuat daftar isi, daftar isi sesuai label otomatis yang kita tentukan sendiri untuk menghindari duplicate content.

Daftar isi merupakan bagian penting yang memegang peranan sebagai sitemap yang akan memberikan informasi tentang apa saja isi yang termuat atau ada di dalam blog kita, sehingga pembaca akan lebih mudah dalam mencari artikel atau tulisan yang sedang mereka cari didalam nya.


Jika kita membuat daftar isi berdasarkan label secara otomatis yang tidak kita tentukan sendiri labelnya dikhawatirkan terjadi duplicate content, karena ketika kita membuat posting terkadang kita memberikan lebih dari satu label dan tentunya jika label yang kita buat untuk satu posting lebih dari satu label, maka daftar isi dari beberapa label tersebut akan muncul secara bersamaan termasuk beberapa content yang terdapat dalam daftar isi blog ini. Isi yang terdapat pada label SEO, terdapat juga pada label Blogger Guide. Hal ini karena tadinya menurut Saya content yang berkaitan dengan SEO adalah bagian dari blogger guide juga dalam blog ini dan itupun memang benar sehingga Blogger Guide Saya jadikan sebagai basic label dan seo guide adalah main label-nya.

Awalnya daftar isi dalam blog ini Saya buat secara manual, tetapi hal itu agak repot. Saya ingin membuat daftar isi yang otomatis berdasarkan label. Dipikir-pikir, jika Saya buat daftar isi sesuai label otomatis maka daftar isi yang muncul akan muncul bersamaan pada tiap label yang mengandung content dari daftar isi tersebut.

Dengan munculnya judul yang sama pada label yang berbeda ini, Saya khawatir google akan menganggap hal ini sebagai duplicate content yang akan berpengaruh terhadap SEO atas content di blog Saya.

Oleh karena itu, Saya memutuskan untuk membuat daftar isi di blog ini berdasarkan label secara otomatis yang Saya tentukan sendiri sehingga judul entri yang ada dalam daftar isi hanya muncul sesuai label pilihan yang Saya inginkan saja agar pada posting selanjutnya tidak Saya masukan judul posting yang sama ke label yang berbeda yang terdapat dalam daftar isi blog ini dan menempatkan jidul posting pada main labelnya saja, tujuannya ya agar terhindar dari duplicate content kali ya!.
Nah bagi sobat yang ingin membuat daftar isi otomatis sesuai label yang ditentukan oleh Anda sendiri dapat mengikuti panduan dan tutorial berikut ini:


  •      Buat daftar isi Anda, terserah mau sebagai HTML/Javascript pada widget atau dihalaman posting, kemudian letakan kode javascript berikut ini:
          <script style="text/javascript">
          var numposts = 50;
          var standardstyling = true;
          </script>


          <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>


          <ul>
          <script src="http://BlogName.blogspot.com/feeds/posts/default/-/Nama%20Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
          </ul>
  • Ubah nilai var numposts sesuai jumlah judul yang ingin ditampilkan.
  • Ganti BlogName sesuai nama blog Anda sendiri.
  • Ganti Nama Label sesuai nama label atau kategori yang ingin ditampilkan.
  • Label yang menggunakan spasi, maka spasi diganti dengan: %20. Misalnya: label Trik blogger harus ditulis Trik%20blogger,  dan seterusnya untuk tiap label yang ber spasi. Besar kecil huruf  berpengaruh pada berfungsi atau tidaknya widget atau halaman ini. Karena itu Nama Label harus benar-benar sesuai dengan nama label yang ada dalam blog Anda.
  • Untuk bullet and numbering, gunakan perintah <ul> diakhiri </ul> jika Anda ingi daftar isi yang menggunakan bullet dan perintah <ol> diakhiri </ol> untuk numbering.
  • Simpan jika dugunakan sebagai widget dan publish jika ditempatkan pada halaman posting kemudian lihat hasilnya.

Untuk menampilkan beberapa content sesuai label yang berbeda dalam daftar isi Anda, silakan ikuti contoh berikut dan tempatkan dihalaman ataw widget daftar isi blog Anda:

<b>link exchange</b>
<script style="text/javascript">
      var numposts = 50;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
      <ol>
      <script src="http://www.xversailez.co.cc/feeds/posts/default/-/link exchange?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
      </ol>

<b>Tips&trik blogger</b>
<script style="text/javascript">
      var numposts = 50;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
      <ol>
      <script src=" http://www.xversailez.co.cc//feeds/posts/default/-/Trik blogger?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<b>software</b>
<script style="text/javascript">
      var numposts = 25;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
      <ol>
      <script src=" http://www.xversailez.co.cc//feeds/posts/default/-/software?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<b>information</b>
<script style="text/javascript">
      var numposts = 25;
      var standardstyling = true;
      </script>
      <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
      <ol>
      <script src=" http://www.xversailez.co.cc//feeds/posts/default/-/information?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>

  • Ganti kode-kode: <b>link exchange</b>, <b>Tips&trik blogger</b>, <b>software</b>, <b>information</b> dengan label sesuai label daftar isi Anda yang ingin ditampilkan.
  • Ganti url:  http://www.xversailez.co.cc/ dan label yang berwarna merah sesuai dengan url dan label blog yang Anda inginkan.
source: http://diarykudiblog.blogspot.com
0

Cara Membuat Widget bergerak

Kamis, 28 April 2011
Sebetulnya saya dapat cara ini dari blog nya aini di www.ainisastra.blogspot.com. Tapi saya bingung gimana cara pasang scriptnya di widget yang asli dari blogger, karena tidak disediakan HTML-nya. Nah, Baru saja tadi saya terpikir caranya. Kalo belum tau maksud saya, coba anda lihat Site info punya saya. Nah bergerak kan? saya memilih yang bolak balik naik-turun, tapi ada beberapa gerakan lagi, seperti:


- bolak balik kiri-kanan
- bolak balik naik-turun
- dari atas ke bawah nyambung / sebaliknya
- dari kanan ke kiri nyambung / sebaliknya
untuk menggerakannya anda tinggal rubah saja script-nya, nanti saya akan jelaskan:

1. masuk ke blog anda, seperti biasa
2. Masuk ke tab rancangan
3. Nah, buat widget yang ada script-nya di elemen laman, yang berasal bukan asli dari blogger, yang cara penempatannya menggunakan HTML/JAVASCRIPT

ada 2 jenis kode, tinggal pilih

- untuk bolak balik

a. kanan-kiri
<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

 

b. atas-bawah
<marquee behavior='alternate' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

- untuk yang terus/nyambung

a. dari kanan ke kiri (arah bisa diganti menjadi right)


<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

b. dari bawah ke atas (arah bisa diganti menjadi down)
<marquee behavior='scroll' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>

nah tulisan yang berwarna merah diganti dengan script anda/kode anda.

karena blog ini tidak bisa di copas, maka tulis sendiri ya scriptnya, mohon maaf atas ketidak nyamanannya.

semoga bermanfaat. ^_^