Main Drum di Ubuntu

Banyak sekali aplikasi menarik di softwware center diantaranya hydrogen drumstick dan setelah saya mencoba sangat menarik , tapi di ubuntu saya suara bisa dimulai setelah memutar audio kemudian saya stop setelah itu saya putar hiydrogen bisa , mungkin di ubuntu anda tidak terjadi.

berikut screenshotnya:



buka software center untuk menginstalnya.




Cara Membagi Header Template Menjadi Dua Kolom


Cara Membagi Header Template Menjadi Dua Kolom – Di template baru, template bawaan Blogspot seperti kita tau headernya hanya memiliki satu kolom. Mungkin kita merasa kurang puas dan ingin membagi headernya menjadi dua bagian.
Ikuti saja langkah-langkahnya dibawah ini, cara membagi header template menjadi dua kolom :

- Masuk ke akun Blogger anda
- Dashboard
- Rancangan
- Edit HTML
- Centang Expand Template Widget

- Cari kode seperti ini, cari yang mirip:


.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}


- Jika sudah ketemu hapus dan ganti dengan kode di bawah ini:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 145px; /* untuk mengatur tinggi header (height) */
}
#header {
width: 45%; /* untuk mengatur lebar header kiri – title, description, image */
margin-right: 10px;float: left;
}
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;
}
#bgsGR_headerkanan .widget {margin: 3px;}
}
- Setelah itu cari kode seperti ini:

<div class='region-inner header-inner'>





- tambahkan kode berikut dibawahnya:

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

jika ingin menambah lagi susunan kolom kebawah (tambah gadget), maka tulisan yang bercetak tebal, angkanya bisa diganti dengan angka '2'..tetapi agar kedua kolomnya bisa berfungsi sama, anda harus mengganti kode yang satunya lagi, cari lagi kode seperti ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Angkanya diganti dengan angka '2' dan 'no' diganti dengan 'yes'

Kedua angka diatas bisa diganti lagi dengan 3, 4 dan seterusnya sesuai jumlah yang kita inginkan.

- Terakhir simpan Template dan lihat hasilnya:


Cara Membagi Header Template Menjadi Dua Kolom


Membuat Menu Navigasi dengan Efek Hover Menggulung


JQuery Menu


Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu:


Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cariscript yang tampak seperti ini:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>



Jika templatemu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head>

Setelah itu salin script ini, lalu letakkan tepat di bawah script tadi:




<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function() { 
    $("#topnav li").prepend("<span></span>"); 
    $("#topnav li").each(function() { 
        var linkText = $(this).find("a").html(); 
        $(this).find("span").show().html(linkText); 
    }); 
    $("#topnav li").hover(function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "-40"}, 250);}, 
    function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "0"}, 250); 
    }); 
});
//]]>
</script>






Jika sudah, sekarang kita masuk ke tahap pemodelan. Salin kode CSS ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:




ul#topnav { 
  margin:30px; 
  padding:0; 
  list-style-type:none; 
  float:left; 
  font-size:1em; 
} 

ul#topnav li { 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  float:left; 
  height:40px; 
} 

ul#topnav a, ul#topnav span { 
  padding:10px 20px; 
  float:left; 
  text-decoration:none; 
  color:#fff; 
  background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; 
  text-transform:uppercase; 
  clear:both; 
  width:100%; 
  height:20px; 
  line-height:20px; 
} 

ul#topnav a { 
  color:#555; 
  background-position:left bottom; 
} 

ul#topnav span { 
  background-position:left top; 
}




Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode di bawah ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:



<ul id='topnav'> 
    <li><a href='#'>Beranda</a></li> 
    <li><a href='#'>Profil</a></li> 
    <li><a href='#'>Portfolio</a></li> 
    <li><a href='#'>Komentar</a></li> 
    <li><a href='#'>Kontak</a></li> 
    <li><a href='#'>Bantuan</a></li> 
</ul>


pelajari lebih lanjut disini.



sumber:

http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/


Kelebihan Linux



Kelebihan Linux - Di sini akan dijelaskan beberapa kelebihan dari sistem operasi Linux/UNIX dibandingkan dengan dengan sistem operasi yang lain. Dan berikut ini adalah beberapa fakta dari hal-hal yang menguntungkan dengan menggunakan program dan file-file Linux/UNIX :
Pada dasarnya semua data tersimpan di dalam harddisk walau ada beberapa kondisi dimana data tersimpan di disket. Linux/UNIX memberikan beberapa proses spesial dimana terminal, printer dan device. hardware lainnya dapat diakses seperti kita mengakses file yang tersimpan dalam harddisk atau disket.

Ketika program dijalankan, program tersebut dijalankan dari harddisk ke dalam RAM dan setelah dijalankan akan dinamakan sebagai proses.
Linux/UNIX menyediakan servis untuk membuat, memodifikasi program, proses dan file.
Linux/UNIX mendukung struktur file yang bersifat hirarki.
Linux/UNIX adalah salah satu sistem operasi yang termasuk ke dalam kelas sistem operasi yang dapat melakukan multitasking. Multitasking sendiri adalah keadaan dimana suatu sistem operasi dapat melakukan banyak kerjaan pada saat yang bersamaan.

Selain multitasking, Linux/UNIX juga dapat mendukung multiuser. Yaitu sistem operasi yang pada saat bersamaan dapat digunakan oleh lebih dari satu user yang masuk ke dalam sistem. Bahkan untuk Linux juga mendukung untuk multiconsole dimana pada saat bersamaan di depan komputer langsung tanpa harus melalui jaringan dan memungkinkan lebih dari satu user masuk ke dakam sistem.
Ingin tahu linux itu apa klik artikel berikut Pengenalan Linux.


Sejarah Linux


Sejarah Linux - Linux pada awalnya dibuat oleh seorang mahasiswa Finlandia yang bernama Linus Torvalds. Dulunya Linux merupakan proyek hobi yang diinspirasikan dari Minix, yaitu sistem UNIX kecil yang dikembangkan oleh Andrew Tanenbaum. Linux versi 0.01 dikerjakan sekitar bulan Agustus 1991. Kemudian pada tanggal 5 Oktober 1991, Linus mengumumkan versi resmi Linux, yaitu versi 0.02 yang hanya dapat menjalankan shell bash (GNU Bourne Again Shell) dan gcc (GNU C Compiler).
Saat ini Linux adalah sistem UNIX yang sangat lengkap, bisa digunakan untuk jaringan, pengembangan software dan bahkan untuk pekerjaan sehari-hari. Linux sekarang merupakan alternatif sistem operasi yang jauh lebih murah jika dibandingkan dengan sistem operasi komersial (misalnya Windows 9.x/NT/2000/ME). Linux mempunyai perkembangan yang sangat cepat. Hal ini dapat dimungkinkan karena Linux dikembangkan oleh beragam kelompok orang. Keragaman ini termasuk tingkat pengetahuan, pengalaman serta geografis. Agar kelompok ini dapat berkomunikasi dengan cepat dan efisien, internet menjadi pilihan yang sangat tepat.
Karena kernel Linux dikembangkan dengan usaha yang independent, banyak aplikasi yang tersedia, sebagai contoh, ,C Compiler menggunakan gcc dari Free Software Foundation GNU’s Project. Compiler ini banyak digunakan pada lingkungan Hewlett-Packard dan Sun.
Sekarang ini, banyak aplikasi Linux yang dapat digunakan untuk keperluan kantor seperti untuk spreadsheet, word processor, database dan program editor grafis yang memiliki fungsi dan tampilan seperti Microsoft Office, yaitu Star Office. Selain itu, juga sudah tersedia versi Corel untuk Linux dan aplikasi seperti Matlab yang pada Linux dikenal sebagai Scilab.
Linux bisa didapatkan dalam berbagai distribusi (sering disebut Distro). Distro adalah bundel dari kernel Linux, beserta sistem dasar linux, program instalasi, tools basic, dan program-program lain yang bermanfaat sesuai dengan tujuan pembuatan distro. Ada banyak sekali distro Linux, diantaranya :
RedHat, distribusi yang paling populer, minimal di Indonesia. RedHat merupakan distribusi pertama yang instalasi dan pengoperasiannya mudah.
Debian, distribusi yang mengutamakan kestabilan dan kehandalan, meskipun mengorbankan aspek kemudahan dan kemutakhiran program. Debian menggunakan .deb dalam paket instalasi programnya.
Slackware, merupakan distribusi yang pernah merajai di dunia Linux. Hampir semua dokumentasi Linux disusun berdasarkan Slackware. Dua hal penting dari Slackware adalah bahwa semua isinya (kernel, library ataupun aplikasinya) adalah yang sudah teruji. Sehingga mungkin agak tua tapi yang pasti stabil. Yang kedua karena dia menganjurkan untuk menginstall dari source sehingga setiap program yang kita install teroptimasi dengan sistem kita. Ini alasannya dia tidak mau untuk menggunakan binary RPM dan sampai Slackware 4.0, ia tetap menggunakan libc5 bukan glibc2 seperti yang lain.
SuSE, distribusi yang sangat terkenal dengan YaST (Yet another Setup Tools) untuk mengkonfigurasi sistem. SuSE merupakan distribusi pertama dimana instalasinya dapat menggunakan bahasa Indonesia.
Mandrake, merupakan varian distro RedHat yang dioptimasi untuk pentium. Kalau komputer kita menggunakan pentium ke atas, umumnya Linux bisa jalan lebih cepat dengan Mandrake.
WinLinux, distro yang dirancang untuk diinstall di atas partisi DOS (WIndows). Jadi untuk menjalankannya bisa di-klik dari Windows. WinLinux dibuat seakan-akan merupakan suatu program aplikasi under Windows.
Dan masih banyak distro-distro lainnya yang telah tersedia maupun yang akan muncul. Untuk mengetahui kelebihan linux sebagai sistem operasi langsung ajah klik artikel berikut Kelebihan Linux.

