Kalahnya Blogger Indie Dengan Website Besar!
Layout Artikel Blog Mending Rata Kiri atau Rata Kiri Kanan?
Dalam menulis sebuah artikel di blog pastinya hal yang membuat penulis kebingungan adalah bagaimana layout artikel ditampilkan, apakah itu rata kiri, atau rata kiri kanan. Terkait hal itu jika kita perhatikan banyak website besar menggunakan standar rata kiri dalam layouting mereka, namun tidak sedikit juga blogger terkenal yang menggunakan layout rata kiri kanan.
Sebagai contoh, website Windows Portal Indonesia menggunakan layout rata kiri dalam setiap artikel yang dipublikasikannya, hal tersebut setahu saya adalah karena memang tidak disediakannya opsi rata kiri kanan pada bagian halaman penulisan, jika kamu pernah menggunakan wordpress, kamu mungkin sudah tidak asing lagi dengan hal ini dimana jika kamu perhatikan layout hanya disediakan tiga pilihan, penulisan rata kiri (align text left), tengah (center), atau rata kanan (align text right).
Lalu Manakah Yang Paling Benar dan Paling Direkomendasikan?
Kenapa Harus Menggunakan Rata Kiri?
Kenapa Harus Menggunakan Rata Kiri Kanan?
Jadi Mending Yang Mana Dong?
Penutup
Dokumentasi Perubahan Blog Sayugi
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
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
}
<pre><code>--PASTE KODE DI SINI--</code></pre>
Mengganti dan Menambahkan Sitemap Full Article
/* 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;}
<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
<pre><code class="hljs shell"><style type='text/css'>
/* 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:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style></code></pre>
<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>
<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><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>
Kustomisasi Author Box
.author-profile{margin:32px 0;margin:2rem 0;}
.author-profile{margin:32px 0;margin:2rem 0; background:#E7E7E7;border:1px solid #e1e1e1;padding:20px; margin:10px 0; line-height:1.5}
Kenapa Saya Beli Template Blogger dan Kenapa Kamu Juga Harus!
Salah satu yang mungkin menjadi pertanyaan para blogger pemula yang baru saja membuat blog dengan blog engine blogger dari Google, "kenapa sih kita harus beli template premium?", atau "kenapa sih mas ini beli template ini itu", dan lainnya. Cukup sering saya melihat berbagai komentar seperti itu dibeberapa blog yang memang mengedepankan rasa originalitas yang tinggi.
Sejak saya membuat Blog Sayugi tahun 2018 lalu, itu lah saat dimana saya benar benar beralih dari pengguna template bajakan dan clone menjadi pengguna template original, mungkin para pembaca tahu jika halaman Blog Sayugi menggunakan template VioMagz yang dibuat oleh Mas Sugeng, jujur saya suka sekali dengan template tersebut. Lalu kemarin saya kembali memutuskan untuk membeli template dari idntheme, salah satu alasannya sudah saya jelaskan pada artikel pertama blog ini, yaitu saya ingin menggunakan template yang cocok untuk blog personal seperti ini.
Lalu Kenapa Harus Pake Template Original?
Laporan Bug VioMagz ke Mas Sugeng |
Informasi Update Template Premium via IdnTheme |
Hormati Creator
Saya juga membuat sebuah novel yang sudah dibuku-kan, silahkan kamu lihat lihat pada halaman
Masih Kurangnya Kesadaran Masyarakat Akan Rasa Hormat
Saya Bikin Blog Ini, Kenapa?
Halo semuanya, perkenalkan nama saya adalah Gylang Satria Yudha, seperti yang sudah sebagian orang tahu, saya berprofesi sebagai seorang penulis dan blogger di Windows Portal Indonesia dan Blog Sayugi, namun karena Blog Sayugi yang awalnya saya khususkan untuk berbagi curhatan saya malah fokus pada tutorial dan teknologi, maka dengan itu akhirnya saya membuat blog ini.
Alasan Bikin Blog Baru
Sebenarnya seperti yang sudah saya tulis diatas, alasan utama saya membuat blog ini adalah karena Blog Sayugi yang awalnya saya khususkan untuk berbagi curhatan saya malah lebih fokus pada tutorial dan teknologi. Selain itu tidak ada alasan khusus dan alasan lain akan pembuatan blog baru ini.