Amplop Cokelat

Cara Render-Blocking Javascript Dari Jquery -Ada masalah dengan loading blog Anda?? Nah kali ini akan saya share kepada sobat bloggers bagaiman cara mengurangi loading blog yang lambat dengan menambahakn tag async pada javascript jquery blog.
Cara ini adalah untuk mengurangi loading blog yang agak "lemot" akibat dari penggunaan jquery pada blog kita.Karena hal ini akan muncul pada saat pengecekan di tools page speed, dan akan muncul pesan "Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas". Untuk mengatasi masalah tersebut, maka di perlukan render pada javascript dengan menggunakan atribut HTML async pada Jquery-nya.
berikut ini kode asli dari javascript jquery yang belum di pasang atribut html async: <scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'type='text/javascript'/>
lalu kita tambahkan atribut html async pada javascript di atas :<scriptasync='async'src='https://a…

Cara Membuat Popular Post Keren dan Berwarna

tips dan cara pasang atau membuat widget popular post jadi keren dan berwarna di blog ialah dengan memodifikasi widget popular post menjadi keren dan warna - warni dengan memanfaatkanCSS Pseudo Element dan nth-child sehingga tampilan widget popular post di blog menjadi lebih menarik untuk dilihat. Berikut ini cara buat atau pasang widget popular post/artikel populer di blog:

Cara-nya sangatlah mudah, hanya dengan menambahkan kode css di template blog Anda. Disini saya sediakan beberapa style yang bisa Anda pilih sesuai keinginan.




cara buat atau pasang widget popular post/artikel populer di blog 1. Anda login ke akun blogger Anda
2. Kemudian Tambahkan Gadget >> Entri Populer, lalu Anda atur agar popular post hanya menampilkan judul saja.

 3. Anda copy salah satu kode css di bawah ini dan taruh di atas kode ]]></b:skin> atau </style> dan Simpan.

STYLE 1 ( demo pada blog ini)


/*Custom Popular Post*/.PopularPostsul,.PopularPos…

Cara Mengatasi Error Ups Itu Kesalahan Pada OpenID - sobat bloggers , ada banyak blogger yang mengalami error saat menggunakan komentar OpenID. sebelumnya baca Cara Menggunakan Komentar OpenID di Blog, nah pada penerapanya terjadi eror...yang mengakibatkan komentar OpenId tidak berfungsi dengan baik.


Mengapa masalah ini bisa terjadi?? Dimana letak kesalahan-nya??

mungkin kebanyakan dari sobat bloggers pernah bertanya demikian, saat berkomentar menggunakan OpenID ada muncul pesan eror "Ups itu kesalahan" . sobat pasti kesal sekali, termasuk saya.  saya pun sering di buat kesal gara-gara menggunakan OpenID,  dan akhirnya saya mengetahui kalau salah satu penyebab utama-nya adalah eror pada OpenId milik server blogger itu sendiri, jadi bukan karena link OpenId di blog kita.
tapi tenang berikut ini saya berikan solusi cara Mengatasi Error Ups Itu Kesalahan Pada OpenID .

salah satu cara agar bisa menggunakan layanan OpenID adalah dengan menggunakan Stack Exchange Open ID .  Ber…

Cara Menggunakan Komentar OpenID di Blog  - sobat bloggers, salah satu nilai tambah untuk blog kita agar ramai pengunjung adalah dengan menggunakan komentar open id. Salah satu permasalahan yang kemudianj muncul adalah di saat  ingin berkomentar menggunakan OpenID tetapi tidak bisa dan akan muncul gambar peringatan diatas kolom komentar.Oleh karena itu saya share untuk Anda cara  Menggunakan Komentar OpenID di Blog.

Fungsi dan Manfaat OpenIDOpenID adalah sebuah fitur bagi user (pengguna) yang memungkinkan pengguna/seseorang untuk masuk kedalam berbagai layanan menggunakan identitas (ID). Sehingga pengguna tidak perlu lagi membutuhkan username dan passsword untuk masuk pada sebuah layanan di internet. OpenID biasanya berbentuk sebuah url atau link yang didapatkan dari layanan OpenID. Ada beberapa layanan penyedia OpenID seperti AOL, Google, Microsoft, MySpace, PayPal, dan Yahoo.Fungsi dan Manfaat OpenID itu sendiri sudah jelas untuk mempermudah seseorang (user) untuk masuk atau m…

