Cara Membuat Kategori / Label di Blog

Artikel-artikel yang diposting oleh Blogger terkadang memang perlu dikelompokkan atau dikategorikan sesuai dengan tema. Dengan adanya pengkategorian atau pengelompokan artikel yang telah diposting, dapat mempermudah para pembaca untuk memilih artikel mana yang ingin dibaca. Di Blogger, untuk membuat kategori/pengelompokkan dikenal dengan istilah Label.

Dalam Masalah kali ini saya akan membahas mengenai Cara Membuat Kategori atau Label di Blog. Pertama yang harus kita lakukan adalh berdo'a, :D

* kemudian Login ke blogger lalu Klik > Post.

* Membuat Kategori / Label  -nya.

Pilih atau beri tanda centang pada artikel yang ingin diberi label. Pada gambar Label (yang berada disebelah "Publikasikan") pilih "New Label/Label Baru" lalu beri nama label yang di inginkan.


tunggu...

dan, Taraaaaaaaaaaaa!! :)

akan muncul tulisan kategori yang di buat. 

* Cara Menghapus Kategori / Label
Beri tanda centang pada postingan yang ingin dihapus labelnya, trus klik combo box trus klik label dibawah tulisan "Remove label", Nha jadi deh....

* Cara Mengganti Kategori / Label
Hapus dulu label yang ingin diganti, kemudian buat label baru.


Lalu bagaimana cara memasang/menampilkan Label di blog?
Begini kang caranya :
1. Klik Template > Page Elements
2. Tambahkan Page Elements kemudian pilih Label terus atur sendiri :P :D
bisa kan?

Selamat beribadah :D, Selamat mencoba maksudnya...!!

Membuat Menu Navigasi Dengan Sub Menu

Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog.

Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger.
Bagi yang belom membaca,silakan langsung klik di sini.

Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini?
Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot.

Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikkut ini.

Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.
  
  
  Gb.1
  
• Selanjutnya pilih tab Edit Html (Gb.2).
  
  
  Gb.2
  
• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).
  
  
  Gb.3
  
• Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.
  
  
  #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
• Setelah itu Simpan Templates.
• Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
• Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)
  
  
  Gb.4
  
  Gb.5
  
• Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.
  
  
  <div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'></ul> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul>
</div>
• Lalu simpan,selesai dan lihat hasilnya :D

Sumber Copas : http://pelajaran-blog.blogspot.com/

Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"

2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan dilihat hasilnya.

Sumber: http://trik-tips.blogspot.com

Memasang Widget Google Translator

Memberi atau memasang Widget Translator atau Penerjemah pada blog memiliki banyak fungsi. Translator ini akan sangat berguna apabila ada pengunjung blog dari negara lain (secara sengaja maupun tidak) yang melihat blog kita, namun mereka tidak tahu bahasa yang kita gunakan, maka mereka bisa menggunakan Widget Translator yang kita pasang di blog kita untuk menerjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini pun sudah tersupport untuk bahasa Indonesia, dan kalau anda mau, translator ini juga bisa digunakan untuk menerjemahkan tugas sekolah secara mudah. Hasilnya pun bisa lebih baik daripada software transtool. :)

Gimana? Mau? Caranya mudah, langsunga aja Anda lakukan tahapan-tahapan dibawah ini:

1. Login ke Blogger, pilih menu Tata Letak / Layout.

2. Kemudian klik pada Tambah Gadget / Add Gadget.

3. Lalu pilih HTML / Javascript

4. Kemudian masukkan script dibawah ini kedalam body:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>
5. Lalu klik Simpan.

Mudah kan...?

Coba dites dulu, apakah Translator tersebut bekerja dengan baik atau tidak.
Bagaimana? :) :) :)

Efek Gambar Berwarna dengan Background Hitam Putih

Tutorial kali ini saya mengajak para pembaca untuk mengedit gambar dengan Efek Gambar Berwarna dengan Background Hitam Putih
Langsung aja ya? Ngga usah banyak bla bla bla.. :D

