Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Maret 19, 2012

Cara Membuat Random Posts

Random post atau random artikel seperti contoh di blog ini, dapat melengkapi pernak-pernik di blog sobat. Kegunaannya tidak lain untuk menavigasi bagi pengunjung yang ingin memilih artikel apa yang ingin dibacanya. Mungkin bisa lewat Related Posts, 10 Top Posts, Latest Posts, dan satu lagi mungkin melalui Random Posts, selain itu tentunya isi postingan yang ada di blog tersebut.

cukup mudah sobat cara pemasangan widget Random Posts ini, ok langsung aja yah:

Pertam kali, sobat cari kode ]]></b:skin> kalau sudah ketemu, letakkan kode di bawah ini persis di bawah kode yang dicari tadi.

<!-- RSS Ticker-->
<script src='http://www.google.com/jsapi?key=ABQIAAAABbrwDKYsWoFrKT2VEO848hSVMRpHkWO5iC1cB94dCZuazY9qcxRbTmKZJ_tbKWRW1GvCcfxi5iuElA'/>

<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='Loading...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return""};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>
<!-- Stop RSS Ticker-->


Kemudian, sobat cari kode seperti ini <div id='main-wrapper'> kalau sudah ketemu letakkan kode di bawah ini persis di atas kode yang dicari tadi.

<span style="float:left; padding-left:5px; padding-right:5px; padding-top:3px; font-weight:bold">Random Posts &#187; </span>

<div style="float:left; padding-top:4px; width:700px; font-size:14px;">
<script type="text/javascript">
var cssfeed=new gfeedrssticker("example1", "example1class", 6000, "_new")
cssfeed.addFeed("Dilla Blog", "http://BLOGSOBAT.blogspot.com/feeds/posts/default/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(20, "date") //Show 20 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>


Lalu disimpan, selesai dan coba dilihat hasilnya...

Tips:
http://BLOGSOBAT.blogspot.com diganti dengan url blog sobat.

Demikian saja, cara membuat random posts yang ada di blog ini, smoga bermanfaat. bye

Maret 16, 2012

Cara Mempercantik Javascript atau HTML

Sobat pasti tahu seperti apa susunan aslinya kode javascript, ya... seperti itu, ngga manusiawi sekali. Coba aja lihat ini.


Tapi ada software online namanya Online Javascript, ini url-nya http://jsbeautifier.org/. Software ini bisa menyusun kode Javascript atau kode HTML menjadi lebih manusiawi, enak dibaca untuk dipelajari.

Cara kerjanya, sobat tinggal copy kode javascript tersebut dan di-paste pada kolom yang tersedia (Beautify Javascript or HTML) setelah itu baru di klik tulisan (Beautify Javascript or HTML) dan hasilnya akan seperti ini.


Selesai sudah, kini sobat akan lebih mudah untuk mempelajari bahasa / kode Javascript tersebut, karena sudah lebih manusiawi kode Javascript-nya.

Tips :
Jika sobat mau mengubah indentasinya sesuai keinginan bisa juga, di bagian sidebar kanan ada option untuk merubah indent, mulai dari indent with tab character, indent with 2 spaces, indent with 3 spaces, indent with 4 spaces dan indent with 8 spaces.
Ada juga untuk perapihan tanda { }, dan lainnya. Bisa sobat gunakan sesuai keinginan.

Ok selamat mencoba, smoga bermanfaat.

Maret 09, 2012

Cara Membuat Tanda Tangan Di Blog

Dulu saya pernah coba buat signature / tanda tangan di blog ini menggunakan Correl Draw dan dihosting ke blogspot. Ehh, ga lama dihapus sama yang punya hosting, kayaknya ga bolleh kali. Tapi saya baru aja temukan www.MyLiveSignature.com yang bisa untuk membuat signature baik dalam format gambar maupun format html (online).

Sobat mau coba caranya mudah, langsung aja ke TKP dan ikuti langkahnya berikut ini:
  1. Ke TKP di http://mylivesignature.com
  2. Lalu klik tulisan "Don't want to register? -> Proceed, cara ini kalo sobat tidak mau register dulu, tapi kalo mau register dulu boleh-boleh aja
  3. setelah pilihan diatas, sobat langsung diajak untuk memulai membuat signature buat pinjaman kredit rumah. Sobat diminta mengisikan nama untuk dijadikan sebagai signature.
  4. Lanjut, sobat diminta untuk memilih jenis font yang diinginkan. Ada sebanyak 120 jenis font yang ditawarkan, silahkan sobat pilih
  5. Lanjut, sobat diminta untuk memilih ukuran font yang ditawarkan dari 1 hingga 10
  6. Lanjut, sobat diminta untuk memilih warna font.
  7. Lanjut, sobat diminta untuk memilih slope atau kemiringan signature, maksimal 45 derajat.
  8. Selesai, kini signature sobat sudah jadi, selanjutnya gulir kebawah sobat diminta untuk memilih format signature yang diinginkan. Ada 3 pilihan, pertama bentuk signature animasi, kedua bentuk signature dalam format gambar, ketiga bentuk signature dalam format html.
    Saran saya gunakan aja format terakhir, karena lebih mudah.
  9. Terakhir sobat diminta untuk memilih generating signature code. Ada dua pilihan, yaitu generate HTML code dan generate BB code. Kalau untuk web-blog sobat pakai pilihan pertama dan untuk forum sobat pakai pilihan kedua.
  10. di Copy HTML code signature sobat dan simpan sementara di notepad.
  11. Lanjut, buka Dashboard blog sobat lalu pilih Design > Format dan gulir kebawah, pada template entri sobat paste code HTML signature tersebut ke kotak template entri, dan disimpan.
  12. Saat sobat membuat postingan secara otomatis signature sudah ditempatkan di postingan tersebut, jadi tidak perlu lagi setiap membuat postingan harus copy-paste signature.
Demikian, cara buat signature atau tanda tangan di web-blog, smoga bermanfaat.

Maret 06, 2012

Algoritma SEO

Tag Image/Alogritma SEO | Google Freshness, Google Panda, Google Caffeine
Algoritma SEO Google Freshness

Pada algoritma Google Fresh yang diluncurkan pada tahun ini (2012), memiliki performa meningkatkan kemampuan googlebot untuk mendeteksi komposisi iklan dan tata letak iklan pada halaman web/blog. Dimana letak iklan yang kurang bahkan tidak disukai adalah pada header, di atas postingan dan di sidebar kanan atas, disamping itu banyaknya iklan yang terpasang akan membuat pinalti google. Disarankan agar memasang iklan pada posisi footer dan sidebar kiri bawah. Jadi perlu diperhatikan dalam melakukan optimasi seo google perlu mempertimbangkan banyaknya iklan dan letak iklan yang dipasang di blog, Agar terhindar dari pinalti google.

Disamping itu, Beberapa hal yang perlu dilakukan oleh blogger dalam mengoptimasi blog agar konten blog tetap ramah terhadap algoritma Google freshnees *):
  1. Tingkatkan kecepatan loading blog
  2. Content blog yang original.
  3. Hindari melakukan spamming link karena akan merugikan blog anda dan blog tempat anda menempatkan link spam tersebut.
  4. Lakukan update blog secara berkala dengan kontent yang terbaru.
