Custome Code GuruBlogger Untuk Mempercantik Postingan Blog

Custome Code GuruBlogger Untuk Mempercantik Postingan Blog

Postingan kali ini saya dedikasikan untuk "ingatan saya" karena saking seringnya lupa nama css yang mau dipanggil pada saat sedang asik membuat konten (maklum buat kontennya jarang jarang jadi seringnya lupa nama custom css di blog ini)



Bila dirasa cocok, teman teman boleh juga ikutan nambahin kode css ke templatenya masing masing

Caranya tinggal tambahkan kode css berikut ini sebelum </style> di template:

.div-hitam-html {
background-color: #1d2b35;
padding: 20px;
color: #fff;
overflow-wrap: break-word
}
.border-hijau {
border: 2px solid #00d07e;
padding: 30px 20px;
border-radius: 10px
}
.border-oranye {
border: 2px solid #f16334;
padding: 30px 20px;
border-radius: 10px
}
.gurublogger-boxshadow {
color: #707378;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .15);
padding: 30px 20px;
background-color: #fafafa;
border-radius: 10px
}

Untuk memanggil kode css diatas tinggal tambahkan class didalam div, contoh :

<div class="div-hitam-html">
Tulisan ini berada didalam div-hitam-html
</div>

Hasilnya
Tulisan ini berada didalam div-hitam-html


<div class="border-hijau">
Tulisan ini berada didalam border-hijau
</div>

Hasilnya
Tulisan ini berada didalam border-hijau


<div class="border-oranye">
Tulisan ini berada didalam border-oranye
</div>

Hasilnya
Tulisan ini berada didalam border-oranye


<div class="gurublogger-boxshadow">
Tulisan ini berada didalam gurublogger-boxshadow
</div>

Hasilnya
Tulisan ini berada didalam gurublogger-boxshadow


Lazyloading, selengkapnya bisa dibaca disini : -->Lazyload gurublogger
class="lazy" src="https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg"


Plugin TOC dari Mybloggertricks (mbt)

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

<script async="async" 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>


<script>mbtTOC2();</script>


Membuat table

<table class="gurublogger-table">
<thead>
<tr>
<th>No</th>
<th>Uraian</th>
<th>Jumlah</th>
</tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>Baju</td>
<td>100</td>
</tr>
<tr class="highlight-table">
<td>2</td>
<td>celana</td>
<td>30</td>
</tr>
<!-- terusin table -->
</tbody>
</table>




Komentar
Silahkan, saya ga nggigit !
  1. Halo min, bisa lebih dijelaskan panduan penggunaan table of content nya, di post blogspot nya ?

    BalasHapus
    Balasan
    1. Ada 2 jenis TOC yaitu javascript dan manual html, saya sudah buat dua duanya hanya saja bermasalah di menggabung css (masalah waktu luang yang belum ada, mohon maaf akan diupdate secepatnya)

      Untuk penggunaan toc javascript bisa langsung ke sumbernya di myblogger trick, hanya saja nantinya akan bermasalah dengan performance (harus dimodifikasi dulu)

      Hapus
  2. Kalau mau nambah script kode html yg bisa di copy di postingan blogspot gimana mas?

    BalasHapus
    Balasan
    1. hehe maksudnya gimana ya bisa dijelasin detail maksudnya ! html yg mana :D

      Hapus
  3. Kalau mau menganti gambar pemandangan kota hitam yg ada di footer template gimana ya?

    Saya mau ganti gambar pemandangan lain yg lebih cerah

    BalasHapus
    Balasan
    1. mungkin gambar ini yg dimaksud ya

      https://1.bp.blogspot.com/-Nowpz4GpmCU/XuUxoA50LHI/AAAAAAAAGyE/3xJ0Yi3_MmUut12ouYp4bzv4NyjJ0ORtQCLcBGAsYHQ/s1600/guru-blogger-indonesia.png

      tinggal ganti di template om, jangan lupa buat gambar dengan dimensi yang sama biar tidak ribet ngedit css nya ntar

      Hapus