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:

[box type=”shadow” align=”alignright” class=”” width=””].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 }[/box]

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

[box type=”shadow” align=”” class=”” width=””]class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg”[/box]

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>