Tips Trik Membuat Daftar Isi Diblog

Berikut langkah-langkah membuat daftar isi diblog

1. Membuat daftar isi blog di laman

• Login di blogger dengan ID anda
• Pilih  Laman
• Klik Entri Laman Baru
• Kemudian copas kode berikut kedalamnya

<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://wong-sidakaton.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
  

• Ganti tulisan yang berwarna merah dengan url blog anda
• Kemudian terbitkan laman dan lihat hasilnya

2. Membuat daftar isi blog di gadget/sidebar

• Login di blogger dengan ID anda
• Klik Rancangan 
• Klik Edit HTML ==> Tambah Gadget
• Copas kode berikut kedalamnya

 <div style="overflow:auto;
border: 1px solid #CCC;
margin: auto;
padding: 3px;
width: 95%;
height: 500px;
background-color: none;
text-align: left;">
<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://wong-sidakaton.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

• Ganti tulisan yang berwarna merah dengan url blog anda
• Klik simpan dan coba anda lihat hasilnya

Read More

Tips Trik Membuat Related Post Dengan Fungsi Scroll

Cara membuat Related Post Dengan Fungsi Scroll:

• Login ke blogger dengan ID sobat.
• Klik Rancangan atau Tata Letak.
• Klik Edit HTML.( jangan lupa centang expand template widget )
• Lalu cari kode ]]></b:skin> ( untuk mempermudah pencarian tekan ctrl + F3 )
• Lalu letakan code di bawah ini tepat dibawah ]]></b:skin>

 /*-- Related Post with Scroll by wong-sidakaton --*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #F7F7F7;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #FFFFFF;}

• Langkah selanjutnya cari kode <p><data:post.body/></p> atau <data:post.body/>
• Lalu copy kode di bawah ini dan letakkan di bawah kode <p><data:post.body/></p> atau <data:post.body/> tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

• Lalu save template anda dan coba lihat hasilnya..

Read More

Tips Trik Membuat Related Post Dipostingan Blog

Cara membuatnya sbb:

• Log in di blogger
• Klik Rancangan
• Klik Edit HTML ( jangan lupa backup dulu template anda )
• Cari kode ]]></b:skin> ( Gunakan ctrl + f untuk mempercepat pencarian )
• Copy  kode di bawah ini dan paste di atas kode ]]></b:skin>

.related-posts {
border:1px solid #ddd;
background:#D8DFEA;
font-weight:bold;
width: 80%;
float:right;
}
.related-posts p {
margin:5px 10px 5px;
}
.related-posts ol {
font-weight:normal;
margin:0 0 0 25px;
}
.related-posts li {
margin-bottom: 2px;
}

• Cari kode </head> dan letakkan kode dibawah ini di atas kode </head>

<script type='text/javascript'>
//&lt;![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i &lt; relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

while (i &lt; relatedTitles.length &amp;&amp; i &lt; 20) {
document.write(&#39;&lt;li&gt;&lt;a href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&#39; + relatedTitles[r] + &#39;&lt;/a&gt;&lt;/li&gt;&#39;);
if (r &lt; relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}

}
//]]&gt;
</script>

• Kemudian cari kode <div class='entry entry-content'>
• Copy kode di bawah ini dan letakkan di bawah kode <div class='entry entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;'>
<div class='related-posts'>
<p>Related posts:</p>
<ol>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</ol>
</div>
</div>
</b:if>

• Terakhir save template anda dan lihat hasilnya..

Read More

Tips Trik Membuat Artikel Terkait Dengan Icon

Cara pemasangan diblog sbb:

• Login ke blogger dengan ID sobat.
• Klik Rancangan.
• Klik Edit HTML.jangan lupa ( centang tulisan expand template widget )
• Lalu cari kode </head> ( untuk mempermudah pencarian tekan ctrl + F3 )
• Lalu letakan kode berikut di bawah kode </head>

<style type='text/css'>
#related-posts {
float : left; width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2,
#related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(
&quot;http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png&quot;
) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style> <script src='http://wong-sidakaton.googlecode.com/files/relatedposts.js' type='text/javascript'/>  

• Cari kode <data:post.body/> lalu pasang kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop> </font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

• Save template dan coba anda lihat hasilnya

Read More

Tips Trik Membuat Box Cantik Efek Jahitan

• Copy kode dibawah ini dan paste diatas ]]></b:skin>

.box {
height:auto;
margin:15px auto;
line-height:1.1 !important;
font-size:15px;
padding:5px;
width:300px;
text-align: justify;
}
.abu2 {
background:#999;
outline:4px solid #888;
outline-offset:1px;
border:2px dashed #666;
}
.merah {
background:#e00;
outline:4px solid #d00;
outline-offset:1px;
border:2px dashed #a00;
}
.kuning {
background:#FD0;
outline:4px solid #FC0;
outline-offset:1px;
border:2px dashed #FA0;
}
.hijau{
background:#0C0;
outline:4px solid #080;
outline-offset:1px;
border:2px dashed #0A0;
}

• Save template

Untuk membuat box dipostingan  gunakan kode dibawah ini di mode HTML

<div class='box hijau'>
Letakan konten anda disini
</div>

Kode box hijau tersebut adalah kode tema dari box tersebut

1. abu2
2. kuning
3. merah
4. hijau

Jadi jika anda bosan dengan warna hijau anda bisa ganti dengan tema lainnya contoh warna merah misalnya,  penulisan kode HTML nya seperti ini

<div class='box merah'>
Disini letakan konten anda
</div>

Gimana sobat cukup mudah kan?....


( sumber: http://sin1aja.blogspot.com )

Read More

Tips Trik Menghapus Nomor pada Label

Cara menghilangkan nomor pada label langsung aja :

• Login di Blogger dengan ID anda.
• Klik Rancangan.
• Klik Edit HTML Jangan lupa centang Expand Template Widget.
• Lalu cari kode seperti dibawah ini (untuk mempercepat pencarian tekan Ctrl+F )

<span dir='ltr'>(<data:label.count/>)</span>

• Hapus kode yang berwarna merah tersebut
• Lalu save template anda dan lihat hasilnya

Read More

Tips Trik Menghilangkan Underline ( Garis Di Bawah Link )

Berikut ini cara menghilangkan Underline pada Link blog :

• Login dulu ke blog sobat di http://www.blogger.com/
• Masuk ke halaman Layout dan Klik Edit HTML
• Cari kode seperti  ]]></b:skin>
• Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}

• terakhir, simpan template sobat.

Untuk memastikan kode tersebut bekerja di template sobat, silahkan sobat membuka blog sobat.

Read More

Tips Trik Membuat Readmore Otomatis di Blog

Cara membuat Read more otomatis diblogger:

• Login ke blogger dengan ID sobat.
• Klik Rancangan atau Tata Letak.
• Klik Edit HTML.jangan lupa centang tulisan expand template widget
• Lalu cari kode </head> ( untuk mempermudah pencarian tekan ctrl + F3 )
• Lalu letakan code di bawah ini tepat diatas  </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• Kemudian cari kode <data:post.body/> dan ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

• Terakhir SAVE

Nah demikianlah tutorial dari Kumpulan Tips Trik , semoga tutorial blog mengenai cara membuat readmore di blog dapat bermanfaat untuk sobat semua.

Info sumber:http://www.berryhs.com

Read More

Tips Trik Membuat Box Area Efek Gelap Terang Dengan CSS3

Cara membuat kotek area efek gelap terang adalah sbb:

• Log in di blogger
• Klik Rancangan
• Klik Edit HTML
• Cari kode ]]></b:skin> ( Gunakan ctrl + f untuk mempercepat pencarian )
• Copy  kode di bawah ini dan paste di atas kode ]]></b:skin>

.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
 -o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

Untuk penulisan di postingan gunakan kode di bawah ini:

<div class="mybox">
Letakkan teks, image atau yang lainnya di sini </div>

Penting: Penulisan kode harus di mode edit HTML bukan COMPOSE

Untuk melihat Demo coba letakkan kursor Anda dikotak area dibawah:

Read More

Membuat Syntax Highlighter Di Blogspot

( image:syntax Highlighter )

Cara membuat Syntax Highlighter di blogspot:

• Log in di blog anda Klik Rancangan
• klik Edit HTML
• Cari kode ]]></b:skin>
• Copy  kode di bawah ini dan paste di atas kode ]]></b:skin>

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

• Lalu Cari kode </head> kalau sudah ketemu copy kode dibawah ini dan paste diatas kode </head>

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

• Setelah itu Cari lagi kode </body> dan simpan kode di bawah ini di atas kode </body>

><!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

• Lalu Save template

Setiap sobat  ingin  posting kode javascript, HTML atau kode CSS, sobat blogger harus  menulis dimode "Edit HTML" dari editor posting sobat

Untuk penulisan kode dipostingan:

<pre name="code" class="cpp">
"tulis script kamu di sini"
</pre>

Read More