Dalam algoritma Google freshness, ditambahkan satu variabel utama baru dalam sistem pengindeksan google yaitu google memberikan nilai positif terhadap kontent/isi website yang lebih fresh/terupdate seiring perkembangan topik/keyword tertentu.

Dalam algoritma Google freshener , maka website /blog yang sering terupdate akan berpeluang untuk menempati posisi 10 SERP Google.Info rmasi lebih lengkap tentang algoritma search engine google ini bisa dilihat disini Google freshnees

Algoritma SEO Google Panda

Pada algoritma SEO Google Panda yang diluncurkan tahun lalu (2011), merupakan search engine google yang lebih menekankan pada perbandingan volume iklan dan volume kontent tanpa memperhitungkan aspek letak iklan seperti pada SEO Google Freshener.

Salah satu yang paling ditekankan oleh Google Panda adalah yang bersifat content farm dan autogenerated content. Untuk optimasi seo menggunakan algoritma google panda yaitu dengan menerapkan optimasi SEO on page yang lazim dilakukan oleh blogger agar mendapatkan posisi terbaik di search engine, daripada optimasi SEO off page. Jadi bahwa hanya optimasi seo on page-lah yang lebih penting dan sebagai jalan supaya bisa meningkatkan user expriencenya.

Kurang lebih solusi yang dapat ditawarkan untuk sobat blogger dalam mengoptimasikan blognya dengan cara Optimasi seo menggunakan algoritma google panda antara lain :
  1. Kata kunci disarankan harus ada pada title pada artikel.
  2. Pastikan pula kata kunci itu tertera pada tag header h1 , h2 atau h3 di konten kalian.
  3. Adanya gambar pada postingan. Hal ini sangatlah penting dan pastikan gambar itu mempunyai alternatif atau biasa dibilang "ALT".
  4. Pastikan keyword utama ada pada artikel dan di akhir artikel, maksudnya jika keyword yang ada di blog kita mempunyai kata kunci "SEO" maka kata kunci tersebut usahakan agar selalu ada pada artikel kita.
  5. Pastikan keyword utama atau keyword main density pada sebuah artikel berkisara antara 2% sampai 5% dimana di setiap paragrafnya mengandung keyword utama dan usahakan buatlah secara alami.
  6. Jangan memberikan sebuah external link pada konten tidak relevan atau juga bisa dibilang tidak nyambung dengan artikel yang anda punya. Contohnya jika artikel blog anda membahas tentang seo janganlah memberikan external link ke blog lain yang membahas tentang game.
  7. Jika anda menempatkan link pada blog yang tidak relevan pastikan keyword itu memiliki tag "nofollow" supaya menghindari tuduhan perjual-belian link.
  8. Pastikan artikel blog anda memiliki internal link menuju ke postingan blog anda sebelumnya dan jika anda berkenan pakai lah seo smart link merupakan suatu plugin untuk mengotomatis kan internal linking nya, dengan jalan yang bisa membuat link antar innerpage blog kita, sehingga bisa dikatakan plugin ini bisa membantu memperkuat link innerpage blog kita.
  9. Usahakan memberikan sebuah penekan pada keyword dengan tag bold, underline dan italic.
  10. Disarankanp ada saat menuliskan artikel minimal minimal 400 kata.
  11. Gunakan selalu kategori yang relevan pada judul utama artikel blog anda.
  12. Saat ini algoritma google panda mementingkan tingakt bounce rate atau pentalan dan durasi pengunjung dalam menelusuir blog anda, nah... related post, internal link dan konten video kini malah bisa meningkatkan optimasi ini.
  13. Sebisa mungkin kurangi widget yang tidak begitu bermanfaat.
Beberapa pemaparan diatas mungkin dapat menambah pengetahuan efek "low quality content" atau konten kualitas rendah(konten sampah) terhadap rangking situs secara keseluruhan.

Algoritma SEO Google Caffeine

Algoritma search engine google caffeine ini diterapkan google di tahun 2010 yang memiliki ciri khas peningkatan kecepatan mengindeks website, maka algoritma kecepatan loading blog yang menjadi fokus utama dari Google Caffeine.

Faktor-faktor berikut berperan besar pada sistem indeksan Google Caffeine
  1. Loading time
    Sistem yang baru ini memperhatikan kecepatan akses suatu website atau blog. Jadi, jika ketika kita mempunyai “loading time ” yang lebih cepat “google baru” akan lebih senang, sehingga peringkat menjadi lebih baik. Link juga berpengaruh pada kecepatan loading suatu halaman. Kemungkinan untuk kedepannya google akan memfokuskan kecepatan suatu situs terlebih dahulu kemudian baru mendeskripsikannya.
  2. Broken Links.
    Jika di dalam suatu website banyak menaut ke halaman atau situs yang tidak bisa dibuka(broken link), akan berpengaruh negatif pada posisi website di Google SERP (search engine result page).
  3. Isi web/blog, kualitas dan keakuratannya.
    Google Caffeine ini tidak suka dengan isi blog/website yang meniru mentah-mentah isi web atau blog lain. Sistem baru ini juga tidak menyukai jika ada blog atau website yang mempunyai kode HTML yang salah. Hal ini akan merugikan pemilik blog atau website tentunya. Jadi kita dituntut lebih cermat untuk selanjutnya atau mulai belajar HTML :)
  4. Adanya spam atau spamers.
    Ini mesti dihindari oleh semuanya. Perubahan cara mengindeks dari googel Caffeine ini, nantinya akan berdampak pada hasil pencarian google yang lebih baru jika dibandingkan dengan pencarian google sebelumnya. Hal ini pastinya akan mempengaruhi rank dari blog atau website juga.