Pengenalan Linux


Pengenalan Linux - Kata "Linux" untuk saat ini sudah tidak asing lagi bagi para pengguna internet dan komunitas mahasiswa yang memiliki hobby untuk mencoba software-software baru. Secara teknis dan singkat dapat dikatakan, Linux adalah suatu system operasi yang bersifat multi user dan multi tasking, yang dapat berjalan di berbagai platform termasuk prosesor Intel 386 maupun yang lebih tinggi. Sistem operasi ini mengimplementasikan standar POSIX. Linux dapat berinteroperasi secara baik dengan sistem operasi yang lain, termasuk Apple, Microsoft dan Novell.
Nama Linux sendiri diturunkan dari pencipta awalnya, Linus Torvalds, yang sebetulnya mengacu pada suatu kumpulan software lengkap yang bersama-sama dengan kernel menyusun suatu sistem operasi yang lengkap. Lingkungan sistem operasi ini mencakup ratusan program, termasuk kompiler, interpreter, editor dan utilitas. Perangkat bantu yang mendukung konektifitas, ethernet, SLIP dan PPP dan interoperabilitas. Produk perangkat lunak yang handal (reliable), termasuk versi pengembangan terakhir. Kelompok pengembang yang tersebar di seluruh dunia yang telah bekerja dan menjadikan Linux portabel ke suatu platform baru, begitu juga mendukung komunitas pengguna yang memiliki beragam kebutuhan dan juga pengguna dapat turut serta bertindak sebagai tim pengembang sendiri.
1. Perbedaan Mendasar Linux
Satu hal yang membedakan Linux terhadap sistem operasi lainnya adalah harga. Linux ini lebih murah dan dapat diperbanyak serta didistribusikan kembali tanpa harus membayar fee atau royalti kepada seseorang. Tetapi ada hal lain yang lebih utama selain pertimbangan harga yaitu mengenai source code. Source code Linux tersedia bagi semua orang sehingga setiap orang dapat terlibat langsung dalam pengembangannya. Kebebasan ini telah memungkinkan para vendor perangkat keras membuat driver untuk device tertentu tanpa harus mendapatkan lisensi source code yang mahal atau menandatangani Non Disclosure Agreement (NDA). Dan itu juga telah menyediakan kemungkinan bagi setiap orang untuk melihat ke dalam suatu sistem operasi yang nyata dan berkualitas komersial. Karena Linux itu tersedia secara bebas di internet, berbagai vendor telah membuat suatu paket distrbusi yang dapat dianggap sebagai versi kemasan Linux. Paket ini termasuk lingkungan Linux lengkap, penagkat lunak untuk instalasi dan mungkin termasuk perangkat lunak khusus dan dukungan khusus.

