Memasang Pesan Komentar ala Kang Ismet di Median UI, Imagz dan Fletro Pro Template
Memasang Pesan Komentar ala Kang Ismet di Median UI, Imagz dan Fletro Pro Template - Pentingnya Pesan komentar dalam blog dimana bisa memberitahukan kepada pembaca agar tidak komentar sembarangan pada artikel tidak sesuai topik yang di bahas.
Sebenarnya bisa memberikan Pesan Komentar tanpa harus edit HTML akan tetapi karena saya rindu otak - atik kode akhirnya saya ambil kode pesan seperti punya kang ismet.
Apabila ingin melihat demonya seperti apa bisa langsung buka aja komentar yang ada di bawah.
Dari pada penasaran seperti apa buatnya langsung aja ke tutorial
Membuat Pesan Komentar Dengan Bawaan Fitur Blogger
- Buka Setelan pada Blogger
- Kemudian pilih Menu Komentar atau bisa scrol ke bawah
- Pilih Pesan Komentar
- Nah disitu kalian bisa kasih kata - kata pesan yang ingin ditulis
Membuat Pesan Komentar di Edit HTML Ala Kang Ismet
Karena mingkin tutorial kali ini panjang jadi jangan lupa siapkan cemilan atau teh buat kalian yang tidak puasa, bagi puasa sabar aja ya ges.
1. Buka Template, pilih Edit HTML langsung aja cari kode ]]<b:skin/>
masukkan CSS yang ada di bawah ini.
/* Fitur Komen */
.cm-form-bl {background:#fdfdfe;border:2px solid #ebeced;border-radius:6px;display:block;padding:20px}
#cm-menu{position:relative;;font-size:14px;color:#333;margin:5px 0 5px 5px;line-height:1.5em;padding:5px 0 10px 0;}
.pesan-komen, .bbcode{background:#fff;border:1px solid #f1f1f1;border-radius:4px;padding:20px}
.bbcode a{color:var(--link-color)}
.bbcode ul{border:1px solid #ededef;padding:10px;border-radius:4px;margin-top:30px;line-height:1.5em}
.bbcode ul li{border-bottom:1px dashed #ededef;padding:10px 0;margin-bottom:0}
.bbcode ul li:last-child{border-bottom:none}
.bbcode ul li a{display:inline-block;color:var(--link-color);cursor:pointer}
.bbcode ul li b.linkz{color:var(--link-color)}
.cmbutton{display:block;margin-top:45px;position:absolute;top:-55px;width:50%}
.cmbutton1{float:left;margin-right:20px}
.cmbutton2{float:left;margin-right:20px}
.cmbutton5{float:left;margin-right:20px}
.cmbutton5 a{color:#999;font-size:12px;text-decoration:none}
.cmbutton3, .cmbutton4{position:absolute;top:30px;right:0;}
.cmbutton3 svg, .cmbutton4 svg{fill:#aaaaaa;cursor:pointer}
.cmbutton-title{padding:0;text-align:center;color:#999;font-size:12px}
.cmbutton label{display:block;cursor:pointer}
.cm-menus1:checked ~ .pesan-komen{display:block;margin-top:20px}
.cm-menus1:checked ~ .bbcode{display:none}
.cm-menus1:checked ~ .cmbutton3{display:block}
.cm-menus2:checked ~ .pesan-komen{display:none}
.cm-menus2:checked ~ .bbcode{display:block;margin-top:20px}
.cm-menus2:checked ~ .cmbutton4{display:block}
.cm-menus3:checked ~ .pesan-komen{display:none}
.cm-menus3:checked ~ .cmbutton3{display:none}
.cm-menus4:checked ~ .bbcode{display:none}
.cm-menus4:checked ~ .cmbutton4{display:none}
.pesan-komen,.bbcode,.cmbutton4{display:none}
.cmbutton1 svg {width:16px;height:16px; fill:#e29001;margin-right:10px;vertical-align:middle;margin-top:-3px}
.cmbutton2 svg {width:18px;height:20px; fill:#9301ad;margin-right:5px;vertical-align:middle;margin-top:-3px}
.cmbutton5 svg {width:18px;height:18px; fill:#2e9fff;margin-right:5px;vertical-align:middle;margin-top:-3px}
.comment-block pre {background:#fdf9ff;border:1px dashed #ebeced;color:#e56904;padding:15px}
.comment-block pre code {color:#70428d;font-size:12px}
.comment-block pre:before, .comment-block pre:after {display:none}
.commentContent i[rel="code"]:before{content:'</>';position:absolute;right:0;top:0;color:var(--highlight-comment);font-size:10px;padding:0 10px;z-index:2;line-height:35px}
.commentContent i[rel="code"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:var(--highlight-bg);color:var(--highlight-color); padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:var(--font-code);line-height:1.6em}
.darkMode .cmCo i[rel="code"]{background-color:rgba(0,0,0,.09);color:var(--dark-textAlt)}
.cmCo i[rel="code"]{margin:1.2em auto; font-style:normal;font-family:'Fira Mono', monospace ;font-size:12px;color:#6a7b80;word-wrap: break-word;color:#0d6cab}
/* BBCode */
#parser{position:relative;margin-top:20px}
#codes{border:1px solid #ededef;width:100%;height:150px;display:block;background-color:#fafafa;border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:0 0 10px;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;box-shadow:none}
#codes:active,#codes:focus{background-color:#f5f5f5;color:#444;outline:0}
.btn-xs{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:#fff;outline:0;cursor:pointer}
.btn-primary{background-color:#f09800;margin-bottom: 10px;}
.btn-primary:active, .btn-primary:hover, .parser:active, .parser:hover, .btn-primary:focus, .button-group button:disabled, .parser:focus{opacity:.9}
.btn-danger{background-color:#7687b7}
.btn-danger:active, .btn-danger:hover{opacity:.9}
.btn-info{background-color:#c16c6c}
.btn-info:active, .btn-info:hover{opacity:.9}
.alert{padding:6px;border-radius:4px;position:absolute;top:10px;right:10px;min-width:100px}
.alert span{font-size:12px}
.alert-success{color:#3c763d;background-color:rgba(215,236,206,.58)}
.closer{float:right;margin-top:3px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.checkbox{display:none}
@media screen and (max-width:640px){
.img-500.img-left,.img-500.img-right,.img-600.img-left,.img-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-200.img-left,.img-200.img-right,.img-300.img-left,.img-300.img-right,.img-400.img-left,.img-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
2. Setelah itu mencari kode ini <b:includable id='threadedComments-form' var='post'>
letakkan kode HTML tepat di bawah nya kode tersebut.
<div id='cm-menu'>
<input class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>
<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>
<div class='cmbutton'>
<div class='cmbutton1'>
<label class='cmbutton-title' for='offcm-menu1'>
<svg class='bi bi-exclamation-circle-fill' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'></path>
</svg>Info
</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offcm-menu2'>
<svg class='bi bi-file-code-fill' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 1 1 .708-.708z'></path>
</svg>Konversi Kode
</label>
</div>
</div>
<input class='cm-menus3 hidden' id='offcm-menu3' name='accordion-menu' type='radio'/>
<div class='pesan-komen'>
1. Komentar ini, diurutkan dari yang terbaru<br/>
2. Tinggalkan komentar sesuai topik tulisan<br/>
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi <a href="https://www.kang-ismet.com/forum" target='_blank'><b>Ruang Obrolan</b>.</a><br/>
4. Centang <b>Beri tahu saya</b> untuk mendapatkan notifikasi via Email ketika ada balasan<br/>
<div class='cmbutton3'>
<label class='cmbutton-title' for='offcm-menu3'>
<svg class='bi bi-x' fill='currentColor' height='16' viewBox='0 0 22 22' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'></path>
</svg>
</label>
</div>
</div>
<input class='cm-menus4 hidden' id='offcm-menu4' name='accordion-menu' type='radio'/>
<div class='bbcode'>
Masukkan <b><a href="https://imgbb.com/upload" rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>URL Gambar</a></b> atau <b>Potongan Kode</b>, atau <b>Quote</b>, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.
<div id='parser'>
<textarea id='codes' placeholder='Masukkan kode / url_gambar lalu klik tombol di bawah ini untuk di parse' spellcheck='false'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>
<button class='closer close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</span></button>
<span>Kode Tersalin!</span>
</div>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btn btn-primary btn-xs' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btn btn-primary btn-xs' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/>
<button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes' id='button-link' style='display: none;' type='submit'>Salin Kode!</button>
<button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input checked='' id='opt2' type='checkbox'/>
<input checked='' id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/><br/>
<input checked='' id='opt6' type='checkbox'/>
<span>image</span>
<input checked='' id='opt7' type='checkbox'/>
<span>quote</span>
<input checked='' id='opt8' type='checkbox'/>
<span>pre</span>
<input checked='' id='opt9' type='checkbox'/>
<span>code</span>
</span>
<div class='clear'></div>
</div>
</div>
<div class='cmbutton4'>
<label class='cmbutton-title' for='offcm-menu4'>
<svg class='bi bi-x' fill='currentColor' height='16' viewBox='0 0 22 22' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'></path>
</svg>
</label>
</div>
</div>
3. Kemudian klik Simpan Template.
Membuat Pesan Komentar di Median UI, Fletro Pro dan IMagz Template
Karena template ini memiliki struktur yang sama maka tutorial diatas tidak lah jauh beda sebenar nya.
1. Cukup cari aja kode seperti yang ada di bawah ini :
<b:includable id='threadedComments-form' var='post'>
<div id='commentForm'>
<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != ""'>
<div class='cmMs note'>
<data:this.messages.blogComment/>
</div>
</b:if>
Setelah itu ganti menjadi seperti ini :
<b:includable id='threadedComments-form' var='post'>
<div id='commentForm'>
<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != ""'>
<div class='cmMs note'>
<div id='cm-menu'>
<input class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>
<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>
<div class='cmbutton'>
<div class='cmbutton1'>
<label class='cmbutton-title' for='offcm-menu1'>
<svg class='bi bi-exclamation-circle-fill' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'></path>
</svg>Info
</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offcm-menu2'>
<svg class='bi bi-file-code-fill' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 1 1 .708-.708z'></path>
</svg>Konversi Kode
</label>
</div>
</div>
<input class='cm-menus3 hidden' id='offcm-menu3' name='accordion-menu' type='radio'/>
<div class='pesan-komen'>
1. Komentar ini, diurutkan dari yang terbaru<br/>
2. Tinggalkan komentar sesuai topik tulisan<br/>
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi <a href="https://www.kang-ismet.com/forum" target='_blank'><b>Ruang Obrolan</b>.</a><br/>
4. Centang <b>Beri tahu saya</b> untuk mendapatkan notifikasi via Email ketika ada balasan<br/>
<div class='cmbutton3'>
<label class='cmbutton-title' for='offcm-menu3'>
<svg class='bi bi-x' fill='currentColor' height='16' viewBox='0 0 22 22' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'></path>
</svg>
</label>
</div>
</div>
<input class='cm-menus4 hidden' id='offcm-menu4' name='accordion-menu' type='radio'/>
<div class='bbcode'>
Masukkan <b><a href="https://imgbb.com/upload" rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>URL Gambar</a></b> atau <b>Potongan Kode</b>, atau <b>Quote</b>, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.
<div id='parser'>
<textarea id='codes' placeholder='Masukkan kode / url_gambar lalu klik tombol di bawah ini untuk di parse' spellcheck='false'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>
<button class='closer close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</span></button>
<span>Kode Tersalin!</span>
</div>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btn btn-primary btn-xs' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btn btn-primary btn-xs' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/>
<button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes' id='button-link' style='display: none;' type='submit'>Salin Kode!</button>
<button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input checked='' id='opt2' type='checkbox'/>
<input checked='' id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/><br/>
<input checked='' id='opt6' type='checkbox'/>
<span>image</span>
<input checked='' id='opt7' type='checkbox'/>
<span>quote</span>
<input checked='' id='opt8' type='checkbox'/>
<span>pre</span>
<input checked='' id='opt9' type='checkbox'/>
<span>code</span>
</span>
<div class='clear'></div>
</div>
</div>
<div class='cmbutton4'>
<label class='cmbutton-title' for='offcm-menu4'>
<svg class='bi bi-x' fill='currentColor' height='16' viewBox='0 0 22 22' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'></path>
</svg>
</label>
</div>
</div>
</div>
</b:if>
2. Selanjutnya tambahkan Javascript dibawah ini tepat di bawah kode </body>
<script>
//<![CDATA[
function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1,document.getElementById("btnInfo").style.display="none",document.getElementById("button-link").style.display="none"}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt8");t=t.replace(/\t/g," ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),n.checked&&(t=t.replace(/"/g,""")),o.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=(t=t.replace(/^/,"<i rel='pre'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt9");t=t.replace(/\t/g," ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),n.checked&&(t=t.replace(/"/g,""")),o.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=(t=t.replace(/^/,"<i rel='code'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function imgConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g," ");c.checked&&(t=(t=t.replace(/^/,"<i rel='img'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function quoteConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g," ");c.checked&&(t=(t=t.replace(/^/,"<i rel='quote'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}var clipboard=new Clipboard(".button-link");clipboard.on("success",function(e){console.log(e),document.getElementById("btnInfo").style.display="block",document.getElementById("codes").value=""}),clipboard.on("error",function(e){console.log(e)}); function repText(id) {var a = document.getElementById(id); if (!a) return; var b = a.innerHTML; b = b.replace(/<i rel="img">(.*?)<\/i>/ig, "<img class='lazy cm-image' data-src='$1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' alt='loading...' \/>");b = b.replace(/<i rel="kangismet">https?:\/\/www\.kang-ismet\.com\/(.*?)<\/i>/ig, "<a href='https://WWW.kang-ismet.com/$1'>[LINK]<\/a>");b = b.replace(/<i rel="tutorial">https?:\/\/tutorial\.kang-ismet\.com\/(.*?)<\/i>/ig, "<a target='_blank' href='https://tutorial.kang-ismet.com/$1'>[LINK]<\/a>");a.innerHTML = b;} repText('cmHolder');
///]]>
</script>
3. Kemudian klik Simpan Template
Apa bila menemukan Bug nya langsung aja tulis dikolom komentar ya
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini