Cara Membuat Parser Box di Blogger dan pesan komentar Disqus




Cara Membuat Parser Box di Blogger dan pesan komentar Disqus
Cara Membuat Parser Box di Blogger dan pesan komentar Disqus 
Selamt malam rekan blogger, pada malam ini saya akan shareCara Membuat Parser Box di Blogger dan pesan komentar Disqus, dengan kita membuat Pesan komentar ini sangat lah penting untuk dicantumkan dalam sebuah blog kita, tujuannya agar para pembaca mengerti pesan yang ingin disampaikan seorang admin blog sebelum para pembaca akan mengomentari postingan yang telah kita buat.

Untuk lebih jelasnya lagi, jika anda ingin melihat Demonya anda bisa scrool ke bawah postingan artikel saya ini ya.
Nah untuk cara pembuatannya, anda bisa ikuti langkah-langkahdi bawah ini.
1. Pertama , pastikan anda sudah masuk di dasbhor  anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode ]]></b:skin> (cara cepat tekan CTRL+F) salin kode di bawah ini,
4. Paste di atas kode ]]></b:skin> 
.pesan-komentar{background:#fff;padding:0;width:auto;margin:20px;line-height:normal;position:relative;font-weight:400;color:#888;box-shadow:inset 0 0 1px 0 #aaa;}
.pesan-komentar h5{font-size:14px;margin:0;background:#f8695f;color:#fff;padding:15px 20px;font-weight:700;position:relative;font-family:'Open Sans',Arial,Sans-Serif;text-transform:uppercase;overflow:hidden;}
.pesan-komentar h5:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#e85e54;color:#fff;top:0;right:0;padding:18px 20px;position:absolute}
.pesan-komentar .strike{text-decoration:line-through;display:inline;padding:0;}
.pesan-komentar ul{padding:20px}
.pesan-komentar ul li{list-style:none;padding:5px 0;}
.pesan-komentar ul li:first-child{padding:0 0 5px 0;}
.pesan-komentar ul li:last-child{padding:5px 0 0 0;}
.parser{background:#fff;border:1px solid #ddd;padding:3px 6px;margin:0 20px 20px;cursor:pointer;display:inline-block;float:left;text-align:center}
#parser{padding:0;margin:0 20px;display:none}
#parser table,#parser2 table{margin:0 auto;width:100%}
#parser textarea#somewhere,#parser2 textarea#somewhere{background:#fff;border:0;height:100px;width:98%;padding:10px;box-shadow:inset 0 0 0 1px #ddd;transition:all .6s}
#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{color:#333;box-shadow:inset 0 0 0 1px #ccc;outline:0}
input.button-parse{padding:5px 8px;cursor:pointer;border:1px solid #e85e54;background:#f8695f;color:#fff;margin-bottom:20px;border-radius:2px;transition:all .3s}
input.button-parse:hover{background:#fff;border-color:#f8695f;color:#e85e54;}
.pesan-komentar ul li code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#888;}
.clear{clear:both;}

 5. Untuk kode di bawah ini bisa anda Letakkan code HTML berikut di tempat dimana  akan memunculkan pesan komentarnya. bisa anda cari kode seperti ini <div id='post-wrapper'> paste di atas atau di bawahnya, sesuaikan saja mana yang cocok

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='pesan-komentar'>
<h5>Penulisan markup di komentar</h5>
<ul>
   <li>Untuk menulis huruf <b>bold</b> silahkan gunakan <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> atau <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <i>italic</i> silahkan gunakan <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> atau <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <u>underline</u> silahkan gunakan <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <span class='strike'>strikethrought</span> silahkan gunakan <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
   <li>Untuk menulis kode HTML silahkan gunakan <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>, dan silahkan <b>parse</b> dulu kodenya pada kotak parser di bawah ini.</li>
</ul>
<div class='parser' onclick='toggleNavPanel(&apos;parser&apos;)'><i class='fa fa-code'/>
<span id='parser-button'>Show Parser Box</span></div>
<div class='clear'/>
<div id='parser'>
<table><tbody>
<tr>
  <td><textarea id='somewhere'/><br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td>
</tr>
</tbody></table>
</div>
</div>
</b:if>
6. Kemudian anda copas kode di bawah ini, di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".parser").click(function(){$("#parser").slideToggle("slow")})});
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;};
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("parser-button"),t="block";n.style.display==t?(n.style.display="none",l.innerHTML="Show Parser Box"):(n.style.display="block",l.innerHTML="Hide Parse Box")};
//]]>
</script> 
7. Yang terakhir anda klik Simpan template dan lihat hasilnya

Demikianlah penjelasan kali ini, jika ada yang ingin di tanyakan bisa klik tombol komentar di bawah ini, selamat mencoba dan semoga bermanfaat untuk anda. salam belogger

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect