Cara Membuat Sticky Widget yang Berhenti Tepat di Atas Footer dengan jQuery

Membuat Sticky Widget berhenti di atas footer

Sticky widget dirancang untuk tetap terlihat meskipun pengguna menggulir halaman ke bawah. Namun, jika blog Anda memiliki footer, pastikan pemilihan sticky widget tidak melebihi area footer agar tidak tumpang tindih.

Jika Anda ingin membuat sticky widget yang berhenti tepat di atas footer, Anda bisa menggunakan kode jQuery berikut. Pastikan jQuery library sudah terpasang di blog Anda, tidak peduli versi apa yang digunakan.

Versi 1

Langkah awal simpan jqury di bawah ini di atas kode </body>

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]>
</script>

Keterangan:

  1. #sticky adalah ID widget yang dibuat sticky
  2. #footer adalah ID footer sebagai stoper sticky widget.
  3. Untuk mengatur jarak antara widget sticky dan batas atas halaman, Anda bisa menyesuaikan nilai pada properti top di kode el.css({ position: 'fixed', top: 0 });

Versi 2

Jika Anda ingin memberikan efek khusus saat widget menjadi sticky, seperti mengubah latar belakang atau elemen lainnya, Anda dapat menambahkan class pada widget dan mengatur tampilannya menggunakan CSS. Dengan cara ini, saat widget menjadi sticky, class tersebut akan ditambahkan, dan begitu widget mencapai batas footer, class itu akan dihapus secara otomatis.

Berikut kodenya

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("intro");
          }
          else {
             el.css('position','static');
             el.removeClass("intro");
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          el.removeClass("intro");
          }
        });
   }
});
//]]>
</script>

Lalu buat kode CSSnya dengan memberikan class .intro

.intro {
   background : ..................
   color : ..................
   ..................
}

Demikian tutorial membuat sticky widget yang berhenti di atas footer. Semoga bermanfaat.

Animasi Preloader di Blogspot

Cara membuat animasi preloader di Blogspot

Meningkatkan pengalaman pengguna (user experience) di website adalah salah satu faktor yang sangat penting dalam pengoptimalan SEO. Salah satu cara efektif untuk melakukannya adalah dengan menambahkan preloader ke blog Anda. Preloader adalah animasi atau gambar yang muncul sementara waktu saat halaman website sedang dimuat, memberikan kesan profesional dan menjaga pengunjung tetap tertarik sambil menunggu konten muncul.

Namun, selain meningkatkan estetika dan user engagement, preloader juga dapat berpengaruh pada kecepatan loading halaman, yang menjadi faktor penting dalam peringkat SEO di mesin pencari seperti Google. Dalam tutorial ini, kami akan membahas cara membuat preloader di Blogspot secara mudah dan cepat, serta bagaimana implementasinya dapat memberikan keuntungan bagi optimasi SEO blog Anda.

Berikut tutorialnya.

Pertama buka Edit HTML kemudian letakkan kode HTML berikut di bawah <body>

<div class='preloader'>
  <div class='backdrop' />
  <div class='dots-container'>
    <div class='dot red' />
    <div class='dot green' />
    <div class='dot yellow' />
  </div>
  <div class='preloader-text'> Loading... </div>
</div>

Kemudian langkah kedua letakkan pula kode CSS berikut di bagian sebelum </b:skin>

/* Preloader */
.preloader{position:fixed;width:100%;height:100vh;background:var(--bgcolor);left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 400ms;z-index:9999}
.preloader.hide{opacity:0;pointer-events:none}
.preloader .preloader-text{color:var(--fontcolor);text-transform:uppercase;letter-spacing:8px;font-size:15px}
.preloader .dots-container{display:flex;margin-bottom:48px}
.preloader .dot{background:red;width:20px;height:20px;border-radius:50%;margin:0 5px}
.preloader .dot.red{background:#ef476f;animation:bounce 1000ms infinite}
.preloader .dot.green{background:#06d6a0;animation:bounce 1000ms infinite;animation-delay:200ms}
.preloader .dot.yellow{background:#ffd166;animation:bounce 1000ms infinite;animation-delay:400ms}
@keyframes bounce {
50%{transform:translateY(16px)}
100%{transform:translateY(0)}

Yang terakhir pasang javascript ini di atas </body>

<script>
const preloader = document.querySelector( & quot;.preloader & quot;);
const preloaderDuration = 1500;
const hidePreloader = () = & gt;
{
	setTimeout(() = & gt;
	{
		preloader.classList.add( & quot; hide & quot;);
	}, preloaderDuration);
}
window.addEventListener( & quot; load & quot;, hidePreloader);
</script>

Selesai, tinggal disimpan dan lihat hasilnya.

Menambahkan preloader ke Blogspot Anda bukan hanya tentang memberikan tampilan yang lebih menarik, tetapi juga tentang memperbaiki pengalaman pengguna dan meningkatkan kinerja SEO blog Anda. Dengan memastikan pengunjung tidak merasa terburu-buru menunggu konten muncul, Anda dapat mengurangi bounce rate dan meningkatkan waktu tinggal di halaman, yang keduanya adalah faktor penting dalam algoritma peringkat Google.

Jangan lupa untuk selalu menguji kecepatan situs setelah penambahan preloader, karena terlalu banyak animasi atau elemen yang memperlambat waktu muat dapat memengaruhi kinerja SEO secara negatif. Dengan memadukan desain yang menarik dan pengoptimalan yang tepat, blog Anda akan lebih bersaing di mesin pencari, sekaligus memberikan pengalaman yang lebih baik bagi setiap pengunjung.

Demikian tutorial cara memasang animasi preloader di blogspot. Semoga bermanfaat.

Memindahkan Artikel Terkait ke Sidebar di Blogspot

Menambahkan Artikel Terkait ke Sidebar di Blogspot

Artikel ini sebenarnya saya dapat dari blog bungfrangki dimana waktu itu saya lagi mencari referensi untuk template projek saya untuk blog sekolah dengan referensi tampilan laman pusat informasi PMM. Sepertinya tidak terlalu penting, namun bagi saya ini bisa dijadikan referensi dan pembelajaran juga, juga siapa tahu diantara Anda ada yang lagi membutuhkan bagaimana menampilkan artikel terkait di sidebar.

Namun disini saya hanya membagikan dasarnya saja, kalau Anda ingin membuatnya menjadi cuztomized silakan langsung meluncur ke blog bungfrangki.

Baik silakan ikuti tutorialnya.

Pasang HTML

Langkah pertama buka Edit HTML

Kemudian pasang kode HTML berikut dibawah di atas id='sidebar-wrapper' atau yang penting diatas wadah sidebar.

  <div class='related-posts-widget' id='related-posts-widget'> 
  <div class='note2'/> 
  <b:section class='relatedPost' id='related-post-set-sidebar' maxwidgets='1' name='Related Post Setting' preferred='yes' showaddelement='no'> 
    <b:widget id='HTML790' locked='true' title='Related Post' type='HTML' version='1'> 
  <b:widget-settings> 
  <b:widget-setting name='content'>numPosts:6,widgetStyle:1,summaryLength:100,</b:widget-setting> 
  </b:widget-settings> 
  <b:includable id='main'> 
  <!-- only display title if it's non-empty --> 
  <b:if cond='data:title != &quot;&quot;'> 
  </b:if> 
  <div class='widget-content'> 
  <script type='text/javascript'> 
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}} 
  </script> 
  </div> 
</b:includable> 
</b:widget> 
</b:section> 
  </div>

Langkah selanjutnya pergi ke class='post-footer'. Biasanya ada di bawah postingan, lalu pasang juga HTML di bawah.

<div class='related-wrapper' id='related-wrapper'> 
<script type='text/javascript'> 
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>]; 
  </script> 
  </div>

Pasang CSS

Setelah selesai kita pasang CSS di dalam <style> atau b:skin

/* CSS Related Post for Sidebar */ 
#related-wrapper{margin:20px auto 0;padding:0;display:block;width:100%;max-width:300px;overflow:hidden;} 
.related-post{font-family:&#39;Poppins&#39;, sans-serif;margin:0 auto;padding:0;text-align:center} 
.related-post h4{margin:5px 0 15px 0;font-size: 15px;line-height: 1.2em;padding: 0 15px;position: relative;color: #292828;font-weight: 700;text-align:center;text-transform: uppercase;background-color:#fff;display:inline-block} 
.related-post h4:before{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;right: 100%;left: auto;top: 50%;content: &quot;&quot;;} 
.related-post h4:after{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;left: 100%;right: auto;top: 50%;content: &quot;&quot;;} 
.related-post .related-post-style-1,.related-post .related-post-style-2,.related-post .related-post-style-3,.related-post .related-post-style-4,.related-post-style-5{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;} 
.related-post .related-post-item-summary,.related-post-style-3 span,.related-post-style-4 span{font-size:83%;color:#656565;text-align:left!important;margin:0 auto;padding:0} 
/* Related Post Style 6 */ 
.related-post-style-6 .related-post-item-tooltip{display:block;width:100%} 
.related-post-style-6 li .related-post-item-summary{display:none} 
.related-post-style-6 li{list-style:none;margin:0 auto 10px;padding:0 0 10px;border-bottom:1px solid #eee;display:block;width:100%;position:relative;overflow:hidden} 
.related-post-style-6 a.related-post-item-title{display:block;text-align:left;font-weight:400;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px;text-align:left;} 
.related-post-style-6 a:hover{text-decoration:underline} 
.related-post-style-6 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:70px;height:70px;padding:0;margin:0 15px 0 0;overflow:hidden;float:left} 
.related-post-style-6 .related-post-item-thumbnail img{width:auto;height:100%;display: flex;align-items:center;} 
.related-post-style-6 li:first-child .related-post-item-thumbnail{width:100%;height:175px;float:none;margin:0 auto 10px} 
.related-post-style-6 li:first-child .related-post-item-thumbnail img{width:100%;height:auto;} 
.related-post-style-6 li:first-child .related-post-item-summary{display:inline-block} 
.related-post-style-6 li:last-child{border:none} 
/* Related Post Style 5 */ 
.related-post-style-5{margin:0 auto;counter-reset:count;} 
.related-post-style-5 li{list-style:none;margin:0 auto 10px;height:100px;display:block;width:100%;position:relative;border-radius:5px;overflow:hidden} 
.related-post-style-5 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:100%;padding:0;margin:0 auto;overflow:hidden} 
.related-post-style-5 li img{width:100%;height:auto;position:relative;} 
.related-post-style-5 a{display:block;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#fff;margin:0 auto} 
.related-post-style-5 a:hover{text-decoration:underline} 
.related-post-style-5 li a span{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100px;width:100%;position:absolute;z-index:10;bottom:-100px;display:block;background:rgba(0,0,0,.4);transition:all .2s ease-in-out;padding:5px 5px 5px 35px;display:flex;flex-direction:column;justify-content:center;} 
.related-post-style-5 li:hover a span{bottom:0} 
.related-post-style-5 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font: bold 80px/1 Sans-Serif;z-index: 51;transition: all .4s;height:100px;min-width: 30px;font-size: 18px;line-height: 100px;background:rgba(26,27,30,.7);font-weight: 800;text-align: center;padding:0;opacity:0.7;} 
/* Related Post Style 4 */ 
.related-post-style-4{margin:0 auto;padding:0} 
.related-post-style-4 ul li,.related-post-style-4 ul,.related-post-style-4 li{list-style:none;outline:0;border:0;margin:0 0;padding:0} 
.related-post-style-4 li{list-style:none;margin:0 auto;display:block;width:100%;overflow:hidden} 
.related-post-style-4 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:0 auto;overflow:hidden;} 
.related-post-style-4 li img{width:100%;height:auto;} 
.related-post-style-4 a.related-post-item-title{display:block;text-align:center;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px} 
.related-post-style-4 a:hover.related-post-item-title{text-decoration:underline} 
.related-post-style-4 span{display:table-cell;} 
.related-post-style-4 .related-post-item-tooltip{margin:-25px 15px 10px;padding:10px;display:block;position:relative;background-color:#fff;overflow:hidden} 
.related-post-style-4 span{text-align:center;display:inline} 
/* Related Post Style 3 */ 
.related-post-style-3{margin:0 auto} 
.related-post-style-3 li{list-style:none;margin:0 auto;display:block;width:100%} 
.related-post-style-3 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:10px auto 0;overflow:hidden;} 
.related-post-style-3 li img{width:100%;height:auto;} 
.related-post-style-3 a.related-post-item-title{display:block;text-align:left;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:10px auto 5px} 
.related-post-style-3 a:hover.related-post-item-title{text-decoration:underline} 
.related-post-style-3 span{display:table-cell;} // this is summary 
/* Related Post Style 2 */ 
.related-post-style-2{margin:0 auto!important;} 
.related-post-style-2 li{list-style:none;margin:0 auto 10px;padding:10px 0 0;display:block;width:100%;border-top:1px solid #eee} 
.related-post-style-2 li:first-child {border-top:none} 
.related-post-style-2 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;margin:0 auto;width:125px;height:80px;max-width:none;max-height:none;padding:0;overflow:hidden;display:inline-block;float:left} 
.related-post-style-2 .related-post-item-thumbnail img{width:100%;height:100%} 
.related-post-style-2 a.related-post-item-title{line-height:1.3em;display:block;text-align:left;font-size:100% !important;color:#2d2d2d;margin:0 0 5px;font-weight:700} 
.related-post-style-2 a:hover.related-post-item-title{text-decoration:underline} 
.related-post-style-2 a.related-post-item-more{display:none} 
.related-post-style-2 .related-post-item-text{display:inline-block;text-align:left;width:calc(100% - 140px);float:right;} 
/* Related Post Style 1 */ 
.related-post-style-1{margin:0 auto;counter-reset:count;} 
  .related-post-style-1 li{font-size:95% !important;list-style:none;background-color:#f5f5f5;border-bottom:1px solid #fff;display:block;position:relative;margin:0 auto;padding:13px 10px 13px 50px;text-align:left} 
.related-post-style-1 li a{color:#2d2d2d;font-weight:400;line-height:1.3em;text-align:left;display:block} 
.related-post-style-1 li a:hover{text-decoration:underline} 
.related-post-style-1 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font-size:70px;z-index: 51;transition: all .4s;min-width:40px;font-size: 18px;background:rgba(0,0,0,.5);vertical-align:center;height:100%;font-weight: 700;text-align: center;padding:0;display:flex;flex-direction:column;justify-content:center;height:100%;}

Kalau kita lihat diatas CSSnya sangat panjang, namun sebenarnya itu ada 6 gaya atau tampilan yang bisa kita aplikasikan ke dalam blog, seperti misal style 1 hanya tulisan tanpa thumbnail, lalu gaya 2 ada tulisan dan thumbnailnya, dlsb. Lebih lengkapnya silakan capcus ke blog bungfrangki. Jika tidak membutuhkan bisa Anda buang di CSS agar terlihat lebih simple.

Pasang Javascript

Kemudian langkah selanjutnya adalah memasang Js di atas </body>

<script type='text/javascript'> 
//<![CDATA[ 
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/?\?m=\d+(\&|$)|\/+$/, "")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span class="bg_overlay"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/?\?m=\d+(\&|$)|\/+$/, "")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); 
//]]> 
</script>

kemudian simpan template Anda. Dan langkah terakhir adalah memasang kode berikut melalui menu Tata Letak >> tambahkan Gadget pada Layout Sidebar, kemudian pilih HTML/Javascript.

<div class='related-post' id='related-post'/>

Demikian tutorial cara memasang related post di sidebar blogspot, semoga bermanfaat.

Menambahkan Perkiraan Waktu Baca di Blogspot

Cara Menambahkan Perkiraan Waktu Baca di Blogspot

Di dunia blogging, terutama jika kamu sering menulis artikel panjang, penting bagi pembaca untuk mengetahui berapa lama mereka akan menghabiskan waktu untuk membaca artikel tersebut. Salah satu cara untuk memberikan informasi ini adalah dengan menambahkan perkiraan waktu baca (reading time) pada setiap postingan di blog. Widget ini tidak hanya memberikan kenyamanan bagi pembaca, tetapi juga meningkatkan pengalaman pengguna secara keseluruhan.

Dalam tutorial ini, kita akan membahas cara menambahkan perkiraan waktu baca di Blogspot dengan menggunakan JavaScript, HTML, dan CSS. Proses ini cukup sederhana dan akan memanfaatkan sedikit kode untuk menghasilkan fitur yang menarik dan fungsional di blogmu. Yuk Silakan Ikuti tutorialnya!

Sebagai prasyarat tentunya di HTML sudah terpasang plugin JQuery. Contohnya seperti di bawah.

<script crossorigin='anonymous' integrity='sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=' src='https://code.jquery.com/jquery-3.7.0.min.js'/>

Jika langkah persiapan sudah selesai, lanjut langkah berikutnya:

1. Buka edit HTML

Pada menu di blogspot, silakan klik Tema kemudian pilih SESUAIKAN kemudian klik Edit HTML

2. Tambahkan HTML

Tempatkan atau tambahkan HTML di bawah ini di bagian "post-header"

<span class="eta" id="etawrap"></span>

3. Tambahkan CSS

Kemudian tambahkan CSS berikut

#etawrap{font-weight:bold;color:#FF0000;}

Untuk CSS silakan disesuaikan dengan tema blogmu

4. Pasang Kode Javascript

<script type='text/javascript'>  
//<![CDATA[  
;(function(a){a.fn.readingTime=function(r){if(!this.length){return this}var h={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:true,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null};var i=this;var c=a(this);i.settings=a.extend({},h,r);var e=i.settings.readingTimeTarget;var d=i.settings.wordCountTarget;var k=i.settings.wordsPerMinute;var p=i.settings.round;var b=i.settings.lang;var l=i.settings.lessThanAMinuteString;var o=i.settings.prependTimeString;var f=i.settings.prependWordString;var g=i.settings.remotePath;var n=i.settings.remoteTarget;if(b=="it"){var m=l||"Meno di un minuto";var q="mins"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="mins"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="mins"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="mins"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="mins"}else{var m=l||"< 1 Min";var q="mins"}}}}}var j=function(y){var v=y.trim().split(/\s+/g).length;var u=k/60;var s=v/u;if(p===true){var x=Math.round(s/60)}else{var x=Math.floor(s/60)}var w=Math.round(s-x*60);if(p===true){if(x>0){a(e).text(o+x+" "+q)}else{a(e).text(o+m)}}else{var t=x+":"+w;a(e).text(o+t)}if(d!==""&&d!==undefined){a(d).text(f+v)}};c.each(function(){if(g!=null&&n!=null){a.get(g,function(s){j(a("<div>").html(s).find(n).text())})}else{j(c.text())}})}})(jQuery);  
//]]>  
</script>  
<script type='text/javascript'>  
$(function() {  
$(&#39;.post-body&#39;).readingTime();  
});  
</script>

5. Simpan Template


Demikian tutorial cara menambahkan perkiraan waktu baca di blogspot, semoga bermanfaat.

Panduan Setting Robots.txt di Blogger untuk SEO Optimal

Setiap bot perayapan mesin pencari (crawler) pertama-tama akan mengakses file robots.txt pada sebuah situs web untuk memahami aturan perayapan yang diterapkan. Dalam konteks SEO blog Blogger, file robots.txt memainkan peran penting dalam mengarahkan crawler agar fokus pada konten yang relevan dan menghemat anggaran perayapan.

Artikel ini memberikan panduan membuat file robots.txt khusus yang dioptimalkan untuk Blogger serta memahami dampaknya terhadap kinerja situs di Google Search Console.


Apa Fungsi File Robots.txt?

File robots.txt bertugas memberi tahu mesin pencari halaman mana yang boleh dan tidak boleh dirayapi. Berikut adalah fungsi utama file ini:

  • Mengontrol Aktivitas Perayapan: File ini dapat mengizinkan atau melarang bot tertentu untuk merayapi bagian tertentu dari situs.

  • Mendeklarasikan Peta Situs: File robots.txt dapat digunakan untuk menyatakan lokasi sitemap agar mesin pencari seperti Google, Bing, atau Yandex lebih mudah menemukan dan mengindeks konten.

  • Mengelola Anggaran Perayapan: Dengan membatasi perayapan pada halaman yang tidak relevan seperti arsip, label, atau pencarian internal, bot dapat diarahkan untuk fokus pada halaman yang lebih penting.

Selain itu, fungsi tag meta robots melengkapi pengaturan ini dengan mengontrol apakah halaman tertentu harus diindeks dan muncul dalam hasil pencarian (SERP) atau tidak.


Robots.txt Bawaan Blogger

Untuk mengoptimalkan file robots.txt di Blogger, penting memahami struktur bawaan dari platform ini. Berikut adalah pengaturan default file robots.txt di Blogger:

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.example.com/sitemap.xml

Penjelasan:

  1. User-agent: Mediapartners-Google – Mengizinkan Google AdSense untuk merayapi seluruh situs.

  2. User-agent: – Melarang bot lain merayapi halaman pencarian internal (/search).

  3. Allow: / – Mengizinkan perayapan di luar bagian yang dilarang.

  4. Sitemap: Menyatakan lokasi sitemap posting untuk membantu bot menemukan dan mengindeks konten.

Namun, pengaturan default ini masih memungkinkan perayapan pada halaman arsip, yang dapat menyebabkan masalah konten duplikat.


Mengoptimalkan File Robots.txt untuk Blogger

Untuk meningkatkan SEO, file robots.txt dapat dimodifikasi agar lebih efisien. Berikut adalah langkah-langkah optimasi:

  1. Blokir Perayapan Halaman Pencarian dan Arsip: Tambahkan aturan berikut untuk mencegah perayapan pada halaman yang tidak relevan:

    Disallow: /search*
    Disallow: /20*

    “/search*” melarang perayapan pada semua halaman pencarian dan label, sedangkan “/20*” mencegah perayapan pada arsip yang biasanya berformat tahun publikasi.

  2. Izinkan Perayapan Halaman dan Postingan Penting: Tambahkan aturan berikut untuk memastikan postingan tetap dapat dirayapi:

    Allow: /*.html
  3. Tambahkan Sitemap untuk Halaman dan Postingan: Pastikan menyertakan kedua jenis sitemap:

    Sitemap: https://www.example.com/sitemap.xml
    Sitemap: https://www.example.com/sitemap-pages.xml

    “Sitemap-pages.xml” membantu bot menemukan halaman statis di Blogger.

Contoh file robots.txt yang dioptimalkan:

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search*
Disallow: /20*
Disallow: /feeds*
Allow: /*.html

Sitemap: https://www.example.com/sitemap.xml
Sitemap: https://www.example.com/sitemap-pages.xml

Ganti example.com dengan domain Blogger, seperti namaanda.blogspot.com atau domain kustom lainnya.


Efek di Google Search Console

Setelah menerapkan pengaturan ini, laporan di Google Search Console mungkin menunjukkan halaman yang diblokir oleh robots.txt. Pastikan halaman yang diblokir adalah halaman yang memang tidak relevan untuk SERP, seperti:

  • File Robots.txt memungkinkan perayap untuk merayapi seluruh situs web.
  • Tag Meta Robots melarang halaman yang tidak penting untuk diindeks.

Jika ada halaman penting yang tidak sengaja terblokir, perbaiki pengaturan robots.txt dan perbarui indeks di Google Search Console.


Kesimpulan

File robots.txt yang dioptimalkan dengan baik untuk Blogger dapat membantu menghemat anggaran perayapan, mengurangi risiko konten duplikat, dan meningkatkan kinerja SEO situs. Dengan memblokir perayapan pada halaman yang tidak relevan dan memfokuskan bot pada konten utama, blog akan lebih efektif muncul di hasil pencarian.

Semoga panduan ini bermanfaat untuk setting robots.txt di Blogger. Selamat mencoba dan semoga sukses meningkatkan peringkat blog!

6 Langkah Untuk Membuat Template Web Responsive

Sebenarnya ini bukanlah satu-satunya cara. Ada banyak sekali metode yang bisa anda jumpai di google. Namun cara ini adalah sebuah rangkuman dari berbagai metode yang pernah saya baca atau saya dapat dari blogwalking baik di google atau di media sosial yang membahas khusus kode HTML dan CSS.

Yuk, kita mulai...

Mengapa harus responsive?

  1. Kebanyakan pengunjung web menggunakan handphone untuk berselancar di internet. Ada sekitar 53% total dari website traffic.
  2. Desain responsive adalah berbicara tentang merancang website yang terlihat bagus diberbagai macam device (Laptop, handphone potrait, handphone lanscape, etc)
Bagaimana caranya?

Silakan ikuti petunjuk berikut!

Meta Viewport

Tag Meta Viewport memberikan instruksi kepada browser dalam mengontrol dimensi dan skala halaman sebuah website.

Dipasang pada bagian head

Adapun kodenya adalah sebagai berikut.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Perbedaan menggunakan meta tag viewport dan tidak menggunakan.


Media Queries

Ini adalah cara bagaimana menentukan style website ketika berada pada skala halaman tertentu dan dalam device tertentu. Dalam kode media queries kita dapat menentukan atau memasukkan gaya halaman dengan mudah. Apakah posisi contentnya berada disamping atau dibawah. Contoh yang bisa kita atur disini antara lain: width, height, orientation, dan lain-lain.

Dipasang pada bagian head, tepatnya pada bagian <style> (CSS) atau diatas ]]</b:skin>

Berikut adalah rekomendasi CSS untuk media queries (breakpoint) untuk semua perangkat.

// Ekstra small devices (phone, 600px dan dibawahnya)
@media only screen and (max-width:600px){
//kode disini
}
// Small devices (potrait tablets and large phones, 600px dan diatasnya)
@media only screen and (min-width:600px){
//kode disini
}
// Medium devices (lanscape tablets, 768px dan diatasnya)
@media only screen and (min-width:768px){
//kode disini
}
// Large devices (laptop/desktop, 992px dan diatasnya)
@media only screen and (min-width:992px){
//kode disini
}
// Ekstra large devices (large laptop and desktop, 1200px dan diatasnya)
@media only screen and (min-width:1200px){
//kode disini
}

Silakan gunakan sesuai kebutuhan. Atau dipakai semua juga tidak masalah.

Layout

Ada beberapa contoh penggunaan pengkondisian layout yang bisa dipakai. Bisa block dengan menggunakan css float, dapat juga menggunakan grid, dan ada juga yang menggunakan flex. Banyak yang menyarankan menggunakan flex, namun sepanjang pengalaman saya, tergantung kebutuhan. Misal jika kita ingin membuat sebuah galeri gambar maka gunakan grid, namun jika pemposisian layout konten gunakan flex.

Contoh kode CSSnya adalah sebagai berikut.

.items {
	display:flex;
    justify-content:space-between;
}

Mobile First

Jika anda mendesain dengan mobile first (mengutamakan tampilan mobile), anda dapat mengoptimalkan breakpoint pada konten dan mempertahankan jumlah breakpoint sesedikit mungkin.

Relative Units

Jangan gunakan satuan ukuran pasti, seperti px, pt, cm, dan lainnya, sebagai gantinya gunakan %

.main {
	width: 70%;
}
.sidebar {
	width: 30%;
}

Demikian yang mungkin bisa saya bagikan mengenai langkah untuk membuat template web responsive, dan semoga bermanfaat. Terima kasih telah berkunjung ke blog Agung Jaka Nugraha. Wassalam

Cara terbaru mengatasi gambar thumbnail blur di blogspot dengan javascript

Mungkin diantara kalian ada yang penah mengalami kasus seperti saya. Kejadiannya ketika saya mencoba membuatkan template baru untuk teman saya pada blog baru yang barusan dia buat.

Dalam requestnya dia ingin ditambahkan random-post dengan thumbnail dimana sumber postingannya berasal dari website lain. Setelah saya buatkan ternyata saya menemui masalah yaitu gambar thumbnail yang digenerate dari web lain tersebut tidak bisa terlihat dengan jelas alias ng-blur. Bingung, dong..

Setahu saya sih, ketika kita memperbaiki gambar thumbnail blur, kita tinggal mengganti kode HTML pada post-body (tutorial bisa dicari di google, banyak kok yang bahas 😁). Nah, di kasus ini, saya sudah memperbaiki dengan mengubah kode HTML di web asal random-post, dan ternyata gagal.

Setelah saya browsing-browsing akhirnya ketemu kodenya di stakoverflow.com. Ada yang membahas tentang thumbnail yang ng-blur. Tapi setelah saya coba, tenyata masih gagal juga. Hampir saja saya menyerah, dan setelah diam sebentar sambil mengamati baris kode yang saya dapat dari website tersebut, saya mulai dapat titik terang.

Sambil mengutak-atik dan melakukan beberapa percobaan terhadap kode tersebut, dan setelah saya coba berulang-kali akhirnya percobaan saya berhasil. Dan kode yang saya dapatkan adalah sebagai berikut.

$(document).ready(function(){$("ul#random-posts").find("img").each(function(t,a){(a=$(a)).attr({src:a.attr("src").replace(/s\B\d{2,4}/,"s1600")}),a.attr("width","100%"),a.attr("height","auto")})});

Kode yang saya dapat dari stackoveflow diatas yang saya coba utak atik adalah pada kode "replace(/s\B\d{2,4}/,"s1600", yang awalnya adalah "replace(/s\B\d{2,4}/,"w1600;replace(/s\B\d{2,4}/,"h1600".

Dan jika anda ingin mencoba kode diatas, silakan ubah yang saya tandai dengan class atau ID yang ditarget. Jika terdapat lebih dari satu target, tinggal menambahkan koma (,) saja. 

Demikian sharing pengalaman saya mengenai mengatasi gambar thumbnail yang ngblur dengan javascript, semoga bermanfaat. Dan terima kasih telah mengunjungi blog Agung Jaka Nugraha. Wassalam 

Tips Menulis CSS seperti Profesional

Salah satu masalah terbesar dengan pemrograman adalah maintenance atau pemeliharaan. Dalam skenario sebenarnya, seorang programmer pro tidak selalu memulai pengembangan proyek dari awal. Sebagian besar, mereka mendapatkan (atau mengambil) proyek yang mungkin telah ditulis sebelumnya atau biasa kita sebut dengan template.

Untuk bekerja secara efektif pada suatu proyek, pertama-tama kita harus memahami kode sumbernya. Pada titik ini, kita harus menyadari pentingnya kode yang bersih dalam suatu template. Sebagai programmer, kita harus mencoba menulis kode kita sebersih mungkin.

Hal ini juga berlaku untuk CSS. Ada beberapa poin yang perlu kita perhatikan saat menulis CSS. Dalam posting ini, saya ingin berbagi beberapa yang paling penting dengan Anda. Saya yakin beberapa tips ini akan membantu Anda meningkatkan kualitas kode CSS Anda dan layak disebut sebaga desainer pro.

Jadi mari kita mulai...

Gunakan Reset CSS

Setiap browser dilengkapi dengan gaya default masing-masing untuk setiap halaman. Ini menyebabkan halaman tampil berbeda dari browser ke browser.

Tujuan dari reset CSS adalah untuk mengurangi jenis ketidakkonsistenan permasalahan tersebut. Reset CSS akan mengatur ulang nilai elemen seperti tinggi garis default, margin dan ukuran font judul, dan sebagainya.

Berikut adalah contoh reset CSS yang dapat digunakan:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Gunakan CSS Variable

Variabel CSS juga dikenal sebagai properti khusus yang dapat digunakan kembali di seluruh dokumen. Situs kompleks memiliki banyak nilai berulang. Misalnya, alih-alih menggunakan warna yang sama berulang kali, Anda dapat menetapkannya ke variabel CSS.

Dengan cara ini, saat Anda perlu melakukan perubahan global, hanya ada satu tempat untuk melakukannya.

Contohnya adalah sebagai berikut:

:root{
--body-color:#fdfdfd;
--font-color:#333;
}

Untuk penggunaan dalam CSS gunakan aturan berikut:

body{
background:var(--body-color);
color:var(--font-color);
}

Adapun kegunaannya adalah apabila anda ingin mengubah warna atau gaya CSS yang lain, anda tinggal mengganti yang ada di :root saja, tidak perlu merubah semua CSS yang menggunakan nama yang sama. Sehingga mempersingkat waktu anda dan membuat CSS anda menjadi terlihat seperti profesional.

Gunakan komentar untuk mengatur bagian CSS

Biasanya saat menata CSS, Anda berpindah dari satu bagian halaman ke bagian lain, sambil menulis beberapa baris CSS untuk setiap bagian untuk menatanya. Ini membuat kode Anda terfragmentasi. Lebih mudah untuk menulis pemilih CSS dalam urutan yang sama atau mengelompokkannya dalam satu elemen halaman.

Jadi, pertama Anda memiliki gaya umum, untuk seluruh halaman kemudian Header, Navbar, body dll. Dengan cara ini ketika Anda perlu melakukan perubahan, sangat mudah untuk dengan cepat mencari ke baris yang benar di file CSS Anda.

/***** Header *****/
header{
// CSS anda
}

/***** Aside *****/
aside{
// CSS anda
}

/***** Footer *****/
footer{
// CSS anda
}

Gunakan Prinsip DRY

DRY adalah singkatan dari "Don't Repeat Yourself". Ini merupakan prinsip umum dari pengembangan software dan dapat diterapkan dalam bahasa pemrograman apa pun juga dalam CSS. Seperti namanya, DRY bertujuan untuk menghindari atau mengurangi pengulangan sebanyak mungkin.

Misalnya, kita dapat membuat 3 kelas CSS untuk 3 tombol seperti ini:

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Bisa dilihat kode dengan background kuning terdapat kesamaan, kita dapat menggunakan prinsip DRY dengan menulis aturan umum "satu kali" di class CSS tambahan dan aturan lain dalam CSS lain. Maka jadilah seperti ini:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

Seperti yang dapat kita lihat, penerapan prinsip DRY menghindari pengulangan, mengurangi jumlah baris, dan meningkatkan keterbacaan serta kelancaran kinerja.

Penamaan

Memberi nama CSS selector adalah aspek penting lainnya dalam menulis CSS yang lebih baik. Nama pemilih harus deskriptif dan dapat dibaca dengan jelas.

// PENAMAAN YANG BURUK
.p {
  // Rules
}

.myFirstForm {
  // Rules
}

Normalnya ada tag HTML <p> yang menjadi singkatan dari paragraf. Di atas kita tidak bisa benar-benar memahami apa class p itu. Hindari juga nama seperti myFirstForm dan saya tidak merekomendasikan penggunaan huruf besar kecil yang bercampur.

Sebagai gantinya, gunakan nama deklaratif (dipisahkan dengan tanda hubung jika ada banyak nama). Seperti contoh dibawah ini:

// PENAMAAN YANG BAGUS

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
}

Saya pikir nama-nama itu lebih masuk akal sekarang.

Memberi nama sesuatu dalam pemrograman tidaklah mudah, tetapi ada berbagai konvensi penamaan yang dapat Anda gunakan dalam proyek Anda. Salah satunya adalah BEM (Block Element Modifier). Anda dapat mempelajarinya disini.

Gunakan Singkatan

Beberapa properti CSS seperti paddings, margins, fonts dan border dapat ditulis dengan cara yang jauh lebih sederhana dengan singkatan. Karena dengan begitu akan membantu mengurangi garis aturan CSS, jadi CSS anda menjadi lebih bersih, yang otomatis mempercepat loading.

Jadi jika tanpa singkatan, class CSS akan terlihat seperti ini:

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid:
  border-color: black;
}

Dan setelah disingkat akan menjadi seperti ini:

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

Untuk mempelajari lebih lanjut tentang penyingkatan CSS silakan klik disini.

Jangan gunakan penamaan Warna (Named colors)

Gunakan kode hex untuk warna Anda. Lebih sulit untuk dibaca tetapi mereka memiliki beberapa keuntungan. Pertama mereka diberikan lebih cepat daripada menggunakan nama warna. Kedua, browser terkadang tidak setuju dengan arti beberapa nama warna. Ketiga Anda memiliki 16.777.216 pilihan warna untuk dipilih. Juga akan lebih mudah untuk mengatasinya setelah Anda mulai bermain dengan Javascript.

