Good Luck !!
Home » Archives for February 2014
Friday 28 February 2014
Pengertian Meta Tag dan Tag Untuk SEO
Good Luck !!
Wednesday 26 February 2014
Cara Membuat Emoticon Pada Komentar Blog
Sengaja saya buat cara seperti ini agar sobat bisa lebih jauh memahami mengenai pemasangan emoticon di kotak komentar ini, kenapa? Karena cara ini bisa kita kembangkan bukan hanya menggunakan emoticon saja untuk meletakannya pada komentar tapi bisa kita pasang banner atau gambar lain, nah agar sobat bisa mengkreasikannya sendiri maka saya bikin tutorial seperti ini.
- Login ke blogger
- Klik Layout atau Template
- Pada tab menu pilih Edit HTML
- Centang kotak kecil Expand Template Widget
- Sekarang cari kode </body>
- Tempatkan kode berikut di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
/* Yahoo! Smileys For Blogger Comments
* bY Dian Anarchyta
* Url:http://afowles.blogspot.com
*/
a = document.getElementById('comment-holder');
if (a) {
b = a.getElementsByTagName("p");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
bh_b_smly = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/O:-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-bd/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/7:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/2\):\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\)\]/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\(\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\;\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:D/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\;\;-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/7:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/~\X\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:x/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\*/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/=\(\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\S\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\O/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\X\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/B-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\#:-\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\(:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/=\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-B/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/=\;/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-c/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-h/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-t/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/8-7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\I-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/8-\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\L-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-a/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\[-\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\O\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/8-\}/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/2:-\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/=\P~/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-\?/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/#-o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/=\D7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\@-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\^o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-w/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\X\_\X/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:\!\!/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\\m\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:-q/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/\^\#\(\^/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif' alt='' class='bhacksmly'/>");
bh_b_smly = bh_b_smly.replace(/:ar\!/ig, "<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif' alt='' class='bhacksmly'/>")
b.item(i).innerHTML = bh_b_smly;
}
}
}
</script>
- Selanjutnya sobat cari kode dibawah ini dan cari yang paling bawah
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' width='100%'/>
- Copy kode ini dan letakan tepat di atasnya
<div style='border: 2px solid #CCC; margint: 0px;height:80px; overflow: auto; padding: 10px; text-align: center; min-width: 500px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> ;-;;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
</div>
- Simpan template sobat.
Mungkin hanya ini saja yang bisa saya bagikan, jika sobat mengalami kendala jangan sungkan untuk meninggalkan komentar..
Sunday 23 February 2014
Cara Agar Postingan Cepat Terindex Google
Submit Url ke google.
Cara ini merupakan cara yang paling mudah, sejatinya google menyediakan layanan ini untuk para pemula yang baru membuat blog, agar blognya dengan segera mendapatkan respon dari pihak google.
Namun kita bisa menggunakan untuk menyubmitkan url artikel kita, agar langsung terindex oleh google hanya dalam hitungan detik.
Caranya mudah.
Pertama masuklah ke layanan Alat webmaster - Rayapi URL. Jika belum login ke google maka loggin terlebih dahulu.
Setelah berhasil login,
Maka baca seksama tulisan dibawah ini :
Google menambahkan situs baru ke indeks kami, dan memperbarui yang sudah ada, setiap kali kami merayapi web tersebut. Jika Anda memiliki URL baru, beri tahu kami mengenai hal itu di sini. Kami tidak menambahkan semua URL yang dikirimkan ke indeks kami, dan kami tidak dapat memprediksi atau menjamin kapan atau apakah URL yang dikirimkan akan muncul dalam indeks kami.Begitulah kira-kira Quote Google. Tidak memberikan jaminan artikel bisa masuk ke index mereka.
Masukkan Url Sobat di situ. Kemudian masukkan kode Captcha yang tertera kemudian klik Submit atau kirim permintaan. Setelah berhasil, maka akan ada notifikasi. Tapi jika gagal ulangi lagi langkah berikut.
Setelah langkah penyubmittan, sering sering melakukan ping,
Apa itu ping?
Ping itu ibarat melayangkan surat kepada mesin pencari, jika nanti mesin pencari menerima suratnya maka akan segera blog Anda di eksekusi oleh Search Engine..
Lakukan ping bisa di situs Mypagerank.net atau bisa langsung ke Googleping.com
Jika di situs mypagerank, hanya di minta memasukkan judul Blog, URL Blog / URL Postingan, masukan code yang tertera, lalu centang select, (biarkan mereload) selesai reload, gulir kebawah dan klik "Ping Updates Site"
Bagaimana jika di Googleping? Kalian masuk link di atas tadi, lalu masukkan Nama atau Judul Blog, Blog Homepage isi dengan URL Blog sobat ata URL Postingan, Rss URL (optional) kalian bisa isi Url blog sobat, bukan URL artikel. Di tambah dengan "atom.xml". Contohnya gini : http://afowles.blogspot.com/feeds/posts/default lalu masukan email anda, pastikan e-mail aktif karena nantinya akan di kirim Kode Verifikasi. Lalu gulir kebawah, setiap menu maka klik lah (check all).
Popular choices (check all)
Blog service (check all)
Teruss.. Ke bawah check all semua dan masukan chapta, kemudian Send Ping.
Namun semua itu bukan jaminan Artikel Anda dapat di No.1 halaman pencarian, ini hanya langkah alternatif atau bantuan.
Saturday 22 February 2014
Flow Anarchyta Responsive Blogger Template Valid HTML5 dan CSS3
Featured
- Fast Loading
- Responsive Design -> Check
- Valid HTML 5 Homepage -> Check
- Valid HTML 5 Posting -> Check
- Valid CSS 3 -> Check
- SEO Score 100% -> Check
Custom
Pada form Search Widget Anda masukan HTML berikut ini..<div id='search'>Untuk membuat Blog tetap Valid HTML 5 dan SEO 100% setelah Anda menambahkan Widget hapus Kode ini pada --> Edit HTML
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' onfocus="if(this.value==this.defaultValue)this.value=''" value="Search articel...." onblur="if(this.value=='')this.value=this.defaultValue;" name='q' type='text'/>
</form>
</div>
<b:include name='quickedit'/>Mungkin cukup itu saja untuk menjaga Blog agar tetap Valid HTML 5 dan SEO 100%.
Untuk kekurangan bisa menyusul.. Terima kasih atas kunjungannyaa..
Wednesday 19 February 2014
Auto Read More Thumbnail Tanpa Javascript
Untuk demo Anda bisa melihat template yang saya gunakan ini, atau lebih jelasnya seperti ini Screen Shootnya ...
Jika Anda saat ini telah menggunakan auto read-more versi javascript, Anda bisa memodifikasinya pada formulir HTML Temlpate, temukan kode ini:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</head>
Kalau udah ketemu hapus semua kode tersebut kemudian Anda ganti dengan kode di bawah ini
<b:if cond="data:post.firstImageUrl">Jika template blog Anda masih berupa posting bisa berikut tutorial lengkap membuat Auto Read More Thumbnail Tanpa Javascript
<a expr:href="data:post.url">
<img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
<b:else>
<a expr:href="data:post.url">
<img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
</b:else>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
Berikut Tutorialnya
- Login Ke Blogger
- Klik Edit Template (Jangan Lupa Back Up dulu)
- Cari kode
]]></b:skin>
- Copy Css Berikut di atas kode tersebut..
.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}
- Setelah itu Cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4, ganti dengan kode ini
<b:if cond='data:blog.pageType != "static_page"'>Keterangan:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
Thumbnail saya menggunakan
<data:post.firstImageUrl>
Snippet di ambil dari Referensi pada Popular Post
<data:post.snippet/>
- Langkah Terkahir "Save Template"
Demikian tutorial Cara Membuat Auto Read More Thumbnail Tanpa Javascript, apabila Anda mengalami masalah atau masih bingung untuk menerapkan dalam Membuat Auto Read More Thumbnail Tanpa Javascript silahkan tinggalkan komentar Anda di form komentar bawah. Terima kasih ...
Update 13 November 2014
<data:post.firstImageUrl>
Adalah gambar pertama yg di ambil dari postingan, jika sebelumnya anda menggunakan <data:post.thumbnailUrl>
yg di ambil dari popular post maka tidak akan muncul thumbnail post'nya karena sejak kemarin 10 November 2014 kurang lebihnya pihak Google mengubah url yg kita upload dari http://
ke https://
Contoh :
<img src='http://1bp.blogspot.com'/>
menjadi <img src='http://1bp.blogspot.com'/>
dan menyembabkan thumbnail post error dan tidak muncul, mungkin cara di atas bisa mengatasi masalah sobat..NB :
<data:post.firstImageUrl>
ukuran thumbnail original misal kita upload ukuran /1600/ maka akan tetap muncul /1600/ berbeda dengan <data:post.thumbnailUrl>
yg memang ukurannya lebih kecil yaitu s/72-c/ seperti di popular post itu...Tuesday 18 February 2014
jQuery Lazy Load Plugin
Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo, lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.
Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load. Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi Appelsiini
Cara Install
- Login ke Blogger Anda
- Klik Temlate dan pilih Edit HTML
- Cari tag
</head>
gunakan CTRL+F untuk mencari - Selanjutnya salin javascript dibawah ini tepat sebelum tag
</head>
<script type="text/javascript">
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license : http://www.opensource.org/licenses/mit-license.php
* Project home : http://www.appelsiini.net/projects/lazyload
* Version: 1.8.3
*/
(function($, window, document, undefined) {
var $window = $(window);
$.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold: 0,
failure_limit: 0,
event: "scroll",
effect: "show",
container: window,
data_attribute: "original",
skip_invisible: true,
appear: null,
load: null
};
function update() {
var counter = 0;
elements.each(function() {
var $this = $(this);
if (settings.skip_invisible & amp; & amp; !$this.is(":visible")) {
return;
}
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) & amp; & amp; !$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter & gt; settings.failure_limit) {
return false;
}
}
});
}
if (options) {
/* Maintain BC for a couple of versions. */
if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;
delete options.effectspeed;
}
$.extend(settings, options);
}
/* Cache container as jQuery as object. */
$container = (settings.container === undefined ||
settings.container === window) ? $window : $(settings.container);
/* Fire one scroll event per scroll. Not one scroll event per image. */
if (0 === settings.event.indexOf("scroll")) {
$container.bind(settings.event, function(event) {
return update();
});
}
this.each(function() {
var self = this;
var $self = $(self);
self.loaded = false;
/* When appear is triggered load original image. */
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img/>")
.bind("load", function() {
$self
.hide()
.attr("src", $self.data(settings.data_attribute))[settings.effect](settings.effect_speed);
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.data(settings.data_attribute));
}
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function(event) {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});
/* Check if something appears when window is resized. */
$window.bind("resize", function(event) {
update();
});
/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold & lt; = $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold & lt; = $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}
return fold & gt; = $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}
return fold & gt; = $(element).offset().left + settings.threshold + $(element).width();
};
$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) & amp; & amp;
!$.leftofbegin(element, settings) & amp; & amp;
!$.belowthefold(element, settings) & amp; & amp;
!$.abovethetop(element, settings);
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() or */
/* $("img").filter(":below-the-fold").something() which is faster */
$.extend($.expr[':'], {
"below-the-fold": function(a) {
return $.belowthefold(a, {
threshold: 0
});
},
"above-the-top": function(a) {
return !$.belowthefold(a, {
threshold: 0
});
},
"right-of-screen": function(a) {
return $.rightoffold(a, {
threshold: 0
});
},
"left-of-screen": function(a) {
return !$.rightoffold(a, {
threshold: 0
});
},
"in-viewport": function(a) {
return $.inviewport(a, {
threshold: 0
});
},
/* Maintain BC for couple of versions. */
"above-the-fold": function(a) {
return !$.belowthefold(a, {
threshold: 0
});
},
"right-of-fold": function(a) {
return $.rightoffold(a, {
threshold: 0
});
},
"left-of-fold": function(a) {
return !$.rightoffold(a, {
threshold: 0
});
}
});
</script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUcyMdKXknHXxrG9ppLRSvSEIcmgHcU-5tE1rlNWStjMp-CjytYatrmACKXE3L1iuEHswgW_f7kgXicYhZ8y4CNgvLSg68CqvFH7GCg_c6eKbBtPicuISJIFJlPo84Hr7qPOtVIhquz8/s1600/grey.gif",
threshold: 200
});
});
</script>
- Langkah terakhir klik Simpan template - selesai !
Loading Page Blogger (Sederhana)
Loading Page Blogger (Sederhana) ini adalah sebuah widget yang hanya menunda waktu Loading baik saat pertama kali membuka Web atau membuka halaman Blog, dengan Script yang boleh dibilang simple.
Langsung saja Caranya
1. Login ke Blogger
2. Edit Template
3. Cari kode </b:skin>
4. Copy Paste kode CSS dibawah ini sebelum Kode Tag </b:skin>
#anarchyta-loader {
position:fixed;
top:0;
left:0;
background:rgba(44, 62, 80, 0.9) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLNYo-OINeMlJZAFhOaw_hqr1UovMBscuvmGlDYm4KG3OuE3k8AIaREL4BHd-XpA9tqYEeESSoouAcsesM4tXfMdB4POybBH-mcLaHiDnkUdjgoVfNlXrO_t3VV2fCzd7b1ff3q8nsBk/s200/load6.gif)no-repeat 50% 50%;
z-index:9999;
text-align:center;
width:100%;
height:100%;
display:none;
}
url(http://goo.gl/mRjMfu)
5. Cari kode
</head>
6. Copy Paste kode Javascript dibawah ini sebelum Kode Tag
</head>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};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}('$(1(){2 3="8://"+9.b.c.d();2 $4=$("a[0^=\'"+3+"\'], a[0^=\'/\'], a[0^=\'./\'], a[0^=\'../\']");$4.5(1(){$(\'#6-7\').e(f).g(h).i(j)});$(\'#6-7\').5(1(){$(k).l()})});',22,22,'href|function|var|siteURL|internalLinks|click|anarchyta|loader|http|top||location|host|toString|fadeIn|1500|delay|6000|fadeOut|1000|this|hide'.split('|'),0,{}))
//]]>
</script>
7. Terakhir cari kode
</body>
dan letakan HTML di bawah ini tepat di atasnya<div id='anarchyta-loader'/>
Kalau udah semua jangan lupa "Save Template" dan lihat penampakannya pada blog Anda. Demikian Artikel mengenai Loading Page Blogger (Sederhana) semoga Anda tertarik untuk menggunakan..
Sunday 16 February 2014
Lorde Dark Blogger Template (Premium)
Lorde Dark Blogger Template ~ responsif blogger template dengan latar belakang gelap dan teks putih. Tema ini sangat user friendly dilengkapi dengan 2 kolom layout dan beberapa widget sidebar yang mengagumkan.
Template Details
- Harga : Rp. 50000 / 5 USD
- Version : 1.0
- Package : Theme Files, PSD & Docs
Features
Tuesday 11 February 2014
Awas ! Bahaya Facebook
Fitur yang ditawarkan:
1. Cara mengetahui password FB teman.
2. Cara mengetahui isi inbox teman.
3. Cara mengganti Facebook Sport, Theme.
4. Cara mengganti tema Facebook, emoji, warna-warni dan mengetahui pengintip profil.
5. How to get Followers + Likes and cool Themes.
6. Facebook Timeline Theme.
7. Dan mungkin akan muncul yang lain-lain lagi.
Saya mohon agar tidak diklik, karena link tersebut menuju sebuah aplikasi auto tag otomatis dalam bentuk script yang melakukan tag foto yang sama kepada SELURUH teman FB anda hingga mereka terpancing untuk klik juga lalu menyebarkan tag-tag dan ribuan tag lagi kepada teman-teman FB mereka.
Sangat jahat, sangat mengganggu dan akan merusak reputasi anda di Facebook karena nama andalah yang tercantum sebagai orang yang telah menyebarkan tag-tag spam itu ke seluruh teman anda.
Tips:
1. Jangan klik link sembarangan saat anda login di FB.
2. Jangan coba-coba script asing yang anda tidak tahu pasti fungsinya saat anda sedang login di Facebook.
3. Jika terlanjur klik atau sengaja mengeksekusi script tertentu, segera ganti password anda untuk berjaga-jaga.
4. Jika ingin melihat komentar-komentar otomatis. Segera cek / lihat di Log Aktivitas
5. Berselancarlah dengan penuh tanggung jawab karena internet bukan hanya untuk anda, tapi juga untuk teman, kerabat, keluarga dan sahabat anda.
6. Jika anda adalah salah seorang korban sebaiknya anda cepat-cepat untuk mengganti password Facebook. dan buat teman-teman yang menggunakan Facebook untuk lebih berhati-hati ya untuk kedepannya.
Mudah-mudahan bermanfaat.
Source : 1ndonesian Blogspot
Friday 7 February 2014
Belastic Responsive Blogger Template
Kef Feature
- SEO Ready
- Desain responsif
- Unlimited warna skema
- Feature Posts widget
- Widget Email berlangganan
- Ringkasan posting dengan thumbnail
- Menu navigasi Drop down
- Artikel terkait dengan thumbnail
- Social Media Sharing
- Breadcrum
- Template Edit Mudah
Konfigurasi Meta Content:
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAMA HERE' name='author'/>
Setting Menu
<a href='#'> Tentang </ a> </ li>
<a href='#'> Kontak </ a> </ li>
<a href='#'> Tutorial </ a> </ li>
Template Blogger gratis ini berlisensi di bawah Creative Commons Attribution 3.0 License, yang memungkinkan penggunaan baik pribadi dan komersial berlisensi.
http://creativecommons.org/licenses/by/3.0/
Jika ada pertanyaan, jangan lupa untuk memberikan komentar di bawah ini. Sekian sharing tenplate malam ini.
Thursday 6 February 2014
Scattered Polaroids Gallery (Tersebar)
Sebuah flat bergaya Polaroid Galeri di mana item-item (di sini saya gunakan foto) yang tersebar secara acak dalam sebuah wadah (Container). Ketika item tertentu dipilih, ia akan bergerak ke tengah sementara Polaroid yang lain akan membuat ruang dengan berpindah ke sisi. Opsional, item dapat memiliki backface yang akan ditampilkan dengan membalik Polaroid saat mengklik navigasi current.
Kita menggunakan struktur berikut untuk galeri:
<section id="photostack-1" class="photostack photostack-start">Tag pada
<div>
<!-- default Polaroid without backside -->
<figure>
<a href="http://goo.gl/Qw3ND4" class="photostack-img">
<img src="img/1.jpg" alt="img01"/>
</a>
<figcaption>
<h2 class="photostack-title">Serenity Beach</h2>
</figcaption>
</figure>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
<!-- Example for different shuffle iteration count -->
<figure data-shuffle-iteration="3">
<!-- ... -->
</figure>
<!-- Example for a "dummy" Polaroid -->
<figure data-dummy>
<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
<figcaption>
<h2 class="photostack-title">Lovely Green</h2>
</figcaption>
</figure>
<!-- ... -->
</div>
</section>
class="photostack-start"
dapat digunakan untuk menampilkan overlay awal pada wadah galeri. Setelah galeri diklik, item akan membuat langkah pertama mereka dan item pertama akan ditampilkan di tengah.Tag pada
class="photostack-back"
dapat digunakan untuk memasukkan beberapa info untuk bagian belakang Polaroid.Tag pada item "dummy" tidak akan menjadi bagian dari galeri yang di lihat. Hal ini dapat berguna dalam kasus di mana hanya sebagian dari koleksi gambar tertentu harus di tampilkan. Bayangkan sebuah artikel tentang perjalanan Anda di mana di setiap bagian Anda menggambarkan lokasi tertentu. Anda akan mengatur item yang tidak relevan sebagai "dummy" dan hanya Polaroid yang spesifik di lokasi tersebut yang dapat di lihat secara rinci. Pada bagian berikutnya Anda akan mengatur set lain pada item "dummy".
Perhatikan bahwa pembungkus utama
div
diatur dengan lebar dan tinggi 100%, yang berarti bahwa gambar akan tersebar di seluruh wadah. Jika kita ingin membuat gambat menyebarkan di ruang dengan kompak, kita juga bisa mengatur dimensi div
yang lebih kecil.Lihatlah beberapa screenshot dari galeri:
Sekian artikel kali ini, Saya harap Anda menikmati Scattered Polaroids Gallery (Tersebar) dan Anda dapat menemukan inspirasi dari artikel ini.
Sumber : http://tympanus.net/codrops/?p=18402
Fullscreen Overlay Effects
Hari ini saya ingin berbagi beberapa inspirasi Overlay fullscreen efek style dengan Anda. Seperti dengan komponen UI, ada tren baru serta fancy efek untuk overlay. Hal khusus tentang Overlay ini adalah bahwa element tersebut tidak memiliki ukuran yang tetap seperti Modal Windows Effect tetapi Overlay kali ini dengan effect Fullscreen, jadi ketika menciptakan efek kita harus memperhitungkannya dan tidak berlebihan. Tapi itu tidak berarti bahwa kita tidak bisa menggunakan beberapa efek segar dan menarik, seperti, misalnya SVG bentuk morphing.
Idenya adalah untuk membuat Fade in overlay dan untuk merotasi apa yang ada di dalamnya sedikit menggunakan effect 3D:
.overlay-hugeinc {Kami menggunakan trik Visibility untuk membuat Overlay menghilang sepenuhnya: kita menggunakan Transition Delay untuk properti visibility yang memungkinkan opacity akan dialihkan terlebih dahulu.
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-hugeinc.open {
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
perspective: 1200px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
transform: translateY(-25%) rotateX(35deg);
transition: transform 0.5s, opacity 0.5s;
}
.overlay-hugeinc.open nav ul {
opacity: 1;
transform: rotateX(0deg);
}
.overlay-hugeinc.close nav ul {
transform: translateY(25%) rotateX(-35deg);
}
Untuk beberapa contoh SVG kita gunakan adalah Snap.svg to morph a path into another one. Untuk "Little Box" Misalnya kita menggunakan SVG dengan beberapa JS untuk mengontrol, tetapi Anda tentu saja dapat juga menggunakan CSS untuk kontrol atau tidak menggunakan SVG sama sekali.
Sekian artikel kali ini, Saya harap Anda menikmati efek ini dan Anda dapat menemukan inspirasi dari effect ini.
Wednesday 5 February 2014
Scrollbar Visibility with jScrollPane
JScrollPane diciptakan oleh Kevin Luck dan Anda dapat membaca lebih lanjut di sini:
JScrollPane - cross scrollbar browser yang styleable dengan jQuery dan CSS
THE MARKUP
Contoh untuk markup yang digunakan dalam demo saya adalah sebagai berikut:<div id="jp-container" class="jp-container">Tag pada
<!-- content -->
</div>
jp-kontainer
tersebut yang akan discroll ke area konten.CSS
Selain style untuk custom scrollbar JScrollPane, kita akan membuat Container Style:.jp-container{
width:500px;
height:400px;
position:relative;
background:#fff;
border:1px solid #D8DFEA;
float:left;
}
JAVASCRIPT
Kita akan menggunakan plugin JScrollPane dengan fungsi baru untuk menampilkan dan menyembunyikan scrollbar:// the element we want to apply the jScrollPane
var $el = $('#jp-container').jScrollPane({
verticalGutter : -16
}),
// the extension functions and options
extensionPlugin = {
extPluginOpts : {
// speed for the fadeOut animation
mouseLeaveFadeSpeed : 500,
// scrollbar fades out after
// hovertimeout_t milliseconds
hovertimeout_t : 1000,
// if set to false, the scrollbar will
// be shown on mouseenter and hidden on
// mouseleave
// if set to true, the same will happen,
// but the scrollbar will be also hidden
// on mouseenter after "hovertimeout_t" ms
// also, it will be shown when we start to
// scroll and hidden when stopping
useTimeout : false,
// the extension only applies for devices
// with width > deviceWidth
deviceWidth : 980
},
hovertimeout : null,
// timeout to hide the scrollbar
isScrollbarHover: false,
// true if the mouse is over the scrollbar
elementtimeout : null,
// avoids showing the scrollbar when moving
// from inside the element to outside, passing
// over the scrollbar
isScrolling : false,
// true if scrolling
addHoverFunc : function() {
// run only if the window has a width bigger than deviceWidth
if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
var instance = this;
// functions to show / hide the scrollbar
$.fn.jspmouseenter = $.fn.show;
$.fn.jspmouseleave = $.fn.fadeOut;
// hide the jScrollPane vertical bar
var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();
/*
* mouseenter / mouseleave events on the main element
* also scrollstart / scrollstop
* @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
*/
$el.bind('mouseenter.jsp',function() {
// show the scrollbar
$vBar.stop( true, true ).jspmouseenter();
if( !instance.extPluginOpts.useTimeout ) return false;
// hide the scrollbar after hovertimeout_t ms
clearTimeout( instance.hovertimeout );
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
}).bind('mouseleave.jsp',function() {
// hide the scrollbar
if( !instance.extPluginOpts.useTimeout )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
else {
clearTimeout( instance.elementtimeout );
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}
});
if( this.extPluginOpts.useTimeout ) {
$el.bind('scrollstart.jsp', function() {
// when scrolling show the scrollbar
clearTimeout( instance.hovertimeout );
instance.isScrolling = true;
$vBar.stop( true, true ).jspmouseenter();
}).bind('scrollstop.jsp', function() {
// when stop scrolling hide the
// scrollbar (if not hovering it at the moment)
clearTimeout( instance.hovertimeout );
instance.isScrolling = false;
instance.hovertimeout = setTimeout(function() {
if( !instance.isScrollbarHover )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
// wrap the scrollbar
// we need this to be able to add
// the mouseenter / mouseleave events
// to the scrollbar
var $vBarWrapper = $('<div>').css({
position : 'absolute',
left : $vBar.css('left'),
top : $vBar.css('top'),
right : $vBar.css('right'),
bottom : $vBar.css('bottom'),
width : $vBar.width(),
height : $vBar.height()
}).bind('mouseenter.jsp',function() {
clearTimeout( instance.hovertimeout );
clearTimeout( instance.elementtimeout );
instance.isScrollbarHover = true;
// show the scrollbar after 100 ms.
// avoids showing the scrollbar when moving
// from inside the element to outside,
// passing over the scrollbar
instance.elementtimeout = setTimeout(function() {
$vBar.stop( true, true ).jspmouseenter();
}, 100 );
}).bind('mouseleave.jsp',function() {
// hide the scrollbar after hovertimeout_t
clearTimeout( instance.hovertimeout );
instance.isScrollbarHover = false;
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment
// don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
$vBar.wrap( $vBarWrapper );
}
}
},
// the jScrollPane instance
jspapi = $el.data('jsp');
// extend the jScollPane by merging
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();
Tuesday 4 February 2014
Modern Block Quote Styles
Style
yang menarik dan modern untuk Blockquote. Kita akan menggunakan teknik yang berbeda untuk menciptakan tampilan yang unik.Hari ini kita akan membuat beberapa style blockquote menggunakan tekstur, lingkaran, dan pseudo-elemen, kita dapat menaruh beberapa style ke kutipan dan testimonial.
HTML
<div class="mb-wrap mb-style-1">Tag
<div class="mb-thumb"></div>
<blockquote cite="http://www.gutenberg.org/ebooks/1257">
<p>Never fear quarrels, but seek hazardous adventures.</p>
</blockquote>
<div class="mb-attribution">
<p class="mb-author">Alexandre Dumas</p>
<cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
</div>
</div>
<div class="mb-thumb">
tidak akan tampil dalam semua contoh. Dalam contoh 3 kita benar-benar akan menambahkannya sebagai element child ke div dengan class mb-atribusi.CSS
@font-face {Kita menambahkan font ikon yang akan kita gunakan dalam beberapa contoh. Kita juga menetapkan beberapa default style untuk pembungkus kutipan dan unsur-unsur dalam. Perhatikan, bahwa ada beberapa default style untuk beberapa elemen, jadi kita ingin me-resetnya.
font-family: 'icons';
src: url("font/icons.eot");
src:
url("font/icons.eot?#iefix") format('embedded-opentype'),
url("font/icons.woff") format('woff'),
url("font/icons.ttf") format('truetype'),
url("font/icons.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}
/* Let's set and reset some common styles */
.mb-wrap {
width: 300px;
margin: 20px auto;
padding: 20px;
position: relative;
}
.mb-wrap p{
margin: 0;
padding: 0;
}
.mb-wrap blockquote {
margin: 0;
padding: 0;
position: relative;
}
.mb-wrap cite {
font-style: normal;
}
Contoh 1
Contoh pertama akan memiliki latar belakang Skin and Thumbnail Circle untuk dekorasi.
Jadi, mari kita buat seluruh wrapper blockquote pertama. Kita akan memberikan tekstur latar belakang dan mendefinisikan lebar:
.mb-style-1 {Thumbnail rounded akan ditarik dengan menggunakan nilai top negatif. Dengan perbatasan semi-transparan, kita akan menambahkan beberapa css:
background: #363738 url(../images/dark_leather.jpg) repeat top left;
margin-top: 100px;
padding-top: 100px;
width: 400px;
color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
border-top: 10px solid #fff;
}
.mb-style-1 .mb-thumb {Untuk menambahkan tanda kutip, kita akan menggunakan font ikon included before dan pseudo-classes :before. Kita menetapkan warna gelap dengan teks shadow:
display: block;
width: 180px;
height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
.mb-style-1 blockquote:before,Style untuk elemen teks sebagai berikut:
.mb-style-1 blockquote:after {
font-family: 'icons';
position: absolute;
font-size: 70px;
top: -95px;
color: #242526;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.mb-style-1 blockquote:before{
content: '\275d';
}
.mb-style-1 blockquote:after{
right: 0px;
content: '\e800';
}
.mb-style-1 blockquote p {Dan itu adalah salah satu contoh! Mari kita lihat yang berikutnya
font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 25px;
border-bottom: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
padding: 10px 10px 20px 10px;
text-align: center;
margin: 0 0 20px 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.mb-style-1 .mb-attribution {
text-align: right;
}
.mb-style-1 .mb-author{
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
color: #1b1c1d;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.mb-style-1 cite a{
color: #f0f0f0;
font-style: italic;
font-family: Cambria, Georgia, serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}
.mb-style-1 cite a:hover{
text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
}
Contoh 2
Contoh 2 akan memiliki gaya asimetris mewah dengan elemen bulat pada sisi kiri. Di atas kita ingin memberikan sebuah lingkaran dengan tanda kutip. Jadi mari kita menambahkan beberapa padding pada blockquote untuk mendorong ke bawah:
.mb-style-2 blockquote{Circular pseudo-element memiliki CSS berikut:
padding-top: 150px;
}
.mb-style-2 blockquote:after {Kita akan memposisikan di tengah secara horisontal dengan menetapkan kiri untuk 50% dan memberikan margin kiri negatif setengah dari lebarnya.
font-family: 'icons';
background: rgba(235,150,108,0.8);
width: 130px;
height: 130px;
border-radius: 50%;
content: '\275e';
position: absolute;
font-size: 70px;
line-height: 130px;
text-align: center;
top: 0px;
left: 50%;
margin-left: -65px;
color: rgba(255,255,255,0.5);
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
Sekarang, mari kita tambahkan lingkaran dengan menggunakan pseud-elemen element. Kita memberikan lebar dan tinggi 500px, border-radius 50% dan hanya di kiri:
.mb-style-2 blockquote:before{Paragraf dari blockquote akan ditetapkan untuk inline karena kami ingin memisahkan baris:
content: '';
width: 500px;
height: 500px;
border-radius: 50%;
border-left: 5px solid rgba(235,150,108,0.1);
position: absolute;
top: 0px;
left: -50px;
z-index: -1;
}
.mb-style-2 blockquote p {Dan terakhir, mari kita membuat style untuk elemen tek:
font-family: Baskerville, Georgia, serif;
font-size: 28px;
font-style: italic;
background: rgba(255,255,255,0.5);
display: inline;
color: rgba(235,150,108,0.8);
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
line-height: 46px;
box-shadow: 0 -6px 0 rgba(235,150,108,0.2);
}
.mb-style-2 .mb-attribution {
text-align: right;
}
.mb-style-2 .mb-author{
text-transform: uppercase;
font-size: 18px;
padding-top: 10px;
font-weight: bold;
color: #d48158;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.mb-style-2 cite a{
color: #d7aa94;
font-style: italic;
}
.mb-style-2 cite a:hover{
color: #d48158;
}
Contoh 3
Untuk gaya ketiga, kita ingin memperbesar wrapper dan menetapkan bayangan kotak untuk blockquote tersebut:
.mb-style-3 {Kita akan menambahkan sebuah panah kecil menunjuk ke bawah menggunakan teknik yang ditawarkan di CSS Arrow Please!
width: 500px;
}
.mb-style-3 blockquote{
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow:
inset 0 2px 0 rgba(188, 147, 200, 0.7),
-5px -4px 25px rgba(0, 0, 0, 0.3);
}
.mb-style-3 blockquote:after,Paragraph ini akan memiliki style berikut ini:
.mb-style-3 blockquote:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.mb-style-3 blockquote:after {
border-top-color: #ffffff;
border-width: 10px;
left: 65%;
margin-left: -10px;
}
.mb-style-3 blockquote:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
.mb-style-3 blockquote p {Sekarang, kita akan menambahkan tanda kutip ke kiri dengan pseudo-element: before:
font-family: 'Alegreya', serif;
font-size: 24px;
color: #b4b4b4;
font-weight: 400;
line-height: 40px;
font-style: italic;
text-indent: 100px;
position: relative;
}
.mb-style-3 blockquote p:before{Bagian link dan penulis akan memiliki padding kanan lebih besar karena praktis:
content: '\201C';
font-family: serif;
font-style: normal;
font-weight: 700;
position: absolute;
font-size: 175px;
top: 0px;
left: -105px;
color: rgba(188, 147, 200, 1);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}
.mb-style-3 .mb-attribution {Tag div pada thumbnail akan menjadi lingkaran kecil dengan gambar penulis sebagai latar belakang
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
}
.mb-style-3 .mb-thumb {Dan style teks sebagai berikut:
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url(../images/bronte.jpg) no-repeat center center;
position: absolute;
right: 10px;
bottom: 5px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
.mb-style-3 .mb-author{Contoh yang lain bisa Anda lihat di Demo dan untuk CSS bisa Anda download.
font-family: 'Alegreya SC', serif;
font-weight: 700;
font-size: 18px;
color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
.mb-style-3 cite a{
font-family: 'Alegreya', serif;
font-weight: 700;
font-style: italic;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.mb-style-3 cite a:hover{
color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
Sekian tutorial mengenai Modern Block Quote Styles semoga menambah tampilan yang bagus dan dapat memberikan inspirasi kepada Anda.