CSS3 : Transition Property Basics untuk Blogger by zulfansy

9:54 AM zulfansyah 0 Comments

CSS3 : Transition Property Basics untuk Blogger - Halo sobat, Sobat dapat melihat di berbagai efek blog yang menarik pada beberapa link. Sebagian besar waktu, ketika Sobat membawa lebih dari link, sesuatu perubahan dalam gaya: itu baik akan berubah warna atau latar belakang atau akan menjadi digaris bawahi. Bagaimana dengan efek keren yang terdiri dalam transisi bertahap dari satu gaya ke yang lain, seperti yang Sobat lihat di bawah ini, Demo:



Sentuh Ini !

Transisi ini dicapai dengan menggunakan transisi properti CSS3 - properti yang didukung di semua browser besar seperti Chrome, Firefox, Opera, Safari (untuk Safari kita akan membutuhkan-webkit-prefix untuk mendapatkan efek ini).


CSS3 Transition Syntax

Transition Syntax mendukung empat nilai :
- Properti dipengaruhi oleh transisi, seperti warna, perbatasan, latar belakang, lebar, dll
- Durasi transisi ini dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk mengubah gaya 
Sobat sepenuhnya
- Waktu tunda untuk transisi akan dieksekusi, juga dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk transisi untuk memulai ketika kursor melayang atau menyentuh di atas elemen itu;

Lihat kode di bawah ini :



.example {
transition-property: width; /* properti yang mengalami transisi */
transition-duration: 2s; /* durasi transisi */
transition-timing-function: linear; /* fungsi-waktu */
transition-delay: 0; /* Lamanya waktu untuk menunda dimulainya transisi */
/* sekarang kita akan mengulangi seluruh deklarasi dengan -webkit-prefix untuk efek untuk bekerja di Chrome dan Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0;
}

Dalam contoh di atas, unsur-unsur dengan contoh kelas. Akan menjadi lebar dalam waktu dua detik apabila kursor melewati element tadi.

Ketika kita mendefinisikan gaya link, biasanya kita perlu menggunakan ini a:link pemilih, dan ketika mendefinisikan gaya ketika kursor di atas link, kita perlu menggunakan :hover pemilih. Namun, transisi dapat digunakan dalam setiap elemen HTML, bukan hanya link.
Untuk membuat efek transisi untuk bekerja dengan baik, kita harus mendefinisikan dua blok dari gaya untuk elemen, yaitu gaya normal untuk tag / id / kelas dan gaya pada kursor :hover untuk tag / id / kelas khusus.

Sebagai contoh:


tag, #id, .class {
/* masukkan di sini gaya yang Anda inginkan untuk pemilih */
/* masukkan di bawah efek transisi */
}
tag:hover, #id:hover, class:hover {
/* Sisipkan di sini gaya ketika kursor menyentuh elemen */
/* di sini tidak perlu mengulangi deklarasi transisi */
}

Sobat dapat menambahkan gaya yang sama pada beberapa penyeleksi dipisahkan dengan koma seperti yang saya lakukan di atas, walaupun itu tidak perlu.

Berikut adalah beberapa contoh transisi dengan kode masing-masing.

Saya tidak akan menggunakan transisi,waktu,fungsi dalam contoh ini karena tidak ada bedanya, karena nilai pertama adalah durasi dalam hitungan detik dan yang kedua adalah penundaan.


Contoh 1

Contoh Transisi :


/* dengan properti tunggal */
#example1 {
background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}


Contoh 2



Contoh Transisi



/* dengan empat sifat dan delay */
#example2 {
background-color: #9c3;
border: 8px solid #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}


Contoh 3 :




Contoh Transisi



/* dengan tujuh sifat dan delay */
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}


Contoh 4



Contoh Transisi



/* dengan semua properti secara bersamaan */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}


Catatan Akhir :



  1. Deklarasi transisi perlu muncul dalam CSS . Di Blogger , CSS terletak sebelum ]]</b:skin> atau </style> 
  2. Seperti yang Sobat lihat pada contoh di atas , Sobat dapat menetapkan aturan yang berbeda untuk transisi dari elemen yang berbeda dalam satu aturan tunggal - hanya pisahkan dengan koma . 
  3. Tidak wajib untuk menggunakan empat sifat dalam deklarasi transisi , tetapi pesanan mereka harus selalu terlihat seperti ini : properti / durasi / waktu -fungsi / delay . 
  4. Nilai durasi dan delay harus dinyatakan dalam hitungan detik. Dalam hal ini Sobat dapat menggunakan nilai-nilai dengan milidetik , misalnya , .5s berarti setengah detik . 
  5. Dalam interval waktu kecil , waktu properti transisi - fungsi tersebut tidak memberikan efek yang luar biasa yang paling berguna hanya lebih animasi canggih . Nilai yang mungkin adalah salah satu kemudahan ( default , yang membuat transisi dengan awal yang lambat , maka akan lebih cepat dan berakhir perlahan-lahan ) , linear ( kecepatan transisi yang sama dari awal sampai akhir ) , ease-in ( transisi dimulai perlahan dan kemudian kecepatan meningkat ) , ease-out ( transisi mulai cepat dan melambat di akhir ) dan ease-in-out .

