Menampilkan Huruf Besar Pada Awal Posting

Pada posting saya sebelumnya yaitu Cara Membagi Postingan Menjadi 2 (dua) Kolom adalah merupakan salah satu cara membuat postingan yang unik dalam hal tampilannya, jika ingin menerapkannya pada blog Anda silahkan klik pada judul artikel tersebut.

Sekarang saya akan berbagi lagi cara unik membuat tampilan posting dengan cara membuat drop carp pada posting yaitu Menampilkan Huruf Besar Pada Awal Posting atau pada paragrafnya, contohnya pada postingan ini.

Jika Anda tertarik, silahkan ikuti langkah-langkah di bawah ini :

1. Login ke blogger
2. Langsung ke Tata Letak - Edit HTML
3. Cari kode berikut ]]></b:skin>
4. Masukkan kode di bawah ini, di atas ]]></b:skin>

/* kode membuat posting unik
----------------------------------------------- */
.unik {
float:left;
color: #913CE6;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
5. Klik Save Template/Simpan

6. Pada saat membuat posting Anda harus menulis lewat Edit HTML bukan dari Compose/Tulisdan dalam postingan tersebut masukan kode di bawah ini :

<p align="justify"><span class="unik" >masukan huruf awal</span></p>

Keterangan :
Pada tulisan “masukan huruf awal”, disitulah tempat untuk memasukan huruf awal yang ingin diperbesar.

OK dech, Selamat Mencoba, Semoga Sukses.

Cara Menampilkan Kode HTML

Bagi yang sudah tahu Cara Menampilkan Kode HTMLdi dalam posting blog bukanlah hal yang sulit, tetapi sebaliknya bagi yang belum tahu triknya akan berkata sulit dan pusing tujuh keliling, bahkan bisa membatalkan niatnya untuk menulis postingan, hal ini pun pernah Saya alami sendiri.

Oleh karena itu Saya ingin berbagi pengetahuan tentang cara mudah dan simple untuk menampilkan kode HTML pada posting blog yaitu dengan cara melakukan Parse terlebih dahulu pada kode HTML yang akan dimasukan dalam postingan.

Untuk melakukan Parse bisa dilakukan melalui situs penyedia layanan Parse/Convert Kode HTML yang gratis dan cara-caranya hampir sama.

Berikut adalah situs-situs yang saya maksud di bawah ini :

1. www.eblogtemplates.com Caranya kunjungi situs iniwww.eblogtemplates.com lalu copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “Convert Code” dan tunggu sampai proses selesai. Setelah selesai copy paste kode HTML yang telah diparse tersebut ke dalam postingan Anda. 2. http://www.blogcrowds.com Setelah Anda masuk ke situs inihttp://www.blogcrowds.com, langkah-langkahnya hampir sama dengan di atas, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “PARSE” dan tunggu sampai proses selesai. Setelah selesai copy paste kode HTML yang telah diparse tersebut ke dalam postingan Anda.

3. http://www.centricle.com Masuk ke situs inihttp://www.centricle.com, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “ENCODE”, selanjutnya copy paste kode HTML yang telah diparse ke dalam postingan Anda. 4. http://www.accessify.com Masuk ke situs inihttp://www.accessify.com, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “Convert to Escape Characters” dan copy paste kode HTML yang telah diparse ke dalam postingan Anda. Dari ke 4 (empat) situs di atas tidak harus kesemuanya digunakan, pilih salah satu saja sesuai selera Anda. Selamat Mencoba, Semoga Sukses!!!

Cara Membuat Tab View Menu di Sidebar Blogger

Untuk menghemat tempat, tab view menu sangat efisien dengan ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom komentar beberapa waktu yang lalu tentang bagaimana cara membuat menu di sidebar seperti pada contoh gambarKLIK DISINI? Mungkin yang dimaksud adalah Cara Membuat Tab View Menu di Sidebar Blogger.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Baiklah sekarang silahkan ikuti langkah-langkahnya sebagai berikut:

1. Login ke Blogger => klik Rancangan/Design => klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widgetatau baca Cara Melakukan Edit HTML Pada Template Blogspot;
2. Gunakan tombol Find (Ctrl + F) untuk mencari kode </head>, kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode </head>:
   <script type='text/javascript'>
   //<![CDATA[
   function tabview_aux(TabViewId, id)
   {
     var TabView = document.getElementById(TabViewId);
     // ----- Tabs -----
     var Tabs = TabView.firstChild;
     while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
     var Tab = Tabs.firstChild;
     var i   = 0;
     do
     {
       if (Tab.tagName == "A")
       {
         i++;
         Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
         Tab.className = (i == id) ? "Active" : "";
         Tab.blur();
       }
     }
     while (Tab = Tab.nextSibling);
     // ----- Pages -----
     var Pages = TabView.firstChild;
     while (Pages.className != 'Pages') Pages = Pages.nextSibling;
     var Page = Pages.firstChild;
     var i    = 0;
     do
     {
       if (Page.className == 'Page')
       {
         i++;
         if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
         Page.style.overflow = "auto";
         Page.style.display  = (i == id) ? 'block' : 'none';
       }
     }
     while (Page = Page.nextSibling);
   }
   // ----- Functions -------------------------------------------------------------
   function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
   function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
   //]]>
   </script>
3. Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]></b:skin>:
   div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /*Lebar Menu Utama Atas*/
   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
