Mengaktifkan Jangan Lacak Halaman Custom Domain

Setelah saya berganti domain menjadi domain TLD dari yang awalnya hanya menggunakan blogspot.com, ada permasalahan ketika saya ingin mengktifkan fitur Jangan Lacak Halaman Anda Sendiri, padahal sebelumnya ketika menggunakan blogspot.com pasti bisa mengktifkan fitur ini.

Fitur ini berfungsi agar ketika kita membuka blog kita sendiri menggunakan laptop sendiri, maka pageviewsnya tidak akan terhitung dalam pageviews blogger. Selalu muncul tampilan seperti berikut ketika saya mengaktifkan fitur ini sobat.

Error tersebut memang masalah yang akan timbul ketika kita menggunakan custom domain, nah akhirnya saya menemukan cara agar pageviews blog kita tidak bertambah (terhitung) ketika kita sendiri yang membukanya. Cara ini saya dapatkan dari blog +Arlina Fitriyani .

Pertama pastekan kode dibawah ini pada address bar browser sobat.

www.Domain_Anda.com/b/statsBlockingCookie?action=SET&callback=__gwt_jsonp__.P2.onSuccess

Ganti kode www.Domain_Anda.com dengan domain yang sobat miliki, dan jika berhasi akan tampil tampilan seperti berikut.

// API callback
__gwt_jsonp__.P2.onSuccess({"status":"yes"});

Selesai, sobat bisa coba tampilkan sendiri blog sobat, seharusnya tidak akan ada tampilan yang terhitung. Agar trik ini berhasil saya sarn kan untuk menghapus cache browsernya. Karena beberapa browser tidak langsung berfungsi dengan cara ini, tapi saya berhasil dengan GoogleCrome tanpa menghapus cache browsernya.

 Semoga bermanfaat.. :)

Read More

Memasang Syntax Highlighter Untuk Pre Code

Gambar by Ficri Pebriana

Saya sudah keliling-keliling mbah google, dan baru ketemu cara memasang Syntax Highlighter di blogger ini dengan cara yang lebih simpel. Karena apa..? Karena tidak perlunya kita menentukan class pada setiap kode yang kita masukkan di blog.

Lagian pula terlalu banyak sudah kode yang saya gunakan pada artikel-artikel saya yang lainnya. Dan saya males untuk mengeditnya satu persatu. Makanya saya mencari alternatifnya dengan hanya mengandalkan tag pre dan code, atau biasa ditulis seperti berikut.

 <pre><code> Kode css, html, javascript, jquery atau yang lainnya </code></pre> 

atau bisa juga seperti ini hasilnya.

.smoothscroll-top {
  position:fixed;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  text-align:center;
  z-index:99;
  background-color:#09c;
  color:#fff;
  width:47px;
  height:44px;
  line-height:44px;
  right:25px;
  bottom:-25px;
  padding-top:2px;
  border-radius:none;
  transition:all 0.5s ease-in-out;
  transition-delay:0.2s;
}

.smoothscroll-top:hover {
  background-color:#3eb2ea;
  color:#fff;
  transition:all 0.2s ease-in-out;
  transition-delay:0s;
}

.smoothscroll-top.show {
  visibility:visible;
  cursor:pointer;
  opacity:1;
  bottom:25px;
}

.smoothscroll-top i.fa {
  line-height:inherit;
}

Itu sekalian sebagai contoh aja sobat, semua kode akan bewarna khusus, nah ini menjadi lebih terlihat profesional dan keren kan. Untuk sobat blogger yang menginginkannya, caranya cukup mudah. Sobat ikuti tutorial singkat berikut ini.

Tambahkan css berikut ini tepat diatas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Syntax Highlighter */
pre,i[rel="pre"] {
  padding:.8em 1em;
  margin:0;
  background-color:#2f3741;
  border-left:4px solid #40627E;
  font-size:11px;
  color:#839496;
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  line-height:1.4em;
  position:relative;
  white-space:pre;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}

pre.line-number {
  background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixo9sjf7QFyyKt21lpbA2WxyTmBT42Mb8kucAwOU3Nk0KkeFSNhkm8Jn4sYo11fHvUzx-njv-FgOe6G3hMpgSkR4Woa0TJXysklU8b-8KQQqfTJGPxrKGN-LyQDqcCdUbEZYNX6kmy4gQ/s1600/new-line-number.png)no-repeat top left;
  padding-left:54px;
  border-left:none;
}

