Cara membuat Menu Navigasi versi 2

Cara membuat Menu Navigasi versi 2
Sebenarnya cara paling sederhana membuat menu navigasi dengan memanfaatkan kode HTML sederhana pada widget tanpa perlu mengedit kode template pada sudah pernah saya posting disini dan menurut saya hasilnya tidak jauh bedanya cuma caranya aja yang sedikit berbeda.

Tetapi berhubung hasilnya amat sangat sederhana sekali tanpa embel-embel background warna dan border, plus permintaan dari beberapa rekan blogger yang dah komen di blog ini finally artikel ini selesai juga dibuat (PeEr-koe finish). So buat yang tertarik silahkan saja ikuti cara berikut:

Tahap pertama menambah kode CSS ditemplate blog, caranya:

1.Login ke account blog anda

2.di control panel pilih blog yang akan di buat menu navigasinya kemudian pilih edit template, sebelum mengubah kode template anda sebaiknya backup dulu dengan mendownload template Anda.

3.Jangan lupa memberi tanda centang pada expand widget.

4.Kemudian cari kode berikut (tekan ctrl+F untuk cepatnya):

5.Setelah menemukan kode diatas copypaste-kan kode dibawah ini tepat diatas kode, atau letakkan diantara tags .

.menubar{

width: 100%;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: normal;

text-decoration: none;

}

.menubar ul{

margin: 0;

padding: 0;

float: left;

width: 100%;

background: #FF6C00

border-top-width: 1;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #808080

border-right-color: #808080;

border-bottom-color: #808080;

border-left-color: #808080

}

.menubar ul li{

display: inline;

}

.menubar ul li a{

float: left;

color: #FFFFFF;

padding: 5px 11px;

text-decoration: none;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #C0C0C0

}

.menubar ul li a:visited{

color: #FFFFFF;

}

.menubar ul li a:hover, .menunav ul li .selected{

color: #FFFFFF !important;

padding-top: 5px;

padding-bottom: 5px;

background: #454545;

}

Ganti kode berwarna merah dengan kode warna yang sesuai dengan warna pada template anda agar terkesan menyatu dengan header anda, dan ganti ukuran border (kode berwarna hijau) sesuai keinginan anda. Jangan lupa untuk menyimpan hasil perubahan tersebut diatas

Tahap kedua, Menambah Widget Untuk Menu Navigasi.

1. masuk di Tata Letak kemudian pilih EDIT HTML jangan lupa expand widget dengan memberi tanda centang, dan letakkan kode dibawah ini diantara tags .

2.Dan masukkan kode berikut tepat dibawah kode html header:

Home

Link-1

Link-2

Link-3

URL-1 sampai URL-3 diperolehdari url berdasarkan URLlabel seperti contoh dibawah ini:

/search/label/NamaLabel

kode warna merah ganti dengan nama label/kategori/tags sesuai blog anda.

3. Jangan lupa di save perubahan tersebut, untuk melihat hasilnya klik pratinjau.

4. Selamat..!! sekarang blog anda sudah punya menu navigasi.

Semoga bermanfaat dan selamat berblogging ria.

NB: jika ada pertanyaan saran dan kritik mohon di berutahukan ke yang punya kerjaan ini biar makin bisa nulis yang bermanfaat .

Read More..

Cara membuat Menu Navigasi

Cara membuat Menu Navigasi

1.login ke blog

2.masuk ke menu rancangan

3.klik tambah gadget

4.klik tambah HTML

5.paste kan kode dibawah ini

http://alamatblog.blogspot.com>HOME | http://alamataboutpageURL>ABOUT | http://mailto:abcd@gmail.com>CONTACT | http://alamattipsURL>TIPS

6.klik simpan

7.Drag gadget ini tepat di bawah gadget header

NB: untuk kode berwarna merah sesuaikan namanya sesuai menu yang anda mau, untuk kode hijau sesuaikan alamat sesuai dengan alamat menu

Read More..

Cara membuat Link Exchange dengan tombol select All

ini dia cara membuat Link Exchange dengan tombol select All, masih banyak rekan-rekan yang menanyakan bagaimana membuat Kolom Tukeran Link,
Berikut adalah steps-Nya
Link dengan tombol select All,masih banyak rekan-rekan yang menanyakan bagaimana membuat Kolom Tukeran Link,
Berikut adalah scriptnya..