0 comments:

Tips Trik Mendapatkan Uang/Dollar dari Blogger/Blogspot by zulfansy

8:22 AM zulfansyah 0 Comments

Tips Trik Mendapatkan Uang/Dollar dari Blogger/Blogspot - Halo sobat, Terkadang memang para bloggers sering memikirkan, bagaimana caranya mendapatkan penghasilan dari hobby Nge-Blog nya, saya pun demikian, mungkin dari sobat yang baru mengenal blog dan tidak akan berfikir demikian, namun karena faktor lamanya bermain Blog, pasti dibenak sobat terfikir untuk mendapatkan penghasilan dari Blog ini.

Disini saya akan memberikan Tips Trik Mendapatkan Uang atau Dollar dari Blogger atau Blogspot yang saya dapatkan dari berbagai sumber.

Tips Trik Mendapatkan Uang/Dollar dari Blogger/Blogspot
Tips Trik Mendapatkan Uang/Dollar dari Blogger/Blogspot

Sebelum menerapkan tips trik ini adakalanya sobat berfikir dahulu, jika sobat ingin menghasilkan uang atau dollar dari blogger atau blogspot, sobat harus rajin dalam hal posting, karena uang dapat cepat cair apabila banyak pengunjung dalam blog sobat, berikutlah tips trik untuk mendaptkan uang dari blog :

Baca juga : Cara Membuat Blog SEO 100% di Chkme.com


Tips 1 : Mendaftar Iklan PPC

PPC Dalam bahasa inggris yaitu "Pay Per Click", yang berarti Sobat mendapatkan uang setiap kliknya, nah dengan memasang Iklan PPC di blog sobat, alhasil sobat bisa mendapatkan uang, namun mendapatkan uang dari iklan PPC ini adalah dengan pengunjung blog sobat yang diharuskan mengklik iklan tersebut pada blog sobat.

Sobat pun dapat mengklik iklan PPC itu sendiri, tapi untuk menghindari Banned dari layanan iklan PPC sobat tersebut lebih baik tidak perlu sobat lakukan itu, jadi yang perlu sobat lakukan adalah memiliki banyak pengunjung dalam arti meningkatkan traffic blog.


Berikut beberapa Layanan Iklan PPC :
  • Google Adsense
  • Iklanblogger
  • KlikQ
  • KlikSaya
  • Chitika
  • dan masih banyak lagi.


Tips 2 : Memasang Ruang Iklan untuk Blog Anda

Memasang Ruang iklan untuk blog ini berguna bagi para pengunjung yang tertarik pada blog sobat entah itu dari traffic blog, pagerank blog, DLL.

Jadi sang pengunjung ingin mempromosikan bisnis atau produk mereka di blog sobat, dengan itu sang promosers memberikan uang untuk biaya promosiannya itu sendiri.


Tips 3 : Menjual Blog

Menjual blog ini memang sudah pasti akan menghasilkan uang, mungkin dari beberapa sobat blogger sudah malas untuk berurusan dengan dunia Blogging, dan berfikiran untuk menjual blognya, Nah tips dari saya, sebaiknya sobat membuat 2 atau 3 atau lebih blog, nah dengan begitu sobat bisa menjual blog sobat yang lain.

Jika sobat berniat untuk menjual blog sobat, sebaiknya blog sobat yang ingin dijual tersebut memiliki traffic blog yang bagus, pagerank tinggi, atau alexa rank yang sedikit, dengan begitu alhasil jumlah harga blog itu pun akan bertambah mahal.


Tips 4 : Donasi

Nah di tips 4 ini memang hanya bisa mendapatkan sedikit penghasilan saja, namun apabila artikel blog sobat dapat berguna bagi banyak orang bisa saja sobat mendapatkan donasi yang lebih banyak.

Donasi ini bermaksud bagi pengunjung sobat yang mungkin blog sobat sangat bermanfaat baginya, dengan demikian pengunjung blog pun bersenang hati memberikan donasi (uang) ke rekening sobat dalam arti memberikan permintaan terima kasih karena telah berguna baginya.


Tips 5 : Menawarkan Jasa

Tips 5 ini mungkin tips untuk para pro saja, yang telah memiliki banyak kemampuan, dengan itu mereka mengambil kesempatan untuk membuat jasa untuk para pengunjung apabila pengunjung memerlukan hal itu, dan untuk itu mereka menggunakan jasa kita.

Sebagai contoh, mungkin sobat berkemampuan dalam hal SEO, lalu sobat menawarkan kepada pengunjung untuk membuat blog mereka menjadi SEO, nah setelah mereka menggunakan jasa sobat, mungkin atau pasti mereka memberikan uang kepada kita sebagai Jasa untuk ucapan terima kasih mereka.


Tips 6 : URL Shortener

Nah Tips 6 ini mungkin tips yang paling mudah untuk mendapatkan uang, Url Shortener ini bukan seperti URL Shortener Goo.gl atau bit.ly , URL Shortener yang saya maksud disini adalah URL shortener yang memberikan uang kepada para penggunanya contohnya seperti adf.ly dan Linkbucks.

Sobat seringkan apabila ingin mendownload suatu file dan tiba-tiba tersambung ke adf.ly (Yang tunggu 5 detik lalu Lanjut/Skip ad) , Nah pada saat sang pengunjung mengkid Skip Ad itu maka otomatis sang Layanan URL Shortener itu akan memberikan uang pada akun kita.

Memang tidak terlalu jauh dengan iklan PPC, URL Shortener ini juga mendapatkan uang per klik, maka dari itu sobat harus memiliki pengunjung yang banyak, agar dapat mendapatkan uang yang banyak juga.

Berikut beberapa situs layanan URL Shortener :
  • Adf.ly
  • Linkbucks.com
  • Shorte.st
  • Adfoc.us
  • dan masih banyak lagi.

Trik Sukses dari 6 Tips Diatas

Nah triknya mudah saja apabila sobat ingin sukses mendapatkan banyak uang dari 6 tips diatas tadi, usahakan blog sobat memiliki banyak pengunjung dengan cara mengoptimasi SEO, Perbanyak Artikel yang Bermanfaat dan tidak hasil copas, blogwalking, DLL.

Apabila sobat telah memenuhi hal tersebut, lalu menggunakan 6 tips diatas tadi, sudah dipastikan sobat bisa mendapatkan uang yang buanyak, tapi tetaplah berdo'a dan bekerja keras untuk mendaptkan hasil yang sobat harapkan.

Itu saja Artikel yang bisa saya bagikan kali ini, maaf atas segala kekurangan, Wassalam.

0 comments:

Macam Tag Kondisional Untuk Modifikasi Tampilan dan Menyembunyikan Widget by zulfansy

11:15 AM zulfansyah 0 Comments

Macam Tag Kondisional Tampilan dan Menyembunyikan Widget

Suka dengan tampilan yang berbeda pada setiap halaman? Dengan menggunakan Tag Kondisional/Conditional Tag, kita bisa memodifikasi tampilan tiap halaman dengan tampilan desain yang berbeda-beda, dengan cara mengapitkan tag kondisional diantara elemen/objek, tag kondisional ini bisa juga untuk menampilkan dan menyembunyikan tiap widget atau beberapa widget. Untuk memodifikasi tiap halaman secara spesifik, kita bisa tambahkan style css untuk memperbaiki tampilannya.

Dibawah ini merupakan macam tag kondisional yang bisa dipergunakan untuk menampilkan dan menyembunyikan element/objek atau widget:



Hanya Tampil Pada Halaman Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
elemen/objek
</b:if>
Tag Kondisional ini dipergunakan untuk memodifikasi tampilan pada pada halaman utama/homepage, baik dari segi desain tampilan atau untuk menyembunyikan widget, sedikit penjelasan bagaimana cara memodifikasi tampilan pada homepage, silahkan kunjungi Link.


Tampil Selain Pada HomePage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
elemen/objek
</b:if>


Hanya Tampil Pada Halaman Item/Posting

<b:if cond='data:blog.pageType == "item"'>
elemen/objek
</b:if>


Tampil Selain Pada Halaman Item/Posting

<b:if cond='data:blog.pageType != "item"'>
elemen/objek
</b:if>



Hanya Tampil Pada Halaman Statis/Static Page



<b:if cond='data:blog.pageType == "static_page"'>
elemen/objek
</b:if>


Tampil Selain Pada Halaman Statis/Static Page



<b:if cond='data:blog.pageType != "static_page"'>
elemen/objek
</b:if>


Hanya Tampil Pada Halaman Arsip



<b:if cond='data:blog.pageType == "archive"'>
elemen/objek
</b:if>


Tampil Selain Pada Halaman Arsip



<b:if cond='data:blog.pageType != "archive"'>
elemen/objek
</b:if>


Hanya Tampil Pada Halaman Judul Postingan Tertentu



<b:if cond='data:blog.url == "Alamat Postingan"'>
elemen/objek
</b:if>


Selain Tampil Pada Halaman Judul Postingan Tertentu



<b:if cond='data:blog.url != "Alamat Postingan"'>
elemen/objek
</b:if>

Untuk cara penggunaanya seperti pada uraian mengenai Cara Membuat Kustom Halaman pada Halaman Utaman (HomePage), untuk halaman pada judul postingan tertentu, hanya mengganti Alamat Postingan dengan alamat URL postingan yang ditentukan.


Hanya Tampil Pada Halaman Index



<b:if cond='data:blog.pageType == "index"'>
elemen/objek
</b:if>

Halaman Index adalah semua halaman terkecuali halaman Item/Postingan


Tampil Pada Halaman Pencarian



<b:if cond='data:blog.searchQuery'>
objek
</b:if>

halaman ini akan tampil pada halaman pencarian, misalnya jika kita melakukan search melalui kotak pencarian


Hanya Tampil Pada Halaman Salah (Error Page)



<b:if cond='data:blog.pageType == "error_page"'>
elemen/objek
</b:if>


Selain Tampil Pada Halaman Salah (Error Page)



<b:if cond='data:blog.pageType != "error_page"'>
elemen/objek
</b:if>


Tampil Pada Halaman Label



<b:if cond='data:blog.searchLabel'>
elemen/objek
</b:if>

Halaman label adalah halaman dimana kita memilih salah satu nama label dari postingan.

Sekelumit tentang tag kondisional yang bisa dipergunakan untuk memodifikasi tampilan atau menyembunyikan widget pada halaman tertentu.

0 comments:

Cara Membuat Couter Box pada Widget Daftar Label by zulfansy

11:08 AM zulfansyah 0 Comments

Counter Box pada Widget Label
Cara Membuat Couter Box pada Widget Daftar Label - Halo sobat, seperti biasa kali ini saya akan membagikan sebuah artikel yang mudah-mudahan bermanfaat bagi sobat semua, yaitu bagaimana cara membuat counter box pada widget label, seperti yang kita tahu, widget label yang berada di blog mas DTE :], seperti itulah widget label yang akan kita buat, artikel ini saya dapat dari +Kang Ismet , dan saya sangat berterima kasih pada Kang Ismet yang selalu berbagi artikel yang bermanfaat bagi kita.

OK tidak perlu berbasa-basi lagi, kita langsung saja ketahap bagaimana cara membuat counter box ini pada widget label blog sobat, simak dan praktekan tutorial di bawah ini :

1. Buat Widget dahulu, dan centang Tampilkan jumlah entri per label

2. Masuk ke Template > Edit HTML > masukkan css berikut diatas ]]><b:skin>

#Label1 li a {color: #2c3e50;text-decoration:none;}

#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}

#Label1 li .label-counter {float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}

#Label1 li:hover .label-counter {background-color:#255e96;color:white}


Silahkan modifikasi tampilannya sesuai keinginan sobat.

Jika css diatas tadi tidak merubah Widget label sobat, gan ti #Label1 dengan #Label2 atau #Label3 dst.

3. Pada Label terpilih cari kode dibawah ini :

<span dir='ltr'>(<data:label.count/>)</span>


Hapus kode tersebut dan ganti dengan :

<span class='label-counter'><data:label.count/></span>



Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123 dibanding yang lebih sedikit seperti ini 32. Untuk membuat ukuran yang sama, pada #Label1 li .label-counter tambahkan ukuran fixed :

width:25px
silahkan sesuaikan ukuran pixel sesuai selera sobat.
Sekian Tutorial saya hari ini, terima kasih atas kunjungannya, semoga bermanfaat dan selamat mencoba. Happy Blogging :).

Resource : http://blog.kangismet.net/2013/10/membuat-counter-box-pada-widget-label.html

0 comments:

Pengertian Singkat Black White SEO by zulfansy

11:44 AM zulfansyah 0 Comments

Pengertian Singkat Black White SEO

Pengertian Singkat Black White SEO
Pengertian Singkat Black White SEO
Pengertian Singkat Black White SEO - Apa Kabar pengunjung setia fajriandaviar.blogspot.com , Semoga tambah suskses ngeblognya dan yang pasti sukses menghasilkan uang dari blog kesayangan. 

Kali ini saya mau sedikit memberikan info tentang Pengertian Singkat Black dan White SEO buat sobat yang baru terjun di dunia blog yang sedang bersemangatnya memburu langkah-langkah dalam melakukan Search Engine Optimization demi merampingkan alexa ranknya agar terhindar dari rasa lelah tanpa ada hasil sama sekali. Oke langsung saja..,

Black SEO,  adalah hal-hal yang di larang pada SEO dan harus sobat hindari, jika sobat menjalankan larangan ini, maka website atau blog sobat akan di exsekusi, hehehe atau di blacklist search engine (Masuk daftar tamu. eh.., daftar hitam. yang pasti bukan sabuk hitam yoo...) , tidak di indeksss.
  1. Membuat doorway atau Pintu Belakang, yaitu halaman khusus buat search engine yang tidak berguna bagi pengunjung situs sobat.
  2. Memasang link di website atau blog sobat yang termasuk kategori bad neighborhood �, yaitu situ-situs yang sudah di blacklist ( termasuk link farm ).
  3. Mengikuti program paid link.
  4. Content pada blog sobat sama persis dengan isi blog lain yang lebih dulu terindeks.
  5. Membangun link dalam jumlah yang sangat besar dalam waktu singkat. 
Search engine saat ini sudah semakin canggih dan galak, buatlah website atau blog sobat berbobot dan paling penting berguna buat pengunjung, maka blog sobat akan banyak di kunjungi orang dari seluruh dunia. dan kalau beruntung dari dunia Lain.

