Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Kamis, 28 Agustus 2014

Cara Membuat Syntax Highlighter Pada Blog


Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Teks area atau lainnya, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. Dari segi tampilan juga menurut saya lebih rapi dan menarik kaya yang di pake di blog ini nich...Ok sobat blogger gak usah panjang lebar deh basa basinya..mari kita langsung ke pokok pembahasan...eng ing eng.....

Caranya :
  • Login Blogger => Rancangan => Edit HTML
  • Download Template Lengkap=>centang pada kotak Expand Template Widget 
  • Cari kode berikut : </head> gunakan aja [CTRL]+[F] biar cepat. . .
  • Setelah ketemu copy  kode dibawah ini lalu pastekan diatas kode tersebut

<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 bagian itu sudah lalu
  • Cari lagi kode berikut : </b:skin> gunakan aja [CTRL]+[F] biar cepat. . .
  • lalu pastekan kode dibawah ini diatasnya. .

.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; }

  • Setelah itu cari lagi kode yang seperti ini dan letakkan kode dibawah ini diatas kode tersebut

<script language="javascript">

    dp.SyntaxHighlighter.BloggerMode();  

    dp.SyntaxHighlighter.HighlightAll(code);  

    </script>  

  • Save template

Untuk pemanggilan nya di edit htlm postingan gunakan kode ini:

UNTUK CODE CSS:
<pre class="css" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE HTML:
<pre class="html" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE JAVASCRIPT:
<pre class="java" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>
Read More..

Rabu, 27 Agustus 2014

Cara Membuat Backround Pada Postingan Blog

Tutorial kali ini ialah cara bagi meletakkan warna atau background pada posting.Mungkin kita ingin highlightkan bahagian tertentu atau keseluruhan paparan pada posting dengan warna dan juga berlatarbelakang dengan gambar.



background
Caranya:
Saat membuat posting atau hendak masukkan pada postingan, kita harus memasukkan kode seperti dibawah:
<div style=”background:#33CCFF; padding:4px 7px 4px 7px;”>
Masukkan kandungan teks artikel disini
</div>

letak kod

Bahagian berwarna merah diletakkan pada permulaan posting
Bahagian warna hijau pula diletakkan pada penghabisan posting
dan dimasukkan pada mode edit HTML

Untuk meletakkan background pada posting:
<div style=”background:url(Letakkan url imej disini) no-repeat;”>
Masukkan kandungan teks artikel disini
</div>

# gantikan dengan url imej yang telah diupload ke photobucket,tinypic dan sebagainya seperti contoh dibawah.

Jika menggunakan latarbelakang dengan corak/pattern yang kecil gantikan no-repeat kepada repeat.
contoh tampilannya


<div style=”background: #99FFCC; padding: 5px 8px;”>
Masukkan kandungan teks artikel disini</div>

Background dengan border

#Tukarkan warna kod background dan border mengikut kesesuaian 

<div style=”background: #99FFCC; border: 2px dashed #FFCC00; padding: 5px 8px;”>
Masukkan kandungan teks artikel disini</div>


<div style=”background: #99FFCC; border: 2px dotted #FFCC00; padding: 5px 8px;”>
Masukkan kandungan teks artikel disini</div>


<div style=”background: #99FFCC; border: 5px ridge #FFCC00; padding: 5px 8px;”>
Masukkan kandungan teks artikel disini</div>


<div style=”background: #99FFCC; border: 3px double; padding: 5px 8px;”>
Masukkan kandungan teks artikel disini</div>

<div style=”background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;”>
Masukkan kandungan teks artikel disini</div>


<div style=”background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 36px 12px;
-moz-border-radius: 26px 8px;
border-radius: 26px 8px;”>
Masukkan kandungan teks artikel disini</div>


<div style=”background: #99FFCC; padding: 5px 8px;-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;”>
Masukkan kandungan teks artikel disini</div>

Background dengan imej

<div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVixUxN0twO4XPDq8uxJSgNCUo5jV33gDR9SLCrdPjFgT8rTWeLxbpFEP6sH367dUqpu-g1TE3uWFB49AHxGd9XwDDXY41EVtLzNck5m1mmGE2tBd83ucbzxsIP19ohNwYWKEGcJ8ViU/s1600/1484.png) repeat;”>
Masukkan kandungan teks artikel disini
</div>


<div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lDiC5tCH4viU2cQGWoHhS207sTEoZlkVz6gGQ0dPHFl0EIcev8h-_Dup1LTXbrg55szWhc2zCwgzLuuM_-RKg_i3vDoKVYFqnt-5oYo8JAuter8BawuBjcIiZGJ6-PPyj9WQRjROzG4/s1600/bunga.JPG) no-repeat;border: 2px solid; padding: 20px;background-position:right bottom”>
Masukkan kandungan teks artikel disini
</div>

Untuk meletak imej pada sudut tertentu masukkan kode background-position:right bottom.seperti contoh diatas gambar diletakkan dibaagian ujung bawah
background position yang lain: 

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • center top
  • center center
  • center bottom
selamat mencoba..
Read More..