Dengan menggunakan algoritma Caffeine, Google akan menganalisa web dalam ukuran yang kecil dan meng-update index pencariannya secara berkesinambungan. Ketika Google menemukan halaman atau informasi baru maka hal itu akan langsung diarahkan untuk muncul ke index.

Demikian sedikit ulasan tentang algoritma SEO yang digunakan oleh google dari tahun 2010 hingga tahun 2012 ini.




referensi :
http://asrizalwahdanwilsa.blogspot.com
http://www.komputerseo.com
http://ichwana.blogdetik.com

Kamus SEO

Tag Image/Kamus SEO, Optimalisasi Blog, SEO Algoritma
Algorithm (Algoritma)

Langkah-langkah matematis yang terbatas dan berurutan untuk memecahkan masalah.

Setiap Search Engine memiliki algoritma masing masing untuk menentukan relevansi query yang digunakan dengan data-data website yang mereka miliki untuk menentukan daftar hasil pencarian search engine tersebut.

Algorithmic Results

Hasil yang disediakan oleh search engine berdasarkan algoritma tertentu atas respon terhadap query yang digunakan, dikenal sebagai Organic Listing.

Biasanya search engine juga menampilkan Paid Listing bersamaan dengan Organic Listing. Meski demikian, daftar dari Paid Listing yang ditampilkan biasanya juga relevan dengan query yang digunakan.

Alt Tag/Alt Text (Alternate Tag/Alternate Text)

Teks yang ditampilkan sebagai pengganti dari gambar pada suatu halaman web site ketika gambar tidak bisa ditampilkan atau ketika mouse diletakkan di atas gambar tersebut.

Alt Tag/Alt Text berguna dalam SEO karena dapat memuat keyword yang digunakan pada halaman tersebut.

Analytics

Teknik/teknologi, pemrograman dan data yang digunakan dalam Search Engine Marketing untuk menganalisa performa dari suatu website atau sukses dan tidaknya suatu website dalam hubungannya dengan Internet Marketing Campaign.

Anchor Text

Juga dikenal sebagai link, yang menghubungkan sebuah halaman website dengan halaman website lain atau bagian dari suatu halaman website dengan bagian lainnya dalam halaman yang sama.

Anchor Text berguna dalam SEO karena Search Engine mempertimbangkan link yang berisi keyword sebagai link yang relevan.

Backlinks

Dikenal juga sebagai Backward Links atau Inbound Links, adalah semua link pada website lain yang membawa pengunjung pada website tersebut ke website Anda.

Backlinks dapat menaikkan posisi website Anda pada SERP secara signifikan, apalagi apabila backlink tersenbut terdapat pada website dengan Page Rank yang tinggi.

Banned

Disebut juga sebagai Blacklisted atau Delisted, adalah URL yang telah dihapus dari indeks Search Engine, biasanya karena didapati telah melakukan Black-Hat SEO. Website yang termasuk di dalamnya akan diabaikan oleh Search Engine dan tidak dimunculkan dalam SERP.

Banner Ad

Gambar yang dipasang sebagai iklan. Banner Ad memiliki ukuran yang bervariasi, biasanya berukuran 125×125 pixels, 468×60 pixels, 300×250 pixels, 250×250 pixels atau 728x90pixels.

Black Hat SEO

Teknik SEO yang tidak wajar/tidak etis atau teknik yang dilakukan untuk menipu Search Engine dengan tujuan untuk mendapatkan posisi yang baik pada SERP. Termasuk di antaranya adalah Spam, Cloacking atau melanggar ketentuan yang ditetapkan oleh Search Engine.

Melakukan Balck-Hat SEO dapat menyebabkan website Anda di-ban dari Search Engine.

Broken Link

Link yang tidak lagi mengarahkan pengunjung ke halaman website yang dituju.

Search Engine tidak menyukai Broken Link, menjaga setiap link pada website Anda tetap aktif adalah salah satu hal yang penting dalam meningkatkan performa website Anda.

Click Fraud

Pelanggaran atau tindakan ilegal yang menyalahi aturan/kesepakatan dalam kerjasama iklan CPC atau PPC dimana pemilik website diuntungkan dalam hal meraih imbalan dari setiap pengunjung yang meng-klik iklan yang dipasang pada website mereka.

Click-Through

Kejadian dimana seseorang meng-klik suatu iklan atau link pada daftar website tertentu dan menuju website lainnya. Mendapatkan Click-through yang tinggi adalah salah satu tujuan utama dalam SEO.

Click-Through Rate (CTR)

Persentase antara pengunjung yang berasal dari meng-klik sebuah link tertentu terhadap total pengunjung yang menuju suatu website.

Cloaking

Usaha yang dilakukan untuk memberikan tampian yang berbeda terhadap pengunjung suatu website.

Dalam hal tertentu, seperti membuat tampilan yang berbeda kepada pengunjung yang menggunakan browser berbeda bisa saja dilakukan. Cloacking menjadi ilegal ketika dilakukan untuk memberikan tampilan yang sama sekali berbeda terhadap pengunjung biasa dan Search Engine, hal seperti ini bisa menyebabkan website Anda dimasukkan dalam Blacklisted.

Contextual Link Inventory (CLI)

Data yang digunakan sebagai pembanding antara iklan yang sesuai dengan keyword tertentu terhadap konten suatu website.

Conversion

Istilah yang digunakan untuk menggambarkan berapa lama seorang pengunjung berada pada suatu halaman website dan pada akhirnya memutuskan untuk membeli sebuah produk yang ditawarkan, meminta informasi lebih lanjut atau mendaftarkan sebuah akun pada website tersebut.

Conversion Rate

Persentase perbandingan antara pengunjung yang memutuskan untuk membeli sebuah produk yang ditawarkan, meminta informasi lebih lanjut atau mendaftarkan sebuah akun pada website tersebut dengan total pengunjung yang mengunjungi website tersebut pada periode tertentu.

Cost-Per-Acquisition (CPA)