White SEO, teknik SEO yang diizinkan oleh Search Engine atau teknik SEO yang tidak melanggar aturan Search Engine seperti,
  • Halaman yang unik, asli, bermutu (bukan copypaste dari sumber lain)
  • Halaman yang didesain untuk manusia, bukan untuk search engine.
  • Link dalam halaman tersebut berhubungan dengan isinya.
  • Metadata (title, description, keyword) yang benar-benar mendeskripsikan isi.
  • Design blog yang baik secara umum dan harus responsive.silahkan baca 1 ( satu ) Kabar Angin Teknik SEO Terbaru
Search Engine atau mesin pencari seperti google tidak menyukai, 
  • Halaman yang mempengaruhi keakuratan atau relevansi search result.
  • Halaman yang redirect ke halaman lain (doorway)
  • Banyak situs atau halaman yang isinya sama.
  • Halaman yang sebagian besar isinya berisi atau link ke halaman website lain, misalnya isinya tentang program-program afiliasi.
  • Web dengan jumlah hostname virtual yang sangat banyak.
  • Halaman yang sangat banyak, dibuat secara otomatis tanpa isi yang bernilai (cookie-cutter pages)
  • Halaman yang menggunakan metode artifisial (buatan) untuk mempengaruhi search engine rangking.
  • Halaman yang menggunakan teks atau link yang tidak terlihat pengunjung.
  • Halaman yang berbeda dilihat search engine dan pengunjung normal (cloaking).
  • Terlalu banyak link ke situs lain untuk mempopulerkan situs tersebut ( link schemes ).
  • Halaman yang dibuat dengan tujuan utama untuk Search Engine dengan banyak keyword dan tidak relevan.
  • Penggunaan nama atau merek yang bukan haknya.
  • Situs yang membuka banyak pop-ups, menginstall malware, spyware, virus, trojans, atau mempengaruhi user navigation browser pengunjung.
  • Halaman yang terlihat seperti kecurangan atau penipuan.
Jadi Bagaimana, Sudah bisa memahami Pengertian Singkat Black White SEO? 
Kalau belum, silahkan baca berulang-ulang sampai paham. 
Tapi kalau masih belum paham , ya di baca lagi.
Masih belum paham??? ( Garuk Kepala....!!! He, Bercanda, Cara Belajar SEO Harus Bertahap Agar Tidak Kesurupan )

0 comments:

Cara Belajar SEO Harus Bertahap Agar Tidak Kesurupan by zulfansy

10:00 AM zulfansyah 0 Comments

Cara Belajar SEO Harus Bertahap Agar Tidak Kesurupan

Cara Belajar SEO Harus Bertahap Agar Tidak Kesurupan
Kesurupan Optimasi SEO

Cara Belajar SEO Harus Bertahap Agar Tidak Kesurupan, he... - fajriandaviar.blogspot.com Jika anda adalah blogger pemula, dan ingin blog anda dikenal oleh banyak orang melalui Google, dan mesin pencari lainnya, maka sobat perlu mempelajari SEO. SEO atau Search Engine Optimization adalah segala upaya yang bisa sobat lakukan untuk membuat mesin pencari menyukai blog yang sobat buat.

Hanya saja belajar SEO itu seharusnya secara bertahap, dan bukan serampangan. Jika serampangan, nanti sobat tidak bisa melihat gambaran besarnya dan kebingungan untuk waktu yang lama. Jadi jika sobat adalah pemula, saran saya adalah melakukan proses SEO melalui tiga tahap berikut ini :

1. Bagaimana cara memulai membuat blog dengan benar ?
  • Blog apa yang sebaiknya sobat buat (silahkan nilai minat dan bakat sobat) ?
  • Bagaimana memilih kata kunci yang terbaik untuk blog sobat ?
  • Bagaimana memilih nama blog atau nama domain blog sobat ?
2. Bagaimana Melakukan Optimisasi Onpage Blog Baru sobat ?

Setelah blog
sobat sudah jadi, maka banyak hal yang perlu sobat lakukan agar Google dan search engine lainnya menyukai blog sobat, dan beberapa di antaranya adalah :
  • Bagaimana struktur template blog yang SEO friendly dan Responsive ?
  • Bagaimana memasang title tag, meta tag, dan heading tag untuk mengatur cara mesin pencari melihat blog sobat ?
  • Bagaimana menyebar kata kunci yang sobat pilih di dalam setiap halaman artikel.
  • Bagaimana membantu Google mengindex blog sobat lebih baik dengan menggunakan sitemap (peta situs), Google Webmaster Tools, Google Analytics, dan juga feedburner.
3. Bagaimana melakukan optimisasi Offpage ?
 

