Friday, 28 February 2014

Pengertian Meta Tag dan Tag Untuk SEO



Pengertian Meta Tag itu apa sih ? So, dalam artikel ini marilah kita ulas sedikit penjelasan dan juga fungsi dari meta tag ataupun tag ini. Pastinya Anda juga sudah seringkali mendengar istilah ini. Dan mungkin jika ada yang belum jelas khususnya bagi seorang pemula sebaiknya anda pahami saja penjelasan berikut ini : 

Pengertian Tag 

Tag yaitu satu kata atau kata-kata perintah yang diolah didalam dokumen html. Nyaris sama juga dengan kelompok kata, tag dipakai untuk mengklasifikasikan sebuah  artikel maupun content didalam sebuah situs. Tag berbentuk lebih fleksibel apabila dibanding dengan kelompok kata lainnya. Umumnya Tag akan dipakai lewat cara yang lebih spesifik sebagai satu kata kunci atau keyword satu halaman yang spesifik di suatu website/blog. Dalam satu halaman artikel atau tulisan umumnya diberikan banyak kata sinonim serta juga banyak tag didalamnya. 

Pengertian Meta Tag 

Meta tags yaitu kode-kode html yang ada dibagian halaman pada suatu situs. Tak seperti tag html yang lain, meta tags tidak nampak di halaman tulisan atau halaman situs, hingga umumnya membuat pengunjung tidak melihatnya. 
Meta tags yang tidak sama mempunyai fungsi yang tidak sama pula, tetapi dengan umum dari keduanya daoat dipakai untuk berikan informasi tambahan tentang kondisi atau isi dari halaman website atau blog pada robot di mesin pencari. 

Pengertian Meta Tags Description 

Meta tags description yaitu perintah didalam wujud kode html didalam template blog/web yang ada pada masing-masing halamannya. Fungsi dari meta tag description ini yaitu untuk mengemukakan ringkasan informasi dari satu judul halaman postingan pada Search Engine di mana ringkasan tersebut cuma tampak pada halaman index pencarian. Contohnya hasil pencarian oleh spider google ( googlebot ) serta search engine yang lain hingga bisa di mengerti oleh user yang tengah melacak judul artikel tersebut serta relevan dengan yang mereka cari.  Description yang relevan dengan judul artikel atau postingan lebih berpeluang memperoleh banyak clickthrough ( seringkali di klik ). 

Yang di maksud dengan meta tag kata kunci (keyword) yaitu keyword - keyword yang mewakili judul serta gambaran halaman menulis yang tengah di cari melewati search engine di internet serta jika kata kunci (keyword) tersebut cocok dengan judul serta gambaran menulis Anda, maka judul artikel Anda-lah yang nampak di halaman index pencarian. Kata kunci (keyword) sama juga dengan tag. 

Didalam kaitannya dengan search engine optimization ( SEO ), google lebih memercayakan meta description. Untuk pada yahoo search lebih memercayakan tag atau kata kunci (keyword).

Cuma segitu yang bisa saya terangkan pada waktu ini perihal pengertian meta tagdan tag serta fungsinya serta jika ada kekeliruan, diinginkan sekali koreksi dari anda khususnya beberapa master of seo. Semoga artikel ini sedikit membantu dan bisa berguna..!

Good Luck !!

Wednesday, 26 February 2014

Cara Membuat Emoticon Pada Komentar Blog

Dalam membuat emotion ini terkadang mememui kegagalan, dan kegagalan tersebut dikarenakan tidak cocoknya script yang digunakan dengan template yang mau dipasangnya. Dan ini di akibatkan beberapa faktor ketidak cocokan namun menurut saya faktor tersebut adalah karena template tersebut sudah mengalami perubahan / telah di edit sehingga sudah tidak asli lagi sebagai template bawaan. Kalau ini di pasang pada template bawaan maka tutorial dibawah ini akan bekerja baik tanpa merubah hal lainnya yang ada di template. Yang paling utama untuk keberhasilan membuat emoticon ini yaitu penentuan kode comment-holder dimana kalau pada template sobat ada kode tersebut maka di jamin ini akan berhasil.