Disebut juga sebagai Cost-per-Action, merupakan variabel yang ditentukan dari perbandingan antara total klik yang didapat atau total biaya yang dikeluarkan dalam hal pemasangan iklan dengan conversion yang dihasilkan atau dapat dirumuskan: CPA = Cost / Conversion.

Cost-Per-Click (CPC)

Dikenal juga sebagai Pay-per-click atau Pay-per-performance, adalah sistem yang digunakan oleh Search Engines untuk menentukan biaya yang dikeluarkan oleh pemasang iklan untuk setiap klik yang dilakukan oleh pengunjung.

Cost-Per-Thousand (CPM)

Dikenal juga sebagai Cost-per-mile (mile = 1000 dalam bahasa latin) atau Cost-per-impression, adalah sistem yang digunakan oleh Search Engines untuk menentukan biaya yang dikeluarkan oleh pemasang iklan untuk setiap 1000 kali iklan dimunculkan.

Crawler

Dikenal juga sebagai Spider atau Robot, adalah program yang dijalankan oleh Search Engines untuk mengumpulkan data, mengikuti link yang ditemukan dan menyimpan setiap perubahan atau data baru yang ditemukan pada sebuah website dan menyimpan URL website tersebut pada indeks agar dapat menampilkan hasil pencarian yang lebih cepat dan akurat.

Description Tag

Dikenal juga sebagai Meta Description Tag, adalah kode HTML yang memberikan informasi/deskripsi kepada Search Engines yang berisi rangkuman informasi pada halaman website tersebut.

Directory

Daftar website yang dibuat secara manual oleh seseorang dan bukan oleh Cramwler.

Doorway Page

Dikenal juga sebagai Gateway Page atau Landing Page, berupa halaman yang minimalis dan berisi konten yang spesifik berdasarkan dan di-optimisasi untuk keyword tertentu dengan tujuan mendapatkan posisi yang lebih baik pada SERP.

Dynamic Content

Halaman/konten website yang berubah secara dinamis berdasarkan data pada database atau aktivitas yang dilakukan pengunjung. Halaman SERP adalah salah satu contoh Dynamic Content.

Geographical Targeting

Mentargetkan SEO dan SEM pada wilayah geografis tertentu seperti negara dengan maksud mengutamakan target pemasaran suatu bisnis pada wilayah tersebut.

Geographic Segmentation

Analsa yang digunakan untuk mengkategorikan asal kunjungan yang menuju suatu website berdasar.

Graphical Search Inventory (GSI)

Serupa dari Contextual Link Inventory, perbedaannya adalah data yang digunakan sebagai acuan berasal dari link yang bukan berupa teks seperti Banner Ad dan lain-lain.

Gray Hat SEO

Teknik yang bisa saja dianggap sebagai Black-Hat SEO atau White-Hat SEO.

Yang termasuk dalam Grey-Hat SEO antara lain, Doorway Pages, Gateway Pages, Cloaking dan duplicate content.

Hidden Text

Teks yang disembunyikan dari halaman website dengan cara menggunakan warna yang sama dengan warna dari background tekst tersebut dengan maksud memberikan tampilan yang berbeda terhadap crawler dan pengunjung lainnya.

Teknik ini termasuk dalam Black-Hat SEO dan akan menyebabkan website Anda Blacklisted karena crawler biasanya akan dengan menemukan trik ini dengan mudah.

Hit

Satuan untuk mengukur banyaknya akses terhadap suatu file pada sebuah website. Jika pada sebuah halaman website terdapat 10 gambar, maka setiap kali hlaman tersebut diakses akan tercata pula hit untuk setiap gambar tersebut.

Hal ini kadang membingungkan, ukuran yang lebih baik untuk menganalisa performa sebuah website adalah jumlah kunjungan per halaman.

HTML

Singkatan dari Hyper-Text Markup Language, yaitu bahasa yang digunakan untuk membentuk sebuah halaman website.

Halaman web merupakan terbentuk dari kode-kode HTML yang tertata dalam struktur tertentu.

Hyperlink

Gambar atau kumpulan teks yang apabila di-klik akan membawa seseorang menuju bagian lain dari website tersebut atau membuka website lainnya.

Index

Databse yang dimiliki oleh search engine yang berupa halaman-halaman website yang didapatkan oleh crawler.

Impression

Dikenal juga sebagai Page View, adalah ukuran yang menunjukkan tampilan dari sebuah halaman web atau iklan (dalam hal pemasangan iklan).

Internet Marketing

Penggunaan internet dalam hal promosi (advertising), menjalin jaringan dan atau menjual produk atau jasa.

Dalam hal dan level tertentu, Internet Marketing disebut Search Engine Optimization.

Keyword

Dikenal juga sebagai search terms atau query terms atau dalam Bahasa Indonesia disebut dengan “Kata Kunci”, adalah kumpulan kata atau kalimat yang digunakan pada halaman pencarian untuk mendapatkan informasi yang berkaitan.

Landing Page

Halaman website yang terbuka setelah seseorang meng-klik link yang bisa berupa iklan, hasil pencarian (SERP) dan lain-lain.

Landing Page biasanya juga digunakan untuk memonitor performa dari pemasangan iklan dan mengukur kesuksesan dari iklan tersebut.

Link Baiting

Sebuah konten yang secara langsung mengajak orang lain untuk memasang backlink menuju website tersebut, biasanya juga dibarengi dengan penyajian konten yang berguna bagi pengunjung.

Link Baiting merupakan teknik White-Hat SEO dan digunakan untuk meningkatkan popularitas suatu website dan Page Rank.

Link Exchange

Pertukaran link antara dua website dengan persetujuan bersama antara pengelola kedua website tersebut.

Link Farm

Halaman web atau beberapa website yang dibuat semata-mata hanya untuk meningkatkan jumlah baclink website-website yang tergabung di dalamnya.

Dalam kapasitas tertentu, praktek Link Farm dianggap spam oeh search engine dan bisa mengakibatkan website-website yang terlibat blacklisted.

Link Popularity

Satuan yang menunjukkan popularitas sebuah website dari jumlah backlink yang dimilikinya.

Listings

Daftar website yang dimunculkan oleh search engine yang diurutkan berdasarkan ranking tertentu sebagai hasil dari pencarian dengan query tertentu.

Meta Tags