pre.line-number:after {
  content:"";
  width:35px;
  height:8px;
  background-color:#39424e;
  bottom:0;
  left:0;
  position:absolute;
}

pre[data-codetype="CSS"] {
  border-left-color:#5fbbba;
}

pre[data-codetype="HTML"] {
  border-left-color:#4fc1eb;
}

pre[data-codetype="JavaScript"] {
  border-left-color:#ff6c60;
}

pre[data-codetype="JQuery"] {
  border-left-color:#99c262;
}

pre.line-number[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  margin:-11px -13px 10px -54px;
  padding:8px 12px;
  font-family:Oswald,Arial,Sans-serif;
  font-size:12px;
  text-transform:uppercase;
  background-color:#41749f;
  color:white;
}

pre.line-number[data-codetype="CSS"]:before {
  background-color:#a9d86e;
}

pre.line-number[data-codetype="HTML"]:before {
  background-color:#4fc1eb;
}

pre.line-number[data-codetype="JavaScript"]:before {
  background-color:#ff6c60;
}

pre.line-number[data-codetype="JQuery"]:before {
  background-color:#99c262;
}

code {
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  font-size:13px;
  color:#d14;
}

#comments code {
  color:#bbbb6d;
}

pre code {
  padding:0 !important;
  color:#a3a49a;
  background:none !important;
  border:none !important;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
  padding-right:4px;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color:#2DCFF2;
  font-style:italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color:#E6D90C;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color:#EB4F4F;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
  color:#03C425;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color:#1B6FC3;
}

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
  color:#D94CEA;
}

pre .deletion {
  color:#dc322f;
}

pre .tex .formula {
  background:#073642;
}
</style>
</b:if>

Kode CSS tersebut telah saya sesuaikan agar hanya terpanggil ketika dalam posting, jadi akan mengurangi beban blog sobat, terutama dalam hompagenya. Selanjutnya tambahkan kode dibawah ini tepat dibawah </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Setelah itu Simpan Template dan lihat semua kode yang telah sobat tentukan dengan tag pre dan code pasti akan memiliki warna-warna yang menarik, dan terlihat profesional kan sobat.

Karena google code sudah akan ditutup pada 2016, maka saya berikan alternatif js nya, dengan mengganti kode yang terakhir tadi dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0B_ljWXOPMwNGfkQ3MHVzcFZNN0tXSXNEb2FjQmJ2cHZ1N1BwSHlKbG8xUTg4dmpzSEN0bEU/Syntax.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Semoga bermanfaat. Jika ada yang bingung sobat bisa komentar yah. O ya, tuh kode-kode saya dapatkan di blog kang Ficri Pebriana, ini alamat artikelnya. Terima kasih telah berbagi dan saya temukan di google. Kode-kode diatas sudah saya sesuaikan agar hanya terload pada postingan, sehingga tidak menambah beban homepage. :)

Read More

Posisi Jquery Untuk Mengatasi Render Blocking Javascript

Saya telah lama mencari solusi rendering JS yang dipengaruhi oleh jquery. Karena rendering dari jquery ini sangat lumayan membebani loading blog. Saya pernah mencoba cara dengan dengan menambahkan atribut async='async' seperti berikut.

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun ini memiliki kelemahan, karena jquery tidak terload di hompage, seperti sudah dijelaskan di blog teman saya obesitystrike.blogspot.com cara ini tidaklah efektif.

Cara lainnya adalah dengan meletakkan script jquery yang biasa diletakkan diatas </head>
kita letakkan diatas </body>  seperti berikut.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>
</body>

Yang perlu diperhatikan dengan cara ini ialah, tidak semua script jquery itu bisa dibungkus dengan //<![CDATA[ hingga //]]>, jadi bisa Anda perhatikan dan sesuaikan dengan scriptnya agar bisa berjalan dengan baik.

Penampakan yang saya maksud ialah seperti ini.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>

<script type='text/javascript'>

<!-- Semua Script Jquery Lainnya disini -->

</script>
</body>

Yang perlu diingaat ialah semua script yang memerlukan jquery itu harus berada dibawah script jquery <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> seperti yang telah saya gambarkan pada rangkaian kode diatas.

Untuk mengetahui script jquery biasanya akan mirip seperti berikut ini.

$(function (){// TinyNav.js 1
      $('#topnav').tinyNav({active:'current'});// TinyNav.js 2
      $('#navigation').tinyNav({active:'current'})});

Atau tanda yang paling nyata adalah selalu diawali dengan $ pada scriptnya. Jika Anda menggunakan external link pada sebuah script, maka Anda perlu membuka scriptnya dan lihat pakah benar itu script jquery dengan melihat ciri-cirinya. Semoga bermanfaat.. ^_^

Read More

Mengatasi Article lacks heading Validasi HTML5

Saya beberapa hari ini sibuk mempelajari membuat blog menjadi lebih ringan, dan sekali gus belajar validasi HTML5 dengan panduan http://validator.w3.org/. Saya hanya ingin mendokumentasikan apa yang saya coba aja sobat, karena siapa tahu ada sobat blogger yang membutuhkannya juga. Saya cuma penasaran aja mengatasi warning ini sobat, karena sebetulnya validasi HTML5 ini tidak begitu penting, karena googlepun tidak valid html5 dan cenderung banyak errornya. Karena menurut saya, pak google ingin mesin pencarinya bisa diakses dengan baik oleh browser yang belum valid html5, tentunya ini akan sangat menguntungkan pihak google.

Error ini secara penuh akan tertulis seperti berikut:

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Untuk mengatasinya sobat bisa mencari sumber warning ini di Dashboard > Template > Edit HTML dan gunakan ctrl+f untuk memudahkan pencarian, nah pada kasus ini yang warning adalah bagian berikut ini (mungkin bagian error di template sobat berbeda).

<article id='posting'> 
....
.... 
....
</article> 

Nah, yang membuat warning itu adalah elemen article itu sobat, karena seharusnya menggunakan elemen div untuk valid html5. Jadi seharusnya seperti berikut ini.

<div id='posting'> 
....
.... 
....
</div> 

Setelah itu, coba sobat cek di http://validator.w3.org/, apakah warningnya sudah hilang sobat? Karena yang saya sudah hilang warningnya, walaupun di template sobat berbeda, yang jelas elemnnya tidak bisa kita ganti, dan harus menggunakan setandar html5, dengan kasus ini yaitu elemen <article> ... </article> menjadi <div> ... </div>.

Sekian artikel tentang Mengatasi Article lacks heading Validasi HTML5, yang perlu sobat tahu Saya ini menggunakan template mas sugeng, dan saya berencana tidak akan ganti template lagi, palingan hanya designnya aja yang akan berubah. Semoga bermanfaat. ^_^

Read More

Beberapa Batasan untuk Satu Akun Blogger

Sebelum ini saya ada mendengar bahwa pembuatan blog di blogger itu tidak terbatas atau unlimited, maka karena itu banyak para blogger yang membuat blog sebanyak mungkin guna percobaan mereka ataupun memang kepentingan mereka.

Menurut saya perilaku ini tidaklah pantas, karena sub domain blogspot itu tak seharusnya jadi ajang spam. Gunakanlah dengan bijak sobat, namun pihak blogger telah melakukan beberapa batasan penting walaupun tidak begitu efektif sobat, karena ini hanya berlaku untuk satu akun blogger. Sebenarnya batasan ini tidak terlalu penting, namun apa salahnya buat sobat agar tahu.

Jadi apa aja batasan-batasan itu mas ?

1. Jumlah Blog

Yang pertama ialah jumlah blog, seperti yang telah saya singgung dalam awal artikel ini sobat, bahwa pihak blogger telah memberikan batasan-batasannya terkait akun blogger. Nah, disini pihak blogger telah membatasi setiap Akun blogger dengan 100 blog.

Dengan artian setiap akun hanya bisa paling maksimal membuat blog dengan sub domain blogspot itu dengan jumlah 100 blog. Dan jika ingin membuat blog lagi, sobat akan menerima notice guna mengurangi blog untuk membuat blog yang baru. Namun itu hanya berlaku untuk satu akun saja sobat, jadi jika sobat memiliki 2 akun blogger, berarti sobat bisa membuat blog dengan subdomain blogspot sebanyak 200 blog.

Lagian buat apa memiliki banyak blog akalu tidak ada untungnya, termasuk tidak menghasilkan ? Saya aja mengurusi 2 blog saja kewalahan, dan sampai bingung mau buat postingan.

2. Jumlah Entri

Untuk yang satu ini blogger tidak membatasi jumlah entri yang sobat buat dalam satu akun, bahkan jika entri atau postingan yang sobat buat tidak melanggar aturan google, maka postingan tersebut hanya sobat yang bisa menghapusnya.

Dengan peraturan ini kita bisa mengambil kesimpulan bahwa google sangat menyenangi artikel yang banyak dalam suatu blog. Dengan tidak adanya batasan jumlah postingan suatu blog.

3. Ukuran Entri dan Ukuran Laman

Untuk Ukuran Entri tidak ada batasan berapa besar sizenya sobat, namun pihak blogger sangat membatasi untuk Ukuran Laman utama dalam suatu blog dengan 1 MB sobat. 

Yang dimaksud disini ialah laman utama sobat kan bisa dibatasi berapa entri, untuk lebih jelasnya sobat bisa masuk DISINI. Dari link itu sobat bisa mengerti yang dimaksud ukuran laman utama itu yang mana. Karena jika laman utama sobat lebih dari itu maka akan ada error yang menyatakan:

006 harap hubungi Dukungan Blogger

Dengan batasan ini juga memberi manfaat untuk blog sobat yaitu menambah loading blog sobat agar lebih cepat sobat. Saran dari saya sih, tampilkan paling banyak 8 entri pada home page.

4. Jumlah Komentar

Untuk jumlah komentar juga tidak memiliki batasan seperti jumlah entri tadi sobat, dan komentar yang telah ada juga akan tersimpan pada akun blogger sobat, jadi jangan kawatir hilang sobat. Hehe

5. Jumlah dan Ukuran Gambar

Sebuah blog tanpa gambar menjadi kurang bewarna sobat, maka dari itu pihak blogger tidak membatasi untuk ditampilakn pada sebuah blog, hanya saja blogger hanya membatasi sumber daya sobat dengan total sebesar 1 GB yang talh dibagi pakai ke Web Picasa.

Nah bagaimana dengan ukuran gambar sobat ? Untuk versi desktop atau jika sobat mengupload menggunakan perangkat komputer maupun laptop tidak ada batasan dalam hal Ukuran gambar. Namun hanya untuk versi mobile akan dibatasi sebesai 250 KB per gambar.

Ini saya rasa dimaksudkan agar para pengguna yang menggunakan perangkat mobile tidak terlalu dibebani sobat. Lagian pula kurang nyaman juga mengupload menggunakan mobile device, menurut saya. :)

6. Aggota Tim

Yang dimaksud disini ialah, bahwa sebuah blog hanya boleh memiliki pengguna atau bisa disebut juga tim sebanyak 100 anggota dalam sebuah blog sobat. Jadi satu sub domain blogger akan dibatasi anggotanya sebanyak 100 akun sobat.

7. Jumlah Label

Untuk jumlah label sebenarnya dibatasi sobat, namun sobat tidak perlu kawatir karena pembatasannya lumayan banyak juga sobat sebanyak 2.000 label unik, atau berbeda-beda. Dan per entri hanya boleh memiliki 20 label sobat.

Lagian pula buat apa banyak-banyak label sobat, ntar lupa lagi. Saya aja lupa sobat beberapa label, walaupun telah tertulis dengan baik. :D

8. Deskripsi Blog

Untuk deskripsi blog ini blogger membatasi sebanyak 500 karakter, lagian pula yang terbaca cuma beberapa aja sobat. Ini tidak terlalu penting menurut saya.

9. Informasi Profil atau About Me

Dalam profil blogger kita bisa memberikan informasi atau data diri kita sobat, namun disini phak blogger telah mebatasi sebanyak 1.200 karakter, lagian pula buat apa banyak-banyak menuliskan ini. Kalau juga ada yang ngefans pasti di obrak abrik sendiri profil kita dari facebook, G+ maupun sosial media yang lain.

10. Faforite dan Minat Profil

Sama seperti uraian no.9 sobat, namun untuk ini pihak blogger telah membatasi sebanyak 2.000 karakter sobat.

Sebenarnya batasan-batasan yang diberikan pihak blogger adalah batasan yang baik buat kita para blogger, lagian pula sesuatu yang berlebihan itu kan tidak baik sobat. Semoga bermanfaat.. ^_^

Referensi : https://support.google.com/blogger/answer/42348?hl=id

Read More