Fitur-fitur baru pada Blogger

Akhirnya blogger menampilkan banyak fitur-fitur baru untuk optimasi pengguna yang menggunakan blog di blogspot.

Kali ini saya akan membeberkan fitur-fitur apa saja yang telah disediakan oleh blogger :



1. Template Designer

Sebuah fitur yang sangat luar biasa ditambahkan ke blogger yang memungkinkan para blogger untuk membuat tema yang indah untuk blog mereka melalui program tunggal. fitur ini dapat dibaca di Blogger.buzz.





2. New sharing buttons

Pilihan ini adalah pilihan lain yang baru-baru ini ditambahkan. Sekarang kamu tidak perlu menambahkan tombol bookmark sosial untuk blogger secara manual. Ini dapat dengan mudah ditambahkan tetapi pergi ke PAGE ELEMENT>> BLOG POST.

3. Memasukkan Video Player

Blogger telah memperkenalkan sebuah pemutar video yang lebih baik untuk video yang menyerupai pemutar YouTube.








Player ini memungkinkan melihat video dengan full-screen. Player baru ini juga memiliki antarmuka pengguna yang lebih baik, seperti animasi seekbar (bar merah di sepanjang bagian bawah video) dan tombol yang lebih besar. Anda juga dapat klik kanan pada play untuk melihat informasi lebih lanjut tentang video, seperti kinerja pemutaran ("Tampilkan Video Info") atau jaringan kecepatan ("Take Speed Test").



Video yang akan Anda upload akan terlihat di blog Anda tetapi tidak di YouTube.



4. Pratinjau Posting yang lebih baik

Selain blogger desainer juga menambahkan opsi baru yang lebih baik pasca pratinjau. Sebelum Anda mempublikasikan posting, jika Anda ingin melihat posting Anda untuk melihat bagaimana sebenarnya akan tampak, tekan saja tombol Preview pada halaman Post Baru. Anda akan melihat jendela baru terbuka dengan tampilan yang lebih akurat.

5. Penambahan Amazon Associaties gadget.

Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.

Dengan fitur ini, Anda dapat mencari Amazon langsung dari editor Blogger dan menambahkan gambar dan link ke produk Amazon tepat ke posting Anda. pembaca Anda akan mendapatkan komisi Anda setiap kali mereka membeli produk yang Anda rekomendasikan, dan jika Anda belum memiliki account Amazon Associates, Anda dapat sign up secara gratis tanpa meninggalkan Blogger.



6. Blogger stats

Fitur ini telah saya jelaskan pada postingan sebelumnya tentang Statistik blog.

So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.

Mempercantik Search Buttom dengan CSS3

Hampir setiap blog mempunyai tombol search untuk mempermudah pencarian pada blog kita, tapi tampilannya masih banyak yang terkesan standart aja, kalaupun ada yang bagus masih menggunakan image untuk mendukung tampilannya.

Kali ini saya ingin membuat search buttom hanya dengan menggunakan kode CSS tanpa image sama sekali.



Untuk postingan cara membuat search pada blog dapat anda lihat pada postingan sebelumnya.



kodenya HTMLnya seperti ini :

<form action='http://#/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value='Teks kamu...'/> <input id='searchsubmit' type='submit' value='Cari'/></form>

kamu ganti kode diatas dengan kode dibawah berikut ini :

<form action='/search' class='searchform' method='get'>

<input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>

<input class='searchbutton' type='submit' value='Go'/>

</form>

Langkah selanjutnya kamu harus membuat Kode CSS-nya biar tampilannya menjadi seperti gambar dibawah ini :







Letakkan kode berikut ini diatas ]]></b:skin> :

/*- Search -*/

.searchform {

display: inline-block;

zoom: 1; /* ie7 hack for display:inline-block */

*display: inline;

border: solid 1px #5e6366;

padding: 3px 5px;



-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;



-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);



background: #71787b;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top, #fff, #ededed);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #d5d5d5;

padding: 6px 6px 6px 8px;

width: 240px;

border: solid 1px #bcbbbb;

outline: none;



-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;



-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;

border: solid 1px #494949;

font-size: 11px;

height: 27px;

width: 27px;

text-shadow: 0 1px 1px rgba(0,0,0,.6);



-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;



background: #555;

