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

Membuat Widget Recent Comments Untuk Blogger

Widget Recent Comments adalah widget yang menampilkan komentar terkahir yang masuk. Widget ini sangat bermanfaat bagi pengunjung untuk mengetahui komentar terakhir yang masuk. Ini juga bisa menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda. Anda juga bisa menggunakan koleksi widget lainnya Widget Recent Posts, Widget Random Posts, Widget Most Commented dan Widget Recent Posts By Tag.

Cara Memasang Widget Recent Comments Untuk Blogger

1. Silakan salin dan simpan kode ini diatas kode </head>

<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 5;
var characters  = 60;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||5,characters=characters||40;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<strong><a href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a></strong>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" - ";commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

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

<script>
document.write("<script src=\"/feeds/comments/default?alt=json&callback=recent_comments\"><\/script>");
</script>

Demo

Pengaturan

Icon	Teks
var numComments	Silakan atur dan ganti dengan jumlah komentar yang ingin ditampilkan
var characters	Silakan atur jumlah karakter yang ingin dimunculkan pada isi komentar

Tampilan Facebook Lebih Responsive

Tampilan Facebook Lebih Responsive, memang dari dulu tampilan facebook sudah responsive tapi kemarin saat saya membuka akun facebook saya melalui ponsel jadul saya yaitu Nokia E63, ternyata tampilan facebook sudah sangat bagus, lebih bagus dari tampilan sebelumnya dan semakin responsive

Saya memang menggunakan sebuah ponsel jadul dalam menentukan responsivenya tampilan facebook karena untuk ponsel-ponsel sekarang rata-rata semuanya sudah mendukung fitur yang lebih bagus dan lebih baik. Tampilan facebook yang responsive ini tidak hanya mencakup tampilan yang seperti biasanya tapi sudah mencakup beberapa fitur yang dimiliki oleh facebook yang bisa langsung tampil secara penuh di layar ponsel saya yang jadul tersebut

Dengan adanya tampilan yang super responsive dari facebook ini akan lebih memudahkan pengguna dalam membuat status di akun facebook masing-masing. Dan tidak menutup kemungkinan, suatu saaat nanti pihak facebook akan lebih memudahkan penggunanya dalam menggunakan semua fitur-fitur yang ada didalam facebook, bahkan termasuk dalam menampilkan iklan yang lebih responsive lagi

Bagaimana dengan Google Plus yang notabene merupakan saingan terdekat dari facebook? Sejauh ini Jika saya menggunakan Google+ melalui ponsel yang sama, hanya sebatas melakukan update status saja dan beberapa fitur seperti emoticon juga belum tersedia di Google+ sampai dengan saat ini. Adakah perbaikan dari Google+ untuk menyaingi tampilan facebook yang lebih responsive?

Lettering PHP

Versi PHP untuk lettering.js

function lettering_PHP($text) {
    $results = '<span class="word-1 char-group">';
    $skip = false;
    $entity_open = false;
    $entity_close = false;
    $index_word = 2;
    $index_letter = 1;
    $letters = preg_split('#(?<!^)(?!$)#u', $text);
    foreach($letters as $letter) {
        $entity_open = $letter == '&';
        $entity_close = $letter == ';';
        if($letter == '<' || $entity_open) $skip = true;
        if($letter == '>' || $entity_close) $skip = false;
        if( ! $skip && $letter == ' ') {
            $results .= '</span> <span class="word-' . $index_word . ' char-group">';
            $index_word++;
        } else {
            if( ! $skip && $letter != '<' && $letter != '>' && $letter != '&' && $letter != ';' && $letter != ' ') {
                $results .= '<span class="char-' . $index_letter . '">' . $letter . '</span>';
                $index_letter++;
            } else {
                if($entity_open) {
                    $results .= '<span class="char-' . $index_letter . '">';
                }
                $results .= $letter;
                if($entity_close) {
                    $results .= '</span>';
                    $index_letter++;
                }
            }
        }
    }
    return '<span aria-label="' . str_replace(array('"', '\''), array('&quot;', '&#039;'), strip_tags($text)) . '"><span aria-hidden="true" class="word-group">' . $results . '</span></span></span>';
}

Penggunaan

<h2><?php echo lettering_PHP('Lorem Ipsum Dolor Sit Amet'); ?></h2>

Sebelum

<h2>Lorem Ipsum Dolor Sit Amet</h2>

Sesudah

<h2>
  <span aria-label="Lorem Ipsum Dolor Sit Amet">
    <span aria-hidden="true" class="word-group">
      <span class="word-1 char-group">
        <span class="char-1">L</span>
        <span class="char-2">o</span>
        <span class="char-3">r</span>
        <span class="char-4">e</span>
        <span class="char-5">m</span>
      </span> 
      <span class="word-2 char-group">
        <span class="char-6">I</span>
        <span class="char-7">p</span>
        <span class="char-8">s</span>
        <span class="char-9">u</span>
        <span class="char-10">m</span>
      </span> 
      <span class="word-3 char-group">
        <span class="char-11">D</span>
        <span class="char-12">o</span>
        <span class="char-13">l</span>
        <span class="char-14">o</span>
        <span class="char-15">r</span>
      </span> 
      <span class="word-4 char-group">
        <span class="char-16">S</span>
        <span class="char-17">i</span>
        <span class="char-18">t</span>
      </span> 
      <span class="word-5 char-group">
        <span class="char-19">A</span>
        <span class="char-20">m</span>
        <span class="char-21">e</span>
        <span class="char-22">t</span>
      </span>
    </span>
  </span>
</h2>

Sumber: https://github.com/tovic/lettering-plugin-for-mecha-cms/blob/master/lettering-php/launch.php

Kenapa Tampilan Dinamis Blog Tidak Bisa?

Mengaktifkan Tampilan Dinamis Blog - Setelah beberapa bulan tidak melihat tampilan dinamis blog ini, ternyata ada perubahan yang saya tidak ketahui sebelumnya yaitu tampilan dinamis blog ini tidak bisa dibuka setelah saya melakukan klik pada menu Dynamic yang ada diatas header blog ini. Saya pun berpikir, kenapa ya tampilan dinamis blog ini kok tidak muncul? Padahal diartikel sebelumnya yaitu tentang mengganti tampilan blog, tanpilan dinamis blog ini masih bisa di buka

Ternyata perubahan yang saya lakukan yang menyebabkan tampilan dinamis tidak bisa di buka lagi adalah karena saya telah merubah pengaturan pada Umpan situs menjadi umpan singkat dan setelah saya ganti pengaturannya ke Umpan penuh, akhirnya tampilan dinamis blog tetap tidak bisa di buka kembali, silahkan klik Dinamis untuk melihat tampilan blog ini berhasil atau tidak, ternyata tidak berhasil, yang ada hanya halaman blank yang terbuka. Beberapa blog dari blog teman-teman blogger juga saya coba dengan menggunakan tampilan dinamis, ternyata hampir semuanya tidak bisa membuka tampilan dinamis

Setelan >> Umpan situs >> Izinkan Umpan Blog >> Penuh

Setelah melakukan perubahan seperti diatas, tampilan dinamis blog ini ternyata sudah tidak bisa di buka alias tidak bisa tampil. Adakah yang tahu, kenapa tampilan dinamis blog tidak bisa?

Bagaimana Agar Blog Menghasilkan Uang?

Bagaimana Agar Blog Menghasilkan Uang? Banyak cara, bahkan di Google sudah banyak yang memberikan tutor dan panduan mengenai agar blog bisa menghasilkan uang. Dari semua tutor dan panduan yang saya baca tersebut, hampir semuanya memiliki pemahaman yang sama dan memiliki tips yang hampir sama. Bahkan dari yang terjelek pun juga dijelaskan, bagaimana agar blog tersebut bisa menghasilkan uang ?

One Product
Menjadikan blog sebagai tempat untuk menjual barang secara one porduct atau satu produk saja banyak diminati oleh para blogger, namun syaratnya harus memiliki produk sendiri. Salah satu pebisnis onlien yang memiliki satu blog satu produk jualan adalah Joko Susilo, Tung Desem Waringin, Anne Ahira, dan lainnya

Namun jika kita tidak memiliki produk sendiri, kita bisa mencarinya di internet dan menjual ulang. Salah satu tempat yang berguna untuk mencari dan menjual ulang produk adalah di Fiverr.com, disana hanya dengan harga 50ribu, kita bisa menghasilkan ratusan ribu bahkan jutaan ribu hanya sekali kerja. Apakah ini sama dengan reseller? Bukan, dengan menggunakan Fiverr, kita bekerja sendiri dan mencari produk sendiri yang akan kita jual dengan keuntungan yang kita dapat sendiri tanpa pembagian hasil kerja dan di Fiverr kita hanya menggunakan jasa orang yang ada disana. Bingung? Silahkan cari tutornya di Google menggenai Fiverr

Bagaimana kalau di Fiverr terlalu ribet dan repot? Jadilah reseller atau affiliasi dari penyedia produk bisnis online lokal saja. Dan promosikan produk tersebut agar bisa menghasilkan profit buat Anda. Program reseller atau affiliasi sudah banyak dilakukan oleh para penyedia produk dan jasa online, baik yang gratis atau berbayar juga ada. Manjadi reseller atau affiliasi cukup mudah dilakukan namun cukup sulit juga menghasilkan. Mengenai reseller atau affiliasi dan produknya, silahkan cari di Google ya..

Multi Product
Berbeda dengan blog yang hanya menjual satu produk, dengan satu blog kita bisa menjual berbagai produk, misalnya toko online. Jadikan blog sebagai toko online dan juallah apa yang bisa dijual dan barang yang dijual tersebut memiliki banyak peminatnya. Untuk menjadikan blog sebagai toko online, kita bisa memiliki produk sendiri dan bahkan tidak dengan cara menggunakan sistem dropshipping. Jika produk tidak punya, gunakan jasa Amazon, ebay, Marketplace, Lazada, dan sebagainya. Bagaimana agar blog seperti toko online, gunakan template toko online dan Action!

Produk Iklan
Jika cara diatas masih terlalu sulit, cobalah yang lebih sulit lagi yaitu jadikan blog sebagai penayang iklan, baik itu dari orang per orangan atau dari penyedia jasa pemasang iklan seperti Google Adsense, Chitika, dan sebagainya. Namun untuk menjadikan blog sebagai penanyang iklan, kita harus memiliki artikel dan melakukan update setiap harinya, serta memperbanyak mendatangkan trafik blog agar blog benar-benar bisa menghasilkan uang buat kita

Apapun Jenis Bisnis Online Yang Kita Jalankan, Jika Tidak Dilakukan Dengan Sungguh-Sungguh, Serius, Dan Fokus, Jangan Pernah Mengharap Mendapatkan Hasil Dan Jangan Pernah Melakukan Cara Yang Tidak Benar Untuk Mendapatkan Keuntungan Dari Segala Usaha Yang Kita Lakukan

Okey, saya kira hanya itu saja agar blog bisa menghasilkan uang. Selebihnya silahkan dipelajari sendiri karena saya tidak bisa menjelaskan secara rinci karena khusus blog ini bukanlah blog Panduan Bisnis tapi Panduan Template Blog, namun jika ada yang ingin mengetahui tentang bisnis online, kenata tidak?. Dan artikel ini saya buat dan saya tulis karena adanya permintaan dari seorang teman yaitu +evi liana . Maaf jika artikel ini salah masuk

Baru: Memasang Peringatan Anti Copy Paste di Blog

Memasang Peringatan Copy Paste di Blog - Memasang sesuatu di blog yang digunakan untuk memproteksi atau sekedar memberi peringatan atas kepemilikan yang kita terkadang menjadi sebuah dilema karena seampuh apapun proteksi yang dipasang, tetap saja mudah dikelabui. Pun begitu dengan artikel atau tulisan yang ada di blog, sudah banyak trik yang digunakan untuk melindungi keberadaan artikel blog kita, baik menggunakan script anti copy paste, anti klik kanan atau disable klik, bahkan beberapa cara yang digunakan agar tidak terjadi copy paste terhadap artikel blog ternyata hasilnya sia-sia belaka karena semua cara tersebut mudah ditembus dan dan mudah ditemukan titik lemahnya

Kenapa anti copy paste di artikel blog yang kita pasang mudah ditembus?
Karena kode-kode yang terdapat didalam template blog yang kita gunakan dari berbagai platform (Blogger, WordPress, Joomla, Tumblr, dan sebagainya) menggunakan open source yang sangat mudah dibuka dan diketahui, apalagi penggunaan open source tersebut juga semakin dipermudah dengan adanya program dari browser yang digunakan

Apakah memasang anti copy paste di blog sia-sia dilakukan?
Tidak. Karena dengan memasang anti copy paste tersebut akan sedikit mempersulit dalam melakukan copy paste terhadap artikel blog yang diinginkan, meskipun pada akhirnya artikel tersebut berhasil di salin,, hehehee

Dan bagaimana dengan artikel ini? Artikel ini hanyalah sebuah tips saja dan bukan script anti copy paste yang biasa dan sering banyak digunakan. Script pada artikel ini hanyalah peringatan agar tidak terjadi copy paste terhadap artikel blog. Peringatan akan muncul jika ada yang melakukan blok pada artikel, tidak hanya pada artikel, pada satu huruf pun didalam artikel tersebut akan memunculkan peringatan agar tidak melakukan copy paste

CSS Anti Copy Paste
Silahkan salin kode CSS berikut kedalam template blog Anda, salin sebelum kode ]]></b:skin> atau diantara <style type='text/css'>Code Disini</style>

.copypastetips {display:none;top:0;position:absolute;background:#333;color: #f16786;width:300px;height:32px;position:absolute;margin-left:-20px;padding:5px;opacity:0;filter: alpha(opacity=0);z-index: 99;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;border-radius:3px;border:1px solid #333;}
.copypastetips span {position:absolute;content: " ";border: solid rgba(0, 0, 0, 0);border-width: 7px;height: 0;width: 0;margin: 0;top: auto;left: auto;top: 100%;border-top-color: #333;margin-left: -7px;left: 50%;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;}
.copypastetips a {color:#f16786;}
.copypastetips:hover {background:#3D566E;}
.copypastetips:hover span {border-top-color:#3D566E;}
.copypastebox {position:relative;display:block;width:100%;height:100%;top:0;left:0;}
.copypastebox a {width:100%;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHT0DQsaEo1kUSC6J1oJ2VRSxnBQrDyDb3vY95yYg4vM8S5ISIcarJm3NS6FUSgc2jKQeZYi1aMM4VO0HcC0jri6Cm_JYR5oSQl1mypeMshOYx7EUKMvT8-5NvMExg-FH4DbsEXNFVks/s1600/copy-paste.png) 0px 0px no-repeat;padding:0;left:0;top:0;height:100%;text-decoration:none;display:block;}
.sharingLink {display:block;position:absolute;text-indent:-9999px;}

JavaScript Anti Copy Paste
Silahkan salin kode berikut kedalam template blog Anda, salin sebelum kode </head>

<script type='text/javascript'>
      //<![CDATA[
$(document).ready(function() {
 cpShow='';
  $(document).mousemove(function(m) {
   generateTooltipPosition();
  });
});
$(document).mouseup(function() {
  $(document).mousemove(function(m) {
   generateTooltipPosition();
  });
 var cpShow=getcpShow();
 var copypastetips=document.getElementById("copypastetips");
 if (cpShow!='')showMeTooltip();

});
$(document).click(function() {
 var cpShow=getcpShow();
 var tooltipTitle = null;
 var newTooltipTitle = $("#copypastetips").attr("title");
  if (newTooltipTitle == "") return;
 if (newTooltipTitle !== tooltipTitle) $('#copypastetips').animate({ opacity: 0 }, 30);
 if (cpShow != "") showMeTooltip();
});
$(window).resize(function() {
 if ($('#copypastetips').show()){
    $('#copypastetips').animate({ opacity: 0 }, 30);
 }
});
function showMeTooltip() {
 var pageURL = window.location.toString();
 var myLink = "";
 
 $('#copypastetips').show();
 $('#copypastetips').animate({ opacity: 1 }, 30);
 $('#toMyLink').attr('href', myLink );
}
function getcpShow(){
  showCP = '';
  if(window.getSelection) {
                showCP = window.getSelection();
    generateTooltipPosition();
            }
            else if(document.getSelection) {
    showCP = document.getSelection();
    generateTooltipPosition();
            }
   return showCP;
}
function generateTooltipPosition(){
 var selection = window.getSelection && window.getSelection();
 if (selection && selection.rangeCount > 0) {
   range = selection.getRangeAt(0);
   pos = $(window).scrollTop();
   selection_text = selection.toString(),
   rect = range.getBoundingClientRect();
    $('#copypastetips').css({
      top: (rect.top + pos - 20) - 32 + 'px',
      left: rect.left + (rect.width/2) + 'px',
     });
  }
}
//]]>
</script>

HTML Markup Anti Copy Paste
Silahkan salin kode berikut kedalam template blog Anda, salin sebelum kode </body>

<div class='copypastetips' id='copypastetips'>
  <div class='copypastebox'><a href='/'><span/></a></div>
</div>

Cara Kerja Script Anti Copy Paste
Saat ada yang melakukan blok atau seleksi pada setiap artikel atau teks atau huruf didalam blog, maka akan muncul pernyataan atau pesan agar tidak melakukan copy paste terhadap artikel, teks, huruf, atau tulisan yang telah di blok atau di seleksi, baik sebagian atau pun keseluruhan

Demo untuk script Anti copy paste ini tidak saya terapkan di blog ini, dan berhasil saya terapkan di blog saya yang lain yang saya gunakan sebagai blog percobaan. Untuk hasilnya silahkan lihat pada video berikut ini

Membuat Widget Recent Posts By Tag Untuk Blogger

Widget Recent Posts By Tag adalah widget yang dipilih berdasarkan label tertentu pada blogger. Jadi dengan adanya widget ini lebih memudahkan pengunjung dalam mencari artikel yang lebih spesifik. Silakan coba juga koleksi widget lainnya seperti Widget Recent Posts, Widget Random Posts dan Widget Most Commented.

Cara Memasang Widget Recent Posts By Tag Untuk Blogger

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

/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}

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

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4ovyrVDh46wLtezlBTalulWE3Xzg5rkYxktkkCsoIje0TKLDHV-6LnbesprbdXC3uzgVflfEU5BFr3Ft1pl1aeWV7xAryFsWAkYhTa2ble48tQ7s_d_FV_c0gH1GkpIvyFK07tjfH04t/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

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

<script>
document.write("<script src=\"/feeds/posts/default/-/Belajar%20SEO?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Demo

Pengaturan

Icon	Teks
var numPosts	Isi dengan jumlah artikel yang ingin ditampilkan
var showpostthumbnails	Pilih true jikn ingin menamapilkn gambar dan false untuk menghilangkannya
var showpostdate	Pilih true jika ingin menamapilkn tanggal dan false untuk menghilangkannya
Belajar%20SEO	Silakan ganti dengan label yang di inginkan, bila lebih dari dua kata gunakan %20 sebagai pengganti spasi