Tukar Link

Copy Paste kode di bawah :

<a href="http://www.blogger.com/%3Cspan%20style=">http://www.duniashare.tk/" target="_blank"><img alt="" src="http://www.blogger.com/%3Cspan%20style=" />https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhQsBPgjv2T79O4F1IcvQQQf6nERKiu6Bx_b7vhFO15zvrB-5ml4J4QQwjxGYPemWyHPsygD6DKK-6P0gohujKTMGZcVNy0YdPhtZvHr6phfViZfjdoiAUeb0jyXddOFNTc3i8RtrLd0/s1600/ds.jpg" border="0" /></a><br></center><center><form name="select_all"><textarea rows="3" cols="13" name="text_area"> <a href="<span style="color: rgb(0, 255, 0);">http://www.duniashare.tk/</span>" target="_blank"><img border="0" alt="" src="<span style="color: rgb(0, 0, 153);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhQsBPgjv2T79O4F1IcvQQQf6nERKiu6Bx_b7vhFO15zvrB-5ml4J4QQwjxGYPemWyHPsygD6DKK-6P0gohujKTMGZcVNy0YdPhtZvHr6phfViZfjdoiAUeb0jyXddOFNTc3i8RtrLd0/s1600/ds.jpg</span>" /></a>









Hasilnya akan seperti ini :
Ket :
- Ganti alamat blog yang berwarna Hijau dengan alamat blog anda,
- Ganti alamat link gambar yang berwarna Merah dengan link gambar anda.
- mohon maaf apabila stepnya agak acak-acakan
Hasilnya akan seperti ini :

Tukar Link

Cukup copy kode dalam area dan paste dalam blog anda.
Saya akan segera linkback kembali.

<a href="http://www.duniashare.tk" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhQsBPgjv2T79O4F1IcvQQQf6nERKiu6Bx_b7vhFO15zvrB-5ml4J4QQwjxGYPemWyHPsygD6DKK-6P0gohujKTMGZcVNy0YdPhtZvHr6phfViZfjdoiAUeb0jyXddOFNTc3i8RtrLd0/s1600/ds.jpg" /></a>

Tulis Di ChatBox atau Form Komentar Untuk Konfirmasi.

Read More..

Cara Mengubah Tampilan Kursor Blog

rata" blog yang sering kita kunjungi tampilan kursornya default, jadi terlihat bosan. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode
3. Letakkan kode css berikut diatasnya

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Selamat mengkreasi blog anda :)

Read More..

cara membuat gadget tampilan Artikel Terkait di Sidebar

Menampilkan Artikel Terkait di Sidebar? yaps tentunya blog kita akan terlihat lebih professional apabila memiliki gadget tersebut, untuk step-stepnya silakan simak dengan baik....
Pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat

Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :

Langkah I

1. Seperti biasa login dulu ke blogger.

2. Masuk ke Elemen Halaman.

3. Kemudian Tuju Edit HTML.

4. Klik Expand Template Widget.

5. Letakkan kode berikut ini sebelum 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>

6. Kemudian cari kode seperti dibawah 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:loop>
   </b:if>

7. Lalu sisipkan kode yang berwarna hijau, sehingga hasilnya menjadi seperti 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: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>

8. Simpan Template, sampai disini proses Edit HTML sudah selesai.

9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.

10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :

    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

11. Jangan lupa beri judul, lalu klik Simpan.

Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.

Langkah II

1. Klik Edit HTML.

2. Klik Expand Template Widget.

3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :

   <b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
   <b:includable id='main'>
   <b:if cond='data:blog.pageType == "item"'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != ""'>
   <h2 class='title'><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <data:content/>
   </div>
   <b:include name='quickedit'/>
   </b:if>
   </b:includable>
   </b:widget>

4. Kemudian klik Simpan Template.

5. Untuk tulisan HTML 11 dan Artikel Terkait Lainnya, hanya mengambil dari template saya, silahkan sobat sesuaikan dengan template dan judul artikel terkait yang tadi sudah sobat buat.

pempublish dan di publish ulang oleh Dunia Share.tk

Read More..