Google Drive merupakan akomodasi hosting gratis yang disediakan oleh google bagi pemilik akun google, untuk penyimpanan file apa saja yang kita inginkan dengan kapasitas 15 GB. Google Drive termasuk pilihan para blogger sebagai daerah hosting gratis dengan loading cepat dibandingkan dengan hosting gratis lainnya.
Biasanya para blogger menyimpan file yang diharapkan pengunjung blog untuk men-donwload. Baik itu berupa template, video, musik, atau dokument lainnya. Namun terkadang masih banyak yang memakai link yang diberikan oleh google drive, sehingga jikalau link download yang ada di blog di klik masih menuju ke halaman google drive untuk melihat file.
Kali ini saya share cara supaya file dapat download otomatis tanpa harus menuju ke halaman google drive, kita dapat memakai akomodasi Google Drive Direct Link Generator. Silahkan masukkan link file anda > create direct link > copas link yang ada di bab output link. selesai
Praktis kan? selamat mencoba dan biar bermanfaat...
Cara Membuat Tombol Sosial Media di Blog Terbaru 2016. Sosial media (sosmed) semakin hari semakin berkembang pesat dikalangan dan banyak diminati oleh semua kalangan. Tak lupa bagi para blogger, seakan ini menjadi kewajiban untuk meningkatkan jumlah pengunjung. Oleh karenanya, para blogger mempublikasikan akun sosmed mereka di blog masing-masing, tentu saja dengan banyak sekali modifikasi semoga terlihat lebih bagus.
Sebenarnya sudah banyak sih dibahas di blog lain, tapi gak ada salahnya saya pun juga ikutan nge-share tutor cara menciptakan tombol sosial media terbaru dan terkeren tahun 2016 ini. Yuk simak cerita selanjutnya...
Model pertama
Letakkan instruksi css ini diatas ]]></b:skin> atau </style>
Selanjutnya pastekan instruksi HTML ini dimana saja sesuai selera. saran saja di sidebar paling atas, jangan di bawah artikel alasannya yaitu ini bukan tombol share.
<div id="social"> <a class="rss" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWaKR2KKkT8bk_H4T5q3nOoWChssP491eSDBquvL01FoYeuA7p5hcM2PgS_DpTN9qJCqx78AKmiZXMK6otBV2a81d-bPYINH4WboumCpu43TCTwOFYbQfXoUpqrjheIU57qZl4kQSgrN8/s48-Ic42/RSS.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a> <a class="email" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizANnNt1a_Whzn7fVtkrMTulg-yGJ5HPMBi0FeyneF5ttMQtOGEN93Lsxljfb-wTf4JJHF7067JFWn7AEgsvt7Dus96fzhv9IkoGfTIB2s-Lq_2rNuxTi4RxxtShuHxKoA_6INrOEZWL8/s48-Ic42/RSS-EMAIL.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a> <a class="fb" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEByoSl6LtkcLDsxhRV0hfbehYB4v8DxUQFUOzyie7iZTTo7ngJng-9RDN7BUymPAuFWp9DnNGaqrJkHOP_KDw0o8NJtXZSFr6wAFuYghbZ6Zele6ZnTM2ihyY-6_YH5nCX0HsYa2xJ4s/s48-Ic42/FACEBOOK.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a> <a class="tw" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc9nAwNsRM4stmpoh0S-GxwXc7PNx17pfop787QJCyuQfaeMduWOXzamtOt-lP_mr6fsm9KSB5VZRREjd991GKvOkf3y8obOZbjAtp-3pnPE_PyZ3Kdg3YBGkMpTt7DRKmOxQXM3Trmo/s48-Ic42/TWITTER.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a> <a class="plus" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7p_l-FDRRVlZ3scnEZY6jVKqoxmm2obo1qsXXdzkW-nBH77NL_N_SPrgoOCjMBOQQxudXKqGTOyBQTTt4m_pFbwxnBJzSoUsex2st3FRO8Vigvb4gNXxmrBcHjKIrqc-74fEdmKV3r0/s48-Ic42/GOOGLE-PLUS.png"alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a> </div>
Silahkan ganti # dengan url akun sosmed anda. Selesai semoga beruntung... ups kayak ikut undian saja. hehe...
.social{clear:right;float:left;list-style:none;margin: 0px;margin-top: 8px;padding:0px;} .footer .social{float:none;} .footer .social li a{margin:0 5px 8px 0;} .social li{display:inline-block;text-indent:-999em;} .social li a{display:block;width:32px;height:32px;margin-left:5px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFr-W7CYk0o1x-yRel0PzysQHJC1YvGpI3PCe2aKDxcd3TYszp1aEXi5pvaXBl1sHao1_7cUkCwxvIFLfbHbvL_iu35_S6fKCMPgQkHdDI0XVSv_lttfBN5se15FQtnQZ5pPQRL0gTMtO/s1600/Social.png);background-repeat:no-repeat;border-radius:16px;background-clip:padding;} .social li:first-child a{margin-left:0;} .social li a:hover{border-top-left-radius:0px;} .social li a.facebook:hover{background-color:#3c5fac;} .social li a.twitter{ background-position:-32px 0;} .social li a.twitter:hover{background-color:#5ec3df;} .social li a.rss{background-position:-96px 0;} .social li a.rss:hover{background-color:#ff9900;} .social li a.google{background-position:-256px 0;} .social li a.google:hover{background-color:#c63d2d;} .social li a.youtube{background-position:-384px 0;} .social li a.youtube:hover{background-color:#c8312b;} .social li a.pinterest{background-position:-416px 0;} .social li a.pinterest:hover{background-color:#cb2027;} .social li a.tumblr{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUV7ZQzCA0fkMghb6iET_tm8CGwy6yW_FLq4TGzOfjpoXQPmyMfum6d2qTWYzfHEWJ8qssuN5T57lTUAzmwiXfYW9l5soJ1dikMwB94CNVKzK_QSCVciFTHmzE0j7ak9tIiYbCG022NnN/s1600/tumblr.png);} .social li a.tumblr:hover{background-color:#2C4762;} .social li a{background-color:#bbb;transition: all 0.3s ease-out;}
Sesuai dengan judulnya "ngeblog itu indah" kenapa? semenjak saya mulai mengenal dunia blogging hingga sekarang. Selain dapat berbagi, juga dapat menambah ilmu dan punya teman yang dapat saling mengenal satu sama lain meski hanya di dunia internet.
Sudah niscaya menambah ilmu dari apa yang diketahui teman yang di publish di blog masing-masing. Saling mengenal satu sama lain dengan menilai aksara atau gaya bahasa artikel dan komentar yang ada.
Ada yang kaku, judes, sok keren, pamer, suka ngetawain, becanda mulu, dan lainya. yang semua itu dapat saling mengisi satu sama lain.
Inilah mereka yang sering nongol bersama di dunia maya, saling berbagi, mengisi, melengkapi dan bercanda.
HTTPS Hypertext Transfer Protokol Secure merupakan adonan HTTP dengan SSL (Secure Socket Layer) yang kalau komunikasi melalui HTTPS akan dienkripsi dan analisa yang berfungsi untuk menjaga kemanan data dari hacker yang berniat membajak sebuah dokumen secara ilegal. Sedangkan tujuan HTTPS yakni untuk mengantisipasi terjadinya eror kegiatan sebuah data dan kerusakan server tanggapan kegagalan koneksi yang disebabkan perusahaan yang di buat oleh pakar hacker yang tidak bertanggung jawab.
Cara kerja hacker untuk membajak sebuah file dokumen biasa nya memakai tool wireshak, ketika tool ini terkoneksi ke internet maka protokol HTTP akan gampang untuk di jebol pertahanan keamanan nya. Berbeda dengan sistem HTTPS, tool yang dipakai tidak akan bisa menembus keamanan dari sebuah dokumen dengan memakai protokol HTTPS.
Nah, beberapa waktu yang kemudian sesudah mengalikan eksistensi .com ke .co.id untuk indonesia, blogspot menambahkan fitur https gratis untuk blog yang tidak memakai custom domain alias masih memakai subdomain blogspot. bayangkan kalau anda membeli pribadi SSL ini bisa mencapai angka ratusan ribu bahkan jutaan ruriah.
Namun, banyak sekali duduk perkara muncul dengan mengaktifkan fitur HTTPS ini di blogspot ibarat errornya blog lantaran tidak terbacanya script yang memakai HTTP dan error yang lain.
Sekarang muncul duduk perkara lagi di Search Console / Google Webmaster. Setelah aku mengaktifkan HTTPS untuk blog ini, ketika mau submit url artikel / postingan muncul peringatan warna kuning bahwa blog dialihkan (seperti gambar diatas). Saya mulai bertanya-tanya ada apa ini dan kenapa? sebelumnya aku tidak menduga ini duduk perkara HTTPS yang akibatnya aku konsultasi ke dokternya blog yakni mas Adhy Suryadi admin blog kompiajaib.com yang menurutnya blog yang mengaktifkan HTTPS harus submit ulang di Search Console. Saya ikuti saran ia dan akibatnya hingga kini pun kondusif dan nyaman ketika submit url postingan.
Itulah dongeng aku untuk anda pengguna blogspot supaya bermanfaat.
Sistem komentar disqus banyak menjadi pilihan kaum blogger termasuk aku alasannya ialah selain tampilan yang elegan dan minimalis, disqus juga mempunyai fitur yang tak kalah anggun dengan sistem komentar lainya, menyerupai recent comment dan top commentators. Top disqus commentators ini biasa kita lihat di dashboard sendiri, namun ternyata dapat di pasang di blog juga.
Terinspirasi dari blog kompiajaib.com yang ketika ini ada tombol untuk menampilkan top disqus commentators ini, hanya saja mas adhy menyimpannya di halaman statis. Itu menciptakan aku mulai mengobok-obok browser, kali aja ada script untuk menampilkannya di blog. Akhirnya aku menemukan script ini di blog.kangismet.net untuk dipasang di sidebar sebagai widget top disqus commentators.
Akhirnya aku mencoba berinovasi untuk menampilkannya diatas kolom komentar dengan efek show hide biar tidak mengganggu ruang menyerupai yang anda lihat pada gambar animasi gif diatas. Jika anda tertarik untuk memasang top disqus commentators widget diatas kolom komentar sebaiknya ikuti langkah berikut ini: (Sebelumnya pastikan blog anda sudah terpasang jquery library dan font awesome)
Jika blog anda memakai 3 sistem komentar, silahkan simpan sempurna dibawah instruksi ini:
<div class='disqus-box' id='disqus-box'>
Keterangan: username : ganti dengan user nama disqus anda num_items : jumlah tampilan (silahkan atur jumlahnya) hide_mods : sembunyikan komentar admin (1 sembunyi, 0 tampil) hide_avatars : sembunyikan gambar (1 sembunyi, 0 tampil) avatar_size : mengatur ukuran gambar user
4. Terakhir silahkan simpan script dibawah ini diatas </body>
<script type='text/javascript'> //<![CDATA[ function toggleNavPanel2(e){var t=document.getElementById(e),c=document.getElementById("topcomment-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Top Commentator"):(t.style.display="block",c.innerHTML="Hide Top Commentator")} $("#topcomment a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank'); //]]> </script>
Setelah kemarin saya sudah menciptakan artikel ihwal cara menciptakan top disqus commentators diatas kolom komentar, saya rasa sudah cukup praktis untuk di modifikasi ulang sesuai selera. Namun ternyata masih ada yang kesulitan memasang top disqus commentators ini ke dalam kotak pesan komentar disqus. Karena itu disini saya akan menyebarkan kepada para sobat blogger tips dan trik memasangnya kedalam pesan komentar.
Sebelumnya ada 2 hal dan cara yang harus diperhatikan; bahwa ada kotak pesan komentar disqus untuk 3 sistem komentar menyerupai blog kompiajaib.com, ada pula kotak pesan komentar untuk komentar disqus saja menyerupai pada blog ini. Makara perhatikan langkah-langkahnya dan jangan sambil tidur agar tidak nyasar kemana-mana, dan pastikan blog anda sudah terpasang jquery library dan font awesome.
Model pertama untuk pengguna 3 sistem komentar
Pastikan bahwa blog anda sudah memakai kotak pesan untuk 3 sistem komentar. Jika belum, silahkan buat kotak pesan pada url postingan KompiAjaib dibawah ini:
/search?q=cara-membuat-top-disqus-commentators
Selanjutnya kita akan menyisipkan top disqus commentators pada kotak pesan disqus.
1. Silahkan cari instruksi dibawah ini dan tambahkan instruksi menyerupai yang saya tandai;
Keterangan: username : ganti dengan user nama disqus anda num_items : jumlah tampilan (silahkan atur jumlahnya) hide_mods : sembunyikan komentar admin (1 sembunyi, 0 tampil) hide_avatars : sembunyikan gambar (1 sembunyi, 0 tampil) avatar_size : mengatur ukuran gambar user
dan simpan / paste sempurna diatas instruksi berikut;
<div id='isi-pesan'>
3. Terakhir simpan script dibawah ini diatas </body>
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ function toggleNavPanel1(e){var t=document.getElementById(e),c=document.getElementById("topcomment-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Top Commentator"):(t.style.display="block",c.innerHTML="Hide Top Commentator")} $("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank'); //]]> </script> </b:if>
Model kedua untuk pengguna komentar disqus saja
Jika blog anda hanya memakai komentar disqus dan ingin menciptakan pesan komentar menyerupai pada blog ini, silahkan perhatikan langkah dibawah ini:
1. Gunakan instruksi dibawah ini dan simpan diatas</head>
Supaya tidak mengganggu loading blog, anda dapat menghosting dan men-defer script diatas di penyedia hosting kesayangan anda tapi jangan di google drive alasannya sudah ditutup. lalu gunakan script dibawah ini;
Beberapa hari terakhir ini saya mulai sering mengobrek isyarat HTML blogger dan berhasil menciptakan top disqus commentators, itu menciptakan saya ingin tau dan bertanya-tanya "bagaimana cara menciptakan top commentators untuk komentar blogger?" sehingga saya mencoba mencari rujukan script untuk menampilkan Top Blogger Commentators. Seperti biasa script widget top commentators ini untuk dipasang di sidebar, baik itu komentar blogger atau disqus. Dan saya mencoba untuk sanggup tampil di atas kolom komentar.
Untuk demo silahkan menuju ke blog percobaan saya (http://rengpos.blogspot.com), lalu coba tes koment yang banyak. hehe...
Oke eksklusif saja jikalau anda ingin juga memasang / menciptakan top blogger commentators ini, silahkan ikuti langkah-langkahnya berikut ini:
silahkan ganti nama-aku-blogger diatas, dan angka 9 untuk menampilkan jumlah top comment. Lalu simpan / paste sempurna dibawah isyarat epilog pada isyarat berikut;
Kecepatan loading blog merupakan salah satu tehnik SEO yang sudah banyak dibahas dan diterapkan oleh kaum blogger untuk kenyamanan pengunjung dan mesin pencari. Apalagi ketika ini google sudah menganjurkan penggunaan template blog dengan accelerated mobile pages (AMP) alasannya ialah template menjadi faktor utama untuk loading super cepat.
Namun banyak kaum blogger yang tidak menyadari bahwa meskipun loading blognya sudah cepat, ternyata masih sedikit lambat alasannya ialah banyak instruksi HTML yang khusus tampil di perangkat mobile masih terbaca / di load oleh browser ketika diakses melalui perangkat desktop, atau sebaliknya.
Karena itu disini aku ingin membuatkan sedikit pandangan kepada teman-teman blogger. Blog aku ini (bisa juga blog anda) sangat jarang sekali ada komentar dari pengunjung unik terutama pengunjung dari perangkat mobile, bahkan tidak ada sama sekali. Sehingga aku berinisiatif untuk menghilangkan kolom komentar di perangkat mobile.
Maka untuk menghilangkan kolom komentar di perangkat mobile tidak cukup hanya memakai CSS menyerupai ini:
@media screen and (max-width:610px){ #comments{display:none !important;} }
alasannya ialah dengan hanya memakai CSS tersebut kolom komentar hanya tidak tampil, tapi tetap terbaca oleh browser.
Untuk itu, perlu tag kondisional semoga instruksi HTML untuk komentar juga tidak di load oleh browser;
Jika blog anda hanya memakai komentar disqus saja, maka anda dapat menghapus isi dari 2 instruksi js untuk threaded comment berikut ini;
<b:includable id='threaded_comment_js' var='post'> ............... ISI YANG PERLU DIHAPUS ............... </b:includable>
<=========================>
<b:includable id='threaded-comment-form' var='post'> ............... ISI YANG PERLU DIHAPUS ............... </b:includable>
kode-kode diatas hanya sekedar rujukan saja, selebihnya dapat anda aplikasikan sendiri. Dengan begitu, maka instruksi HTML blog anda akan diakses oleh browser sesuai peruntukannya masing-masing. Selesai dan selamat mencoba...
Sebelumnya aku sudah share ihwal cara mempercepat loading blog dengan tag kondisional, sebetulnya pada artikel tersebut sudah sangat terperinci sekali dalam mengakali instruksi blog sesuai peruntukannya masing-masing, menyerupai instruksi untuk postingan, homepage, halaman statis, dll. Sehingga ketika browser mengakses halaman postingan, maka instruksi untuk homepage tidak diakses.
Fungsi defer javascript yaitu untuk mempercepat dan tidak mempengaruhi loading blog, ada yang berinisiatif untuk menggabungkan file js yang dihosting untuk di defer agar browser tidak perlu mengakses beberapa file js. Namun yang perlu diperhatikan dalam menggabungkan file js yaitu fungsi script itu sendiri, kalau file js untuk postpage jangan digabung dengan file js khusus homepage.
Coba perhatikan script untuk men-defer file js berikut ini:
Jika kedua file js diatas digabung menjadi satu (1 url hosting), maka harus menghilangkan tag kondisional.
<script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="url-file1.js" , "url-file2.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>
Namun perlu diingat bahwa hal tersebut akan mempengaruhi loading blog alasannya yaitu ketika browser mengakses halaman postingan, instruksi / file js khusus selain postingan menyerupai homepage juga akan diakses dan itu sangat tidak diinginkan.
Cara menggabungkan javascript untuk di defer
Sekedar referensi saja untuk memudahkan anda, kita akan menggabungkan isi file.js untuk halaman postingan:
Isi file1.js untuk tombol share
(function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })();
Isi file2.js untuk navigasi dibawah postingan
(function($){ var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link'); $.get(newerLink.attr('href'), function (data) { newerLink.html($(data).find('.post h1.post-title').text()); },"html"); $.get(olderLink.attr('href'), function (data2) { olderLink.html($(data2).find('.post h1.post-title').text()); },"html"); })(jQuery);
Lalu kita satukan (copas) kedua javascript diatas ke notepad menyerupai ini:
(function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })();
(function($){ var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link'); $.get(newerLink.attr('href'), function (data) { newerLink.html($(data).find('.post h1.post-title').text()); },"html"); $.get(olderLink.attr('href'), function (data2) { olderLink.html($(data2).find('.post h1.post-title').text()); },"html"); })(jQuery);
dan simpan dengan nama file.js, lalu dihosting. Saya sendiri menghostingnya di https://github.com/, maka akan mendapat url hosting https://cdn.rawgit.com/NomIfrod/js/master/file.js. Sehingga kalau kita aplikasikan untuk di defer menjadi menyerupai ini:
Jadi, kalau anda ingin menggabungkan file.js maka harus diperhatikan fungsinya. Jika sama-sama script untuk postingan tidak masalah, menyerupai script komentar, tombol share, syntax, dll.
Selamat ber ngeblog ria teman-teman blogger, kembali lagi dengan aku yang biasanya mengembangkan seputar dunia pendidikan, sesekali mengembangkan seputar dunia coding. Kita tahu bahwa hampir semua template memakai tombol media umum untuk profil blog atau admin biar mengunjung blog dapat dengan gampang berinteraksi dengan admin melalui media sosial. Namun kenyataannya, pengunjung dari search engine tidak begitu memperhatikan hal tersebut bahkan untuk sharing artikel dan mengklik iklan saja sangatlah jarang.
Waktu search box blog ini masih disimpan dihalaman static, jumlah tayang Search Result Google Custom di halaman static perhari berkisar 100-200. Maka aku berinisiatif untuk memakai Search Result Google Custom dengan efek melayang (tidak perlu ke static page) yang pernah di share oleh mas +Adhy Suryadi. Namun search box template kompi flexible memakai efek show hide alasannya ialah ngumpul dengan tombol profil media social, kesannya aku hapus saja tombol tersebut dan pribadi menampilkan Search Result Google Custom tanpa show hide.
Nah bagi anda yang memakai template kompi flexible dan ingin mengganti tombol profil media social dengan Search Result Google Custom menyerupai blog NomIfrod ini, silahkan ikuti tour aku berikut ini:
4. Terakhir, silahkan simpan instruksi dibawah ini sempurna diatas </body>
<script type='text/javascript'> //<![CDATA[ var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="xxxxxxxxxxxx",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}(); function myFunction() { document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>"; }myFunction(); //]]> </script>
Silahkan ganti yang aku tandai dengan ID Search Result blog anda. Untuk mendapat ID Search Result biar dapat tampil menyerupai blog ini, silahkan anda ikuti tutornya di /search?q=membuat-search-result-google-custom
Modifikasi template untuk mempercepat loading blog - Selamat berjumpa lagi dengan aku yang sudah tidak asing lagi alias sudah populer (didesa aku gitu), dan masih seputar tutorial/tips blogger. Menjadi blogger sangatlah gampang, tapi menjadi blogger yang sukses sesulit membalikkan telapak kaki. Seperti yang sudah banyak dibahas diblog manapun bahwa untuk menjadi blogger sukses harus konsisten terutama untuk update artikel. Iya memang artikel yakni rajanya suatu blog dapat nangkring di pageone search engine.
Namun selain artikel juga masih banyak faktor pendukung untuk dapat berada di pageone ibarat salah satu trik/tips SEO (search engine optimation) yakni kecepatan loading blog alasannya kecepatan loading sangat menunjang untuk meningkatkan pageview blog itu sendiri. Jika blog kita mempunyai loading yang cukup berat, dapat jadi pengunjung pribadi kabur mencari blog lain yang lebih cepat / praktis dibuka.
Terkait dengan kecepatan loading blog, tentu saja faktor utamanya yakni menggunaan template yang yang fast loading dan sudah banyak yang membagikannya, baik yang gratis atau premium. Meskipun blog kita sudah memakai template yang mempunyai loading cepat, tapi tentu saja harus kita modifikasi lagi sesuai yang kita inginkan, terutama fitur yang memang tidak kita butuhkan. Saya sendiri hingga ketika ini hanya dapat memodifikasi saja.
Sebagai pola saja sih, template blog ini memakai template premium kompi flexible yang kecepatan loadingnya dapat anda rasakan sendiri, tapi masih aku modif lagi dengan menghilangkan fitur yang tidak aku inginkan alasannya aku masih ingin yang lebih cepat dari aslinya.
Apa saja yang aku hilangkan pada template kompi flexible blog ini? Ikuti tour aku berikut ini:
1. Menghapus kolom komentar yang berlebihan
Kita tahu bahwa ketika ini banyak blog memakai kolom komentar yaang berdasarkan aku berlebihan dengan 3 sistem komentar, yakni blogger, disqus dan facebook. Menurut aku penggunaan 3 sistem komentar tidak begitu efektif, kenapa? kolom komentar mana yang banyak digunakan? Tentu saja yang banyak / sering dipakai oleh pembaca / pengunjung (apalagi sesama blogger) hanya sistem komentar yang tampil duluan, bukan alasannya komentar blogger atau disqus apalagi facebook.
Selain itu, penggunaan 3 sistem komentar juga memperlambat loading blog meskipun sudah di defer. Karena itulah, sangat kurang relevan kalau fungsi hal tersebut tidak sebanding dengan imbas yang diberikan. Sehingga hingga kini blog ini tetap memakai 1 sistem komentar saja dan aku menentukan memakai komentar disqus yang katanya loadingnya berat banget.
Sekarang kalau anda memakai komentar blogger saja, coba refresh halaman postingan blog anda dengan blog aku ini, lebih cepat mana coba? padahal aku pake disqus gitu. Maksud aku loading blog tidak hanya fokus pada sistem komentar apa yang digunakan, tapi secara keseluruhan instruksi yang ada.
Kotak langganan artikel (subscribe box) sama halnya dengan blogger follower yang memberitahukan setiap update artikel blog kita kepada yang bersangkutan. Pertanyaannya sudah banyakkah yang berlangganan update artikel blog kita via email? Jika tidak, maka perlu dihapus saja.
Footer template kompi flexible menyediakan daerah untuk gadget/widget dengan lebar 300px. Karena fungsinya juga tidak begitu signifikan, maka aku modif lagi menjadi lebih elegan dan minimalis tapi tetap terlihat profesional ibarat website-website besar.
DonReach Share Buttons With Counts, itulah tombol share yang dipakai template ini dengan memakai link JS external yang juga cukup menyumbang loading pada blog. Sehingga aku juga menggantinya dengan yang lebih sederhana.
Script resize image ini cukup menganggu aku setiap kali me-refresh halaman blog ini alasannya tampilan gambar untuk thumbnail homepage, postpage dan popular post tidak pribadi tampil tepat alias masih membesar dari kotak yang ada. Hal ini terinspirasi dari template kompi design yang sudah support AMP (Accelerated Mobile Page)
Script rezize image untuk homepage
function resizeThumb(e,t,g){for(var m=document.getElementById(e),r=m.getElementsByTagName("img"),s=0;s<r.length;s++)r[s].src=r[s].src.replace(/\/s72\-c/,"/s"+t),r[s].width=t,r[s].height=g}resizeThumb("Blog1",230,140);
Script rezize image untuk postpage
function resizeThumbextralarge(e){for(var r=document.querySelectorAll(".thumb-post img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s1600/,"/s"+e),r[t].width=e,r[t].height=e}resizeThumbextralarge("600");
Script rezize image untuk popular post
function resizeThumb(e,t,s){for(var r=document.getElementById(e),m=r.getElementsByTagName("img"),c=0;c<m.length;c++)m[c].src=m[c].src.replace(/\/s72\-c/,"/s"+t),m[c].width=t,m[c].height=s}resizeThumb("PopularPosts1",300,170);
Setelah menghapus script resize image thumbnail, aku mengganti instruksi HTML untuk me-resize thumbnail tersebut. Kodenya aku memakai instruksi yang dipakai template kompi design ibarat ini:
Recent comment juga memperlambat loading blog yang tidak sebanding dengan fungsinya yang hanya menampilkan komentar terbaru, jadi aku hapus juga alasannya tidak terpakai.
Kode CSS untuk recent comment
ul.kangismet_recent{margin:0;padding:0} ul.kangismet_recent b{font-size:16px;font-weight:300} ul.kangismet_recent div{margin-bottom:10px!important} ul.kangismet_recent div.avatarImage{margin-bottom:0!important} .kangismet_recent li{background:0 0!important;margin:0!important;padding:0!important;display:block;clear:both;overflow:hidden;word-break:break-all} .kangismet_recent li .avatarImage{background:#888;padding:0;float:left;margin:0 6px 0 0;position:relative;overflow:hidden} .kangismet_recent li img{padding:0;position:relative;overflow:hidden;display:block} .kangismet_recent li span{margin-top:4px;color:#666;display:block;font-size:14px;font-style:italic;line-height:1.2;font-weight:300}
Kode JS untuk recent comment
var numComments=5,showAvatar=!0,avatarSize=60,roundAvatar=!0,characters=40,defaultAvatar="//www.gravatar.com/avatar/?d=mm",hideCredits=!0;maxfeeds=50,adminBlog="GANTI DENGAN NAMA ADMIN"; function hp_d11(s){var o="",ar=new Array(),os="",ic=0;for(i=0;i<s.length;i++){c=s.charCodeAt(i);if(c<128)c=c^2;os+=String.fromCharCode(c);if(os.length>80){ar[ic++]=os;os=""}}o=ar.join("")+os;return o}var numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"//www.gravatar.com/avatar/?d=mm",moreLinktext=moreLinktext||" More »",showAvatar=typeof showAvatar==="undefined"?true:showAvatar,showMorelink=typeof showMorelink==="undefined"?false:showMorelink,roundAvatar=typeof roundAvatar==="undefined"?true:roundAvatar,hideCredits=hideCredits||false,maxfeeds=maxfeeds||50,adminBlog=adminBlog||'GANTI DENGAN NAMA ADMIN';function kangismet_recent(kangismet){var commentsHtml;commentsHtml="<ul class=\"kangismet_recent\">";ntotal=0;for(var i=0;i<maxfeeds;i++){var commentlink,authorName,authorAvatar,avatarClass;if(i==kangismet.feed.entry.length){break}if(ntotal>=numComments){break}var entry=kangismet.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;authorAvatar=entry.author[a].gd$image.src}if(authorName!=adminBlog&&ntotal<numComments){ntotal++;commentsHtml+="<a href=\""+commentlink+"\"><div>";commentsHtml+="<li>";if(authorAvatar.indexOf("/s1600/")!=-1){authorAvatar=authorAvatar.replace("/s1600/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("/s220/")!=-1){authorAvatar=authorAvatar.replace("/s220/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("/s512-c/")!=-1&&authorAvatar.indexOf("https:")!=0){authorAvatar="https:"+authorAvatar.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(authorAvatar.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){authorAvatar=defaultAvatar+"&s="+avatarSize}else{authorAvatar=defaultAvatar}}else{authorAvatar=authorAvatar}if(showAvatar==true){if(roundAvatar==true){avatarClass="avatarRound"}else{avatarClass=""}commentsHtml+="<div class=\"avatarImage "+avatarClass+"\"><img class=\""+avatarClass+"\" src=\""+authorAvatar+"\" alt=\""+authorName+"\" width=\""+avatarSize+"\" height=\""+avatarSize+"\"/></div>"}commentsHtml+="<b>"+authorName+"</b>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/gi,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+="…";if(showMorelink==true){commBody+=""+moreLinktext+""}}else{commBody=commBody}commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li></div></a>"}}commentsHtml+="</ul>";document.write(commentsHtml)};
7. Merubah icon sosmed profil menjadi link saja
Icon profil media umum yang awalnya berada di bilah sajian dengan search box show hide, kini aku hapus dengan hanya menampilkan search Result Google Custom. Untuk URL profil sosmed aku pindahkan ke footer yang hanya berupa link teks.
Ini juga tidak aku inginkan alasannya hanya menampilkan jumlah komentar di homepage dan kebanyakan pengunjung tidak begitu peduli seberapa banyak komentator artikel tersebut. Apalagi berdasarkan mas +Adhy Suryadi comment count tidak menghipnotis SEO blog itu sendiri.
Sekarang, bagaimana dengan blog anda? seberapa cepatkah loading blog anda? bagaimana dengan fitur bawaan template? apakah sudah berfungsi sebagaimana mestinya? atau hanya sekedar jadi pajangan untuk mempercantik tampilan blog? semua itu hanya anda yang tahu ya.
Mungkin hanya itu saja sekedar pola dari aku untuk memodifikasi template, biar dapat menjadi motivasi dan acuan bagi anda semua para kaum blogger. Selanjutnya anda tinggal mengkreasikan apa yang anda inginkan terhadap blog anda.
Kita tahu bahwa hampir setiap blog memakai tombol share semoga pengunjung dapat membantu membagikan artikel yang mereka baca kepada teman-temannya melalui media social ibarat google plus, facebook, twitter, dan lain-lain. Namun sangat jarang sekali pengunjung yang tiba dari search engine membagikan artikel kita. Blog yang sudah terkenal ibarat kompi asing saja jumlah sharingnya dapat dihitung dengan jari, apalagi blog eceng-eceng ibarat blog ini.
Saya mengganggap bahwa tombol share hanya sebagai suplemen saja, sehingga keberadaannya tidak perlu memberatkan loading blog meskipun scriptnya sudah di defer, ibarat DonReach Share Buttons With Counts. Sehingga tombol share ini tidak eksklusif tampil tepat melainkan hanya berupa teks saja, apalagi koneksi sudah stadium akhir.
Karena itulah untuk mempercepat loading, DonReach Share Buttons With Counts blog ini aku ganti dengan tombol share yang lebih mudah dan sederhana semoga tidak mensugesti loading blog. Saya ngoprek tombol share dari template kompi males, hanya aku modif lagi dan hanya menyisakan tombol share google plus, twitter dan facebook saja. Untuk tombol share whatsapp tetap aku gunakan alasannya ialah hanya tampil untuk terusan mobile saja.
Bagi teman-teman yang ingin memakai tombol share ibarat blog ini, silahkan simpan isyarat dibawah ini:
kemudian simpan tepat diatas </article>. Jika anda memakai related posts, simpan tepat diatas isyarat pemanggil related post biasanya ibarat ini;
<div class='related-post' id='related-post'/>
Bagi pengguna template kompi flexible dan ingin mengganti DonReach Share Buttons With Counts bawaan template, anda harus menghapus semua isyarat berikut:
Dan untuk menghapus script-nya, coba terusan link js ini https://cdn.rawgit.com/KompiAjaib/js/master/flexible-post-6-1a.js kemudian temukan dan hapus script berikut;
(function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })();
Saran saya; jangan ngoprek eksklusif di blog utama, tapi gunakan blog demo. Jika sudah beres tinggal copas ke blog utama. Selesai dan selamat mencoba ...
Update Jika ingin memakai simple share button ini dengan icon SVG, silahkan simak artikelnya pada postingan berikut ini:
