√ Dokumentasi Perubahan Blog Sayugi - Gylang Satria Yudha
Home Blogging Dokumentasi Perubahan Blog Sayugi

Dokumentasi Perubahan Blog Sayugi

on



Pada artikel kali ini, ini bukanlah sebuah artikel umum dan lebih saya tujukan sebagai dokumentasi perubahan apa saja yang saya tambahkan dan lakukan di Blog Sayugi. Hal ini saya maksudkan agar suatu saat jika saya lupa, saya bisa kembali mengingatnya dengan mudah, cukup dengan membaca artikel ini. 


Mengganti dan Menambahkan Syntax Highlighting


Untuk menambahkan Syntax Highlighting, saya mengambil referensi dari blog tanyabapak, selain itu karena Blog Sayugi menggunakan VioMagz 4.2.0 yang sudah mendukung custom css, maka saya tidak perlu lagi masuk ke menu edit html dan sakit kepala disana, cukup masuk ke menu tata letak, lalu tambahkan css berikut dari pada bagian custom css. 

pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid $(body.link.color); /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 14px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Sedangkan untuk menggunakan Syntax Highlighting didalam artikel, saya hanya perlu menambahkan value berikut pada menu tampilan html pada post editor.

<pre><code>--PASTE KODE DI SINI--</code></pre>

Agar tampilan benar dan tidak mengalami error, ketika memasukkan kode, disini kita harus memasukkan kode yang telah di parse terlebih dahulu, saya menggunakan tool dari halaman berikut. 


Mengganti dan Menambahkan Sitemap Full Article


Yang kedua yang saya ganti dan tambahkan di Blog Sayugi adalah dengan mengganti Sitemap dari Default VioMagz, kini menggunakan Sitemap yang saya ambil referensinya dari blog bisablog, alasan kenapa saya menggunakan sitemap ini adalah karena desain dan tampilan yang diberikan akan menampilkan seluruh artikel yang telah terpublikasikan, dan menurut saya itu cocok untuk blog sayugi yang kini sudah memiliki lebih dari 600 artikel tayang. 

Untuk menambahkannya sama seperti Syntax Highlighting, di VioMagz 4.2.0 saya hanya perlu menambahkan css berikut pada halaman tata letak > custom css. 

/* Sitemap Blogger Sederhana */
#sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;}
#sitemap a:hover {color:#000;}
#sitemap ol {margin:0px; padding:0px;}
#sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Selanjutnya pada halaman statis yang saya tujukan sebagai halaman sitemap, hanya perlu memasukkan script berikut:

<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>


Menambahkan Fungsi Daftar Isi Pada Artikel


Yang ketiga adalah saya menambahkan sebuah fungsi daftar isi pada artikel, dimana seandainya diperlukan, saya bisa menambahkan daftar isi dengan mudah, terkait kode yang saya tunjukkan berikut, saya lupa mengambil referensi dari mana, mohon maaf sekali saya tidak bisa memberikan link pembuat kode tersebut. 

Namun artikel cara membuatnya sendiri sudah saya tulis dan perbaharui agar lebih maksimal dan lebih mudah dipahami, kamu bisa mengaksesnya pada halaman blog sayugi berikut : Cara Membuat Daftar Isi di Postingan Blog

Lalu apa saja yang diubah dan ditambahkan?, pada dasarnya saya hanya menambahkan dua bagian penting, yaitu CSS dan Javascript, dan kebetulan sekali lagi pada template VioMagz 4.2.0 saya hanya perlu menambahkan css berikut pada halaman tata letak > custom css. 

<pre><code class="hljs shell">&lt;style type='text/css'&gt;
/* CSS Daftar Isi */
<span class="hljs-meta">#</span><span class="bash">light-toc{background:<span class="hljs-comment">#f5f5f5;border-radius:3px;padding:10px 20px}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list{font-weight:700;cursor:pointer;margin:10px 0}</span>
<span class="hljs-meta">#</span><span class="bash">toc_list:focus,<span class="hljs-comment">#toc li:focus,.back_tocontent:focus{outline:none}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list svg{vertical-align:middle}</span>
<span class="hljs-meta">#</span><span class="bash">toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}</span>
<span class="hljs-meta">#</span><span class="bash">toc ol li:before{left:-2em}</span>
<span class="hljs-meta">#</span><span class="bash">toc li a{color:<span class="hljs-comment">#222}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc li a:hover{color:<span class="hljs-comment">#1e90ff}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc{display:grid}</span>
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&amp;#39;&amp;#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
&lt;/style&gt;</code></pre>

Selain itu saya juga hanya perlu menambahkan javascript berikut pada halaman tata letak > custom javascript. 

<script type='text/javascript'>        
//<![CDATA[        
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>        
</script>

Setelah selesai, dimana baik css dan javascript sudah terpasang ditempatnya masing masing, saya hanya perlu menambahkan bagian kode berikut pada halaman artikel yang saya ingin tambahkan daftar isi.

&lt;script type='text/javascript'&gt;        
//&lt;![CDATA[        
$(document).ready(function(){$(&quot;.post-body a&quot;).on(&quot;click&quot;,function(o){if(&quot;&quot;!==this.hash){o.preventDefault();var t=this.hash;$(&quot;html, body&quot;).animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]&gt;        
&lt;/script&gt;<div id="light-toc"><div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div><div id="toc"><ol><li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li><li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li><li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li><li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li><li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li></ol></div></div>

Kode tersebut adalah bagian penting dari daftar isi seperti contoh pada gambar berikut. 


Sedangkan agar ketika saya klik pada bagian tersebut, kita akan diarahkan langsung pada label yang tertera pada daftar isi, saya hanya menambahkan id="toc_x" pada bagian heading yang ditujukan saja. 


Kustomisasi Author Box


Sebenarnya tampilan dari Author Box sendiri bagus dan simple seperti biasa, namun untuk menambah rasa dan mempercantik tampilan saya menambahkan beberapa css yang saya ambil referensinya dari  idnxmus.

Namun tentu saya tidak mengubah semuanya dan hanya sedikit saja yang saya modifikasi, langkahnya sendiri cukup mudah hanya perlu mencari kode css berikut pada menu Edit HTML, ya kali ini kita tidak bisa menambahkan CSS berikut melalui halaman Custom CSS jadi kita harus melakukannya secara manual: 

.author-profile{margin:32px 0;margin:2rem 0;}

Selanjutnya mengganti kode tersebut dengan kode berikut: 

.author-profile{margin:32px 0;margin:2rem 0; background:#E7E7E7;border:1px solid #e1e1e1;padding:20px; margin:10px 0; line-height:1.5}

Pada dasarnya saya hanya menambahkan Background, Border, Margin dan Padding agar tampilannya pas dan tidak berantakan ketika pengguna mengakses halaman dari perangkat dengan resolusi berbeda, untuk hasilnya sendiri dapat kamu lihat pada gambar berikut. 




*Artikel ini akan saya terus update seandainya ada hal baru yang telah saya tambahkan.

Get notifications from this blog

Related Posts