* Tahap pertama cari dulu gambar yang ingin di beri Efek Gambar Berwarna dengan Background Hitam Putih.
Di tutorial ini saya menggunakan gambar karakter utama dalam Film animasi "Kungfu Panda"

 

* Kedua buka gambar yang ingin di edit menggunakan program Adobe Photoshop disini saya menggunakan program Adobe Photoshop CS (anda juga bisa menggunakan Adobe Photoshop CS yang lain misal CS2, CS3, CS4, CS5, atau bahkan CS9 :D #nglantur, Just kidding bro.

* Ketiga ubah Foreground menjadi warna hitam dan Background menjadi warna putih (ditunjuk panah 1), lalu klik Edit in Quick Mask Mode (ditunjuk panah 2)

 

* Keempat pilih Brush Tool
Lalu Warnai Area Gambar Panda menjadi seperti gambar di bawah ini

 

* Kemudian, ubah ke Edit in Standard Mode

 Nanti akan keluar sebuah kotak perintah

 

klik Ok

 

* Terahir tinggal penyelesaian
Tekan Shift + Ctrl + U (bersama-sama)

Dan.... Hasilnya....

Yeah...!! The Dragon Warrior.

#maklum pecinta Film Animasi. :D :D

bagus kan?? :)

Sekian tutorial dari idzul-aja.blogspot.com

Terima Kasih . . .

Tutorial Membuat Logo TRANS TV

Ini adalah posting tutorial pertama saya, jadi saya mohon maaf kalo tidak bagus :D /hehe . Tutorial ini termasuk tutorial dasar, kenapa?, karena tutorial ini hanya menggunakan tool-tool dasar yang sudah biasa digunakan oleh para Desainer Corel Draw dalam menggunakan aplikasi ini, saya akan menjelaskan tentang Cara Membuat Logo Stasiun TRANS TV menggunakan aplikasi Corel Draw.

Tanpa banyak cakap, langsung saja kita mulai ! :)

1. Buka Aplikasi/Software Corel DRAW
disini saya menggunakan Corel Draw X4 , kalau mau pake Corel Draw yang lain juga bisa seperti V11 , V12 , X3 atau X5.

2. Pilih File => New
3. Buat 2 bentuk Segitiga menggunakan Polygon Tool

4. Seleksi kedua objek, kemudian klik Arrange => Shaping => Back Minus Front / Front Minus Back
(pilih sesuai objek yang ingin dipotong, di tutorial ini saya memotong objek layer depan /menggunakan Back Minus Front)
 
5. Lalu copy objek hasil potong (dari dua segitiga tadi) menjadi dua
6. Putar salah satu objek sebanyak 180 derajat dan atur posisinya sehingga menjadi seperti dibawah ini

7. Buat objek berbentuk persegi panjang menggunakan ractangle tool, letakkan di tengah objek potong yang atas.
8. Seleksi kedua objek (persegi panjang dan objek potong atas), klik Arrange => Shaping => Weld

9. Buatlah objek teks TRANS menggunakan Text Tool dengan Font Arial Black
10. Letakkan teks tepat di tengah Objek yg tadi sudah kita copy menjadi dua, sesuaikan lebar teks dengan lebar dua objek potong tadi

11. Jika menurut andah sudah pas, seleksi semua objek yang sudah dibuat dan langsung tekan ctrl + G
12. Ubah warna semua objek potong dan teks tadi menjadi abu-abu.
13. Dan Jadilah . . .

Logo Stasiun Televisi TRANS TV. :)
Bagus ngga bagus , yang penting Usaha.. /hehe

Terus belajar dan tetap semangat ya?!
Sekian Tutorial dari Idzul Fawaid's Blog , Sampai jumpa di tutorial lainnya..

Terima Kasih !! :)

Menu Vertikal Warna Biru

