Mengetahui Berat Loading Font Blog

Mengetahui Berat Loading Font Blog Yang Digunakan - Percaya tidak kalau font yang dipasang dan digunakan di dalam blog ternyata mempengaruhi loading blog? Semakin banyak font yang digunakan didalam blog, maka loading blog akan semakin lambat. Baik jenis maupun tipe font yang digunakan juga akan mempengaruhi loading blog

Tidak hanya memasang banyak widget blog yang akan memperberat loading blog tapi jenis dan tipe font blog seperti tebal, miring, garis bawah dan jenis font yang biasa digunakan oleh beberapa teman-teman blogger seperti Droid font, Oswald font, Comfortaa font, Open sans font, Roboto font, Ubuntu font dan Lato font

Untuk tipe font blog seperti tebal, miring atau garis bawah bukan penandaan dari penggunaan setiap huruf yang ditulis didalam artikel yang biasa digunakan sebagai penandaan kata kunci atau keywords tapi tipe dari font itu sendiri yang memang memiliki bentuk tebal, miring atau garis bawah

Lalu bagaimana cara mengetahui berat loading blog

• Buka https://www.google.com/fonts
• Lihat, pilih, atau cari font yang ingin diketahui loadingnya, Misalkan disini saya memilih font Open Sans
  
• Pilih font tersebut dan masukkan kedalam koleksi font dengan cara klik tombol Add to Collection
• Maka font akan terpilih dan masuk kedalam kolom koleksi seperti berikut ini
  
  selanjutnya klik Use
• Maka akan muncul keterangan bentuk font yang digunakan. Lihat bagian kanan, akan terdapat barometer yang menunjukkan berat loading font yang akan di load oleh blog
  
• Coba pilih berbagai bentuk font pada pilihan yang disediakan dan lihat hasilnya, maka semakin banyak bentuk dari font yang dipilih maka loading blog akan bertambah berat

Jadi, gunakanlah font blog sesuai kebutuhan agar loading blog tetap terjaga, terimakasih

Tag Facebook Open Graph untuk Blogspot

<meta property='og:title' expr:content='data:blog.pageTitle'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta property='og:type' content='article'/>
<b:else/>
  <meta property='og:type' content='website'/>
</b:if>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<!-- Large image, original size -->
<b:if cond='data:blog.postImageUrl'>
  <meta property='og:image' expr:content='data:blog.postImageUrl'/>
<b:else/>
  <!-- Thumbnail image, 72 × 72 pixels -->
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta property='og:image' expr:content='data:blog.postThumbnailUrl'/>
  <b:else/>
    <!-- Default, no image. Use favicon or your own image URL -->
    <meta property='og:image' expr:content='data:blog.blogspotFaviconUrl'/>
  </b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else/>
  <meta property='og:description' content='{{DEFAULT SITE DESCRIPTION GOES HERE}}'/>
</b:if>
<meta property='og:site_name' expr:content='data:blog.title'/>
<!--

Optional. Read more → Insights for your Facebook App, Domain or Page

<meta property='fb:admins' content='{{FB ADMINS}}'/>
<meta property='fb:app_id' content='{{APP ID}}'/>

-->

Lainnya

• Insights for your Facebook App, Domain or Page
• Open Graph Namespace Declaration: HTML with XMLNS or Head Prefix?
• Facebook Open Graph Namespace?
• The Open Graph Protocol

Efisien dengan `inherit`

Terkadang kita menemui sebuah saat dimana kita harus membuat sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap memiliki warna yang sama. Bagian yang paling sering mendapatkan kondisi seperti ini adalah ada pada bagian header sebuah halaman web:

<header class="blog-header">
  <h1 class="blog-title">
    <a href="/">Blog Title</a>
  </h1>
  <p class="blog-slogan">Blog slogan goes here.</p>
</header>

Pada web-web standar, umumnya bagian ini memiliki sebuah sikap yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:

<header class='blog-header'>
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <h1 class='blog-title'>
      <a expr:href='data:blog.url'>Blog Title</a>
    </h1>
  <b:else/>
    <h1 class='blog-title'>Blog Title</h1>
  </b:if>
  <p class='blog-slogan'>Blog slogan goes here.</p>