Tips dan Cara Validasi HTML5 Pada Halaman Postingsobat bloggers ,salah satu cara agar artikel blog kita cepat terindek oleh google adalah dengan membuat posting blog menjadi valid html5 . Hal ini dalam membuat sebuah template tidak di anjurkan untuk membuat blog menjadi valid html5 , akan tetapi lebih bagus supaya bisa valid html5.


bagaimana agar posting bisa valid html5 ?? berikut beberapa panduan yang bisa Anda terapkan di blog masing-masing :)

Tips dan Cara Validasi HTML5 Pada Halaman Posting Breadcrumbs
blog kita sudah harus terpasang dengan navigasi breadcums yang seo friendly.Gambar         Apabila ada mengupload photo pada postingan maka akan tampak kode seperti:

<divclass="separator"style="clear: both; text-align: center;"> <ahref="http://4.bp.blogspot.com/-AnSiWEHAEFM/U4uHIDp6psI/AAAAAAAABuM/ibABsciX4Wk/s1600/head.jpg"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src=…

Solusi Mengatasi Loading Blog dengan Asynchronous Font Awesome
sahabat BloggerNTT - salah satu cara agar loading blog menjadi cepat adalah dengan cara Asynchronous Font Awesome . Asynchronous Font Awesome dalam bahasa Indonesia juga disebut dengan sinkron font awesome , font awesome sekarang banyak di gunakan oleh kebanyakan blogger. Dan salah satu masalah klasik adalah pada saat loading blog yang memakan waktu. Apabila kita cek speed loading blog pada " google page speed" maka akan muncul pesan "menghilangkan javascript dan css yang memblokir perenderan di konten paruh atas" . Ini menyebabkan loading blog kita berkurang,

Oleh sebab itu, salah satu cara mengatasi loading blog pada font awesome adalah dengan cara kompress javascript.

Cara Mengatasi Loading Blog dengan Asynchronous Font Awesome  Login ke akun blog Anda >> pilih Edit HTML >> cari kode </body>

lalu copy kode javascript di bawah ini dan taruh di atas kode </body>

<script type=…

Pasang Tombol Konversi Kode dan Emoticon di Komentar Blog
sobat bloggers, kembali saya share tips blogger untuk Anda. Kali ini akan saya bahas mengenai cara membuat atau cara pasang tombol konversi kode dan emoticon di kolom komentar blog. Cara pemasangannya sangatlah mudah :) ..ahanya perlu kejelian sobat untuk mengikuti tutorial ini.



Tips dan Cara Pasang Tombol Konversi Kode dan Emoticon di Blog :Login ke akun Blogger Andamasuk ke menu edit HTMLAnda copy  kode css di bawah ini dan taruh di atas kode ]]></b:skin> atau </style> dan Simpan. #comments .pencet { color : #fff; margin-right : 10px; padding : 4px 15px; background-color : #e74c3c; font-size : 12px; font-weight : 400; text-transform : none; border-radius : 4px; text-decoration : none; outline : none; box-shadow : 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px #333; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.3); transition : background-color 1s 0s ease-out; …

Cara Banned Komentar Spammer dengan Jquery - sobat bloggers, salah satu hal yang paling menjengkelkan dalam dunia blogger adalah " Spammer". Nah si pelaku "spammer" ini suka memberikan komentar tidak sesuai dengan topik pada artikel yang di bahas..hal ini membuat pemilik blog geram... :( . Oleh sebab itu salah satu cara atau tips membanned komentar blogger dengan bantuan jquery. Fungsi jquery ini adalah untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user lain tidak merasa terganggu.

Tips dan Cara Banned Komentar Spammer di Blog dengan Jquery : Anda copy kode di bawah ini, lalu masuk ke edit HTML dan cari kode </body> . Letakkan kode di bawah ini tepat di atas kode </body>.

<script type='text/javascript'> //<![CDATA[ var spamlist=[ 'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer' /* URL Profile spamer */ ]; for(var v=0; v<spamlist.length; v=v+1){ $(&…

Cara Buat Background Posting Berbeda - Beda di Homepage , sobat bloggers, Cara Buat Background Posting Berbeda - beda di Homepage  sangatlah mudah. Seperti pada tampilan home blog Anaktimor17, tips ini mudah untuk di terapkan. Tips atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog yang suka dengan tampilan seperti ini bisa menggunakan cara berikut ini.


Cara Buat Background Posting Berbeda - Beda di Homepage

Copy kode javascript di bawah ini dan taruh di atas kode </head> .

<b:ifcond='data:blog.url == data:blog.homepageUrl'><scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5'type='text/javascript'/><script type='text/javascript'>//<![CDATA[functionget_random_color(){var letters ='0123456789ABCDEF'.split('');var color ='#';for(var i =0; i <6; i++){ color += letters[Math.round(Math.random()*14)];…

Cara Pasang Post Info di Bawah Judul Artikel, sobat bloggers tips ini adalah solusi bagi blog yang belum mempunyai post info di template blog. Dengan cara ini blog juga akan mudah di deteksi oleh google.Berikut ini cara pemasangan-nya di blog.






Cara Pasang Post Info di Bawah Judul Artikelmasuk ke akun blog Andapilih menu edit HTMLanda cari kode ini <divclass='post-header-line-1'>jikaanda tidak menemukan kode di atas silahkan cari kode yang ini <divclass='post-header'> lalu copy kode html di bawah ini dan taruh di bawah salah satu kode di atas. :)
<font style='background:transparent url(http://1.bp.blogspot.com/--fsYbwHKiKM/T0uOGw-hdTI/AAAAAAAAA-s/QBcDITiSCEs/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(http://3.bp.blogspot.com/-1MEONG9XUgA/T0uOF8ICEdI/AAAAAAAAA-k/VBwTnA8PXbI/s1600/clock_icon.gif) no-repeat scroll top left…

Pasang Artikel Terkait dan Subscribe Email Dibawah Postingan Terbaru - sobat bloggers, salh satu pendukung pada struktur template blog adalah adanya widget " artikel terkait" . Nah kali ini akan saya bagikan tips cara pasang artikel terkait dan subscribe email di bawah posting terbaru. Untuk pemasangannya silahkan ikuti langkah-langkahnya di bawah ini :

Cari kode ]]></b:skin> atau </style> dan copy kode css di bawah ini dan taruh tepat di atas salah satu kode tersebut.
/* -- RELATED POST AND SUBSCRIBE EMAIL -- */#subs-and-redat{margin:0;padding:15px;background:#292929url(http://4.bp.blogspot.com/-KOeHvb-_Fs4/UyrtMveVGaI/AAAAAAAAOnU/HIi6vAYVKFU/s1600/footer-imege.png) no-repeat top left;border-radius:3px;}.kotakleft{background:none;width:44%;margin:0;padding:15px;display:block;float:left}#related-posth4{font-family:Oswald, Arial, sans-serif;font-size:22px;font-weight:normal;text-transform:uppercase;color:#eee;margin:0015px;margin-top:-15px;}#related-postli{backgr…

Cara Membuat Banner Iklan 300x250 dengan CSS3 di Blogger
Sobat bloggers, kali ini akan saya share tips blogger tentang cara buat banner iklan di blog. Nah kali ini saya bagikan tips dari blog" Tutornesia" yang sudah di modifikasi menggunakan Css3. Cara pasang-nya juga gampang tinggal di taruh pada laman gadget baru.

Langkah pemasang widget banner iklan 300X250 sebagai berikut:
 Anda buka menu Tata Letak>>HTML/JavaScript. Copy code javascript di bawah ini dan tarus di kolom gadget html/javascript tersebut


<styletype='text/css'scoped='scoped'>.ads{margin:0 auto;padding:0;position:relative;width:100%}.ads-box{background:#21514F;width:100%;height:250px;margin:0;padding:0;text-align:center;transition:all .9s ease-in-out;}.ads-box:hover{background:#000;transition:all .9s ease-in-out;}.tags1{font:45px Oswald;text-shadow:02px 1px #eee;color:#f6f6f6;padding:40px 00;}.tags2{font:16px Oswald;color:#fff;text-transform:uppercase;font-weight:bold;padding:7px 0;te…