Menampilkan Recent Post Berdasarkan Kategori

Keinginan untuk mempermudah pengunjung dalam mencari artikel ataupun memberi penampilan yang berbeda, merupakan salah satu hobi dan juga kepuasan tersendiri dalam mendesain/mengedit template blog, salah satunya adalah cara Menampilkan Recent Post Berdasarkan Kategori, berikut langkah-langkahnya:

Langkah 1:
- Login ke account blogger anda >> klik Rancangan >> klik Tambah Gadget
- Pilih HTML/JavaScript
- Copy kode script berikut ini,

<script type='text/javascript'>var numposts = 2;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 111;</script>

<script type="text/javascript" src="http://www.stofmaps.blogspot.com/feeds/posts/default/-/Tips Dan Trick?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:
» Teks biru, jumlah nominal post yang akan ditampilkan
» Teks merah, ubah nama link/alamat web yang akan ditampilkan
» Teks jingga, ubah kategori yang akan ditampilkan
» showpostthumbnails = menampilkan gambar yang ada pada posting
» displaymore = menampilkan link teks 'more'
» var showpostdate = menampilkan tanggal terbit posting
» var showpostsummary = menampilkan sebagian kalimat pada posting

- Letakkan/paste kode script yang telah anda copy tadi pada kolom HTML/JavaScript
- Simpan

Langkah 2:
- Klik Edit HTML dan cari kode </head>
- Copy kode script berikut ini,

<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3Wl44TArLC3lDi0kI5Fx1zIzrk3YEWg9hv9d6sMacZ2NvvQymcMNZGzKzn6ABb1Q-5GArG9fAFTVmwZeQRkZ_wgvovFWxrgkWp0GbjKfsw2Vhfis1veohthEdUF4sXWvCE0Q8I1r-q4/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" style="clear:left; float:left; width:43px; border:1px solid #eaeaea; margin:5px 5px 0px 0px;" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>

- Letakkan/paste kode script yang telah anda copy tadi di atas kode </head>
- Simpan dan selesai

Semoga bermanfaat...

Sumber Artikel

http://stofmaps.blogspot.com/2012/03/menampilkan-recent-post-berdasarkan.html

Cara Pasang Syntax Highlighter

Langkah 1 :
- Login terlebih dahulu di account Blogger anda, kemudian pilih 'Rancangan'
- Klik 'EDIT HTML' (beri centang expand template widget)
- Simpan/letakkan kode berikut diatas kode </head>

<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>  

Langkah 2 :
Lanjut untuk meletakkan kode CSS berikut diatas 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;
    }

Langkah 3 (tahap akhir) :
Simpan template anda bila sudah meletakkan kode berikut diatas kode </body>

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

Tahap pemasangan 'Syntax Highlighter'. Perhatikan contoh berikut:

<pre name="code" class="php">
- KODE SCRIPT ANDA -
</pre>

Selamat mencoba.

Sumber Artikel

http://stofmaps.blogspot.com/2012/02/cara-pasang-syntax-highlighter.html

Posting Artikel Di Blogger.com

Posting artikel, atau menyusun tulisan / informasi yang akan kita bagikan / publikasikan melalui situs web yang kemudian dibaca banyak pengunjung, salah satunya yang akan dibahas pada halaman ini di blogger.com.

Berikut ini contoh gambar yang ada pada 'tab' dengan fromat ‘Edit HTML’ pada blogger :

Keterangan :
Edit HTML : Format ini akan menampilkan kerangka dari script / HTML yang dibuat.
ex untuk sebuah LINK : <a href="http://stofmaps.blogspot.com/">StofMaps</a>

1 - Kolom Judul :
Memberi Nama artikel / Judul artikel
2 - Quote :
Membuat Tabulasi
3 - Insert Image :
Menambahkan gambar (upload gambar)
4 - Add and remove link :
Membuat dan menghapus link
5 - Strikethrough :
Memberi garis di tengah-tengah huruf, ex 'TES'
6 - Italic :
Membuat Huruf menjadi miring, ex 'TES'
7 - Bold :
Membuat Huruf menjadi tebal, ex 'TES'

Berikut ini contoh gambar yang ada pada tab dengan fromat ‘Compose’ / NORMAL pada blogger :

Keterangan :
Compose : Format ini akan menampilkan hasil jadi sama saat artikel dipublikasikan.
ex untuk sebuah LINK : StofMaps

01 - Kolom Judul :
Memberi Nama artikel / Judul artikel
02 - Undo :
Menggagalkan satu langkah edit
03 - Redo :
Menggagalkan satu langkah undo
04 - Font :
Merubah jenis / tampilan huruf, ex 'TES; TES; TES'
05 - Font size :
Memperbesar / memperkecil ukuran huruf, ex 'TES; TES; TES'
06 - Bold :
Menebalkan huruf, ex 'TES'
07 - Italic :
Memiringkan huruf, ex 'TES'
08 - Underline :
Memberi garis bawah huruf, ex 'TES'
09 - Strikethrough :
Memberi garis tengah huruf, ex 'TES'
10 - Text color :
Merubah warna huruf, ex 'TES; TES; TES'
11 - Text background color :
Memberi warna pada latar belakang huruf, ex 'TES; TES; TES'
12 - Add and remove link :
Membuat dan menghapus link
13 - Insert image :
Memasukan gambar (upload gambar)
14 - Insert video :
Memasukan video (upload video)
15 - Insert jump break :
Membuat readmore (baca selengkapnya...)
16 - Alignment :
Mengatur posisi artikel
17 - Numbered list :
Membuat ‘sub’ dengan angka
18 - Bullet list :
Membuat ‘sub’ dengan bullet
19 - Quote :
Membuat Tabulasi
20 - Remove formatting :
Menghapus format teks
21 - Check spelling :
Mengecek spelling / susunan per kata / teks

Untuk penggunaan dari tombol toolbar diatas :
Sebelumnya 'beri tanda' pada teks yang ingin di edit, kemudian 'tekan' tombol toolbar yang di inginkan.

Langkah untuk posting artikel :
Dari ‘Dasbor’ >> klik ‘Edit Entri’ >> klik ‘Entri Baru’, akan tampil seperti gambar berikut :

Keterangan :

1 - Terbitkan entri

Menerbitkan artikel yang telah disusun / ditulis (artikel pada blog sudah bisa dibaca oleh pengunjung yang hadir ke blog kita)

2 - Saved

Menyimpan artikel, sebelum nantinya dilanjutkan untuk menulis / menyusun artikel kembali (ex: menunda untuk dipublikasikan karena artikel belum tersusun rapi / isi artikel yang akan dipublikasikan belum lengkap)

3 - Pratinjau

Melihat hasil / susunan tulisan artikel sebelum nantinya diterbitkan.

Selesai...
Selamat berbagi artikel!.

Sumber Artikel

http://stofmaps.blogspot.com/2011/12/posting-artikel-di-bloggercom.html

Buat Blog Di Blogger.com

Blog merupakan singkatan dari web log, yang menyerupai tulisan pada sebuah halaman situs web umum. Situs web penyedia Blog di blogger.com ini adalah gratis, dan dapat diakses oleh siapa saja. Bagi yang suka/hobi menulis, atau hanya ingin berbagi informasi, berikut untuk langkah-langkah dalam membuat Blog di Blogger.com :

Langkah 1 :
Kunjungi http://blogger.com/ (perhatikan contoh gambar berikut)

Keterangan :
Lingkaran no 1 :
Masukkan alamat email (gunakan alamat email dari google / Gmail, ex: stofmaps@gmail.com)
Lingkaran no 2 :
Masukkan kata sandi / pasword >> kemudian klik tombol ‘masuk/sign’

Langkah 2 :
Perhatikan contoh tampilan gambar berikut ini,

Keterangan :
Lingkaran no 1 :

Isi nama tampilan untuk account blog yang dibuat >> jenis kelamin >> beri tanda centang / ceklist pada cekbox (tanda panah) dan klik tombol ‘lanjutkan’.

Langkah 3 :

klik tombol ‘ciptakan blog anda’ (dilingkari merah) / ’buat blog’ (tanda panah), perhatikan contoh tampilan gambar berikut,

Langkah 4 :
Perhatikan gambar berikut,

Keterangan :
Lingkaran no 1 :
Beri nama untuk blog yang dibuat
Lingkaran no 2 :

Beri nama URL yang diinginkan (pastikan nama URL tersedia – perhatikan yang diberi ‘tanda panah’ – klik ‘cek ketersediaan’) >> klik tombol ‘lanjutkan’.

Langkah 5 :
Memilih template (tampilan / desain untuk blog yang dibuat)

Klik tombol ‘lanjutkan’

Untuk berikutnya, diarahkan ke tahap akhir dalam pembuatan blog, dan siap dilanjutkan untuk memulai dalam menulis >> klik tombol ‘mulai blogging’.

Selesai....
Selamat menulis dan berbagi informasi.

Sumber Artikel

http://stofmaps.blogspot.com/2011/12/buat-blog-di-bloggercom.html