4. Kemudian Simpan Template.
5. Langkah selanjutnya, silahkan Anda klik Rancangan/Design => klik Add Gadget/Tambah Gadget => pilih yang HTML/Javascript atau jika diperlukan silahkan baca Cara Pasang dan Hapus Widget Blog di Blogspot;
6. Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:
   <form action="tabview.html" method="get">
   <div class="TabView" id="TabView">
   <div class="Tabs" style="width: 300px;">
   <a>Tab 1</a>
   <a>Tab 2</a>
   <a>Tab 3</a>
   </div>
   <div class="Pages" style="width: 300px; height: 300px;">
   <div class="Page">
   <div class="Pad">
   Tab 1.1 <br />
   Tab 1.2 <br />
   Tab 1.3 <br />
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Tab 2.1 <br />
   Tab 2.2 <br />
   Tab 2.3 <br />
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Tab 3.1 <br />
   Tab 3.2 <br />
   Tab 3.3 <br />
   </div>
   </div>
   </div>
   </div>
   </form>
   <script type="text/javascript">
   tabview_initialize('TabView');
   </script>
7. Kemudian Simpan.
8. Jika Anda ingin menyembunyikan judul content HTML/Javascript tersebut, silahkan baca tutorilanya Cara Menyembunyikan Judul Widget di Blogspot, semoga bermanfaat.

Keterangan:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi;
• Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu;
• Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Demikianlah tutorial tentang Cara Membuat Tab View Menu di Sidebar Blogger ini, semoga bermanfaat.

Cara Modifikasi/Merubah Warna Kolom Komentar

Sebelumnya Saya sudah pernah buat posting tentang kotak komentar yaitu Cara Menampilkan Kotak Komentar di Bawah Posting dan Cara Menambah Fitur Reply Pada Kotak Komentar serta Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah.

Sehubungan ada pertanyaan dari pengunjung yang menanyakan Cara Modifikasi/Merubah Warna Kolom Komentar seperti kolom komentar dalam Blog Serba Tersedia ini, namun sebelum kita membahas cara merubah warna kolom komentar perlu diketahui bahwa Saya menggunakan template Rounders 2, sehingga kode-kode dalam template Rounders 2 bisa saja tidak sama dengan template Anda dan jika mau menggunakan template Rounders 2 silahkan download Klik Disini.

Adapun Cara Merubah Warna Kolom Komentar pada Blogger, sebagai berikut:

1. Login ke Blogspot => pada Dashboard pilih Rancangan/Design => klik Edit HTML =>Download Template untuk jaga-jaga bila gagal => kasih tanda centang pada tulisanExpand Widget Template;
2. Untuk merubah warna kolom pada nama pemberi komentar, cari kode .comment-author { contoh struktur kode di template Rounders 2 seperti di bawah ini:
   .comment-author {
   background:url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
   margin:.5em 0;
   padding:0 0 0 20px;
   font-weight:bold;
   }
3. Pada tulisan background: tambahkan kode warna dibelakangnya, contohnya seperti di bawah ini:
   .comment-author {
   background:#AE010Eurl("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
   margin:.5em 0;
   padding:0 0 0 20px;
   font-weight:bold;
   }
4. Untuk merubah warna kolom tempat isi komentar, cari kode .comment-body {contohnya pada template Rounders seperti di bawah ini:
   .comment-body {
   margin:0 0 1.25em;
   padding:0 0 0 20px;
   }
5. Tambahkan kode di bawah ini kedalam kode di atas:
   background:#D2D2D2;
   text-align:justify;
   border-left:10px solid#2A00FF;
   
   Contohnya seperti di bawah ini:
   
   .comment-body {
   background:#D2D2D2;
   text-align:justify;
   border-left:10px solid#2A00FF;
   margin:0 0 1.25em;
   padding:0 0 0 20px;
   }
6. Simpan/Save Template, selesai.

Demikianlah Cara Modifikasi/Merubah Warna Kolom Komentar, semoga bermanfaat.

Cara Membuat Artikel Terkait (Related Post) Di Blogspot

Pengertian Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut, misalnya yang sedang anda baca sekarang adalah artikel dengan judul Cara Membuat Artikel Terkait (Related Post) Di Blogspot, kemudian terkait dengan artikel lain yang berjudul Cara Mengganti Header Blog pada Blogger, disini kesamaannya adalah artikel tersebut sama-sama membahas tentang blog.

Oleh karena itu jika hendak memasukan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak, apabila tidak sebaiknya dibuatkan kategori atau label baru saja, tujuannya supaya pembaca blog kita tidak kecewa.

OK, sekarang kita mulai mengulas tentang Cara Pasang Artikel Terkait (Related Post) pada Blogspot, silahkan ikuti langkah-langkah di bawah ini :

1. Login ke account blogger Anda.
2. Pilih menu Tata Letak/Layout » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Copy-paste script berikut di atas kode </head>:
   
   <script type="text/javascript">
   //<![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   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 < 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 < 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;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 20) {
   document.write('<li><a href="' + relatedUrls[r] + '">' +
   relatedTitles[r] + '</a></li>');
   if (r < relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;
   }
   i++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
5. Kemudian cari kode berikut:
   
   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   </b:loop>
   </b:if>
6. Setelah itu tambahkan kode berwarna merah di antara kode yang berwarna biru hingga menjadi seperti di bawah ini:
   
   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
   </b:if>
   </b:loop>
   </b:if>
7. Kemudian letakkan kode berwarna merah di bawah kode ini: </b:loop></b:if>, contohnya seperti di bawah ini:
   
   </b:loop>
   </b:if>
   
   <b:if cond='data:blog.pageType == "item"'>
   <h4>Artikel Terkait</h4>
   <script type="text/javascript">
   removeRelatedDuplicates();
   printRelatedLabels();
   </script>
   </b:if>
8. Simpan Template, Selesai.

Cara Membuat Template di Blogger

kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern"(kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

 background
header
main 
footer 

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; } 

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kodewidth: 195px; adalah lebar sidebar bagian kiri. Terus kodepadding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px;adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.