</header>

Memastikan agar warna elemen judul tetap sama di mana saja itu penting agar semuanya terlihat konsisten. Katakanlah kita akan membuat warna judul blog di atas menjadi hijau:

.blog-header h1 {color:green}

Ini akan berhasil jika kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan berubah menjadi sama dengan warna tautan karena teks judul sekarang terbungkus oleh tautan yang posisinya berada di dalam elemen judul.

Untuk mengatasi masalah tersebut, biasanya kita akan melakukan hal ini:

.blog-header h1 {color:green}
.blog-header h1 a {color:green}

Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:

.post-title {
  font:normal normal 20px/1.4 "Open Sans",Sans-Serif;
  margin:0 0 .5em;
  text-shadow:none;
  color:#5686D6;
}

.post-title a,
.post-title a:focus,
.post-title a:hover,
.post-title a:active {
  color:#5686D6;
  text-decoration:none;
}

Ini tidak efisien, karena jika suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah kode warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi jika posisinya tidak berdekatan seperti contoh di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.

“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value

Menggunakan nilai inherit bisa menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:

.blog-header h1 {color:green}
.blog-header h1 a {color:inherit}

Dengan begitu, setiap kali kita mengubah warna elemen judul pada contoh di atas, maka warna tautan di dalamnya akan selalu mengikuti.

Contoh lain ada pada masalah warna border. Terkadang kita menemui sebuah kasus dimana kita harus membuat sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita bisa mewarnai semua border cukup pada elemen induknya saja:

Lihat Demo

Contoh lain lagi adalah mengenai cara paling efisien untuk mengubah tipe fon pada elemen-elemen formulir menjadi sama dengan tipe fon pada halaman:

button,
input,
select,
textarea {font:inherit}

Lihat Demo

Adsense Ditolak & Tidak Disetujui, Solusinya?

Adsense Ditolak & Tidak Disetujui, Solusianya? - Beberapa minggu ini atau hampir 3 bulan lebih aplikasi yang saya ajukan ke pihak Google Adsense masih saja ditolak alias tidak disetujui. Padahal blog yang saya ajukan adalah blog ini (Panduantemplateblog.com), sebuah blog yang sejak awal tidak menayangkan iklan dari manapun kecuali iklan dari teman-teman yang berminat untuk memasang banner di blog ini

Padahal saya pernah membuat sebuah artikel tentang panduan google adsense, namun panduan tersebut belum berhasil saya terapkan secara penuh kedalam blog ini. Buktinya, blog ini ditolak dan tidak disetujui oleh Google Adsense. Dari sekian penyebab tidak disetujuinya blog ini, pun sudah saya coba untuk memperbaikinya dan mengajukannya kembali, termasuk anjuran yang diberikan oleh pihak Adsense melalui email. Namun masih saja ditolak dan tidak disetujui :(

Entah apa penyebab sebenarnya blog ini tidak disetujui oleh pihak Google, saya pun berpikir "Ternyata blog yang memiliki original konten tidak serta merta langsung diterima menjadi blog publisher di Google Adsense. Sekalipun blog tersebut sudah memiliki trafik ataupun peringkat.." ternyata "Situs tidak sesuai dengan kebijakan Google"

Dan dari pada pusing mengurusi adsense, saya coba alternatif lainnya. Yaitu menjadi publisher yang lain. Toh masih banyak yang lebih mudah dari Google Adsense dan juga lebih mudah menghasilkan hanya dari sekedar klik. Terimakasih buat Google Adsense yang telah meninjau blog ini

Mendapatkan Ukuran Folder/Direktori

Fungsi ini akan menunjukkan ukuran sebuah folder/direktori dengan cara menghitung jumlah total ukuran semua berkas yang ada di dalamnya.

// http://stackoverflow.com/a/21409562/1163000
function get_directory_size($path) {
    $size = 0;
    $path = realpath($path);
    if($path !== false) {
        foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path, FilesystemIterator::SKIP_DOTS)) as $object) {
            $size += $object->getSize();
        }
    }
    return $size; // in bytes
}

Penggunaan

echo (get_directory_size('path/to/folder') / 1024) . ' KB';

Mengganti Kolom Komentar Alternatif Di Blogger

Mengganti Kolom Komentar Alternatif Di Blogger - Jika dibandingkan dengan WordPress, sebenarnya Blogger memiliki kelebihan yang tidak bisa dimiliki oleh WordPress yaitu terdapat pada kolom komentar masing-masing platform tersebut

Semua tahu kalau WordPress memiliki tampilan kolom komentar yang hanya seperti itu, sejak dulu sejak pertama kali diluncurkan tahun 2003, tampilan kolom komentar WordPress tidak pernah berubah. Hanya seperti itu saja, ada kolom nama, email, website dan kolom komentar. Bagaimana dengan kolom komentar Blogger atau Blogspot? Lebih menarik dan lebih lengkap karena di Blogger lebih lengkap penggunaan identitas yang terdapat pada kolom komentar tersebut, ada nama, ada openID, ada website, ada email dan bisa menggunakan akun di WordPress, LiveJournal, TypePad, AIM dan bagaimana dengan WP? Tentunya tidak bisa menggunakan akun Blogger untuk berkomentar di WordPress

Meskipun kedua platform tersebut memiliki kelebihan dan kekurangan, namun masih ada yang lebih menginginkan fitur-fitur tambahan yang ada didalam kolom komentar tersebut dan sebagai alternatif dipilih beberapa penyedia layanan komentar yang secara gratis bisa didapat. Dan berikut beberapa layanan yang digunakan untuk mengganti kolom komentar alternatif di Blogger dan sebagian juga bisa dipasang di WordPress

Facebook
Sebagai media sosial yang banyak digunakan, facebook juga menyediakan berbagai fitur yang berguna yang bisa di pasang di blog dan salah satu fitur yang banyak digunakan adalah komentar facebook. Untuk memasang komentar facebook di Blogger, silahkan langsung menuju pengembangnya di facebook di https://developers.facebook.com/docs/plugins/comments/

Google+
Google plus tidak berdiri sendiri, sebagai salah satu layanan sosial media, sudah banyak yang bisa terintegrasi dengan salah satu produk Google yang mulai populer ini. Dengan mulai populernya Google+, semakin banyak yang menggunakan Google+ untuk di pasang di blog, baik tombol Google+ ataupun Komentar Google+.

Untuk memasang komentar Google plus di Blogger, silahkan lihat tata caranya di https://support.google.com/blogger/answer/2981015?hl=en&ref_topic=3007636 atau cari panduannya di search engine. Untuk pengguna WordPress, gunakan pluginnya di http://wordpress.org/plugins/google-plus-comments/

Disqus
Suah mengenal Disqus? Selain sebagai berita sosial khususnya komunitas, Disqus juga menyediakan fitur kolom komentar yang juga sering banyak digunakan. Bahkan beberapa pengguna blog seperti Blogger atau WP, mengganti kolom komentar blog mereka dengan kolom komentar Disqus

Kolom komentar Disqus memiliki fitur threaded, RSS, update melalui email dan login melalui Facebook, Google+ dan Twitter. Dan juga bisa berkomentar dengan menyertakan gambar dan video. Untuk memasang kolom komentar Disqus di Blogger, klik Disqus.com

LiveFyre
Sebagai media sosial, Livefyre juga menyediakan fitur kolom komentar yang bisa di pasang di blog. Dalam fitur ini, Livefyre merupakan saingan terdekat dari Disqus, dan beberapa situs besar seperti Enganget dan Mashable pernah menggunakan Livefyre untuk kolom komentar blog mereka.

Bagaimana cara memasang komentar Livefyre di blog? Klik http://web.livefyre.com/comments/ dan ikuti petunjuknya disana :)

Intense Debate
Jika Anda memiliki akun di WordPress.com, maka Anda sudah bisa menggunakan Intense Debate karena sosial media ini merupakan anak dari WordPress dan selain sebagai sosial media, Intense Debate juga menyediakan kolom komentar yang bisa dipasang di Blogger

Namun untuk memasang komentar Intense Debate ada sedikit kerumitan dan tidak serta merta harus dipasang begitu saja kedalam Blogger dan jika sudah terpasang maka komentar bawaan blog atau komentar pihak ketiga lainnya akan hilang dan tidak berfungsi. Jika Anda tertarik untuk memasang Intense Debate kedalam blog, silahkan klik http://intensedebate.com/ Dan untuk cara pasangnya, akan saya update diartikel berikutnya

Vicomi
Untuk yang satu ini mungkin kurang begitu familiar dengan Anda karena Vicomi merupakan layanan media yang tergolong masih baru. Meskipun baru, Vicomi sudah memiliki fitur yang begitu lengkap dan mudah dipasang kedalam blog, mau pasang Vicomi? Klik http://www.vicomi.com dan ikuti langkah-langkahnya disana :)

Catatan: Untuk menggunakan penyedia layanan komentar blog diatas, silahkan buatlah akun terlebih dahulu. Selain Intense Debate, semua penyedia layanan komentar diatas bisa dipasang bersamaan

Jika Anda tertarik untuk mengganti kolom komentar alternatif di Blogger, silahkan pilih salah satu atau beberapa layanan diatas sesuai dengan minat Anda. Untuk saran, saya lebih cenderung memilih Facebook, Disqus, dan Google+.

Membuat Widget Latest Updated Untuk Blogger

Widget Latest Updated adalah widget yang menampilkan daftar artikel yang terakhir diperbaharui/latest updated. Widget ini juga sangat membantu pengunjung dalam memantau artikel yang terkahir Anda perbaharui. Anda juga bisa menggunakan koleksi widget lainnya Widget Recent Posts, Widget Random Posts, Widget Most Commented, Widget Recent Posts By Tag dan Widget Recent Comments

Cara Memasang Widget Latest Updated Untuk Blogger

1. Pertama simpan dahulu CSS ini diatas kode ]]></b:skin> atau </style>

/*Latest Updated*/
li.update {list-style: none;height:auto;overflow:hidden}
li.update a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
li.update a:hover{color:#859ce6}
.imgupdate{float:left; margin:0 10px 10px 0}
.imgupdate:hover{opacity:0.7}
.tgl-com {display:block;font-size:16px;margin-top:5px;font-size:16px}

2. Silakan salin dan simpan kode ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Terakhir Diperbaharui by Infokmu.com
function updatedPosts(a){if(document.getElementById("updated-posts")){var e=a.feed.entry,title,img,link,date,content="",o=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],ct=document.getElementById("updated-posts");for(var i=0;i<5;i++){for(var j=0;j<5;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t,pd=e[i].published.$t.substring(0,10).split("-");if("media$thumbnail"in e[i]){img=e[i].media$thumbnail.url}else{img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4ovyrVDh46wLtezlBTalulWE3Xzg5rkYxktkkCsoIje0TKLDHV-6LnbesprbdXC3uzgVflfEU5BFr3Ft1pl1aeWV7xAryFsWAkYhTa2ble48tQ7s_d_FV_c0gH1GkpIvyFK07tjfH04t/s70-c/KM+Icon.png"}content+='<li class="update"><a href="'+link+'" target="_blank" title="'+title+'"><img src="'+img.replace(/\/s72-c/,"/s70-c")+'" class="imgupdate" alt="'+link+'" height="70px" width="70px"/></a>';content+='<strong><a href="'+link+'" target="_blank" title="'+title+'">'+title+'</a></strong><span class="tgl-com" datetime="'+pd.join("-")+'">  '+(pd[2]+" "+o[(parseInt(pd[1],10)-1)]+" "+pd[0])+'</span></li>'}ct.innerHTML=content}}function getScript(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;documenhttp://jsfiddle.net/#savet.body.appendChild(s)}getScript("/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=5&callback=updatedPosts");
//]]>
</script>

3. Kemudian simpan kode ini pada widget blogger HTML/JavaScript.

<ul id="updated-posts"></ul>

Demo