background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));

background: -moz-linear-gradient(top, #9e9e9e, #454545);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */

}

Setalah itu coba kamu pratinjau blog kamu seperti apa tampilannya. Kode CSS diatas tampilannya akan sama persis dengan tampilan yang ada di blog Rudy Azhar, kamu bisa merubah warnanya yang saya kasih tanda merah dengan warna yang disesuaikan dengan template blog kamu.



Selamat berkreasi......

Membuat Postingan Berkolom

Kamu pasti tahu bentuk atau format surat kabar yang berkolom-kolom. Dalam blogger kita juga dapat membuat format postingan seperti itu (beda-beda tipis lah). Supaya lebih terdefinisi sandingkan trik blogger ini dengan menggunakan huruf awal posting bergaya koran.



Mari kita review trik blogger membuat postingan berkolom :

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin>.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Copas kode CSS berikut di atas kode tersebut.

.post-column-top {

-moz-column-count: 2;

-moz-column-gap: 15px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 2;

-webkit-column-gap: 15px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 2;

-khtml-column-gap: 15px;

-khtml-column-rule: 0px dotted #E1D4C0;

padding-bottom: 10px;

border-bottom:1px dashed #E1D4C0;

}

.post-column-bottom {

-moz-column-count: 2;

-moz-column-gap: 15px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 2;

-webkit-column-gap: 15px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 2;

-khtml-column-gap: 15px;

-khtml-column-rule: 0px dotted #E1D4C0;

}

.post-column-top2 {

-moz-column-count: 3;

-moz-column-gap: 10px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 3;

-webkit-column-gap: 10px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 3;

-khtml-column-gap: 10px;

-khtml-column-rule: 0px dotted #E1D4C0;

font-size: 85%;

line-height:14px;

padding-bottom: 10px;

border-bottom:1px dotted #E1D4C0;

}

.post-column-bottom2 {

-moz-column-count: 3;

-moz-column-gap: 10px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 3;

-webkit-column-gap: 10px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 3;

-khtml-column-gap: 10px;

-khtml-column-rule: 0px dotted #E1D4C0;

font-size: 85%;

line-height:14px;

}

• Jangan lupa disimpan.

Keterangan :

...-column-count menunjukkan jumlah kolom.




...-column-gap menjempolkan jarak antar kolom.




...-column-rule mengelingkingkan border antar kolom (kalau tidak digunakan juga tidak apa-apa).




font-size menengahkan ukuran huruf.




line-height memaniskan jarak antar baris teks/kalimat.




(Jari-jari.....)

padding-bottom menunjukkan jarak kolom atas dengan kolom bawah (berguna kalau kamu membuat dua baris kolom).




border-bottom menunjukkan garis bawah kolom (berguna kalau kamu membuat dua baris kolom).

Catatan :

1. Kode CSS di atas digunakan untuk membuat postingan berkolom 2 (dua) dan 3 (tiga).


2. Kode CSS tersebut bisa kamu pilih atau dipakai seluruhnya.


3. Untuk penggunaan kode -moz, -webkit, -khtml dapat kamu baca pada postingan "Membuat Rounded Corner".


4. Kode CSS tersebut dapat kamu permak sesuai dengan keinginan dan template blog kamu.

• Contoh Terapan I :  Postingan 2 (dua) kolom

<span class="firstletter">I</span>ni merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode huruf awal bergaya koran dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.



<div class="post-column-top">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.</div>

<div class="post-column-bottom">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawahnya kamu tidak akan melihat ada garis putus-putus lagi.</div>

• Jadinya akan seperti berikut :

Ini merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode huruf awal bergaya koran dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini  kamu tidak akan melihat ada garis putus-putus lagi.

• Contoh Terapan II:  Postingan 2 (dua) dan 3 (tiga) kolom

<div class="post-column-top">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.</div>

<div class="post-column-top">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div>

<div class="post-column-top2">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan  menggunakan kode-kode lainnya.  Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.</div>

<div class="post-column-bottom2">Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div>

• Jadinya akan seperti berikut :

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap  3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode-kode lainnya. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.

Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

Panjang dan lama (itulah coki-coki!!???) juga postingan trik membuat postingan berkolom ini. Akhirnya selamat berkolom ria dalam postingan blog kamu...