Setelah blog sobat selesai di buat, dan setelah sobat membuat Google, dan mesin pencari lainnya berkenan memasukkan blog sobat ke dalam indeks mereka. Tiba saatnya mempelajari bagaimana membuat Google, dan mesin pencari lainnya berkenan memilih blog sobat dari sekian yang tak terhitung blog yang ada di dalam indeks mesin pencari tersebut, untuk dipamerkan di halaman pertama SERP (Search Engine Result Pages) menurut kata kunci yang anda pilih. Di sinilah sobat akan belajar tentang mendapatkan banyak backlink agar blog sobat terlihat berotoritas.
Mendapat banyak trafik/pengunjung bukan hanya dari mesin pencari tapi juga dari sumber-sumber lainnya.

Optimisasi SEO offpage adalah perjalanan yang tiada hentinya, karena kita harus selalu menyesuaikan diri dengan perubahan algoritma (sistem penilaian) robot mesin pencari seperti Google.
 

Tahap-tahap di atas adalah artikel yang wajib sobat baca sebagai pemula agar tidak kesurupan. dan sobat juga wajib membaca semua link yang ada supaya sobat mendapat pengetahuan secara bertahap dengan benar. Jika sobat sudah membaca semua artikel di atas beserta link-link penunjangnya, silahkan membaca artikel pengetahuan tambahan SEO yang akan datang selanjutnya agar bebas dari Kesurupan SEO di tengah malam. iiiiiiiii....
Dan hati-hati belajar SEO secara Massal...

0 comments:

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post by zulfansy

9:58 AM zulfansyah 0 Comments

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post - Halo sobat, kali ini saya akan memberikan Trik bagaimana Cara mudah menbuat thumbnail post berwarna-warni sesuai dengan label post sobat.

Sebenarnya mudah saja untuk membuatnya, sobat tidak perlu menggunakan/menambahkan script atau jquery yang mengakibatkan blog bertambah berat.

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post

Lalu bagaimana cara membuatnya ?, berikut Triknya :

1. Pertama-tama Sobat harus mencari kode pembungkus dari thumbnail post sobat dengan cara Klik Kanan Pada Thumbnail Post -> Inspect Element , Dibawah ini menunjukkan bahwa kode pembungkus template saya adalah .thumbnail

Ilustrasi Element Pembungkus Post
Ilustrasi Element Pembungkus Post

2. Masuk Template, Cari kode berikut <div class='thumbnail'> , biasanya kode tersebut lebih dari satu, maka sobat pilih kode pertama yang sobat temukan, ganti kata thumbnail dengan kode pembungkus sobat.

3. Ganti kode tersebut dengan kode dibawah ini :

&lt;div class=&#39;thumbnail <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop></b:if>&#39;&gt;

Ganti thumbnail dengan kode pembungkus post sobat.

4. Setelah itu scroll sedikit kebawah, maka sobat akan menemukan kode </div> yang berwarna merah yang berarti menunjukkan error pada kode, ganti kode </div> yang berwarna merah tadi dengan kode berikut :

&lt;/div&gt;

5. Terakhir, sobat hanya perlu menambahkan kode css berikut :

.thumbnail.Templates {background: none repeat scroll 0% 0% #277FBF; }

Perhatikan :
Ganti kode .thumbnail dengan kode pembungkus post sobat.
Ganti kode .Templates dengan nama Label post sobat.
Ganti kode #277FBF dengan kode warna yang sobat suka.

Terima kasih telah berkunjung, mari berkomentar dan Happy Blogging, Wassalam.

0 comments:

Cara Membuat Threaded Comments Valid HTML5 di Blogger by zulfansy

9:38 AM zulfansyah 0 Comments

Cara Membuat Threaded Comments Valid HTML5 di Blogger - Halo sobat Blogger, kali ini saya akan membagikan suatu artikel yang Insyaallah bermanfaat untuk sobat, yaitu cara membuat threaded Comment valid HTML5 di blog, tutorial ini saya dapat dari +Rio Us .

Threaded Comments

Sebelum mempraktekannya di blog sobat, alangkah baiknya jika kita melihat fitur pada Threaded Comments ini, fitur lihat dibawah ini.


Fitur :

  • Emoticon
  • Optimasi Avatar
  • jQuery Smoot Scrolling
  • Valid HTML5
Untuk demo, sudah ada Screen shot gambar diatas, atau sobat bisa lihat disini


Memasang Threaded Comments


Cari kode di bawah ini :


<b:include data='post' name='threaded_comments'/>

.
Lalu ganti script di atas dengan script dibawah ini :


<b:include data='post' name='comments'/>


Simpan CSS berikut, diatas ]]><b:skin>