2. Perbedaan Linux Terhadap Sistem Operasi Lainnya
Linux disusun berdasarkan standar sistem operasi POSIX yang sebenarnya diturunkan berdasarkan fungsi kerja UNIX. UNIX kompatibel dengan Linux pada level system call, ini berarti sebagian besar program yang ditulis untuk UNIX atau Linux dapat direkompilasi dan dijalankan pada sistem lain dengan perubahan yang minimal. Secara umum dapat dikatakan Linux berjalan lebih cepat dibanding UNIX lain pada hardware yang sama. Dan lagi UNIX memiliki kelemahan yaitu tidak bersifat free.
MS-DOS memiliki kemiripan dengan Linux yaitu file sistem yang bersifat hirarkis. Tetapi MS-DOS hanya dapat dijalankan pada prosesor x86 dan tidak mendukung multi user dan multi tasking, serta tidak bersifat free. Juga MSDOS tidak memiliki dukungan yang baik agar dapat berinteroperasi dengan sistem operasi lainnya, termasuk tidak tersedianya perangkat lunak network, program pengembang dan program utilitas yang ada dalam Linux.
MSWindows menawarkan kemampuan grafis yang ada pada Linux termasuk kemampuan networking tetapi tetap memiliki kekurangan yang ada pada MS-DOS. Windows NT yang juga tersedia untuk Digital Alpha selain prosesor x86. Namun Windows NT ini masih juga memiliki beberapa kekurangan yang telah ada pada MS-DOS.Waktu untuk menemukan suatu bug dalam suatu system operasi ini tak sebanding dengan harga yang harus dibayar.
Sistem operasi Apple untuk Macintosh hanya dapat berjalan di sistem Mac. Juga memiliki kekurangan dari sisi ketersediaan perangkat bantu pengembang (development tool) dan juga kurang dapat secara mudah untuk berintoperasi dengan sistem operasi lainnya. Apple juga telah memungkinkan Linux dapat dijalankan pada PowerMac.

Mau tahu sejarah linux seperti apa? Baca artikel berikut Sejarah Linux.

sumber:

roy87.blogspot.com, SARJANA | COPY | PASTE

Tip: Membuat Halaman Muka Blog Tersendiri (Tanpa Posting)


Tip: Membuat Halaman Muka Blog Tersendiri, Tanpa Posting



Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka/homepage blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka.
Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:


Edit HTML Blogger



Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>

dan tepat di bawahnya, letakkan kode ini:

</b:if>

sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</b:if>

Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:


Widget posting menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.




Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Catatan:

 Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.

sumber:




Cara Membuat Related Post


Cara membuat related post - Jika Anda mencari informasi cara membuat related post di blogger, maka Anda sudah berada di area yang tepat. Karena pada kesempatan kali ini admin ingin berbagi tips seputar blogging kepada rekan - rekan blogger sekalian yang masih kebingungan dalam membuat related post di blognya. Seperti yang kita tahu bahwa fungsi dari related post atau bahasa Indonesianya kita sebut dengan artikel terkait, artikel yang berhubungan dengan postingan yang sedang dibaca atau artikel yang direkomendasikan oleh pemilik blog kepada pembacanya untuk memahami lebih dalam suatu topik dalam kategori tertentu, intinya sederhana, blogger dapat pageviews yang lebih banyak, pembaca mendapat informasi yang lengkap. Nah, setelah mengenal apa itu related post beserta fungsinya, langsung aja kita praktekkan bersama cara membuat related post diblog seperti langkah - langkah yang saya tuliskan dibawah ini :