Plugin Sosial dari Facebook

Sekitar 1 (satu) bulan OB meninggalkan dunia on-line, termasuk blogging.  Bertapa mencari ilham di dasar seribu sungai (hanya becanda).  Bukannya bosan melainkan kesibukan pindah homebase dan mendirikan usaha sendiri di tempat baru tersebut.  Alhamdulillah sekarang sudah rampung kira-kira 75%.  Sekarang OB menyempatkan membuat satu postingan yang sekiranya menambah daftar trik blogger di hati dan pikiran para blogger.  Kok, jadi dramatis gini...  Trik blogger ini masih terkait dengan posting sebelumnya tentang promosi blog dengan facebook, coba tebak?  Betul sekali.  Setelah pamer blog di facebook, tentunya ingin pula plugin di facebook muncul di blog kamu.

Kemudian OB tidak akan menjelaskan secara detail tentang kodenya yang seperti apa, karena kode tersebut otomatis tampil pada saat kamu mengkostumisasi plugin ini di layanan pengembang plugin sosial facebook.  Demo salah satu plugin tersebut (Like Button) dapat kamu lihat di kiri bawah (footer) blog ini.

• Arahkan alamat browser kamu ke Facebook Developers.


• Kamu akan di bawa ke halaman kumpulan plugin sosial yang dapat diterapkan dalam blog kamu, seperti ;  Like Button, Activity Feed, Recommendations, Like Box, Login Button, Friendpile, Comments, dan Live Stream.

• Contoh Terapan I (Like Button) :

->  Klik link yang bertuliskan Like Button.

->  Isi form sesuai dengan keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

URL to Like diisi dengan alamat blog kamu.



->  Setelah selesai klik "Get Code", maka akan muncul kode sesuai dengan isian form tersebut.

->  Copy kode dalam kotak iframe ke blog kamu.

->  Sign-in ke akun blogger kamu.

->  Kemudian klik Design (Rancangan) --> Add Gadget (Tambah Gadget).

->  Dalam jendela pop-up yang tampil, pilih HTML/JavaScript dengan mengklik tanda + di kanannya.

->  Paste kode iframe dari plugin sosial facebook.

->  Selesai.

• Contoh Terapan II (Like Box) :

->  Klik link yang bertuliskan Like Box.

->  Isi form sesuai keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.

Catatan :

• Facebook Page ID diisi dengan ID halaman facebook kamu.

• Untuk membuat halaman baru di facebook silakan dibuka kembali posting tentang promosi blog dengan facebook.

->  Selanjutnya lakukan langkah yang sama dengan contoh terapan I.



Catatan :

Langkah dalam mengkostumisasi plugin sosial lainnya lebih kurang sama dengan contoh terapan di atas.



Selamat memajang plugin sosial facebook di blog kamu...

Widget Related Post With Thumbnails

Related post atau postingan terkait tentu sudak kita ketahui bersama fungsi dan manfaatnya, karena sebelumnya saya pernah mengetengahkan tutorial cara menambahkan related post pada blogger. Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.

Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut:

1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.

2. Tekan control F dan cari kode </head>

3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Kemudian cari kode berikut:

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-3'>

atau

<p class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-3'>

5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.

6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.

Hasil tutorial ini bisa anda lihat diblog saya "Jejak-jejak hati"

Terimakasih, semoga bermanfaat.

Jquery Multi Level Menu Horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²

Promosi Blog dengan Facebook

Banyak cara untuk mempromosikan blog kamu, seperti; mendaftarkan blog ke search engine (google, yahoo & bing), blog directory, technorati, tukaran link, dan sebagainya. Apabila OB memposting tentang promosi blog di facebook, mungkin sudah terdengar basi. Eit..., jangan langsung divonis dong! Dan kemungkinan lainnya ini merupakan sesuatu yang baru di mata kita parablogger. Apa iya sih? Umumnya promosi blog di facebook adalah hal yang lazim. Hanya dengan memasukkan alamat blog (situs web) di informasi kontak dalam pengaturan profil selesai deh. Namun yang akan kita diskusikan dalam posting ini tidak sesederhana itu. Penasaran khan? Daripada main teka-teki, yuk kita langsung urai benang merahnya.

Metode promosi blog di facebook yang akan kita bicarakan di sini adalah dengan membuat "Halaman Resmi" tanpa membuat akun baru [ Akun Facebook OB | Demo ]. 

• Silakan sign-in ke akun facebook kamu.


• Kemudian klik link berikut untuk membuat halaman baru di facebook.


• Kamu akan dibawa ke halaman seperti yang ditunjukkan oleh gambar di bawah ini :

Di kolom kiri terdapat form untuk membuat "Halaman Resmi".

• Pada "Buat Halaman untuk:", pilih "Merek, produk, atau organisasi.


• Setelah itu akan muncul dropdown menu dan pilih option Situs Web (paling bawah). Seperti yang diperlihatkan oleh gambar berikut :

• Beri "Nama Halaman" sesuai dengan tema blog kamu serta jangan lupa untuk untuk memberi tanda centang pada teks pernyataan di bawahnya. Di bawah ini screenshotnya :

• Terakhir klik button "Buat Halaman Resmi".

Catatan :

Langkah selanjutnya mirip dengan ketika pertama kali kamu menggunakan akun facebook.



Bagaimana mengisi halaman baru facebook tersebut?

Untuk mengisi halaman tersebut sama dengan pada saat kamu mengisi akun facebook kamu (Apa yang Anda pokirkan?) di "Dinding". Bedanya mungkin hanya terletak pada isi pesan yang kamu tulis. Oleh karena halaman baru tersebut akan digunakan untuk promosi blog, maka kamu hanya perlu menaruh kata/kalimat yang berkaitan dengan blog. Agar lebih terdefinisi kata/kalimat tersebut dilampiri dengan tautan ke posting blog kamu.

Contoh menurut cara OB :

1. Copy 2 - 3 kalimat pada awal suatu posting.


2. Paste ke "Dinding" halaman resmi, kemudian OB tautkan ke alamat posting yang bersangkutan.


3. Setiap ada postingan baru, OB akan melakukan hal yang sama seperti pada point 1 dan 2.

Catatan :

• Setiap pesan dalam dinding halaman yang telah dibuat dapat ditampilkan ke akun facebook kamu dengan cara mengklik "bagikan" (footer masing-masing pesan).

• Untuk berpindah ke halaman lain (pada saat kamu telah login di facebook), klik "Akun" --> "Kelola Halaman".

Selamat berpromosi blog di facebook via halaman resmi...

Menghilangkan "Subscribe to"

Maksud "Subscribe to" di sini adalah link teks yang bertuliskan Langgan:Poskan Komentar (Atom)/sejenisnya terletak di bawah link Newer Post, Home, dan Older Post (paging control). Fitur ini berfungsi untuk umpan balik pengunjung blog terhadap setiap komentar dalam suatu posting. Umpan balik tersebut dapat berupa RSS atau Atom. Ketika pengunjung mengklik link subscribe to, maka dia akan diarahkan ke alamat feed komentar (posting tertentu) blog kamu, ex : Silakan klik berlangganan komentar posting ini. Selanjutnya ia akan memilih berlangganan (subscribe) komentar dengan menggunakan salah satu site-feed, seperti; live bookmarks (FF), bloglines, my yahoo, atau google. Point diskusi trik blogger kita kali ini adalah berkenaan dengan fitur "subscribe to" seperti di atas, yakni bagaimana cara menghilangkannya.

• Sign-in ke akun blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Delete kode CSS seperti di bawah ini :

.feed-links {

...

}



Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.



Catatan :

Kalau tidak ketemu, loncat ke step berikutnya.

• Kemudian cari kode HTML, berikut :

<div class='feed-links'>

<data:feedLinksMsg/>

<b:loop values='data:links' var='f'>

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

</b:loop>

</div>

• Delete semua kode berwarna merah di atas.


• Simpan template.

Sekarang coba lihat blog, masih nongol atau tidak fitur tersebut. Kalau masih ada, silakan ambil penghapus dan hapus link teks Langgan:Poskan Komentar (Atom)/sejenisnya. Becanda... Maksud OB kita diskusikan lagi dalam komentar posting ini.

Menghilangkan "Status Message"

"Status Message" dalam blogger merupakan status pesan yang ditampilkan pada halaman main (post) paling atas untuk memberitahukan sesuatu hal kepada pengunjung blog.

Misalnya :

1. Kamu menggunakan fasilitas search dalam blog, ketika mengetik kata/frase kata yang ingin dicari dan ternyata kata/frase kata itu tidak ada dalam postingan, maka muncul pesan yang menyatakan "Tidak ada entri yang cocok dengan kueri...".


2. Kamu menggunakan readmore (Default blogger atau otomatis readmore), ketika mengklik salah satu label, maka akan ditampilkan pesan (disertai dengan posting yang sesuai dengan label tersebut) yang menyatakan "Menampilkan entri terbaru dengan label...".

"Status Massage" ini dapat kamu hilangkan dengan menambahkan kode CSS tertentu. Trik blogger ini cukup sederhana dan mudah diterapkan dalam blog kamu. Adapun kode CSS-nya adalah

.status-msg-wrap {display:none;}

Sekarang dimana kode itu diletakkan? Kode CSS dalam blogger terletak di antara kode <b:skin><![CDATA[ sampai dengan ]]></b:skin>. Atau agar lebih mudah letakkan saja di atas kode ]]></b:skin>.

Mohon dimaklumi posting trik blogger ini singkat saja, karena mau nonton final piala dunia (sok loe, OB. Bilang aja kalau isi postingnya memang segitu). Ssst..., jangan bikin OB malu dong!!!

Cara Menghilangkan Widget Attribution Blogger

Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Sekian dan terima kasih

Widget Recent Posts Dan Recent Comments Dari Blogger

Recent posts dan recent comments atau widget komentar dan posting terakhir adalah widget yang sering digunakan para blogger, karena kedua widget ini sangat berguna untuk mengetahui komentar terakhir dan posting terakhir di blog kita.

Dulu saya pernah mencoba menulis tentang cara membuat recent comments dan recent posts dengan javascript, namun sekarang kita tidak perlu susah-susah lagi untuk membuat widget tersebut dengan menggunakan javascript karena blogger sudah menyediakan widget ini di widget featured blogger.

Bagi Anda yang belum tau tentang cara menggunakan widget ini silahkan ikuti panduan dibawah ini.


Cara menggunakan widget ini cukup mudah yaitu :

1. Masuk pada "Design→ Page Elements"
   
   
2. Lalu Klik tombol "Add a Gadget"
   
   
3. Dan klik tombol "Featured"
   
   
   
4. Cari gadget Recent Comments, untuk menggunakan widgetnya klik tombol (+)
   
   
   Setelah muncul kotak dialog seperti diatas kemudian isi konfigurasi widgetnya dan tekan tombol "SAVE"
   
   
5. Dan untuk widget Recent Post pada langkah nomer 3 cari gadget "Recent Posts" dan klik tombol (+) maka akan muncul kotak konfigurasi seperti dibawah ini
   
   
   Nah setelah muncul kotak konfigurasi seperti diatas, lalu isi konfigurasinya sesuai keinginan Anda lalu "SAVE"
   
   
6. Selesai dan lihat hasilnya.

Okkey inilah bukti kemajuan blogger yang bisa Anda rasakan, semoga blogger lebih canggih lagi dan kita pun lebih mudah menggunakan blogger. Salam blogger

Tampilan Komentar Owner Berbeda (Template Baru)

Tampilan Komentar Owner atau pemilik blog berbeda ini sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.
Sebelumnya Saya sudah pernah membahas tentang bagaimana cara membuat kotak komentar pemilik blog berbeda dengan user, namun perkembangan blogger pun membuat tutorial tersebut tak bisa dipakai pada template yang baru, karena template yang baru codenya berbeda dengan yang lama. Dan saya pun juga pernah menulis tentang bagaimana cara mengubah komentar lawas menjadi yang baru, lalu pada kesempatan kali ini Saya akan mencoba menulis tutorial tentang cara membuat tampilan kotak komentar pemilik blog berbeda di template baru.

Yuk langsung saja ke tutorialnya

1. Masuk pada menu Design -> Edit HTML dan centang "Expand Widget Templates"
   
   
2. Taruh Code CSS dibawah ini diatas code ]]></b:skin>
   
   .comment-body-author {
   background: #FFFF29; /* Warna Background */
   border:1px dotted #FF2929; /*Border*/
   margin:0;
   padding:0 0 0 20px;
   }
   
   
3. Kemudian cari code yang berwarna hitam lalu sisipkan code yang berwarna merah, seperti dibawah ini.
   
   
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
   
   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
   
   <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p>
   <data:comment.body/>
   <span class='interaction-iframe-guide'/>
   </p>
   </b:if>
   </dd>
   
   </b:if>
   
   <dd class='comment-footer'>
   
   
   Perhatikan betul-betul penempatanya
   
   
4. SAVE dan lihat hasilnya.
   
   

Okkeylah sekian dulu. semoga bermanfaat bagi Anda dan jangan malu-malu bertanya jika ada kesulitan karena Saya akan mencoba membantu Anda.

Mengubah Komentar Lama Menjadi Baru

Komentar sudah menjadi hal yang tak bisa dipisahkan dengan postingan, seperti ibarat motor dengan bensin, tetapi pada postingan saya kali ini akan membahas bagaimana cara mengubah bentuk komentar lama blogger menjadi komentar baru blogger yang lebih canggih dengan ada photo author disebelah post comments.

Apabila Anda menggunakan template lawas photo author ini tidak muncul selayaknya yang ada pada template baru blogger yang ada photo author disebelahnya.

Coba lihat gambar dibawah ini untuk membedakan komentar lawas dengan komentar baru.

Nah terlihat skema di atas ada perbedaan dengan ditambahi foto komentator.

Apakah Anda ingin mengubahnya ?

Langkah pertama masuk pada menu "Settings" lalu "Comments" dan pastikan pilih "YES" untuk pertanyaan "Show profile images on comments?" lalu SAVE

langkah kedua masuk menu Edit HTML dan centang box "Expand Widget Templates"

Lalu cari kode dibawah ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Pahami dan sesuaikan codenya untuk template Anda.

Lalu Ganti code diatas dengan code dibawah ini

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Nah tinggal SAVE dan lihat hasilnya deh.

Dan apabila ada pertanyaan silahkan lontarkan saja komentar disini, mulai sekarang saya semangat untuk membalas komentar-komentar Anda.

Terima Kasih.

Cara Mendaftarkan Blogger di Google Search Engine

Setelah blog selesai, coba masukkan judul blog kamu pada search engine google. Apa yang terjadi? Kemungkinan besar google belum bisa membacanya. Hal ini dikarenakan blog tersebut masih berpredikat sebagai "new custumer", sehingga masih belum cukup syarat untuk terindeks di mesin pencari google. Terkecuali kamu telah melakukan beberapa optimasi dalam blog, namun upaya itu pun tidak jarang memerlukan waktu yang panjang dan proses yang berliku. Optimasi blog yang diulas kali ini pun tidak menjamin bahwa blog kamu akan cepat terindeks, tapi usaha ini perlu dilakukan dalam upaya memperkenalkan blog kamu kepada search engine google.

Tanpa panjang lebar, mari bersama-sama kita buka simpul ikatannya satu demi satu "bagaimana cara mendaftar blogger di google" :

• Klik di sini untuk memulai pendaftaran. Halaman browsing kamu akan ditampilkan seperti di bawah ini

• Pada "URL", masukkan alamat lengkap blog kamu (ex : http://namablogkamu.blogspot.com).


• Tambahkan komentar atau kata kunci yang mendeskripsikan mengenai blog kamu dalam kotak isi-an "Komentar". Kalimat atau kata kunci yang kamu masukkan dalam "Komentar" tidak akan mempengaruhi cara pengindeksan oleh google.


• Selanjutnya masukkan huruf yang tampil dalam kotak di atas tombol "Tambahkan URL"


• Terakhir klik "Tambahkan URL".

Tunggu loading ke halaman verifikasi yang menyatakan blog kamu telah dimasukkan dalam database google dan bersabar untuk penayangannya di search engine google.

Selamat mencoba...

Blogger Meluncurkan Fitur Stats (Statistics Blog)

Blogger meluncurkan fitur barunya di draft blogger yaitu statistics, nah apa guna statistics ini?. Gunanya adalah untuk memantau dan menghitung pengunjung blog kita, seperti berapa pengunjung hari ini, minggu ini bahkan bulan ini dan juga ada yang lain yaitu dari negara mana pengunjung, postingan yang paling banyak dikunjungi, traffic source, OS dan browser statistics.

Seperti dulu halnya saya sudah pernah menulis tentang statistics blog dengan shinystat dan fitur blogger ini lebih canggih dan gratis Anda gunakan di blogger karena ini fitur original dari blogger.

Nah bagaimana cara menggunakan fitur stats blogger ini ?

Pertama-tama masuk draft.blogger.com

Nah pada Dashboard draft blogger Anda akan menemukan menu Stats seperti gambar diatas.

Dan lihat dan amati statistics blog Anda.

Nah diatas adalah overview dari Stats Blogger dan pada halaman diatas terdapat sub menu yang sesuai fungsinya, seperti : Posts, Traffic Source dan Audience.

1. Stats posts

Pada bagian ini berfungsi untuk melihat halaman post dan pages yang sering di kunjungi dan juga hitungan kunjunganya.

2. Traffic Source


Traffic Source berguna untuk melihat dari situs dan URL apa visitor mengunjungi blog kita dan juga apa keyword yang dipakai di search engine untuk masuk ke blog kita.

3. Audience


Audience ini berfungsi untuk melihat dari mana pengunjung blog kita dan presentasi pengunjung dari browser dan OS.

Nah sedikit info bagi Anda semoga bermanfaat. Dan ingat fitur ini baru ada pada draft.blogger.com

Fitur baru Blogger : Statistik blog

Sekarang pihak blogger telah meluncurkan fitur satistik pengunjung blog di blogspot untuk mengetahui tentang lalu lintas berita situs.



Pilihan ini sudah diterapkan di blogger in draft dan tidak lama lagi juga akan segera diterapkan di blogger.







Fitur ini seperti Google-analytics namun hanya memberikan gambaran rinci seperti pandangan Page untuk posting, lalu lintas dan sumbernya, audience.



Yang keren tentang fitur ini adalah bahwa ia dapat diperbarui setiap jam. Jadi kamu tidak perlu menunggu terlalu lama untuk melihat statistik blog kamu.



Kamu dapat membaca lebih lanjut tentang hal ini di Bloggerindraft.

Membuat Highlight Current Page Menu tanpa Javascript

Bagi kalian yang udah memasang navigation menu pada blognya mungkin masih ada kekurangan, yaitu jika mengarah pada salah satu halaman static belum terhighlight.

Beberapa cara bisa dilakukan, tapi kebanyakan menggunakan jQuery atau juga javascripts. Tapi ada cara yang lebih mudah yang saya temukan di blognya Denny yang menggunakan modifikasi pada tag <ul> dengan permainan <b:if>.



Tapi kode yang digunakan memang agak panjang dan berulang-ulang, tapi cara ini murni tanpa menggunakan Javascript yang katanya bisa membuat loading blog kita agak lama.







Kita mulai aja ya.



Login ke account blogger kamu.

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".



contoh :

<ul id='nav'>

<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>

<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>

<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>

<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>

</ul>

diganti menjadi :

<ul id='nav'>

<b:if cond='data:blog.url != "URL HOME"'>

<li><a href='URL HOME' title='Homepages'>Home</a></li>

<b:else/>

<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>

</b:if>

<b:if cond='data:blog.url != "URL ABOUT"'>

<li><a href='URL ABOUT' title='About Writer'>About</a></li>

<b:else/>

<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>

</b:if>

<b:if cond='data:blog.url != "URL CONTACT"'>

<li><a href='URL CONTACT' title='Contact Person'>Contact</a></li>

<b:else/>

<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>

</b:if>

<b:if cond='data:blog.url != "URL SITEMAP"'>

<li><a href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>

<b:else/>

<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>

</b:if>

</ul>

Ganti huruf yang dicetak tebal dengan Link URL yang dipakai.



Kemudian pada kode CSSnya ditambahkan kode baru :

#nav ul li a.current {color:#000; background:#fff; text-decoration:none;}

Kalau kamu sedikit menguasai pengkodean CSS maupun HTML, kode-kode diatas bisa dirubah agar tampak berbeda...



Contoh penerapannya bisa kamu lihat di blog Rudy Azhar pada Navigasi paling atas kanan.