Saya nemu Menu Vertikal Simple tapi Bagus nih...
Copas dari System Of Blog /hehe . Gapapa kan ? yang penting Usaha :P
Mungkin menunya biasa - biasa aja ya , tapi bagi saya sih bagus ini , silahkan lihat demonya

DEMO

Cara buatnya gampang , Anda tinggal tambah Gadget HTML/Javascript.
Caranya :

1. Masuk ke blog anda
2. Klik Rancangan / Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini di kolom bagian bawah

<style type="text/css">
#navlist {
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
font: normal 0.8em Verd
width: 12em;ana, sans-serif
}

#navlist li {
list-style: none;
margin: 0;
font-size: 1em
}

#navlist a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em
}

#navlist a#current {
border-color: #5bd #035 #068 #cc0
}

#navlist a {
width: 99%;
}

#navlist a {
width: 9.6em;
}

#navcontainer > #navlist a {
width: auto;
}

#navlist a:hover, #navlist a#current:hover {
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em
}

#navlist a:active, #navlist a#current:active {
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em
}
</style>

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='Link Anda' id='current'>Item one</a></li>
<li><a href='Link Anda'>Item two</a></li>
<li><a href='Link'>Item three</a></li>
<li><a href='Link'>Item four</a></li>
<li><a href='Link'>Item five</a></li>
</ul>
</div>

6. Ganti kata Link dengan Alamat Link Anda.
7. Klik SIMPAN.

Sumber : System Of Blog
 dan
Dikutip dari : vertikal-menu-biru.html

Meringkas Tampilan Blog dengan Read More

Sekarang saya mau mengulas tentang cara Meringkas Tampilan Blog dengan Read More , yang mana Kebanyakan Blogger sering bingung dengan urutan-urutan dan tahapan-tahapan yang diposting oleh kebanyakan Blogger.
Disini saya membuat tahapan Meringkas Tampilan Blog dengan Read More agak lebih simple dan mudah di mengerti. Kita mulai langsung...

1. Pertama Log in ke blog Anda.
2. Buka Template / Rancangan
3. KLik Edit HTML
4. Jangan langsung mencentang Expand Template widget
5. Cari terlebih dahulu Kode </head>
6. Dan Letakan kode di bawah ini tepat di atas kode </head>

Kode Javascript Read More :

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width  = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
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 alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>

7. Klik Simpan Template.

8. Setelah Anda Simpan Template , Lalu Centang Expand Template widget dan Cari Kode di Bawah ini,
<data:post.body/>
namun biasanya kode seperti ini tidak hanya ada satu. Ingat! cari kode paling atas...
9. Setelah ketemu , Hapus kode Tersebut dan Ganti dengan Kode ini ,

Kode Javasript Read More :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'> READMORE....!! </a>
</b:if>
</b:if>


10. Klik SIMPAN.

Bisa anda lihat hasilnya . . . :)

Inspirasi dan Sumber : SYSTEM OF BLOG

Membuat Menu Pulldown plus Button/Tombol

Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah. 

Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript.

Secara mendasar, pulldown menu merupakan rangkaian tag option di dalam selection yang semuanya dirangkum menjadi sebuah form :

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form :

<form name="lompat">
<select name="menu">
<option value="url link 1">Nama 1</option>
<option value="url link 2">Nama 2</option>
<option value="url link 3">Nama 3</option>
</select>
</form>

Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="Cari">

Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:

<option> .. Pilih Daftar .. </option>

Berikut script lengkapnya:

<form name="lompat">
<select name="menu">
<option"> .. Pilih Daftar .. </option>
<option value="url link 1">Nama 1</option>
<option value="url link 2">Nama 2</option>
<option value="url link 3">Nama 3</option>
</select>

<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="Cari">

</form>

 Contoh implementasinya (sekalian chek the link):

Kostumisasi:

- Ganti .. Pilih Daftar .. dengan text yang ingin dimunculkan pada baris paling atas menu pull down.

- Ganti Cari dengan kata/perintah lain yang lebih disukai.

Terima Kasih . . .

sumber : buka-rahasia.blogspot.com