1. Yang pasti Login dulu di blogger.com.
2. Klik Rancangan » Edit HTML
3. Back up template lama Anda agar jika gagal, tidak merusak tampilan blog.
4. Klik "Expand Template Widget".
5. Gunakan Ctrl + F untuk mempermudah pencarian.
6. Masukkan kode css berikut tepat atas kode </head>

<style> #related-posts { float : left; width : auto; 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("http://1.bp.blogspot.com/-MdK_HE-8LR8/T8Dw9Nzau6I/AAAAAAAABQM/EHAoPvg5pbc/s1600/rss.png") 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://yourjavascript.com/0542826181/ttm.txt.js' type='text/javascript'/>

7. Cari kode <data:post.body/> atau <div class='post-body>, usahakan yang berdekatan dengan post-entri, Kemudian copy code dibawah ini, letakkan tepat dibawahnya.

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

8. Klik Simpan, Lihat hasilnya.

NB : Mungkin untuk menghapus link credit postingannya akan saya bahas pada kesempatan lain, jadi tetap monitoring perkembangannya ya sobat, semoga artikel tutorial cara memasang related post ini dapat membantu Anda yang memang sedang memerlukannya.

dari majalah siantar.

Cara Membuat Menu Vertikal Di Blogspot

Cara Membuat Menu Vertikal Di Blogspot | Iseng gak ada ide buat bikin posting hari ini, jadi saya langsung menuju blognya Bloggertrix dan sempat menemukan satu artikel tentang cara membuat menu vertikal keren untuk blogger , dan setelah saya teliti ternyata menu vertikal ini cukup elegan dan bagus. dan cocok untuk di pasang yang template blognya ada 2 sampe 3 kolom. kalau untuk scriptnya saya rasa tidak akan membuat blog jadi LOLA (Loading Lama) karna script css-nya tidak banyak, Untuk demo saya hanya bisa berikan gambarannya di bawah ini :


 Apa yang anda pikirkan setelah melihat demo nya, penasaran untuk segera memasangnya silahkan ikuti langkah di bawah ini.

1. Login Blogger
2. Pilih Tabs "Rancangan"
3. Pilih "Edit HMTL" -> Cek "Expand Widget Template"
4. Cari Kode ]]></b:skin> Kemudian Letakkan kode di bawah ini TEPAT di Atas kode ]]></b:skin>


/* Start Menu Vertikal*/

*{
 list-style:none;
 margin:0px;
 padding:0px;
}

#menu4 {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #D76100;
 border-size: 0px;
 border-width: 0px;
 }

#menu4 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 }

#menu4 li a:link, #menu4 li a:visited {
 color: #9E3C02;
 display: block;
 background: url(http://2.bp.blogspot.com/-tVwcTTbxQFk/TcYm0E1fZNI/AAAAAAAAAN0/3eGmTha3Qt4/s1600/menu4.gif);
 padding: 8px 0px 0px 30px;
 }

#menu4 li a:hover {
 color: #fff;
 background: url(http://2.bp.blogspot.com/-tVwcTTbxQFk/TcYm0E1fZNI/AAAAAAAAAN0/3eGmTha3Qt4/s1600/menu4.gif) 0 -32px;
 padding: 8px 0 0 30px;
 }

#menu4 li a:active {
 color: #fff;
 background: url(http://2.bp.blogspot.com/-tVwcTTbxQFk/TcYm0E1fZNI/AAAAAAAAAN0/3eGmTha3Qt4/s1600/menu4.gif) 0 -64px;
 padding: 8px 0 0 30px;
 }
/* End Menu Vertikal*/


5. Klik "Simpan Template"

* Sekarang tinggal Membuat Widget JavaScriptnya