Contoh penggunaan warna adalah sebagai berikut:

// Gunakan kode hex
body{
background-color:#f50000;
}

//Jangan gunakan named colors
body{
background-color:red;
}

Jangan gunakan inline-styles

Terdapat beberapa argumen di web tentang hal ini: beberapa mengatakan kepada Anda untuk tidak pernah menggunakan inline styles, sementara yang lain berpendapat bahwa ini berguna dalam beberapa kasus.

Menurut pendapat saya, praktik terbaik sebenarnya adalah tidak menggunakan inline styles. Saya akan fokus di sini tentang mengapa kita tidak boleh melakukannya.

Menurut prinsip separation of concerns, desain (CSS), konten (HTML), dan logika (JavaScript) harus dipisahkan karena alasan seperti keterbacaan dan pemeliharaan yang lebih baik.

Menyertakan inline styles atau CSS di dalam tag HTML adalah hal yang melanggar aturan ini, seperti contoh dibawah:

<div style="font-size: 16px; color: red;">Some Text</div>

Masalah lainnya dalam menggunakan inline styles adalah kita sulit untuk mencarinya ketika ingin merubah gaya CSS. Misalnya, ketika kita akan mengubah ubah ukuran font teks di halaman web. Untuk melakukan itu, hal yang paling memudahkan adalah pertama-tama kita menemukan bagian tertentu di browser tempat perubahan diperlukan dengan melihat struktur HTML, contoh seperti di bawah.

<div class="text-bold">Some Text</div>

Kemudian kita hanya perlu menemukan selector dalam tag tersebut. Lalu, kita pergi ke class itu dan membuat perubahan:

.text-bold {
  font-size: 16px;    // change the font-size to 14px
  font-weight: bold;
}

Sesimpel itu.

Namun beda kasus jika kita menggunakan inline styles. Hal tersebut akan memakan banyak waktu kita untuk mencari dan menemukan.

Kurangi Ukuran File CSS

File CSS yang lebih kecil berarti pemuatan halaman yang lebih cepat dan pengalaman pengguna yang lebih baik. Pertama, Anda harus menghapus kode yang tidak perlu. Untuk melakukan ini, periksa kode CSS yang berlebihan atau duplikat menggunakan alat seperti ini: http://unused-css.com/

Kecilkan juga ukuran file css dengan menggunakan kompresor css. Ada banyak. Salah satu favorit saya adalah minifier CSS: http://www.csscompressor.net/

Periksa di CSS Validator

Meskipun halaman Anda dimuat dengan benar di browser Anda, halaman tersebut mungkin muncul secara tidak terduga di browser lain. Atau mungkin ada bug yang tidak muncul di browser Anda. 

CSS Validator akan memeriksa kesalahan atau bug pada CSS Anda dan memastikan kompatibilitas lintas platform, lintas browser, dan di masa mendatang. Pilihan saya adalah https://jigsaw.w3.org/css-validator/

Demikan yang dapat saya bagikan mengenai cara menulis CSS seperti profesional, semoga bermanfaat. Terima kasih telah mengunjungi blog agung jaka nugraha. Wassalam!

Memasang Meta Tag Komplit di blogger

Cara pasang Meta Tag, Opengraph Facebook, Twitter Card Markup dan Dublin Core di blogspot

Memasang meta tag, opengraph facebook, twitter card markup, geo meta tag dan dublin core di blogspot | Meta tag merupakan salah satu komponen penting dalam template blog atau website, karena dengan adanya meta tag akan lebih memudahkan mesin crawl dalam menjelajahi website atau blog kita.

Ada bermacam-macam tipe meta tag yang sering kita jumpai dalam tutorial-tutorial yang sudah tersebar di internet. Diantaranya adalah Opengraph facebook yang biasanya disediakan oleh developer facebook, lalu ada lagi twitter card markup, yang bisa menentukan seperti apakah tampilan share blog kita waktu kita bagikan di twitter, ada lagi Dublin core yang konon kata beberapa ahli SEO juga mempunyai peran penting dalam hal SEO suatu template.

Meta tag komplit di blogspot

Pada browser chrome kita akan bisa jumpai suatu plugin atau ekstensi yang bisa mendeteksi meta tag suatu blog, dan salah-satunya yang saya pakai adalah meta seo inspector. Anda bisa mencarinya di toko ekstensi google. Atau juga bisa apabila anda menggunakan ekstensi SEOquake. Berikut ini adalah salah satu tampilan dari SEOquake.