/* Threaded Comments By Fajriandaviar.blogspot.com  */
.comment-form p {background-color: #393939;font-size: 12px;line-height: 16px;color: whitesmoke;margin-top: 45px;border-left: 6px solid #4D90F0;padding: 8px 10px;position: relative;}
#comments {margin-bottom:5px;padding:5px;background: #E4E4E4;}
#comments h4 {position: relative;font-size: 16px;margin: -5px -5px 5px -5px;padding: 7px 10px 7px;text-decoration: none;text-align: right;background: #F8F8F8;border: 1px solid #E2E2E2;}.comment_avatar {border:2px solid #fff; height:45px; width:45px; background:transparent url(http://img254.imageshack.us/img254/1986/anonymousavatar.gif) no-repeat center center; float:left; margin-right:10px; overflow:hidden }
.comment_avatar * { max-width:1000% !important; display:block; max-height:1000% !important; width:45px !important; height:45px !important; margin-right:10px }
.comment_name { color:#000; font-size:105%; font-weight:bold; padding:0 0 3px; text-decoration:none; margin:0; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.comment_name a { color:#000; text-overflow:ellipsis; overflow:hidden }
.comment_name a:hover { color:green }
.comment_body p { font-size:95% }
.comment_header { background-color:#F8F8F8; border:1px solid #ccc; padding:5px; }
.comment_body { background-color:#F8F8F8; border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; margin-top:0; margin-bottom:17px; padding: 1px 10px 0px 10px; position:relative }
.comment_body p img { background-color:#EEE; max-width:100%; width:auto; margin:0 auto; margin-top:5px }
.comment_date { color:#000; cursor:pointer; font-weight:normal }
.comment_date:hover { color:green }
.comment_child .comment_wrap { padding-left:20px }
.comment-delete {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:5px;font-family: Arial;}
.comment-delete a:hover{background:#00A8FF;color:#fff;}
.comment_reply {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:70px;font-family: Arial;}
.comment_reply a:hover{background:#00A8FF;color:#fff;}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.deleted-comment { color:#ad3000 }
.paging-control-container { background-color:#0070b0; color:#f6f6f6; display:block; margin:5px 0; padding:5px 10px }
.paging-control-container a { color:white }
.paging-control-container a:hover { color:gold }
.comment-form{max-width:100%}
#comment-editor {width: 69.3%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}
iframe{border:none;overflow:hidden}
/*Target Komentar*/
div:target .comment_header {border-top:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-right:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-left:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_reply {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_reply{border:1px solid #ccc;}
div:target .comment-delete {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment-delete{border:1px solid #ccc;}
div:target .comment_body {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_body{border:1px solid #ccc;}


Lalu cari kode di bawah ini :


<b:includable id='comments' var='post'>
 bla...bla...
</b:includable>


Lalu ganti kode bla...bla... tadi dengan kode dibawah ini :


<div class='comments' id='comments'>
        <b:if cond='data:post.allowComments'>
       
         <b:if cond='data:post.numComments != 0'>
          <h4>
           <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
           <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>
           </b:if>
          </h4>
         </b:if>
               
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>                    
 <div class='clear'/>
  <div id='comment_block'>
          <b:loop values='data:post.comments' var='comment'>
           <div class='data:comment.adminClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:post.adminClass == data:comment.adminClass'>
             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
            <b:else/>
             &lt;div class=&#39;comment_inner&#39;&gt;
            </b:if>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
              </div>
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='Permalink'><span class='comment_date'><data:comment.timestamp/></span></a>             
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
<data:comment.body/>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a> 
<a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>Hapus</a>                                                          <div class='clear'/>                                     
              </b:if>                                  
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>             
           </div>
          </b:loop>              
         </div>    
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form'>         
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <data:post.noNewCommentsText/>
           </b:if>
          <b:else/>
           <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
     
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
             <script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
</b:if>
//<![CDATA[
Config.maxThreadDepth = 12;//How many threaded level that you want
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 5=\'.v\';6 w=$(\'#o-x\').9(\'y\');7 12(b){6 I=\' \\n\\r\\t\\f\\13\\14\\15\\16\\17\\18\\19\\1a\\1b\\1c\\1d\\1e\\1f\\1g\\1h\\1i\\1j\\1k\\1l\\1m\\1n\\1o\\1p\';J(6 i=0;i<b.z;i++){8(I.g(b.1q(i))!=-1){b=b.j(0,i);1r}}k b}$(\'.K .1s p\').3(7(i,h){A=h.1t();l=A.g(\'@<a B="#c\');8(l!=-1){C=A.g(\'</a>\',l);8(C!=-1){h=h.j(0,l)+h.j(C+4)}}k h});7 L(2){r=2.g(\'c\');8(r!=-1)2=2.j(r+1);k 2}7 M(2){2=\'&1u=\'+2+\'#%N\';O=w.1v(/#%N/,2);k O}7 P(){3=$(5).3();$(5).3(\'\');5=\'.v\';$(5).3(3);$(\'#o-x\').9(\'y\',w)}7 Q(e){2=$(e).9(\'D\');2=L(2);3=$(5).3();8(5==\'.v\'){R=\'<a B="#S" 1w="P()">\'+1x.1y+\'</a><a 1z="S"/>\';$(5).3(R)}1A{$(5).3(\'\')}5=\'#1B\'+2;$(5).3(3);$(\'#o-x\').9(\'y\',M(2))}E=1C.1D.B;F=\'#o-1E\';G=E.g(F);8(G!=-1){T=E.j(G+F.z);Q(\'#1F\'+T)}J(6 i=0;i<q.z;i++){8(\'U\'1G q[i]){6 2=q[i].U;6 H=1H($(\'#c\'+2+\':s\').9(\'V\'));$(\'#c\'+2+\' .1I:s\').3(7(l,W){6 m=q[i].D;8(H>=1J.1K){$(\'#c\'+m+\':s .1L\').X()}6 u=$(\'#c\'+m+\':s\').3();u=\'<Y 1M="K" D="c\'+m+\'" V="\'+(H+1)+\'">\'+u+\'</Y>\';$(\'#c\'+m).X();k(W+u)})}}$(\'.1N a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1O(\'11\')});$(\'.1P a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1Q(\'11\')});',62,115,'||par_id|html||Cur_Cform_Hdr|var|function|if|attr||str||data|||indexOf|||substring|return|index|child_id||comment||Items||first||child_html|comment_form|Cur_Cform_Url|editor|src|length|temp|href|index_tail|id|cur_url|search_formid|search_index|par_level|whitespace|for|comment_wrap|Valid_Par_Id|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|reset_html|origin_cform|ret_id|parentId|level|oldhtml|remove|div|click|this|comment_collapsed|trim|x5b|x5d|x7c|x7d|x3c|x3e|x0b|xa0|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u200b|u2028|u2029|u3000|charAt|break|comment_body|toLowerCase|parentID|replace|onclick|Msgs|addComment|name|else|r_f_c|window|location|form_|rc|in|parseInt|comment_child|Config|maxThreadDepth|comment_reply|class|collapse|addClass|expand|removeClass'.split('|'),0,{}))
//small avatar
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"));
});  
//Emoticon
$(function () {
    var emoRange = "#comments p, div.emoWrap, div.post-body";
dfs
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"))
        })
    }
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvOFNbJNAG9d2UWcEXMGg_HNYQBNOzNS4UH8OIMDPqwTzqItIck2MjCLMXIHo8BWXsjL6nCCywI8rSnq6ORN0A3S-m7Bn_9Ym_3s9fdN1bkTMqrrr095PcD5lbN44XUsqUI0yVNtrWXa0/s1600/smile1.gif", ":)");
    emo(/\s;\)+/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wink.gif", ";)");
    emo(/\s:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sad.gif", ":(");
    emo(/\s=\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sadanimated.gif", "=(");
    emo(/\s@@,/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/rolleyes.gif", "@@,");
    emo(/\s:yaya:/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/yaya.gif", ":yaya:");
    emo(/\s:s/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sullen.gif", ":s");
    emo(/\s:\\/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/memble.gif", ":&#92;");
    emo(/\s:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/haha.gif", ":D");
    emo(/\s=D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/hihi.gif", "=D");
    emo(/\s\^:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/abovemehaha.gif", "^:D");
    emo(/\s\^(\_|)\^/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/senyum-tulus.gif", "^_^");
    emo(/\s:'\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cry.gif", ":&#39;(");
    emo(/\s:waaa:/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wawa.gif", ":waaa:");
    emo(/\sT_T/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/tears.gif", "T_T");
    emo(/\sB\)/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cool.gif", "B)");
    emo(/\s:Q/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/smoking.gif", ":Q");
    emo(/\s\*\*p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/crazy.gif", "**p");
    emo(/\s7:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/conf.gif", "7:(");
    emo(/\s:p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/wee.gif", ":p");
    emo(/\s:Oz+/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sleep.gif", ":Ozz");
    emo(/\s7:O/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/angry.gif", "7:O");
    emo(/\s\\o\//ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif", "&#92;o/");
});
//]]>
</script>
<script type='text/javascript'> 
var jump=function(e)
{
    //alert(&#39;here&#39;);
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
   }else{
       var target = location.hash;
   }

   jQuery(&#39;html,body&#39;).animate(
   {
       scrollTop: (jQuery(target).offset().top) - 150
   },3000,function()
   {
       //location.hash = target;
   });

}

jQuery(document).ready(function($)
{
    $(document).on(&#39;click&#39;, &#39;a[href*=#]&#39;, jump);

    if (location.hash){
        setTimeout(function(){
            $(&#39;html, body&#39;).scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $(&#39;html, body&#39;).show();
    }
});
</script>


Validasi HTML5 


Cari semua kode di bawah dan hapus satu persatu.
  • allowtransparency='true'
  • frameborder='0'
  • src='' style='display: none'
  • scrolling='no'
  • width='100%'
Kemudian cari kode dibawah ini :


<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>


Ganti dengan ini :


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>



Selesai sudah tutorial saya hari ini, jika ada pembahasan atau ada kekurang atau kesalahan bisa sobat berkomentar di kolom yang telah disediakan dibawah ini, terima kasih telah mengunjungi blog saya, untuk segala kekurangan dan kesalahan saya ucapkaan maaf, Wassalam.


Resource : http://www.daengrio.com/2013/10/threaded-comments-blogger-valid-html-5.html

0 comments: