Langsung ke konten utama

Dokumentasi Perubahan Blog Sayugi

Gambar
Oleh


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.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Memberantas Komentar Spam Dengan Disqus Comment

Oleh
Seperti yang kamu tahu, baik di Blog ini atau di Blog Sayugi, saya menerapkan Disqus sebagai comment system blog, hal ini bukan tanpa maksud, namun memang memiliki tujuan khusus yang bermanfaat.  Salah satu tujuan saya menerapkan Disqus adalah untuk memberantas komentar Spam yang saat ini makin marak masuk ke Blogger Comment, dan kebanyakan komentar tersebut bersifat judi, porno dan hal negative lainnya.  Nah contohnya seperti pada gambar diatas, itu adalah secuil cuplikan komentar yang ada di blog ini, dimana jika saya tidak menggunakan disqus, maka blog ini akan menampilkan banyak sekali komentar yang tidak relevan, mulai dari komentar penawaran situs judi, dan hal lainnya.  Mengenai Disqus, sebenarnya saya sudah menuliskan alasan kenapa kenapa blogger harus menggunakan Disqus sebagai comment system-nya yang mana artikel tersebut sudah bisa kamu baca pada halaman berikut .  Jika kita rangkum kembali, ada beberapa kelebihan ketika kita menggunakan Disqus, mulai dari...
Posting Komentar
Baca selengkapnya

Investigasi SMS SPAM Berisi Penipuan

Oleh
Sudah sering saya mendapati banyak sekali pesan SMS yang berisi pemberitahuan bahwa saya telah menang hadiah, Orang Tua dan Anak saya masuk penjara, kontrakan belum dibayar, atau hal lain yang cukup absurd bagi saya sendiri.  Sebagai contoh, disini saya akan menunjukkan pesan seperti yang dapat kamu lihat pada gambar diatas, dimana katanya saya mendapatkan sebuah hadiah cek tunai dengan kode "KBR99D7".  Surat keputusan resmi dari PT.LAZADA 11:11, Anda mdptkan cek Tunai Kode ID (KBR99D7) Info lengkap klik: tinyurl.com/gebyar-lazada11  Dan sebagai bagian dari seri Investigasi kali ini, mari kita buktikan bahwa pesan seperti ini adalah pesan yang tidak bermanfaat untuk diperhatikan atau bahkan harus dihiraukan.  Mengetahui Dari Mana Mereka Mendapatkan Nomer Pengguna Salah satu media dimana orang lain dapat mengetahui informasi nomer pengguna adalah kebocoran data yang biasanya terjadi dibeberapa market place besar, sebut saja Tokopedia yang pernah mendapati kasus Bocorn...
Posting Komentar
Baca selengkapnya

Curhatan Saya Yang Rugi Karena Token LUNA

Oleh
Selain bekerja sebagai Tenaga Kependidikan dan juga seorang Blogger, saya juga iseng mencoba berinvestasi dalam dunia cryptocurrency, didunia tersebut ada beberapa token yang saya beli dan invest disana, diantaranya Binance, Matic, BitCoin, dan LUNA.  Kebodohan saya ini bermula ketika melihat LUNA tiba tiba turun dari 1 Juta Rupiah meluncur ke beberapa ratus ribu, tentu saja saya tertarik, namun saya tetap tahan uang saya dan menunggu momen yang tepat.  Dikomunitas Crypto yang saya ikuti, sejumlah investor menyuruh investor lainnya untuk menyerok LUNA karena berpotensi naik kembali, banyak tuh orang yang ikut membeli LUNA ketika harganya turun di 400 Ribuan.  Dan, bagai kepala dilempar batu bata, LUNA turun drastis, mulai dari Ratusan Ribu, Hingga Puluhan Ribu, Belasan Ribu dan Akhirnya yah, gak usah saya sebutkan. Nah kebodohan saya ini terjadi ketika LUNA ada di harga 16000, saya berharap nanti naik lagi, minimal jadi 50000 saja saya sudah untung besar, lalu Invest lah ...
Posting Komentar
Baca selengkapnya