Cara memasang meta tag, opengraph facebook, Geo Meta tag, dan Dublin Core di blogger - agungjakanugraha.blogspot.com
seoquake

Nb: Icon dipojok adalah indikasi bahwa chrome anda sudah terinstall extensi SEOquake.
Berikutnya adalah tampilan extensi META SEO inspector

Cara memasang meta tag, opengraph facebook, Geo Meta tag, dan Dublin Core di blogger - agungjakanugraha.blogspot.com
META SEO inspector

Cara Pasang Meta Tag Komplit Di Blogspot

Untuk dapat menampilkan data di atas maka kita membutuhkan meta tag.
Jika Anda masih bingung dengan bagaimana cara memasang meta tag di blogger silakan copy-paste aja meta yang pernah saya kumpulkan selama blogwalking di bawah ini, lalu sesuaikan dengan blog anda.

<meta content='(verifikasi google anda)' name='google-site-verification'/>
<meta content='(verifikasi bing anda)' name='msvalidate.01'/>
<meta content='(verifikasi Alexa anda)' name='alexaVerifyID'/>
<!-- Meta tags for homepage start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='deskripsi blog anda' name='keywords'/>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title + &quot; keyword1, keyword2, keyword3, dst&quot;' name='keywords'/>
<meta expr:content='data:blog.pageName + &quot;&quot;' name='description'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription + &quot; ,Find More information about all &quot; + data:blog.title + &quot; by Clicking here &quot;' name='description'/>
<meta content='keyword1, keyword2, keyword3, dst' name='keywords'/>
</b:if>
</b:if>
<!-- Meta tags for homepage end -->
<!-- Meta tags for post page start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, keyword1, keyword2, keyword3, dst&quot;' name='keywords'/>
<b:else/>
<meta expr:content='&quot; This page contains information about &quot; + data:blog.pageName + &quot; at &quot; + data:blog.title + &quot; Blog. &quot; + &quot; To learn more about this information click on this result &quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; article, &quot; + data:blog.pageName + &quot; Post, Info About &quot; + data:blog.pageName ' name='keyword'/>
</b:if>
</b:if>
<!-- Meta tags for post page end -->
<!-- Meta tags for static page start -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<meta expr:content='&quot;keyword1, keyword2, keyword3, dst&quot;' name='keywords'/>
<b:else/>
<meta expr:content='&quot; This page contains information about ” &quot; + data:blog.pageName + &quot; ” at &quot; + data:blog.title + &quot; Blog. &quot; + &quot; To learn more about this information click on this result &quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; Page &quot; + &quot; at &quot; + data:blog.title' name='keyword'/>
</b:if>
</b:if>
<!-- Meta tags for static page end -->
<!-- Meta tags for label,search,archive page start -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title>All article under : <data:blog.pageName/> : <data:blog.title/></title>
<meta expr:content='&quot; This page contains information about all article and post under :&quot; + data:blog.pageName + &quot;,&quot; + data:blog.title + &quot; Blog. Find More information about all &quot; + data:blog.pageName + &quot; article By Clicking here &quot;' name='Description'/>
<meta expr:content='&quot; Article &quot; + data:blog.pageName + &quot; &quot; + data:blog.title + &quot;, Post &quot; + data:blog.pageName + &quot; &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName + &quot; page &quot; + data:blog.title' name='Keywords'/>
</b:if>
</b:if>
<!-- Meta tags for label,search,archive page end -->
<!-- Meta tags for error page start -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404 Error Page : Sorry,Wrong URL | <data:blog.title/></title>
</b:if>
<!-- Meta tags for error page end -->
<link expr:href='data:blog.url' rel='canonical'/>
<link href='https://plus.google.com/u/0/+akunGooglePlusAnda' rel='publisher'/>
<link href='https://plus.google.com/u/0/+akunGooglePlusAnda' rel='author'/>
<link href='url icon anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<meta content='ID' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta Content='snippet' name='googlebot'/>
<meta content='nama Author' name='author'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow' name='googlebot'/>
<!-- facebook opengraph area -->
<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0VVd4xXEmfNymvf-DGqjheMr3hcUodH48a6fMWRGnppPimEyJ_21cjVbqbfWlpmPetk7Ze6x0gCUlQeKaOafX-TaIuGCjOwbKXPtP5LFGIA_3ApWzXBCrpNIp1U8MJ69rS8pe8IE3y9J/s0/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='1804789006468790' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='url gambar ikon besar' property='og:image'/>
</b:if>
</b:if>
<meta content='http://www.facebook.com/fanpagefacebook' property='fb:admins'/>
<meta content='http://www.facebook.com/fanpagefaceebook' property='fb:profile_id'/>
<!-- twitter area -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot; untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='url icon besar anda' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@usertwitter' name='twitter:creator'/>
<!-- dublin core -->
<meta content='nama Author' name='DC.Creator'/>
<meta content='nama Author' lang='id-ID' name='DC.Title'/>
<meta content='deskripsi blog anda' lang='id-ID' name='DC.Description'/>
Nb: untuk kode warna merah silakan disesuaikan dengan blog anda.

Kode diatas sudah saya ujicoba dibeberapa template modifikasi saya, dan hasilnya sangat memuaskan disamping itu meta tag ini telah valid di validator.w3.org.

Demikianlah cara memasang Meta Tag, Opengraph Facebook, Geo Meta tag, dan dublin core di blogger, semoga bermanfaat bagi anda yang sedang mencari tutorial pemasangan meta tag SEO friendly di blogspot.
Terima kasih telah membaca postingan ini dan Wassalam.

Cara pasang Meta Tag, Opengraph Facebook, dan Dublin Core di blogger

Membuat Daftar Isi Otomatis di postingan Blogger sesuai Headingnya

Membuat daftar isi di postingan Blogger sesuai Heading

Apa itu Daftar Isi?

Daftar isi merupakan bagian penting dari suatu artikel. Bagaimana tidak, fungsi dari daftar isi itu sendiri adalah memberi panduan bagi pembaca serta sebagai petunjuk letak halaman sesuai dengan kontennya. Dengan daftar isi maka pembaca akan mudah dan lebih cepat dalam mencari apa yang dia butuhkan.

Daftar isi seyogyanya berada pada bagian awal sebuah artikel. Bayangkan jika Anda membuat sebuah artikel panjang lebih dari 5000 karakter, tanpa ada penjeda atau penanda tentang konten Anda. Tentunya hal tersebut akan menyulitkan pembaca dalam mencari apa yang dia maksud. Apalagi tidaklah mungkin semua pembaca memiliki waktu cukup untuk membaca semua tulisan Anda, apalagi apabila pembaca hanya membutuhkan bagian tertentu saja.

Mengapa daftar isi penting?

Dalam artikel yang sesuai dengan persyaratan minimum google (high content), jumlah karakter, kata, dan kalimat dalam karya tulis tersebut dapat mencapai puluhan atau bahkan ratusan. Dengan jumlah kalimat serta bagian konten yang begitu banyak serta jenis-jenis konten yang terkandung di dalamnya, saya rasa membuat daftar isi dan mengingat bagian menjadi sangat sulit untuk dilakukan dan memakan banyak waktu. Apalagi dilakukan secara manual.

Untuk itu saya akan membagikan bagaimana membuat daftar isi yang memudahkan pekerjaan kita dalam menulis konten, sehingga potensi waktu dapat kita maksimalkan dengan baik tanpa terbuang percuma. Kode ini menggunakan javascript, yang oleh pembuatnya diklaim lebih cepat dan SEO friendly daripada menggunakan jQuery karena loadingnya yang lambat karena harus mengimport dulu jQuery.

Ok, langsung saja, beginilah caranya.

Cara membuat daftar isi otomatis di postingan Blogger

Adapun cara menginjeknya cukup mudah, asalkan Anda mengikuti langkah-langkah dengan benar, saya rasa tidak akan menjadi masalah.

  1. Memasang kode CSS dan JS daftar isi otomatis pada postingan Blogger di Edit HTML

  2. Silakan masuk ke blogger Anda ⟶ kemudian klik di menu Tema disebelah kiri ⟶ pada tombol panah kebawah di tombol SESUAIKAN, silahkan pilih Edit HTML.

    Cari kode /head kemudian copas kode berikut diatasnya

    <b:if cond='data:view.isPost'><style type='text/css'>
    .mbtTOC2{background-color:#f8f9fa;border:1px solid #a2a9b1;padding:7px 4px 8px 13px;border-radius:4px;display:table;line-height:1.6em}
    .mbtTOC2 button{background:none;font-family:inherit;font-size:17px;position:relative;outline:none;border:none;padding:0}
    .mbtTOC2 button:before{content:&quot;&quot;;width:24px;height:24px;display:inline-block;vertical-align:-7px;margin-right:5px;background:url(&#39;data:image/svg+xml,%3Csvg xmlns=&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;currentColor&quot; d=&quot;M3 17v-2h14v2H3Zm0-4v-2h14v2H3Zm0-4V7h14v2H3Zm17 8q-.425 0-.713-.288T19 16q0-.425.288-.713T20 15q.425 0 .713.288T21 16q0 .425-.288.713T20 17Zm0-4q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11q.425 0 .713.288T21 12q0 .425-.288.713T20 13Zm0-4q-.425 0-.713-.288T19 8q0-.425.288-.713T20 7q.425 0 .713.288T21 8q0 .425-.288.713T20 9Z&quot;%2F%3E%3C%2Fsvg%3E&#39;)}
    .mbtTOC2 button a{color:#0080ff;padding:0 2px;cursor:pointer;border:none}
    .mbtTOC2 button a:hover{text-decoration:underline}
    .mbtTOC2 button span{font-size:15px;vertical-align:baseline;margin:0 10px}
    .mbtTOC2 li{list-style:none;margin:0}
    .mbtTOC2 li a{border:none;text-decoration:none;font-size:18px;text-transform:capitalize}
    .mbtTOC2 li a:hover{text-decoration:underline}
    .mbtTOC2 li li{margin:0;padding:0;border:none}
    .mbtTOC2 li li a{color:#289728;font-size:15px}
    .mbtTOC2 ol{counter-reset:section1;list-style:none;margin:0 25px 0 30px;padding:0px}
    .mbtTOC2 ol ol{margin-left:20px;counter-reset:section2}
    .mbtTOC2 ol ol ol{margin-left:20px;counter-reset:section3}
    .mbtTOC2 ol ol ol ol{counter-reset:section4}
    .mbtTOC2 ol ol ol ol ol{counter-reset:section5}
    .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
    .mbtTOC2 li li:before{content:counter(section1) &quot;.&quot; counter(section2);counter-increment:section2;font-size:14px}
    .mbtTOC2 li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot; counter(section3);counter-increment:section3}
    .mbtTOC2 li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4);counter-increment:section4}
    .mbtTOC2 li li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4)&quot;.&quot; counter(section5);counter-increment:section5}
    .point2 {list-style-type:lower-alpha} 
    .point3 {list-style-type:lower-roman} 
    .point4 {list-style-type:disc}
    </style>
    
    <script type='text/javascript'> 
    //<![CDATA[ 
    //*************TOC Plugin V2.0 by MyBloggerTricks.com 
    function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
    //]]> 
    </script>
    
    </b:if>
    

    Langkah berikutnya silakan cari data:post.body/ pada kode yang pertama kemudian ganti dengan

    <div id='post-toc'><data:post.body/></div>
  3. Cara membuat Postingan dengan daftar isi

  4. Sekarang kita tinggal membuat postingan. Dan perlu diingat, untuk memasukkan kode berikut kita harus masuk pada tampilan HTML di postingan!!!. Pada postingan usahakan di line pertama masukkan kode berikut

    <div class="mbtTOC2"> 
    <button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button> 
    <div id="mbtTOC2"></div> 
    </div>

    Kemudian diakhir postingan tambahkan juga kode berikut

    <script>mbtTOC2();</script>

Demikian tutorial membuat daftar isi otomatis di postingan Blogger, semoga bermanfaat. Terima kasih telah mampir ke Agung Jaka Nugraha. Wassalam

Membuat daftar isi otomatis sesuai heading di Blogger