6. Pilih Tabs "Tata Letak" -> Klik "Tambah Gadget"
7. Cari dan Pilih "HTML/JavaScript"
8. Kemudian Masukkan kode di bawah ini pada widget JavaScript



<div id="menu4">
 <ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
 </ul>
</div>



Perhatian (Yang Boleh Di Ganti) :
- Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
- Ganti Kode Warna Hijau dengan Judul Link
- Ganti Kode Warna Merah dengan Judul Link

9. Klik "Simpan"

Nah Gampang kan, nah bagi anda yang minat buat bikin menu vertikal ini, tunggu apalagi silahkan terapkan di blog anda. semoga bermanfaat

Source : http://www.bloggertrix.com/2011/05/how-to-add-cool-vertical-menu-for.html


Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog


Telah banyak Kita jumpai Para Master dari situs / website yang membahas tentang Search Engine Optimization (SEO) blog dengan memiliki Menu Navigasi Breadcrumb yang konon punya daya Search Engine Result Page (SERP) yang tinggi di mata search engine seperti Google.Com, Yahoo.Com, Bing.Com, dan lainnya, dibanding dengan yang tidak memakai / menampilkan Menu Navigasi Breadcrumb yang selalu muncul pada setiap Posting pada Artikel-artikel yang telah Kita buat ini.

Cara Membuat atau Menampilkan Menu Navigasi Breadcrumb Diatas Judul Posting Blog tidaklah rumit.

Menu Navigasi Breadcrumb adalah Link Navigasi yang biasanya tampil di atas judul atau title posting dalam modus postingan bukan dalam modus Home seperti terlihat pada blog ini dimana Breadcrumb menampilkan Halaman Depan atau Home » Label » Judul Posting. Seperti pada gambar dibawah ini :


Langsung ke topik bahasan Cara Membuat Menu Navigasi Breadcrumb di Blogger :

--Log in ke account sobat di blogger.com
--Klik tanda panah, lalu pilih Template
--Sebaiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan,
  lalu klik download full template.
--Klik tanda x untuk kembali ke menu template
--Selanjutnya plih Edit HTML  --> klik Procced atau proses
--Centang pada Expand Widget Templates
--Cari kode <b:includable id='main' var='top'>  untuk memudahkan mencarinya gunakan Ctrl +F
   Hapus Kode diatas dan ganti dengan paste kode di bawah ini :


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; 
<b:if cond='data:post.labels'> 
<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 != &quot;true&quot;'> &#187; </b:if> 
</b:loop> 
&#187; 
</b:if> 
<data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>


--Selanjutnya sobat blogger cari kode   ]]></b:skin>  dan copy paste kode ini di atasnya :


.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:13px;border-bottom:1px dotted #ccc;font-weight:normal}



Sampai disini proses Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog di Blogspot selesai, selanjutnya Save Template.
Cek dan lihat hasil dari setiap artikel / postingan Blog Anda. Kalau tidak mncul, mungkin Anda belum membuat / menuliskan Label pada posting atau artikel Blog Anda.

Jadi intinya dalam setiap artikel / posting dari Blog Anda harus lah ada atau di ketikkan Kategori / Label apa yang sesuai untuk pengelompokkan artikel / posting Anda kali ini.tempatnya disebelah kanan  tempat penulisan artikel < > Agar pembaca mudah untuk menelusuri setiap postingan / artikel yang telah Anda buat.

Dengan begitu, page view / kunjungan pada halaman posting / artikel Anda juga akan bertambah. Coba saja cek atau daftarkan / register-kan dahulu Blog / Website / Situs Anda di HiStat. Maka Anda akan tahu setiap kunjungan dari para pembaca dengan laporan yang lebih lengkap dan akurat...( koq jadinya promosi yak...??? ™Ќîiîk.·:::D Ќîiîk :D::·. Ќîiîk™ ).
Demikian semoga bermanfaat (",)





System76 Akan Luncurkan All-in-One PC Berbasis Ubuntu Hari Ini




system76 All-in-one PCCourtesy:Twiiter.com