7

Cara Menampilkan Kode HTML Pada Artikel Blogspot

Cara Menampilkan Kode HTM Pada Artikel Blogspot – Mungkin masih ada diantara kita yang belum tau bagaimana caranya menampilkan kode HTML pada artikel di blog kita seperti ini :

<style type=”text/css”>#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type=”text/javascript”>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(“gb”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + “px”;
if(x0!=xf){setTimeout(“moveGB(“+x+”, “+xf+”)”, 10);}
}
</script>
<div id=”gb”>
<div class=”gbtab” onclick=”showHideGB()”> </div>
<div class=”gbcontent”>
Masukkan kod Shout Box di sini
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>

Untuk menampilkan kode seperti itu caranya adalah dengan mengganti :

  • Kode < diganti menjadi &lt;
  • Kode " diganti menjadi &quot;
  • Kode > diganti menjadi &gt;

Tapi bagaimana kalau kode yang akan kita tampilkan karakternya lumayan banyak seperti diatas ? Tentu kita akan kesulitan mengedit kodenya satu-satu.
Untuk hal ini kita dapat menggunakan software untuk encode atau decode HTML, Namun yang paling mudah menurut saya adalah dengan menggunakan web generator yang memiliki tool untuk encode dan decode HTML.
Saya sering menggunakan 3 situs yang penggunaannya cukup mudah yaitu :

1. Centricle.com

Caranya silahkan buka situsnya terlebih dahulu lalu klik tool atau langsung klik link ini http://centricle.com/tools/html-entities/
Setelah itu maka akan muncul halaman diman terdapat kolom seperti pada gambar berikut :

Silahkan copy dan paste kode HTML pada kolom tersebut lalau klik “ENCODE”. Setelah itu copy kode yang muncul untuk anda salin ke artikel setelah proses ENCODE selesai.

2. Blogcrowds.com

Cara mengoprasikan tidak jauh berbdeda dengan yang pertama, tampilannya seperti ini :

3. Acessify.com

Tampilannya seperti ini :

Selain cara yang saya tuliskan diatas kita juga menggunakan kode textarea dengan kode seperti ini <textarea>kode HTML</textarea>

Tampilan kode HTML dengan menggunakan textarea seperti dibawah ini :

Kode yang membentuk textarea diatas seperti ini :

<p align=”center”><textarea style=”WIDTH: 500px; HEIGHT: 300px” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″><style type=”text/css”>#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type=”text/javascript”>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(“gb”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + “px”;
if(x0!=xf){setTimeout(“moveGB(“+x+”, “+xf+”)”, 10);}
}
</script>
<div id=”gb”>
<div class=”gbtab” onclick=”showHideGB()”> </div>
<div class=”gbcontent”>
Masukkan kod Shout Box di sini
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script></textarea></p>

Untuk mengubah TINGGI dan LEBAR textarea silahkan ubah angka pada “HEIGHT” dan “WIDTH” pada contoh diatas saya menggunakan “WIDTH: 300px; HEIGHT: 500px”

Untuk mengubah ukuran silahkan ubah nilai yang ada sesuai keinginan anda.

Salam : Basri Tamang

Filed in: Tips Dan Trik Blogspot, Tips Dan Trik Wordpress Tags: , ,

Recent Posts

Bookmark and Promote!

7 Responses to "Cara Menampilkan Kode HTML Pada Artikel Blogspot"

  1. Anda menyelesaikan beberapa poin di sana. Saya melakukan pencarian dengan tema dan menemukan sebagian besar orang akan memiliki pendapat yang sama dengan blog Anda.

  2. Ini benar-benar menarik. Aku suka membacanya.

  3. itu sangat menarik untuk dibaca. Saya ingin mengutip posting Anda di blog saya. Hal ini dapat? Dan Anda et account di Twitter?.

  4. mas..pusing malah, gini saya sering banget nemuin kalimat copy code HTMLnya terus pastekan di blog anda. pertanyaannya dimana naronya pening mas..tolong jelasin mas syukur-syukur bisa via email, makasih

    • Basri Tamang says:

      HTML bisa ditaroh dimana saja didalam blog, di artikel atau widget….pelajarilah apa yang anda butuhkan dulu.
      misalnya anda akan mencantumkan link di artikle maka pelajari itu dulu. Akan ada banyak penjelasan dari search engine.
      Lama kelamaan anda akan mengerti sedikit demi sedikit.

  5. heri says:

    ada cara yang lebih mudah, yaitu jadikan blog anda sebagai pengubah kode itu.. silahkan buka blog saya http://masherdownload.blogspot.com/2010/11/cara-termudah-mengubah-kode-script-html.htmlanda juga bisa membuatnya sendiri. jadi tidak perlu kemana2, cukup buka blog sendiri dan langsung bisa mengubah kode2 itu.

  6. Sebagai Newbie, saya selalu mencari online untuk artikel yang bisa membantu saya. Terima kasih Wow! Terima kasih! Saya selalu ingin menulis dalam sesuatu situs saya seperti itu. Dapatkah saya mengambil bagian dari posting Anda ke blog saya?

Leave a Reply

Submit Comment

© 2016 Info Seputar Internet | Acai Berry Murah. All rights reserved. XHTML / CSS Valid.
Redesain By chapila.