Template Kompi Flexible update terbaru memakai 3 sistem komentar yakni disqus, blogger, dan facebook. Saya sendiri kurang pas bila memakai hingga 3 sistem komentar alasannya ialah itu akan menghipnotis loading blog, selain itu akan menciptakan blog kita gemuk alias gendut yang kata orang kekinian 'obesitas'. Lagi pula aku lihat di blog teman-teman blogger, mereka hanya berkomentar pada sistem komentar yang tampil pertama, dengan kata lain hanya segelintir saja yang menentukan atau mengklik tombol pilihan komentar.
Karena itu aku disini ingin membantu teman-teman blogger yang kebetulan templatenya memakai 3 sistem komentar ibarat template kompi flexible. Dan ingin hanya memakai satu komentar disqus saja, silahkan perhatikan langkah-langkahnya berikut ini:
1. Cari dan hapus instruksi CSS untuk komentar ibarat dibawah ini
Itu saja dari sekedar membantu bagi teman-teman blogger yang kebetulan templatenya memakai 3 sistem komentar ibarat template kompi flexible. Selamat mencoba...
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.
Sejak blog ini berganti wajah dari kompi flexible menjadi kompi males v6, ada yang nanya via email ke saya ini blog pake template kompi males v6 tapi kok gak sama dengan yang di demo kompiajaib ya? ya saya jawab saja bahwa saya sudah mengedit sesuai impian saya, terutama fitur-fitur yang tidak saya butuhkan alasannya yaitu kadang menunjukkan dampak aktual terhadap blog saya ini. Seperti widget langganan email, 3 sistem komentar, tombol sosmed (bukan tombol share ya) dan tombol login, dan lain-lain. Tapi semua itu saya edit di blog percobaan bukan di blog utama supaya tidak mensugesti kinerja google.
Oke kini saya share bagaimana saya merubah template kompi males menjadi ibarat kini ini (jika nanti tidak ganti template lagi) simak saja yang baik-baik, jangan lupa sambil ngopi juga boleh semoga gak ngantuk.
Body Saya merubah semua warna dasar putih pada body color:#fff menjadi abu-abu color:#fafafa, kecuali bab postingan tetap putih.
Menu Pada sajian saya gunakan warna yang sama color:#fafafa, hanya saya menambahkan box-shadow supaya tidak menyatu dengan body dan terlihat lebih elegan. Kemudia saya juga menambahkan dampak warna hijau dikala disorot (a:hover).
outer-wrapper Saya tetap memakai background putih dengan menambahkan dampak box-shadow supaya terlihat lebih elegan dan minimalis.
Footer Dibagian footer 1 tetap widget google plus follower, tapi pada footer 2 3 dan 4 saya ganti dengan widget recent post multi label, menghapus widget langganan email dan about me. Menghapus footer 6 dan hanya memakai footer 5 dengan width:100% dan diisi dengan label full.
Komentar Saya hanya memakai 1 sistem komentar disqus saja, comment blogger dan facebook saya hapus supaya loading lebih cepat. Kenapa disqus kok bukan blogger? meski comment blogger katanya lebih cepat namun setiap komen harus reload halaman dan tidak ada notifikasi akhir komentar.
itu akan sedikit mengganggu loading alasannya yaitu browser harus load link external. Makara saya buat jadi inline di html. Anda dapat simak postingannya berikut ini: Font Face Google Inline di HTML
Selain itu saya juga mengganti semua icon font awesome dengan svg material icon. Jika kita perhatikan link untuk font awesome ibarat ini;
dan bila kita susukan link tersebut, maka kita akan menemukan banyak icon yang tak terpakai. Biasanya hanya icon user, label, panah kanan kiri, home, dll. Untuk merubah hal tersebut, dapat anda simak postingan berikut ini; cara merubah font awesome dengan svg material icon
Oke itulah bab terpenting yang biasa saya lakukan terhadap template blog. Semoga bermanfaat dan dapat membantu..