Emoticon Blogger With Yahoo Smyle

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.

    Sobat bisa menambakan gambar dan kode Emoticon namun perlu diperhatikan adalah posisi peletakan kode dan URL emotionnya antara yang atas dengan yang bawah. URL emoticon dapat diganti dengan gambar apapun sesuai dengan keinginan sobat. Sedangkan apabila sobat mau menambahkan emoticonnya maka sobat tinggal menambahkannya pada kode atas dan bawah, caranya sobat tinggal mengcopy saja kode tersebut kemudian letakan dibawahnya dan ganti URL emoticon dan kodenya.

    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

    Cara Agar Postingan Cepat Terindex Google cara ini merupakan tambahan dalam pengoptimalan seo off page. Mengapa cuman tambahan? Karena tanpa melakukan tahap ini pun artikel kita dapat terindex oleh mesin pencari terutama Google. Tetapi, butuh waktu beberapa hari, mungkin 2 sampai 3 hari. Maka di sarankan menggunakan tehnik ini agar mempercepat pengindexkan ke mesin pencari.

    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

    Flow Anarchyta Responsive Blogger Template Valid HTML5 dan CSS3 - Malam ini saya akan membagikan Template Gratis buat Anda semua. Secara keseluruhan template ini hampir sama dengan yang saya gunakan, pada Postingan Homepage saya terinspirasi dari BKI tetapi disini saya menggunakan Javascript untuk membuat thumbnail berwarna.

    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'>
    <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>
    Untuk membuat Blog tetap Valid HTML 5 dan SEO 100% setelah Anda menambahkan Widget hapus Kode ini pada --> Edit HTML
    <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

    Selamat malam buat semua sahabat Blogger. Kali ini saya akan berbagi cara tentang membuat Auto Read More Thumbnail tanpa Javascript, maka otomatis blog anda loadingnya akan lebih cepat dari sebelumnya karena tidak ada javascript yang di gunakan. Tutorial ini sebenarnya udah banyak di Google, tapi apa salahnya untuk berbagi pengetahuan..
    Untuk demo Anda bisa melihat template yang saya gunakan ini, atau lebih jelasnya seperti ini Screen Shootnya ...

    Auto Read More Thumbnail Tanpa Javascript

    Jika Anda saat ini telah menggunakan auto read-more versi javascript, Anda bisa memodifikasinya pada formulir HTML Temlpate, temukan kode ini:
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    Note's
    Jangan lupa untuk menghapus script auto read-more link yang biasanya terletak di atas </head>

    Kalau udah ketemu hapus semua kode tersebut kemudian Anda ganti dengan kode di bawah ini
    <b:if cond="data:post.firstImageUrl">
    <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>
    Jika template blog Anda masih berupa posting bisa berikut tutorial lengkap membuat Auto Read More Thumbnail Tanpa Javascript

    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 != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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 == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    </b:if>
    Keterangan:
    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: "http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif",
    threshold: 200
    });

    });
    </script>
    • Langkah terakhir klik Simpan template - selesai !
    Dengan menyelesaikan langkah diatas Anda telah berhasil menginstall lazy image load diblog Anda. Akhir kata semoga tips yang mudah ini bermanfaat buat Anda dan jangan lupa untuk memberi 1+, like atau share posting ini.

    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(http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif)no-repeat 50% 50%;
    z-index:9999;
    text-align:center;
    width:100%;
    height:100%;
    display:none;
    }

    Note's
    Untuk gambar loading Anda bisa mengganti pada kode ini 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.

    Lorde Dark Blogger Template



    Template Details

    • Harga : Rp. 50000 / 5 USD
    • Version : 1.0
    • Package : Theme Files, PSD & Docs

    Features

    Responsive Design
    Lorde Dark Blogger Template sepenuhnya responsif, Ini cocok pada setiap ukuran layar dan memberikan pengalaman desktop pada perangkat mobile.
    Search Engine Optmized
    Secara default adalah blogger SEO Optimized. Namun kita telah melakukan beberapa tweak untuk melakukan blog yang lebih baik di mesin pencari.
    Cross Browser Compatibility
    Lorde Dark Blogger Template bekerja baik di browser Google Chrome, Firefox, Internet Explorer, Opera, dan Safari.
    Retina Ready
    Everything looks supre crisp. Tombol, icon dan bahkan gambar terlihat bagus pada layar pixel high-density pixel seperti halnya pada Apple's retina screens.
    Well organized code
    Anda dapat dengan mudah mengubah apa pun karena Code terorganisir

    Tuesday, 11 February 2014

    Awas ! Bahaya Facebook

    Bahaya Facebook !

    Beberapa hari terakhir banyak di sebar secara otomatis foto screenshot yang ribuan orang ditag dan meminta anda untuk klik lalu melakukan Ctrl+A, Ctrl+C lalu Ctrl+V di konsol browser anda.

    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

    Di sini kita dengan template lain yang cukup responsif, Belastic Blogger Template, pemesanan template ini untuk bulan Februari 2014. Profesional? ya. Mudah untuk menyesuaikan, sederhana dan kompleks pada saat yang sama, cara yang bagus untuk meningkatkan artikel Anda, dan dapat Anda gunakan pada blog pribadi, berita dan bahkan fotografi.



    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>
    Untuk mengatur Feature Posts, Ikuti instruksi yang ada di dalam zip pack.

    Harap tidak menghapus kredit footer. Author menghabiskan beberapa jam untuk membuat template blogger ini. Sehingga Anda dapat menggunakannya untuk blog Anda.

    Lisensi:
    Template Blogger gratis ini berlisensi di bawah Creative Commons Attribution 3.0 License, yang memungkinkan penggunaan baik pribadi dan komersial berlisensi.
    Namun, untuk memenuhi 'atribusi' lisensi, Anda diminta untuk menjaga credit link di footer tetap utuh yang Author template ini. Untuk rincian lebih spesifik tentang lisensi, Anda dapat mengunjungi url di bawah ini:
    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.

    Scattered Polaroids Gallery
    Malam ini saya ingin berbagi percobaan sebuah galeri kecil dengan Anda. Galeri yang dihasilkan menunjukkan beberapa gambar Polaroid dengan judul, diputar secara acak dan menyebar dalam sebuah wadah. Bila menavigasi gambar, yang sekarang akan dipindahkan ke tengah dan Polaroid yang lain akan berpindah ke sisi. Opsional, kita akan memiliki bagian belakang untuk setiap Polaroid yang dapat dilihat dengan mengklik dot saat navigasi lagi. Indikasi untuk belakang yang sudah ada akan menjadi panah yang diputar pada titik. Setelah dot (Navigation Optional) diklik lagi, dot itu sendiri akan berbalik sehingga Polaroid itu sendiri menampilkan keterangan di bagian belakang.

    Kita menggunakan struktur berikut untuk galeri:
    <section id="photostack-1" class="photostack photostack-start">
    <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>
    Tag pada 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:

    Scattered Polaroids Gallery

    Scattered Polaroids Gallery

    Scattered Polaroids Gallery

    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

    Beberapa overlay sederhana maupun kreatif style dan efek. Dari slide overlay ke viewport menggunakan SVG bentuk morphing, kita menjelajahi beberapa efek untuk overlay fullscreen setelah kemarin di terapkan ke Fullscreen Layout with Page Transitions.

    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.

    Fullscreen Overlay Effects



    Idenya adalah untuk membuat Fade in overlay dan untuk merotasi apa yang ada di dalamnya sedikit menggunakan effect 3D:
    .overlay-hugeinc {
    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);
    }
    Kami menggunakan trik Visibility untuk membuat Overlay menghilang sepenuhnya: kita menggunakan Transition Delay untuk properti visibility yang memungkinkan opacity akan dialihkan terlebih dahulu.

    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

    Kadang-kadang bisa sangat berguna untuk menyembunyikan scrollbar dalam sebuah situs web dan hanya terlihat ketika pengguna benar-benar membutuhkannya. The real-time aktivitas pakan di Facebook adalah contoh untuk perilaku seperti itu. Hari ini saya ingin menunjukkan kepada Anda bagaimana menggunakan JScrollPane dan memperpanjang dengan fungsi untuk menyembunyikan scrollbar dan menampilkannya ketika Container onmouse hover / saat mouse diarahkan pada content yang di targetkan menggunakan Scrollbar.

    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">
    <!-- content -->
    </div>
    Tag pada 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();
    Terakhir semoga tutorial ini dapat memberikan Anda inspirasi.

    Tuesday, 4 February 2014

    Modern Block Quote Styles

    Mari kita membuat beberapa Style yang menarik dan modern untuk Blockquote. Kita akan menggunakan teknik yang berbeda untuk menciptakan tampilan yang unik.

    Modern Block Quote Styles



    Hari ini kita akan membuat beberapa style blockquote menggunakan tekstur, lingkaran, dan pseudo-elemen, kita dapat menaruh beberapa style ke kutipan dan testimonial.
    Note
    Harap dicatat: hasil dari tutorial ini hanya akan bekerja sebagaimana dimaksud dalam browser yang mendukung CSS sifat masing-masing element.

    HTML

    <div class="mb-wrap mb-style-1">
    <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>
    Tag <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 {
    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;
    }
    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.

    Contoh 1

    Modern Block Quote Styles

    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 {
    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;
    }
    Thumbnail rounded akan ditarik dengan menggunakan nilai top negatif. Dengan perbatasan semi-transparan, kita akan menambahkan beberapa css:
    .mb-style-1 .mb-thumb {
    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);
    }
    Untuk menambahkan tanda kutip, kita akan menggunakan font ikon included before dan pseudo-classes :before. Kita menetapkan warna gelap dengan teks shadow:
    .mb-style-1 blockquote:before,
    .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';
    }
    Style untuk elemen teks sebagai berikut:
    .mb-style-1 blockquote p {
    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)
    }
    Dan itu adalah salah satu contoh! Mari kita lihat yang berikutnya

    Contoh 2

    Modern Block Quote Styles

    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{
    padding-top: 150px;
    }
    Circular pseudo-element memiliki CSS berikut:
    .mb-style-2 blockquote:after {
    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);
    }
    Kita akan memposisikan di tengah secara horisontal dengan menetapkan kiri untuk 50% dan memberikan margin kiri negatif setengah dari lebarnya.

    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{
    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;
    }
    Paragraf dari blockquote akan ditetapkan untuk inline karena kami ingin memisahkan baris:
    .mb-style-2 blockquote p {
    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);
    }
    Dan terakhir, mari kita membuat style untuk elemen tek:
    .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

    Modern Block Quote Styles

    Untuk gaya ketiga, kita ingin memperbesar wrapper dan menetapkan bayangan kotak untuk blockquote tersebut:
    .mb-style-3 {
    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);
    }
    Kita akan menambahkan sebuah panah kecil menunjuk ke bawah menggunakan teknik yang ditawarkan di CSS Arrow Please!
    .mb-style-3 blockquote:after, 
    .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;
    }
    Paragraph ini akan memiliki style berikut ini:
    .mb-style-3 blockquote p {
    font-family: 'Alegreya', serif;
    font-size: 24px;
    color: #b4b4b4;
    font-weight: 400;
    line-height: 40px;
    font-style: italic;
    text-indent: 100px;
    position: relative;
    }
    Sekarang, kita akan menambahkan tanda kutip ke kiri dengan pseudo-element: before:
    .mb-style-3 blockquote p:before{
    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);
    }
    Bagian link dan penulis akan memiliki padding kanan lebih besar karena praktis:
    .mb-style-3 .mb-attribution {
    text-align: right;
    padding: 20px 100px 20px 20px;
    position: relative;
    }
    Tag div pada thumbnail akan menjadi lingkaran kecil dengan gambar penulis sebagai latar belakang
    .mb-style-3 .mb-thumb {
    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);
    }
    Dan style teks sebagai berikut:
    .mb-style-3 .mb-author{
    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);
    }
    Contoh yang lain bisa Anda lihat di Demo dan untuk CSS bisa Anda download.
    Sekian tutorial mengenai  Modern Block Quote Styles semoga menambah tampilan yang bagus dan dapat memberikan inspirasi kepada Anda.