HTML tag/Kode HTML yang ditempatkan pada sebuah halaman website yang berisi informasi yang dapat dibaca oleh search engine.

Meta tags biasanya berupa informasi yang menunjukkan konten halaman website tersbut (Meta Description), keywords yang relevan dengan konten (Meta Keywords) dan lain-lain.

Natural Listings/Natural Optimization

Atau disebut juga sebagai Organic Listing, daftar website yang dimunculkan sebagai hasil pencarian search engine yang semata-mata berdasarkan dengan relevansi antara keyword yang digunakan sebagai query dengan konten website dalam daftar tersebut.

Natural SEO

Optimisasi sebuah website yang semata-mata mengutamakan relevansi keywords dengan konten, desain dan struktur halaman yang tepat dan cara-cara White-Hat SEO lainnya ketimbang memasang iklan untuk dapat menempati listing pada halaman pertama SERP.

Outbound Links

Lawan kata dari Inbound Links, adalah link yang mengarahkan pengunjung menuju halaman lain pada website yang sama atau website lainnya.

Jumlah Outbound Links yang terlalu banyak pada suatu website dapat mempengaruhi SEO secara negatif atau bahkan bisa saja dianggap Link Farm.

Page Rank (PR)

Algoritma yang dibuat oleh Google untuk menganalisa link yang dimiliki sebuah website. Website dengan Page Rank dengan nilai yang besar memiliki kualitas backlink yang lebih baik.

Paid Listings

Lawan dari Natural Listing/Organic Listing, adalah layanan yang diberikan oleh search engine untuk menempatkan sebuah website pada posisi pertama SERP. Contohnya, Google AdWords.

Pay-Per-Click (PPC)

Sistem yang menentukan nilai yang harus dibayarkan oleh pemasang iklan dari setiap klik yang dilakukan oleh pengunjung atas iklan yang dipasang pada program Paid Listing seperti AdWords.

Position

Disebut juga sebagai Rank adalah posisi sebuah website pada SERP yang relatif dihitung dari posisi tertinggi (pertama) hasil pencarian tersebut.

Query

Pertanyaan atau keyword yang dimasukkan pada form pencarian search engine untuk mendapatkan daftar website yang relevan dengan hal tersebut.

Registration

Dikenal juga sebagai Search Engine Submission yaitu proses mendaftarkan URL sebuah website pada search engine agar dapat dimunculkan pada SERP.

Robots.txt

Dikenal sebagai Robot Exclusion Protocol, adalah sebuah file yang ditempatkan pada server sebuah website yang memberitahu crawler dari search engine bagian mana yang dapat atau tidak dapat di-indeks oleh search engine tersebut.

Search Engine

Website yang menyediakan layanan yang memperbolehkan pengunjung untuk mendapatkan daftar website yang seusai/relevan dengan query atau keywords yang dimasukkan sebagai input oleh pengunjung tersebut.

Search Engine Marketing (SEM)

Istilah yang digunakan sebagai cara untuk memasarkan sebuah website melalui teknik-teknik Search Engine Optimization.

Search Engine Optimization (SEO)

Modifikasi dan penyesuaian yang dilakukan pada sebuah halaman website untuk mendapatkan rank yang lebih baik pada SERP.

Spam

Dalam hal ini spam adalah istilah yang digunakan untuk menyebut semua penggunaan teknik yang bertentangan dengan pedoman yang ditentukan oleh search engine atau usaha untuk mendapatkan rank yang lebih baik dengan cara-cara ilegal.

Title Tags

Tag HTML yang digunakan dalam struktur sebuah halaman website yang menunjukkan judul dari halaman tersebut.

Unique Visitor

Istilah yang digunakan sebagai satuan untuk menunjukkan jumlah kunjungan pada sebuah halaman website yang berasal dari IP Address yang sama pada periode tertentu.

Web Analytics

Analisa yang dilakukan untuk mengukur performa sebuah website terhadap data yang dimiliki seperti, Unique Visitors, Hits, Page Views dan lain-lain.


Demikian kamus SEO yang berhasil dicopas kurang-lebihnya bisa sobat tambahkan, semoga bermanfaat.




refferensi :
http://www.flashercommunity.com

Februari 27, 2012

Membuat Burung Twitter Terbang Di Blog

membuat burung twitter terbang di blog, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog, wordpress, joomla
Membuat Burung Twitter Terbang Di Blog, lucu yah judulnya hihihi... Sebenarnya postingan yang kaya gini dah banyak beredar tapi saya mau rilis kembali di tahun 2012 ini.




Langsung aja yah, ikuti langkahnya berikut ini :
  1. Dashbord > Rancangan > Tambah Gadget
  2. Lalu tambahkan HTML/JavaScript
  3. Kemudian letakkan kode berikut ini:



    <!-- floating twitter Bird -->
    <script type="text/javascript" src="http://dillablog.googlecode.com/files/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqh4Ak8Jc6U_StDNQmFS1L73DUgubjnYtlpdagT6tShyJoLIWe9ozt12EsXYmBz5fLyF7SxWGajZTYN2MBfEazW1AQbbX95WnhlqkP_J40AJqx7rlamE_Ep1i8StvaaRAaJONk3HI_MPI/s1600/burung+twitter+terbang.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/Akun Twitter sobat";
    var tweetThisText = "Twitter - UserID http://www.dillablog.co.cc/";
    tripleflapInit();
    </script>
  4. Kode yang berwarna biru ganti dengan akun Twitter sobat.
  5. Kode yang berwarna merah ganti dengan pilihan warna burung kesayangan sobat, kalo burung saya warnanya putih donk
  6. Selesai, jangan lupa disimpan dan lihat hasilnya. Ok smoga ber.....
  7. Nah ini pilihan warna burung kesayangan sobat :
    membuat burung twitter terbang di blog, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog, wordpress, joomla
    • Warna Kuning
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6RceFuK2swXbS65Y5eS1D_uMP6tYKp595ura5Ne06KYURYYqe55v50u6hNvYWTDu6qEaCnbMgzbCIbASQKxOPs6Acrsfq49_5CF0aE5udCfU3q9U0T3gZEQtJioh_89N6lONMzSty2U/s1600/yellow+bird.png
    • Warna Hitam
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDuoUE_JQjFLrQnidTlf5GclaBroq9kPS5BFOpFpleRYdKBX4OS16pICE3_JUQSWfKQGBhUjD9QetmKU8gSxJEAsTiwvvudOXsi5__En3FPcoGHFkGjIfokQKmBfxlOv-2ze6yaObaMA/s1600/black+bird.png
    • Warna Biru
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBlPcHazisZFL6NTAdNie1QFy60k6S38PYRP6gHsO_TpeMvYaL7t0PDXHuKJj1b05jHSi2mKiYLvQX-97ToNqxng5AdL9bGQZJdpHmiUWh0wkMySRztzgMw1WaM4vtPHtLyPZsh_0n9co/s1600/Blue+bird.png
    • Warna Coklat
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTY5Uurr-LGjPSiYqsmXZ1uUXAumgIJ8LDWEcVHPp15OGavGkCZN-Gxdc-W80Y5XpuGYt4KgPPzIpOIgar0fPTZRaE7F1p5o1LPI9ZCPxzRwblJ8-lQNtKR_W0wvJsSmAcGRcsozqEcV0/s1600/brown+bird.png
    • Warna Hijau
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibT4vKo4khB0U26oWqxEVhDf9GIJz1JXqouWr5celPDy31DgWjOQlJHXpM-8SFFasVAo-I2gH0BPEjX26H8_n2HXRcxqZO5Di7vk-O7kUZNwVQYTgtsLhDmMXwXpIrHGwndWZfH54DIKQ/s1600/Green+bird.png
    • Warna Ungu
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-f9Y_RkocrDCFz2f7ElJ62Q2rO-kNnqjqsyoz2wXoXm-h2UDCc4nrafT01twsIqXja2BALfCVRodMFmWAibGj4vTuvVXEc_iUbtI3kV0ML7pJMYZYJQ7o4Bwqf74hic2Pw0IVekcpLk/s1600/purple+bird.png
    • Warna Putih
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboE7B0F78NxsLMtYNa41r3vcPnHzBCAuv2hgip0GXyXkMyUph8hNTRE66L9ykKSIHboF08MzJa-PE19-CMTOVIXb6vwV8mPhY2GWkdJ0mRHk0u2Dm1l5272XodGBBVHxyxMePY6cx1JA/s1600/white+bird.png
    • Warna Merah
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_h92tEAVPKYvaQVwmgqfxbsVgdS1D10CEJOHr6ySHA1mv8NO-AoKrokGSNgXQNVdiGPwWcS_xm1hOqbRlZZI_Pgsm0cOkhb0g56eiaxEpcqHfzM4C2_-tL5H_jj_-sxcUgT_iQ1z2UBo/s1600/red+bird.png
Demikian caranya membuat burug twitter terbang di blog. Smoga dapat dicopas untuk kepentingan bersama.

Februari 26, 2012

Cara Buat 3-in-1 Box Floating

Cara Buat 3-in-1 Box Floating, kira-kira kaya gitu judulnya. Widget ini untuk menampilkan gadget Blogger Connect, gadget Twitter, dan gadget Facebok dalam satu kotak, makanya diberi judul 3-in-1 Box, dan Floatingnya itu ditempelkan pada sisi kanan template secara vertical, seperti yang ada pada blog ini.

Mau coba yang satu ini, ayo ikuti langkahnya berikut ini:
  1. Dashbord > Rancangan > Tambah Gadget
  2. Lalu tambahkan HTML/JavaScript

    Cara Buat 3-in-1 Box Floating, Blogger Hacks, Blogger Tips, Blogger Trick, Tutorial Blog, Wordpress, Joomla, Belajar SEO

  3. Kemudian letakkan kode berikut ini:
    <style type="text/css">

    .barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Tq9j6wVxUJYkjEDjqwpm5Ikx5ECP2WzjHvLNMj4nNiyd_VnABq9DfGuhrcF-rha71dV8QbZE6kKwd0fxx4VMg_IP-bwNUmHfmr5Wc71h6yCE0HC_RKazQf7TPLuvawI37KlM10_SKxHT/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
    .barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3aehI-nKFH1BSpjP9k3-eta7re9EoUjtfehB10_CT80enIzjqX79CpdGTLo9RechKj6iY0cHStUDGjw5JkgYxeldEbJfhjTjF-Mb7BdO9oDmdJhn6AAqEIOhGe-59HGhusZ_Gb_Fih4H/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
    .barconteblogger{margin:5px 0 0 47px}
    .barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6M253tWQe0BSIw7Kdx1iG1O2b9-791KwRoqnS0INErbmFvc_jeYZn6pGq1FQG0Q_991v18x0tGeu-F6lBixFiztd8eeiVdbv-I0tFBQjBz3rjC5-ABCQvUO6t5USY0uGb_SUGw3pBrE_a/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
    .barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGvEl6NZhLSK4aHeLpcLo5vpJ4-hO26NN7w0hR92PmPrK_f7uvBRwQuxefbMBUMAFlwJB76MBwc1Zxfi4cgqCLqkW0E67cItQHsw-N0GQmZuFAT7jGoswLhqfMD9y61rD1vrxOtjdSFwL/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
    .barcontetwitter{margin:5px 0 0 47px}
    .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9i7xPv0Hotob51w3PcrFWZJaHssn9jBwMFBeyyZ6KL1PendKFqHyxeimPztsFS9CqHjwq2yN62NHXcINQjfUWNgzmwyQ_jZrTqeZfOuQkCrbbsVilthktkH_OXohWK1OLCGm4YX8W6nH5/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
    .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_J9wAW8aS41wIZ_sNKggn8uV3Qgkrj5GS044W14mqeEdWvYxJn4bal2f0PnZ2cS1OOHEaXi2aC_QzDz1APzSuF_8QeUmHb3cy5B_tesxn4glxrPQE34_hc0XUH8UvWSy3NXkktI0vxpoP/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
    .barcontefacebook{margin:5px 0 0 47px}

    </style>

    <div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
    <div class="barconteblogger">
    <span style="color: red;">

    TEMPAT KODE BLOGGER CONNECT

    </span>
    </div>
    </div>
    <div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
    <div class="barcontetwitter"><br />
    <span style="color: red;">

    TEMPAT KODE TWITTER

    </span>

    </div>
    </div>
    <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
    <div class="barcontefacebook">
    <span style="color: red;">

    TEMPAT KODE FACEBOOK

    </span>
    </div></div>
  4. Simpan, selesai. Selamat mencoba
Demikian Cara Buat 3-in-1 Box Floating, semoga bermanfaat.

Menampilkan Komentar Facebook Di Halaman Statis

Pada postingan yang lalu Cara Buat Komentar Facebook Di Blog, itu hanya tampil pada halaman dinamis saja dan tidak tampil di halaman statis. Kali ini saya akan mencoba agar Cara Buat Komentar Facebook Di Blog itu bisa tampil di halaman statis juga.

Cara Menampilkan Komentar Facebook Di Halaman Statis:
  1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  2. Download dulu template anda sebelumnya.
  3. Cari kode yang mirip seperti di bawah ini:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Read More >></a>
    </b:if>
    </b:if>
    Ini merupakan kode model readmore otomatis versi 2 yang berguna untuk menampilkan halaman statis, yang pernah saya postingkan.
  4. Jika sudah ketemu tambahkan kode komentar fb di bawah ini tepat di bawah kode <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <div id='fb-root'/>
    <script src=' http://connect.facebook.net/en_US/all.js#appId=246610832089539&amp;xfbml=1'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
  5. Simpan, selesai dan lihat hasilnya. Ok selamat mencoba.
Demikian cara menampilkan komentar facebook di halaman statis, semoga bermanfaat.

Februari 24, 2012

Cara Buat Komentar Facebook Di Blog

Kini lagi trend mencantumkan komentar facebook di blog. Dari hasil googling saya tentang cara buat komentar facebook di blog cukup bervariasi, ada yang cara sulit ada juga cara gampang. Yang pasti widget ini sudah saya coba dan hasilnya cukup memuaskan.

Mau coba, ayo ikuti langkah-langkahnya berikut ini:
  1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  2. Download dulu template anda sebelumnya.
  3. Cari kode yang mirip seperti di bawah ini:
    </b:includable>
    <b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>
    <b:includable id='comment-form' var='post'>
    <div class='comment-form-block'>
  4. Jika sudah ketemu tambahkan kode komentar fb ini tepat di atas </b:includable> :
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
    <script src=' http://connect.facebook.net/en_US/all.js#appId=246610832089539&amp;xfbml=1'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
    </b:if>
    nomor aplikasi id facebook appId=246610832089539  merupakan nomor aplikasi id facebook dilla blog, dan anda harus membuatnya terlebih dahulu, berikut ini tipsnya.

  5. Tips : untuk mendapatkan AppID facebook :
    1. Masuk/login ke Facebook.com
    2. Kunjungi url ini: developers.facebook.com/setup
    3. Isi kotak yang tersedia seperti berikut ini:

      belajar seo, dilla blog, blogger hack, blogger tips, blogger trick, tutorial blog, tutorial wordpress, tutorial joomla, tutorial facebook, cara membuat komentar facebook di blog
      • App Display Name: Komentar
      • App Namespace: kotakkomentar (minimal 7 karakter)
      • beri centang pada "I Agree.."
      • Klik Continue
      • Isi verifikasi kata
      • Klik Submit. Selesai.
    4. Selanjutnya akan ditampilkan "App id" anda. Catat dan simpan nomor App id tersebut.

  6. Selesai, disimpan dan lihat hasilnya.
Demikian cara menampilkan komentar facebook di blog sobat, semoga bermanfaat.

Februari 18, 2012

Cara Buat Artikel Terkait Di Sidebar

Cara Buat Artikel Terkait Di Sidebar. Mau coba buat widget yang satu ini, seperti yang ada di sidebar blog ini. Gampang-gampang susah sih, tapi asal teliti pasti berhasil. Karena yang berhasil pasang widget ini jauh lebih banyak ketimbang yang tidak berhasil. Mungkin karena agak sedikit muter-muter alias tuing-tuing cara penerapannya. Ok dicoba ajah dulu yah.

Langkah-langkahnya Cara Buat Artikel Terkait Di Sidebar :
  • Login ke blog anda > Edit HTML > centang expand widget templates
  • Cari kode </head>  ( gunakan CTRL + F untuk mempermudah pencarian )
  • Copy kode dibawah ini dan paste di atas kode </head>
    <!-- Related Post -->
    <script type='text/javascript'>
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
  • Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
  • Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
  • Kalau sudah silahkan simpan template
  • Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut.
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
  • Save
  • Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
  • Biasanya kodenya seperti dibawah ini :
    <b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
  • Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini
    <b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>
  • Simpan template dan lihat hasilnya
Demikian cara membuat related post atau artikel terkait di sidebar, smoga bermanfaat tuh.




referensi:
http://www.bamz.us

Februari 16, 2012

Cara Agar Breadcrumbs Terindex Google

Cara Agar Breadcrumbs Terindex Google. Ini bukan punya saya, tapi punya sobat ichbinnabil, tujuang di copas biar gak lupa, hehee. Banyak yang masih bingung, bagaimana sih biar breadcrumb navigasi bisa terindex google?. kan keren tuh url blog kita bisa dipersingkat. agar lebih memahami mengenai breadcrumbs yang terindex google.

Pertama-tama masukan kode css untuk breadcrumbnya, taruh di atas kode ]]></b:skin>
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
setelah itu cari kode <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Save template. untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google). setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

Demikian, cara membuat breadcrumbs yang katanya dapat dan cepat terindex oleh google. Smoga bermanfaat.




referensi:
http://m-wali.blogspot.com

Februari 15, 2012

Cara Membuat dan Menambahkan Kolom Di Blog

Dari judulnya "Cara Membuat dan Menambah Kolom di Blog", sepintas terlihat sangat umum dan tidak pada substansinya. Ya!, memang maksudnya seperti itu, karena Cara Membuat dan Menambah Kolom di Blog ini sangat fleksibel. Artinya dapat digunakan untuk penambahan kolom di atas postingan maupun di bawah postingan bahkan di sisi kanan atau di sisi kiri postingan. Jadi sangat fleksibel bukan.!

Mau tau caranya Membuat dan Menambahkan Kolom Di Blog yang fleksibel, ok ikuti saja langkah-langkahnya berikut ini :
  1. Login dulu ke Blogger > Klik Design -> Edit HTML
  2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
  3. Kalau sudah, cari kode ]]></b:skin>
  4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
    #footer-column-divide {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }
    di sini anda bisa menambahkan rinciannya lagi misalnya: frame, jenis dan ukuran font, dan apa saja yang menurut anda dibutuhkan untuk kelengkapannya.
  5. Jika sudah cari kode dibawah ini. Di sini saya beri contoh untuk membuat dan menambah kolom footer.
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>

    atau

    <div id='footer'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>
  6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/>
    atau <b:section class='footer' id='footer' />, lalu disimpan dan selesai untuk membuat dan menambah kolom footer.

Catatan: Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>. Di sinilah letak fleksibelnya Cara Membuat dan Menambahkan Kolom Di Blog yang saya maksud.
  1. Jika ingin membuat footer 1 kolom. Gunakan kode berikut:
    <div id='footer-column-divide'>

    <div id='footer1' style='width: 100%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>
    Cara Membuat dan Menambah Kolom Di Blog, cara menambahkan kolom di footer, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog
  2. Jika ingin membuat footer 2 kolom. Gunakan kode berikut:
    <div id='footer-column-divide'>

    <div id='footer1' style='width: 50%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 50%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/>
    </div>
    Cara Membuat dan Menambah Kolom Di Blog, cara menambahkan kolom di footer, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog
  3. Membuat footer 3 kolom. Gunakan kode berikut:
    <div id='footer-column-divide'>

    <div id='footer1' style='width: 33%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 33%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>
    Cara Membuat dan Menambah Kolom Di Blog, cara menambahkan kolom di footer, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog
  4. Membuat footer menjadi 4 kolom. Gunakan kode berikut:
    <div id='footer-column-divide'>

    <div id='footer1' style='width: 25%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 25%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div id='footer4' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>
    Cara Membuat dan Menambah Kolom Di Blog, cara menambahkan kolom di footer, belajar seo, blogger hacks, blogger tips, blogger trick, tutorial blog
Demikian, cara membuat dan menambahkan kolom di blog dengan fleksibel, smoga dapat membantu anda.




referensi:
http://www.hermanblog.com

Cara Membuat Breadcrumb

Breadcrumb merupakan menu navigasi yang manfaatnya sebagai pentunjuk bagi para pembaca atau pengunjung yang sedang berada di blog tersebut. Disamping itu manfaat lainnya adalah sebagai tags yang terdapat dalam blog tersebut yang akan dapat dengan mudah terindex oleh google. Ini merupakan salah satu upaya untuk meningkatkan kemampuan dari SEO On Page.

Berikut ini langkah-langkah cara membuat breadcrumb:
  1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  2. Download dulu template anda sebelumnya.
  3. Gunakan Ctrl+F untuk mencari ]]></b:skin>
  4. Jika sudah ketemu, letakkan (paste) kode di bawah ini sebelum kode ]]></b:skin>
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 20px 0px 15px 15px;
    font-size:85%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
  5. Cari kode <b:includable id='post' var='post'> (seperti biasa gunakan Ctrl+F)
  6. Jika sudah ketemu, telakkan (paste) kode di bawah ini setelah kode <b:includable id='post' var='post'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    You are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
    <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &#187; <data:post.title/>
    </div>
    </b:if>
    </b:if>
  7. Simpan template, selesai.
Demikian cara membuat breadcrumb atau menu navigasi di atas postingan, smoga bermanfaat.

Februari 14, 2012

6 Kotak Pencarian Yang Fresh dan Trendy

Kotak Pencarian, sobat pasti tahu manfaatnya bukan. Kotak pencarian ini selain berguna untuk mencari suatu artikel pada sebuah blog juga kalau dibuat dengan sentuhan artistik maka hasilnya pun akan lebih indah dan mempunyai nilai seni dan estetika yang juga menggambarkan si pembuatnya.

Ada 6 buah kotak pencarian yang fresh dan trendy saya kutip dari W2B, menurut saya patut dicoba, sobat bisa langsung ke sumbernya W2B atau bisa juga di blog ini.

6 Kotak Pencarian Yang Fresh dan Trendy :

contohnya seperti ini, boleh dicoba berfungsi atau tidak !





  1. Kotak Pencarian Model 1
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
  2. Kotak Pencarian Model 2
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    script kodenya seperti di bawah ini :
    <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
  3. Kotak Pencarian Model 3
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    script kodenya seperti di bawah ini :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :


  4. Kotak Pencarian Model 4
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    script kodenya seperti di bawah ini :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :


  5. Kotak Pencarian Model 5
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    script kodenya seperti di bawah ini :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :


  6. Kotak Pencarian Model 6
    cara buat kotak pencarian, cara buat search box, search boox frensh and trendy, belajar seo, tutorial blog, blogger hacks, blogger tips, blogger trick
    script kodenya seperti di bawah ini :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>
    atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :


Februari 02, 2012

Recent Comment Thumbnail With Avatar

Banyak cara dan gaya untuk menampilkan recent comment yang intinya untuk mempercantik penampilan suatu web-blog baik di blogspot maupun di wordpress. Recent comment pada umumnya ditampilkan dalam bentuk summary text saja namun ada juga yang dikombinasikan dengan thumbnail, dan biasanya thumbnail tersebut diambil dari gambar/foto blogger yang diupload melalui blogspot. Namun kali ini saya ingin memperkenalkan pada sobat membuat recent comment thumbnail dengan Avatar. Jadi tentu saja hanya bagi blogger yang mempunyai Avatar akan ditampilkan gambar/fotonya.

Ok, caranya cukup mudah. Sobat tinggal copy script di bawah ini :
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 10,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 60,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://namablog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>
Lalu tambahkan gadget dan pilih HTML/JavaScript, selanjutnya tinggal di-paste script di atas yang telah dicopy. Selesai.

Sedikit penjelasan, untuk menampilkan jumlah recent comment yang akan ditampilkan. Sobat bisa merubah nilai pada "numComments". Di atas bisa dilihat numComments = 10, ini maksudnya untuk menampilkan jumlah recent comment sebanyak 10 komentar terakhir.

Sedangkan untuk menampilkan summary teks yang akan ditampilkan pada recent comment dapat diatur pada "characters". Di atas bisa dilihat characters = 60, ini maksudnya untuk menampilkan panjang teks 60 pixel.

Ok, semoga widget ini bermanfaat.

Copyright © / dillablog

Template by : Urang-kurai / powered by :blogger