Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...
Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Home »  Posts filed under Blogspot

15 Februari 2010

Disable Navbar Blogspot

Cara Menghilangkan NavBar Blogger Pada Halaman Paling Atas

Bagi sebagian orang yang hosting blog mereka pada platform blogspot mungkin pernah mengeluhkan atau merasa terganggu dengan navbar blogger yang biasanya tampil pada halaman paling atas. Jika ingin menghilangkan (menghapus) melalui quick setting yang biasanya berada pada sebelah pojok kanan bawah, namun menu delete (hapus) tidak tersedia, hanya tersedia pilihan untuk merubah tampilan warna. Biasanya navbar ini aktif jika anda menggunakan template standar dari blogger.

Bagi anda yang menggunakan template standar blogger atau yang memodifikasi template standar blogger dan ingin menghilangkan navbar blogger, trik berikut ini dapat anda pakai. Ada beberapa alasan orang menghilangkan navbar blogger ini diantaranya; Blog anda akan kelihatan lebih profesional dan yang kedua menghemat tempat pada halaman paling atas. Namun dengan memasang navbar blogger ini juga mempunyai kelebihan antara lain; Memudahkan pengguna untuk mengedit halaman atau login ke akun blogger dan yang kedua sedikit lebih mendatangkan traffic ke blog anda karena jika orang lain membuka blog yang navbar blog nya aktif kemudian klik tombol 'Next' kemungkinan halaman blog anda yang selanjutnya akan muncul.

Ok langsung saja, begini caranya menghapus navbar blogger:

  1. Login ke Blogger menggunakan akun blogger anda.
  2. Klik pada layout
  3. Klik lagi pada bagian 'Edit HTML'.
  4. Cari kode berikut ini => ]]></b:skin>, kemudian kopi dan pastekan kode di bawah ini di atas kode ]]></b:skin>
    5. [css] #navbar-iframe { display: none !important; } [/css]
  5. Jika sudah klik tombol Save Template (simpan template)
  6. Selesai sekarang lihat preview blog anda, navbar blogger pada halaman paling atas sudah hilang.
Diposting oleh di 3 komentar:
Label: ,

Auto Readmore Blogspot

Membuat Read More Otomatis Blogspot


Kalau biasanya membuat readmore di blogspot pada paragraf pertama posting anda wajib mengetikkan kode ini => <span class="fullpost"> pada tab edit HTML, namun sekarang ada trik (Readmore Otomatis) yang memudahkan anda membuat readmore tanpa harus mengetikkan kode di atas.

Jika ingin memakai cara lama (dengan mengetikkan kode di atas => <span class="fullpost">), maka hal berikut ini yang harus anda lakukan. Pertama login ke akun blogger anda, navigasikan ke tab 'Layout' (Tata Letak) klik 'Edit HTML', kemudian cari kode berikut ini ]]></b:skin>. Copy dan pastekan kode berikut di bawah kode ]]></b:skin>:

[css collapse="false"]
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
[/css]

Kemudian cari lagi kode ini <p><data:post.body/></p> dan tambahkan kode berikut di bawahnya:

[xml collapse="false"]
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More.. (Ganti Read More.. dengan kata terserah anda contoh 'Selengkapnya')</a>
</b:if>
[/xml]

Agar paragraf postingan baru anda pada halaman utama blogspot terpotong maka ketika membuat posting navigasikan ke mode 'Edit HTML'. Ketikkan kode <span class="fullpost"> sebelum kata / kalimat depan yang ingin anda potong, dan tulis kode </span> setelah akhir kalimat yang ingin anda potong.

Cara ini bisa anda pakai untuk membuat read more, namun ada cara satu lagi yang lebih praktis. Cara ini secara otomatis akan membuat readmore untuk anda, berikut tahapan yang harus anda lakukan: Login ke blogger anda => 'LayOut' (Tata Letak) => klik pada bagian 'Edit HTML'. Temukan kode berikut <data:post.body/> (agar lebih mudah gunakan shortcut keyboard dengan mengetikkan 'Ctrl + F, kemudian pastekan kode tersebut). Ganti kode <data:post.body/> dengan kode di bawah ini:

[xml]
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/>
<script type='text/javascript'>
var blogID = "780351826145379977"
function retriveSummaryPost<data:post.id/>(json){document.getElementById("summary<data:post.id/>").innerHTML
= json.entry.summary.$t + "..."}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement("script");
script.src = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/"+POSTID+"?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>";
script.type = "text/javascript"; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);

}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>("<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div>
</b:if>
[/xml]

Ganti var blogID = "780351826145379977", jika tidak tahu dimana mencari BlogID anda login dulu ke blogger => arahkan ke bagian posting => lihat pada address bar. Contoh "http://www.blogger.com/posts.g?blogID=XXXXXXXXXXX". XXXXXXXXXXX adalah BlogID anda.

Selesai... Sekarang setiap kali anda posting maka secara otomatis pada halaman utama cuplikan posting anda akan terpotong.

http://www.bloggertipandtrick.net/how-to-add-auto-read-more-feature-with/
Diposting oleh di 2 komentar:
Label: , ,
14 Februari 2010

Kontak Form Blogspot

Membuat Form Kontak di Platform Blogspot Dengan Memanfaatkan Free Online Form Generator



Jika artikel yang lalu sedikit mengulas tentang 'Cara membuat form kontak menggunakan google docs', kali ini saya ingin sharing trik yang tidak jauh beda dengan artikel sebelumnya. Bedanya trik yang satu ini kelihatan lebih original sehingga jika dilihat sekilas mirip dengan form kontak yang dipakai oleh kebanyakan situs web pada umumnya.

OK langsung saja mulai, langkah-langkah yang perlu anda lakukan adalah:

  1. Daftar dulu di situs ini. Gratis
  2. Setelah daftar dan verifikasi email, masuk ke halaman member area. Pada panel tab sebelah kanan klik 'Create a new form'. Berikut text field yang wajib anda isi:
    • Web form Name: Isikan dengan nama form anda. Nama yang anda isikan akan muncul sebagai nama pengirim di kotak masuk email ketika emailmeform mengirimkan alert (pemberitahuan) bahwa ada seseorang yang mengirimkan email via form kontak anda.
    • Recipients Emails: Isikan dengan alamat email anda. Pesan yang ditulis oleh visitor melalui form kontak akan di forward ke alamat email anda.
    • Spam Email address: Optional. Alamat email untuk spam.
    • Thank you page: Isikan dengan alamat url redirect ketika tombol kirim form kontak diklik. Sebelumnya buat dahulu Halaman terima kasih ini, pada 'blogger dashboard' → 'Entry Baru' → tuliskan konten/isi halaman terima kasih anda.

      Contoh: 'Terima kasih telah menghubungi saya. Pesan anda akan saya balas secepatnya'. Klik terbitkan entry → Lihat blog → copy alamat url dari halaman blog yang baru saja anda buat kemudian pastekan pada text field 'Thank you page' emailmeform.
    • Number of fields: Isikan berapa jumlah text field yang ingin anda buat. Default 4, Kemudian klik next.

  3. Pada halaman 'Web Form Creation Wizard - Step 2 of 7', jika blog anda berbahasa Indonesia ganti 'Your Name' dengan 'Nama' misalnya, 'Your Email Address' ganti dengan 'Alamat email', 'Subject' dengan 'Subjek', 'Message' dengan 'Pesan'.
    • Pada kolom 'Text Effects' sesuaikan dengan selera anda apakah teks mau dibuat tebal atau normal.
    • Kolom 'Field Type' biarkan saja setting default.
    • Kolom 'Required?' sesuaikan dengan keinginan anda. Masing-masing kotak isian dapat diatur dengan 'Yes' (Wajib diisi) dan 'No' (Tidak Wajib/optional). Kemudian klik next.

  4. Pada halaman 'Web Form Creation Wizard - Step 3 of 7' pada kolom 'Size and Details' sesuaikan column (Cols) setiap field form kontak anda. Semakin banyak jumlah angka yang anda masukkan semakin lebar pula kotak isian form kontak. Untuk kotak isian Pesan (message) jumlah baris (Rows) isi sesuai dengan selera anda. Semakin banyak jumlahnya, akan semakin panjang ke bawah kotak isian kontak form pada bagian message (pesan). Klik next.
  5. Pada halaman 'Web Form Creation Wizard - Step 4 of 7', 'font', 'color' isikan sesuai dengan selera.
    • 'Form Description', 'Header', 'Footer', 'Style CSS' biarkan saja kosong, Jika menguasai HTML dan CSS silahkan dimodifikasi jika anda berkenan.
    • 'Send Button Name' ganti text 'Send email' dengan 'Kirim email'.
    • 'Send Button alignment' sesuaikan posisinya menurut selera anda, ada tiga pilihan; 'Left' (kiri), 'Middle' (tengah), dan 'Right' (kanan).
    • 'Include a Clear button' centang check box 'yes' ganti nama 'Clear' dengan nama pilihan anda, misalnya ganti dengan 'Reset'.
    • 'Anti Spam' jika fitur ini ingin anda pasang check 'Show Image with Letters and Numbers', jika tidak klik 'None'. Anti spam ini jika di aktifkan maka visitor yang akan mengirimkan email kepada anda wajib mengetik code verikasi pada kotak isian anti spam.
    • 'Image Verification' atur properti dari tampilan 'Anti Spam'.
    • 'Display Mode' biarkan saja defaultnya. Klik next.

  6. Pada halaman 'Web Form Creation Wizard - Step 5 of 7' sesuaikan properties pesan anda, atau biarkan saja pakai setting default. Klik next.
  7. Pada halaman 'Web Form Creation Wizard - Step 6 of 7' adalah preview dari form kontak yang baru saja anda buat. Jika sudah sesuai dengan yang anda inginkan klik Finish, jika masih memerlukan penyesuaian klik Back.
  8. Pada halaman terakhir 'Web Form Creation Wizard' klik pada 'Get the HTML Code'. Simpan code tersebut di notepad, yang nanti akan di pasang pada blog anda.


OK. Sekarang tinggal membuat code CSS untuk mengatur penempatan form kontak yang baru saja anda buat. Pada blogger dashboard masuk ke bagian 'LayOut' → klik pada 'Edit HTML' → Cari code berkut ']]></b:skin>' tanpa tanda quote. Tuliskan code CSS berikut di atas code ']]></b:skin>':

[css collapse="false"]
.formkontak {
width:415px;
height:auto;
margin:0px;
}
[/css]

Sesuaikan lebar (width) dengan setting anda. Semakin banyak angkanya semakin lebar. Selanjutnya buat posting baru untuk halaman kontak. Pada halaman posting, navigasikan ke 'Edit HTML', misalnya anda akan menuliskan:

[html collapse="false"]
<p>Anda dapat menghubungi saya dengan menggunakan kontak form di bawah ini</p>
<div class="formkontak">pastekan code HTML dari emailmeform dibagian ini</div>
[/html]

Selesai. Klik 'Terbitkan Entry'. Test form kontak yang baru saja anda buat, login ke alamat email yang anda gunakan untuk mengisi pada kotak isian 'Recipient email'. Lihat apakah pesan yang baru anda tulis sudah masuk. Untuk yang hosting sendiri (self hosting blog/web) tahap pembuatannya sama.

Contohnya dapat anda lihat di halaman email me
Diposting oleh di 2 komentar:
Label: , , ,

Blogspot Sitemap Error "Google Webmaster Tools"

Beberapa minggu yang lalu saya coba submit blog baru ini ke google, tapi tidak tahu kenapa 'Sitemap Status' nya 'Warning'. Detailnya announcement-nya kurang lebih bertuliskan 'error:URL restricted by robots.txt'. Saya coba berulangkali submit ulang sitemat atom feed blog saya, tetapi hasilnya tetap sama.

Setelah mencari-cari dimana letak kesalahannya, ternyata permasalahan ini disebabkan setelah saya migrasikan (pindahkan) arah feed blog saya ke 'FeedBurner'. Pada dasarnya url yang saya submit ke google webmaster tools mengarah pada url 'Feedburner' bukan ke url blog yang saya submit. Bersumber dari solusi yang saya dapatkan di sini, ternyata penyelesaiannya hanya dengan sedikit memodifikasi url sitemap yang sebelumnya beralamat 'http://tutorial7.blogspot.com/atom.xml saya tambahkan '?redirect=false' menjadi 'http://tutorial7.blogspot.com/atom.xml?redirect=false'. Eh.. ternyata berhasil, status sitemap warning sudah hilang.

Tambahan:
  1. Jika anda mempunyai posting lebih dari 100, dan ingin semua posting terindeks tambahkan kode di bawah:



    atom.xml?redirect=false&start-index=1&max-results=100
    atom.xml?redirect=false&start-index=101&max-results=100

  2. Jika lebih dari 200:



    atom.xml?redirect=false&start-index=1&max-results=100
    atom.xml?redirect=false&start-index=101&max-results=100
    atom.xml?redirect=false&start-index=201&max-results=100

  3. Jika lebih dari 300:



    atom.xml?redirect=false&start-index=1&max-results=100
    atom.xml?redirect=false&start-index=101&max-results=100
    atom.xml?redirect=false&start-index=201&max-results=100
    atom.xml?redirect=false&start-index=301&max-results=100

Seperti yang anda lihat, 'start-index' adalah nomor permulaan posting dan 'max-results' merupakan batas jumlah posting. Batas 'max-results' sampai dengan 500, supaya aman banyak yang merekomendasikan sampai batas 100.
Diposting oleh di 3 komentar:
Label: , , , ,

Membuat Navigasi Menu Blogspot

Website atau blog rasanya kurang lengkap jika tidak ada navigasi menu, karena navigasi menu inilah yang menjadi penunjuk jalan bagi visitor untuk mengakses halaman pada sebuah webste / blog. Untuk membuat navigasi menu pada blogspot tidaklah begitu susah, ikuti cara pembuatannya berikut ini;

  1. Login ke account blogger.
  2. Navigasikan ke 'Layout' (tata letak) » Klik pada tab 'Edit HTML'.
  3. Cari kode ini => "]]></b:skin>".
  4. Copy dan pastekan kode di bawah ini di atas kode "]]></b:skin>" ;



#menuanda-wrapper {
width: 100%;
height: 27px;
background: #5bb3fd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
border-top: 0px solid #669999;
padding-left: 0px;
margin-bottom: 9px;
overflow: hidden
}

#menuanda-wrapper h2 {
display: none
}

#menuanda, #menuanda ul {
padding: 0px;
margin: 0;
list-style: none;
font: normal 0.95em arial;
color:#ffffff;
}

#menuanda a {
display: block;
text-decoration: none;
border-right: 0px solid 669999;
border-left: 0px solid #d3e2e2;
color: #003366;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left; 
padding-left: 9px;
padding-right:9px;
padding-top:6px;
padding-bottom: 7px
}

#menuanda a.depan {
padding: 0px;
border-left: 0px none;
width: 90px;
height: 27px;
background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan:hover {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeOmJYJGciiLmDo42V9HJWKmV4k6aAdj-kVm9Y8spZu8f7KI643dUJVQhdSoolUoDAofDGQpPtE_q3R16mYgBrhq4hpdhYStl3oXtnbd7JKqPPA0Cjvyc36psT3f7G8gKWNxXXWVF2hY/s320/hover.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan em {
display: none;
}

#menuanda a.master {
font-weight: bold;
text-transform: capitalize;
}

#menuanda a.buntut {
padding: 0px;
border-left: 0px none;
border-right: 0px none;
width: 27px;
height:27px;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9l13HwbfZVw7OJsxM8bli2HipD1EiyF2r4bPVtHRSfmGJpiLMeJh4r6qhBDUPuEW4t4Wkl7FnNPwxMQ1ZpZYD12vSbQT8B3YZkYQMa-XMt3A-Mu8i6IQylb1-2VnO8LN6tR92lpj0z4/s320/back.gif') no-repeat;
}

#menuanda li {
float: left;
width: 9em;
}

#menuanda li.kanan {
float: right;
border-left: 0px none;
}

#menuanda li ul, #menuanda ul li {
width: 14em;
}

#menuanda ul li a {
color: #ffffff;
border-left: 0px none;
border-right: 0px none;
padding-left: 5px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px
}

#menuanda li ul {
position: absolute;
display: none;
background-color: #5bb3fd;
z-index: 200;
border-right: 1px solid #5bb3fd;
border-left: 1px solid #A8C4C4;
border-bottom: 1px solid #A8C4C4;
margin-left: -1px;
text-align: left;
}

#menuanda li:hover a, #menuanda a:focus, #menuanda a:active{
color: #5BB3FD;
background-color: #dde1e4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDZY2zVPT07oXB3nbDsnZvlH-WDiwCiJxbA9wk6qKTdkJkHOnIPkrAciAZBh2X8DnuG1y5VIO1uLj4Ow9xVa7RnNQo5XCdT-Ga99GsyMC6LphsZ1FXhYGRRJGdkikBGJHIvYKvomaPJM/s320/hover.gif');
background-repeat: repeat-x
}

#menuanda li:hover ul {
display: block;
}

#menuanda li:hover ul a {
color: #000000;
border-top: 1px solid #8A8484;
background-image: url('none');
}

#menuanda ul a:hover {
background-color: #ffffff!important;
color: #ff0000!important;
}

#menuanda li {
width: auto;
}


Beberapa point yang perlu anda modifikasi. Pertama tiga gambar backround navigasi menu untuk menggantikan background image di atas, masing-masing 'normal.gif', 'hover.gif', dan 'back.gif'. 'normal.gif' → background default sebelum ada kontak dengan mouse, 'hover.gif' → muncul ketika mouse di arahkan ke navigasi menu, 'back.gif' buatlah sama dengan 'normal.gif'. Gunakan software olah gambar seperti adobe photoshop atau sowtware semacamnya. Untuk gambar 'normal' dan 'hover' berukuran 1px x 27px, sedangkan 'back' 27px x 27px. Membuat gambar pada dimensi 1 x 27 px mungkin sedikit susah membuatnya, buat dahulu dimensi 27px x 27px waktu membuat gambar jika sudah selesai baru tentukan resize ukurannya menjadi 1px x 27px. Upload gambar ke blogger kemudian gantikan alamat url gambar di atas dengan url gambar yang baru saja anda upload.

#5BB3FD → Warna text hover pada menu
#dde1e4 → Warna background submenu
#000000 → Warna text normal submenu
#8A8484 → Warna garis pemisah antar submenu
#ffffff → Warna background hover submenu
#ff0000 → Warna text hover submenu

Membuat navigasi menu. Misal anda mempunyai navigasi menu antara lain terdiri atas;

  1. Menu home
  2. Menu posting dengan sembilan submenu posting
  3. Menu lainnya ; menu-1 sampai dengan menu ke-6, maka kode html yang anda tuliskan akan terlihat seperti di bawah ;



<div id="menuanda-wrapper">
<ul id="menuanda">
<li><a class="master" href="http://bloganda.com/" title="Halaman Utama">Home</a></li>
<li><a class="master" href="#" title="Artikel">Posting</a>
<ul>
<li><a href="http://bloganda.com/" title="title Posting 1">Posting 1</a></li>
<li><a href="http://bloganda.com/" title="title Posting 2">Posting 2</a></li>
<li><a href="http://bloganda.com/" title="title Posting 3">Posting 3</a></li>
<li><a href="http://bloganda.com/" title="title Posting 4">Posting 4</a></li>
<li><a href="http://bloganda.com/" title="title Posting 5">Posting 5</a></li>
<li><a href="http://bloganda.com/" title="title Posting 6">Posting 6</a></li>
<li><a href="http://bloganda.com/" title="title Posting 7">Posting 7</a></li>
<li><a href="http://bloganda.com/" title="title Posting 8">Posting 8</a></li>
<li><a href="http://bloganda.com/" title="title Posting 9">Posting 9</a></li>
</ul>
</li>
<li><a class="master" href="http://bloganda.com/" title="title anda 1">tab 1</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 2">tab 2</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 3">tab 3</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 4">tab 4</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 5">tab 5</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 6">tab 6</a></li>
</ul>
</div>


Modifikasi nama menu, alamat url, dan title sesuai minat anda. Untuk mengaktifkan menu ini, pada 'Dashboard' blogger pilih "Layout" (Tata Letak) » "Page Elemen" (Elemen halaman) » "Add Gadget" (Tambah Gadget) » pilih "HTML/JavaScript". Copy dan pastekan kode di atas, simpan dan sesuaikan penempatannya.

Contoh di atas sub menunya hanya sampai dengan level 1, kalau mau lebih sampai 3 level misalnya, pakai cara ini (Style menunya horizontal):



ul#menuku-horizontal {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul#menuku-horizontal ul {
width: 160px; /* Lebar Sub Menu */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#menuku-horizontal ul ul,ul#menuku-horizontal ul ul ul {
top: 0;
left: 100%;
}

ul#menuku-horizontal li {
float: left;
display: inline;
position: relative;
}

ul#menuku-horizontal ul li {
width: 100%;
display: block;
}

/* Menu Utama */
ul#menuku-horizontal a {
border-top: 1px solid #353535;
border-right: 1px solid #353535;
border-left: 1px solid #353535;
border-bottom: 1px solid #353535;
padding: 6px;
float: left;
display: block;
background: #4c4c4c;
color: #ffffff;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-horizontal a:hover,ul#menuku-horizontal li:hover a,ul#menuku-horizontal li.iehover a {
background: #C8C3C3;
color: #000000;
}

/* Sub Menu Level 1 */
ul#menuku-horizontal li:hover li a,ul#menuku-horizontal li.iehover li a {
float: none;
background: #c8c3c3;
}

/* Sub Menu Level 1 Hover */
ul#menuku-horizontal li:hover li a:hover,ul#menuku-horizontal li:hover li:hover a,ul#menuku-horizontal li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover a {
background: #c8c3c3;
}

/* Sub Menu Level 2 */
ul#menuku-horizontal li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-horizontal li:hover li:hover li a:hover,ul#menuku-horizontal li:hover li:hover li:hover a,ul#menuku-horizontal li.iehover li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 3 */
ul#menuku-horizontal li:hover li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-horizontal li:hover li:hover li:hover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-horizontal li:hover ul ul,ul#menuku-horizontal li:hover ul ul ul,ul#menuku-horizontal li.iehover ul ul,ul#menuku-horizontal li.iehover ul ul ul {
display: none;
}

ul#menuku-horizontal li:hover ul,ul#menuku-horizontal ul li:hover ul,ul#menuku-horizontal ul ul li:hover ul,ul#menuku-horizontal li.iehover ul,ul#menuku-horizontal ul li.iehover ul,ul#menuku-horizontal ul ul li.iehover ul {
display: block;
}


'border-top sampai dengan border bottom' → '1px solid' berarti ukuran ketebalan garis 1 pixel dengan tipe solid, '#353535' kode untuk warna garis.
Di bawahnya 'background:#4c4c4c' dan 'color:#ffffff' masing-masing merupakan penentuan warna untuk background menu utama dan warna teks menu utama (saya pakai warna putih/#ffffff).

Di bawahnya lagi '/* Hover menu utama */' pada bagian 'background dan color' masing-masing menentukan warna hover baik background maupun teks pada menu utama.

Dan yang terakhir '/* Sub Menu Level 1 */' menentukan background warna pada submenu level 1 dan '/* Sub Menu Level 1 Hover */' menentukan hover warna background pada sub menu level 1. Level 2 sampai dan level 3 pengertiannya sama dengan level 1.

HTML Code:



<ul id="menuku-horizontal">
<li><a href="http://tutorial7.blogspot.com/" title="Halaman Utama">Home</a></li>
<li><a href="#" title="Semua Posting">Posts</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Bisnis%20Online%20Dunia%20Maya" title="Cari Penghasilan Tambahan Dari Internet">Duit Online</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Blogger%20Dummies" title="Blogger Untuk pemula">Blogger For Dummies</a></li>
<li><a href="#" title="Pemrograman Web">Web Programming >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Cascading%20Style%20Sheets%20%28CSS%29" title="Cascading Style Sheets">CSS</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/HTML" title="Hyper Text Markup Language (HTML)">HTML</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PHP%20Hypertext%20Preprocessor%20%28PHP%29" title="PHP Hypertext Preprocessor">PHP</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Internet" title="Internet Tips">Internet</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Kabar%20dan%20Tips%20Lainnya" title="Kabar dan tips lainnya">Miscellaneous</a></li>
<li><a href="#" title="Microsoft Office">Microsoft Office >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Excel%202007" title="Microsoft Excel 2007 Tips">Excel 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PowerPoint%202007" title="PowerPoint 2007 Tips">PowerPoint 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Word%202007" title="Word 2007 Tips">MS Word 2007</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Search%20Engine%20Optimization%20%28SEO%29" title="Search Engine Optimization">SEO</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Windows" title="Windows Tips dan Trik">Windows</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/feeds/posts/default" title="Posts RSS">Posts RSS</a></li>
<li><a href="http://tutorial7.blogspot.com/feeds/comments/default" title="Comments RSS">Comments RSS</a></li>
<li><a href="http://www.blogger.com/profile/05899674811945754032" title="Tentang Saya">About Me</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/kontak.html" title="Kirim Email Ke Saya">Email Me</a></li>
<li><a href="#" title="Link Partners">Link Partners</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link-indonesia.html" title="Partner Links Indonesia">Partner Links Indonesia</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link.html">Partner Links</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/2009/04/sitemap.html" title="Peta Blog">Sitemap</a></li>
<li><a href="#">Owner Edit</a>
<ul>
<li><a href="http://www.blogger.com/post-create.g?blogID=780351826145379977">Brand New Post</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=5759422519225049811">Link Edit</a></li>
<li><a href="http://www.blogger.com/posts.g?blogID=780351826145379977">Posts View</a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=780351826145379977">Widget</a></li>
<li><a href="http://www.blogger.com/html?blogID=780351826145379977">HTML</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=8945225034979464711">Map</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=3728186818005253981">Upload</a></li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=780351826145379977">Option</a></li>
</ul>
</li>
</ul>


navigasi menu dengan style vertikal. Pakai kode di bawah ini:



ul#menuku-vertikal,ul#menuku-vertikal li,ul#menuku-vertikal ul {
width: 160px; /* Menu Width */
margin: 0;
list-style: none;
}

ul#menuku-vertikal li {
float: left;
position: relative;
width: 100%;
}

ul#menuku-vertikal li.iehover {
z-index: 1000; /* IE z-index bugfix */
}

ul#menuku-vertikal ul {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}

/* Menu Utama */
ul#menuku-vertikal a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-vertikal a:hover,ul#menuku-vertikal li:hover a,ul#menuku-vertikal li.iehover a {
background: #BBB;
color: #FFF;
}

/* Sub Menu Level 1 */
ul#menuku-vertikal li:hover li a,ul#menuku-vertikal li.iehover li a {
float: none;
background: #BBB;
}

/* Sub Menu Level 1 Hover */
ul#menuku-vertikal li:hover li a:hover,ul#menuku-vertikal li:hover li:hover a,ul#menuku-vertikal li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 2 */
ul#menuku-vertikal li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-vertikal li:hover li:hover li a:hover,ul#menuku-vertikal li:hover li:hover li:hover a,ul#menuku-vertikal li.iehover li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover a {
background: #666;
}

/* Sub Menu Level 3 */
ul#menuku-vertikal li:hover li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-vertikal li:hover li:hover li:hover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-vertikal li:hover ul ul,ul#menuku-vertikal li:hover ul ul ul,ul#menuku-vertikal li.iehover ul ul,ul#menuku-vertikal li.iehover ul ul ul {
display: none;
}

ul#menuku-vertikal li:hover ul,ul#menuku-vertikal ul li:hover ul,ul#menuku-vertikal ul ul li:hover ul,ul#menuku-vertikal li.iehover ul,ul#menuku-vertikal ul li.iehover ul,ul#menuku-vertikal ul ul li.iehover ul {
display: block;
}


Jika ingin menggunakan menu vertikal ganti kode widget <ul id="menuku-horizontal"> menjadi <ul id="menuku-vertikal">

Selesai, semoga bermanfaat...
:D
Diposting oleh di 3 komentar:
Label: , , ,

Bookmark Button Blogspot

Pemasangan tombol bookmark selain memudahkan pengunjung untuk bookmark blog, memberikan analisa statistik aktifitas bookmarking, selain itu dapat juga meningkatkan popularitas dan peringkat blog. Pemasangan tombol bookmark ini mudah dan gratis maka jangan disia-siakan. Berikut cara pemasangan bookmark button pada blogspot:

  1. Daftar dulu di sini.
  2. Setelah itu login ke addthis kemudian klik pada tombol 'Get the Button'
  3. Pada menu pilihan 'Which kind of button?' pilih 'Sharing / Bookmarking button'.
  4. Kemudian pilih tombol pilihan anda pada bagian 'Which Look?'
  5. 'Where?' pilih 'On a Blog'.
  6. 'Blogging platform' pilih 'Blogger'. Lanjut klik pada tombol 'Get Your Button Code'.
  7. Pada halaman selanjutnya, copy script code bookmark anda.
  8. Login ke blogspot. Klik pada 'Layout', klik lagi pada 'Edit HTML'. Centang pada 'Expand Widget Templates' checkbox.
  9. Copykan kode script bookmark tepat di bawah kode <div class='post-footer meta'>
  10. Selesai, simpan template.
Semoga bermanfaat...
:D
Diposting oleh di Tidak ada komentar:
Label: , ,

Pasang Widget Google Translate Blogspot

Janggal rasanya jika akses blog/web dengan mediator bahasa yang sangat asing atau bahkan sama sekali belum pernah kenal seperti misalnya bahasa Rusia, Ceko, Bulgaria, Turki, dan bahasa minoritas asing lainnya.

Jika memang konten di dalamnya sesuai dengan yang anda cari, lalu apa yang harus dilakukan, haruskah diabaikan, atau haruskah menerjemahkan satu persatu setiap susunan kata & butuh waktu berapa lama? Satu dari beberapa solusinya adalah dengan menggunakan tool penerjemah online, seperti misalnya Google Translate, Yahoo! Babel Fish, atau Worldlingo. Tinggal copy alamat urlnya, paste pada situs-situs di atas, beberapa saat halaman terjemahan yang anda butuhkan sudah diterjemahkan.

Era sekarang semuanya serba mungkin seperti ketersediaan akses informasi yang dapat dilihat via internet dari belahan dunia manapun dan kapanpun, jangan sampai disia-siakan. Fitur gratis seperti widget google translate sangat bermanfaat bagi webmaster untuk mendapatkan trafik gratis dari pengunjung (visitor) negara lain.

Misal visitor dari Cina masuk ke situs anda, yang harus mereka lakukan hanyalah klik pada bendera Cina untuk menerjemahkan situs halaman anda ke bahasa mereka. Trik ini dapat memperkecil resiko bounce visitor (visitor akses web namun tidak tertarik untuk melihat halaman web yang lain pada situs yang sama), bahkan mungkin mereka bisa saja subscribe ke situs anda jika memang konten yang yang anda sajikan cukup menarik walaupun bahasa yang dipakai sama sekali berbeda dengan bahasa asli mereka.

Mau tahu bagaimana cara menambahkan widget translate di blog anda? Berikut tutorial sederhana cara pasang google translate widget pada blogspot:

  • Login ke blogger. Pilih menu 'Layout' (tata letak) > klik pada 'Page Element' (elemen halaman).
  • Klik 'Add Gadget' (tambah gadget) > klik pada 'HTML/JavaScript'.
  • Tulis 'Title' (judul) anda misal 'Translate This Blog', isikan kontennya dengan kode di bawah ini :



<strong><span style="text-align: center; background: padding: 5px;">.: Translate This Post to Your Regional Language :.<hr/> <a style="cursor: pointer;" target="blank" title="Translate to English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;">English</a><a> | </a> <a style="CURSOR: pointer" target="_blank" rel="nofollow" title="转化为中文&#65288;简体)" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;">中文&#65288;简体)</a><a> | </a> <a style="CURSOR: pointer" title="ترجمة الى العربية" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;">العربية</a><a> | </a> <a style="CURSOR: pointer" target="_blank" rel="nofollow" title="한국 번역" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;">한국어</a><a> | </a> <a style="CURSOR: pointer" title="Traduci in Italiano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;">Italiano</a><a> | <a><a style="CURSOR: pointer" target="_blank" rel="nofollow" title="Vertaal naar Nederlands" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;">Nederlands</a><a> | </a> <a style="CURSOR: pointer" target="_blank" rel="nofollow" title="Перевести на русский" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;">Русский</a><a> | </a> <a style="CURSOR: pointer" target="_blank" rel="nofollow" title="Traduzir para o Português" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;">Português</a><a> | </a> <a style="CURSOR: pointer;" title="翻訳する日本語" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;">日本語</a><a> | </a> <a style="CURSOR: pointer;" target="_blank" rel="nofollow" title="Traducir al español" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;">Español</a><a> | </a> <a style="CURSOR: pointer;" target="_blank" rel="nofollow" title="Traduire en français" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;">Français</a><a> | </a> <a style="CURSOR: pointer;" title="Übersetzen auf Deutsch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;">Deutsch</a><a> | </a> <a style="CURSOR: pointer;" title="Perkthimi në shqip" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Csq&amp;hl=en'); return false;">Shqipe</a><a> | </a> <a style="CURSOR: pointer;" title="Превод на България" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cbg&amp;hl=en'); return false;">Български</a><a> | </a> <a style="CURSOR: pointer;" title="Traduir al català" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cca&amp;hl=en'); return false;">Català</a><a> | </a> <a style="CURSOR: pointer;" title="轉化為中文&#65288;繁體&#65289;" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-TW&amp;hl=en'); return false;">中國&#65288;繁體&#65289;</a><a> | </a> <a style="CURSOR: pointer;" title="Prijevod na hrvatski" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Chr&amp;hl=en'); return false;">Hrvatski</a><a> | </a> <a style="CURSOR: pointer;" title="Přeložit do češtiny" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ccs&amp;hl=en'); return false;">Čeština</a><a> | </a> <a style="CURSOR: pointer;" title="Tõlgi eesti" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cet&amp;hl=en'); return false;">Eesti</a><a> | </a> <a style="CURSOR: pointer;" title="Translate to Suomi" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfi&amp;hl=en'); return false;">Suomi</a><a> | </a> <a style="CURSOR: pointer;" title="Ελληνική Γλώσσα" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cel&amp;hl=en'); return false;">Ελληνικά</a><a> | </a> <a style="CURSOR: pointer;" title="ह&#2367;न&#2381;द&#2368; अन&#2369;व&#2366;द करन&#2375; क&#2375; ल&#2367;ए" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Chi&amp;hl=en'); return false;">ह&#2367;न&#2381;द&#2368;</a><a> | </a> <a style="CURSOR: pointer;" title="Tulkot uz latviešu" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Clv&amp;hl=en'); return false;">Latviešu</a><a> | </a> <a style="CURSOR: pointer;" title="Ittraduċi li Malti" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cmt&amp;hl=en'); return false;">Malti</a><a> | </a> <a style="CURSOR: pointer;" title="Oversett til norsk" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cno&amp;hl=en'); return false;">Norsk</a><a> | </a> <a style="CURSOR: pointer;" title="Traduceţi la români" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cro&amp;hl=en'); return false;">Român</a><a> | </a> <a style="CURSOR: pointer;" title="Транслате то Сербиан" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Csr&amp;hl=en'); return false;">Српски</a><a> | </a> <a style="CURSOR: pointer;" title="Preložiť do slovenčiny" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Csk&amp;hl=en'); return false;">Slovenský</a><a> | </a> <a style="CURSOR: pointer;" title="Prevedi na Slovenskem" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Csl&amp;hl=en'); return false;">Slovenski</a><a> | </a> <a style="CURSOR: pointer;" title="Översätt till svenska" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Csv&amp;hl=en'); return false;">Svenska</a><a> | </a> <a style="CURSOR: pointer;" title="แปลเป&#3655;นประเทศไทย" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cth&amp;hl=en'); return false;">ชาวไทย</a><a> | </a> <a style="CURSOR: pointer;" title="Translate Türkçe" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ctr&amp;hl=en'); return false;">Türkçe</a><a> | </a> <a style="CURSOR: pointer;" title="Dịch sang Tiếng Việt" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cvi&amp;hl=en'); return false;">Tiếng Việt</a><a> | </a> <a style="CURSOR: pointer;" title="Translate Türkçe" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ctk&amp;hl=en'); return false;">Türkçe</a><a> | </a> <a style="CURSOR: pointer;" title="Dansk" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cda&amp;hl=en'); return false;">Dansk</a><a> | </a> <a style="CURSOR: pointer;" title="Translate to Filipino" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ctl&amp;hl=en'); return false;">Filipino</a><a> | </a> <a style="CURSOR: pointer;" title="Traducir ao galego" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cgl&amp;hl=en'); return false;">Galego</a><a> | </a> <a style="CURSOR: pointer;" title="Translate a magyar" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Chu&amp;hl=en'); return false;">Magyar</a><a> | </a> <a style="CURSOR: pointer;" title="תרגם לעברית" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ciw&amp;hl=en'); return false;">עברית</a><a> | </a> <a style="CURSOR: pointer;" title="Versti į lietuvių" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ctw&amp;hl=en'); return false;">Lietuvių</a><a> | </a> <a style="CURSOR: pointer;" title="Przetłumacz na polski" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpl&amp;hl=en'); return false;">polski</a><a> | </a> <a style="CURSOR: pointer;" title="แปลเป&#3655;นประเทศไทย" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cth&amp;hl=en'); return false;">ประเทศไทย</a><a> | </a> <a style="CURSOR: pointer;" title="Перекласти на українську" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cuk&amp;hl=en'); return false;">Українська</a><br/> Powered by<a href="http://translate.google.com/?hl=en"> Google Translate</a> | Widget Edited by<a href="http://linggihnote.blogspot.com/" title="Membuat Google Translate Widget Blogger"> .:: Linggih ::. </a></a></a></span></strong>


href)+'&langpair=id%7Czh-CN&hl=en'); return false...."=> 'id' = diterjemahkan dari bahasa asli (Indonesia), 'zh-CN' = diterjemahkan ke bahasa Cina Simplified.

Jika ingin membuat translate ke dalam bahasa lainnya selain di atas, cukup ganti kode bahasa terjemahan tujuan ( href)+'&langpair=id%7Czh-CN&hl=en'); return false...."=> 'id' = diterjemahkan dari bahasa asli (Indonesia), 'zh-CN' = diterjemahkan ke bahasa Cina Simplified) . Berikut kode dari masing-masing negara;

Albanian (Albania) → sq
Arabic (Arab) → ar
Bulgarian (bulgaria) → bg
Catalan (Catalunya) → ca
Chinese (Simplified) → zh-CN
Chinese (Traditional) → zh-TW
Croatian (Kroasia) → hr
Czech (Ceko) → cs
Danish / Royal Danish (Denmark) → da
Dutch (Belanda) → nl
English (Inggris) → en
Estonian (Estonia) → et
Filipino (Filipina) → tl
Finnish (Finlandia) → fi
French (Perancis) → fr
Galician (Gallegan) → gl
German (Jerman) → de
Greek (Yunani) → el
Hebrew (Israel) → iw
Hindi (India) → hi
Hungarian (Hungaria) → hu
Indonesian (Indonesia) → id
Italian (Italy) → it
Japanese (Jepang) → ja
Korean (Korea) → ko
Latvian (Latvia) → lv
Lithuanian (Lituania) → lt
Maltese (Malta) → mt
Norwegian (Norwegia) → no
Polish (Polandia) → pl
Portuguese (Portugis) → pt
Romanian (Rumania) → ro
Russian (Rusia) → ru
Serbian (Serbia) → sr
Slovak (Slovakia) → sk
Slovenian (Slovenia) → sl
Spanish (Spanyol) → es
Swedish (Swedia) → sv
Thai (Thailand) → th
Turkish (Turki) → tr
Ukrainian (Ukraina) → uk
Vietnamese (vietnam) → vi

Meskipun Google dan situs-situs penerjemah lainnya menggunakan software penerjemah terbaik, namun hasil terjemahannya tidak seratus persen tepat, bahkan kadang membingunkan. Walaupun begitu, visitor dari negara lain ketika membaca konten terjemahan situs, bisa menangkap makna inti dari konten anda.

Tips optimalkan hasil terjemahan:

Jika memungkinkan buatlah konten dengan menggunakan bahasa yang baku, jangan terlalu sering menyisipkan bahasa gaul atau bahasa yang memiliki kosa kata yang kacau, sehingga situs anda dapat diterjemahkan dengan hasil translate maksimal.

Semoga bermanfaat...
:D
Diposting oleh di 1 komentar:
Label: , , ,

Justify Profil Text Blogspot

Jika deskripsi tentang profile blogspot panjang, barang kali anda ingin meratakan format text agar terlihat sedikit rapi. Caranya cukup mudah;

Login ke blogger anda Klik pada menu "Tata Letak" (Layout) Klik pada tab "Edit HTML" Temukan Kode seperti di bawah ini:



.profile-textblock {
margin: 0px; margin: 0.5em 0;
margin: 0px; line-height: 1.6em;
margin: 0px; text-align: justify;

Pastikan text alignnya tertulis "justify". Selesai lihat hasilnya.

have fun...
:D
Diposting oleh di 2 komentar:
Label: ,

Kelebihan Membuat Posting Blog Menggunakan Adobe DreamWeaver

Menggunakan Adobe Dreamweaver untuk membuat atau edit posting blog mempunyai beberapa kelebihan dibandingkan dengan cara posting biasa yang dilakukan melalui panel posting blogspot, drupal, wordpress, joomla, dlsb. Jika anda membuat posting langsung dari jendela admin blog, ada dua kemungkinan yang dapat anda lakukan.

Pertama melalui jendela 'Visual' dimana pada jendela anda tidak perlu bermain dengan code HTML. Dengan kata lain, susunan tampilan text, gambar atau video otomatis akan tertulis (dibuat) oleh script blog pada jendela HTML.

Kedua jika anda paham HTML gunakan jendela 'HTML', alternatif posting yang kedua lebih baik untuk optimalisasi SEO di mata search engine.

Saya pribadi tidak memilih dua alternatif di atas, karena masih ada alternatif ketiga yang saya rasa lebih baik dari dua alternatif di atas. Apa alternatif ketiganya, dapat anda lihat sesuai dengan title judul di atas. Berikut beberapa kelebihan jika membuat posting artikel blog menggunakan Adobe Dreamweaver:
  1. Lebih leluasa dalam menulis, karena tampilan visual dan ruang ketik lebih lebar dibandingkan dengan standar penulisan posting default blog yang hanya memberikan sedikit ruang baik mengerjakan pada jendela visual (tulis) maupun jendela HTML.
  2. Dapat melihat kode dan design (tampilan visual) secara bersamaan dalam dua jendela yang berbeda.
  3. Lebih optimal buat SEO, melalui jendela code Dreamweaver memudahkan anda memanipulasi tag (heading, em, bold, dlsb) yang menjadi perhatian utama search engine.
  4. Auto complete tag, code symbol, property & value inline style css.
  5. Memudahkan anda menyajikan kode HTML atau code-code lainnya pada postingan blog. Contoh; jika ingin menuliskan kode HTML diantara posting tidak bisa langsung ditulis apa adanya baik dari jendela visual maupun HTML. Misalnya anda akan menyisipkan code di bawah ini:



    <p style="font-size: 1.2em; font-weight: normal; text-decoration: none;">Kode yang mau saya sisipkan</p>

    Jika langsung anda masukkan baik pada jendela visual maupun HTML, maka hasilnya akan seperti ini:


    Kode yang mau saya sisipkan

    Dapat anda lihat tag <p style="font-size: 1.2em; font-weig.... dst. tidak muncul, karena ketika anda tulis kode tersebut, sebagian blog mengganggap code aktual yang mau anda pakai. Cara tercepat untuk membuatnya, copy code diatas dan pastekan ke jendela design Adobe Dreamweaver. Kemudian lihat kode pada jendela 'Code' Adobe Dreamweaver, maka hasilnya akan seperti ini:



    &amp;lt;p style=&amp;quot;font-size: 1em; font-weight: normal; text-decoration: none;&amp;quot;&amp;gt;Kode yang mau saya sisipkan&amp;lt;/p&amp;gt;

    Pastekan kode diatas pada jendela 'html' blog, baru kelihatan hasilnya.
Dan masih banyak lagi manfaat lainnya, diantaranya; memodifikasi template XML blogger, memudahkan anda mendesign & menyisipkan tabel ke dalam posting blog, mengatur properti image, dlsb.

Have fun...
:D
Diposting oleh di Tidak ada komentar:
Label: , , ,

Walking Text Title Tab Blogspot

Trik Membuat Walking Text Title Tab Blogspot

Tips kali ini tentang cara membuat text title blog yang berjalan pada tab interface browser. Trik ini tidak banyak memberikan kontribusi yang berarti pada kualitas blog, hanya sebatas untuk mempercantik blog. Bagaimana cara membuatnya, cukup sederhana. Ikuti step di bawah;
  1. Login ke blogspot.
  2. Navigasikan ke 'LayOut' (tata letak) → pindah ke tab 'Edit HTML'
  3. Copy dan pastekan kode di bawah tepat di atas tag '<'head>'


<script type='text/javascript'>
//<![CDATA[
msg = "Tulis Text-1";
msg = " .:Tulis Text-2:. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


Ganti 'Tulis Text-1' dan 'Tulis Text-2' dengan text anda. Klik 'Save Templates' (Simpan template).

→ window.setTimeout("scrollMSG()",200); » value '200', semakin kecil nilainya semakin cepat transisi text.

Untuk blog/web selain blogspot, tinggal copy dan pastekan code javascript di atas pada area mana saja (head atau body). Hasilnya dapat dilihat pada title tab artikel ini.

Done...

Have fun...
:D
Diposting oleh di 2 komentar:
Label: , , , , ,
13 Februari 2010

Dropdown Label Kategori Blogspot

Blog dengan beragam tulisan yang dikelompokkan menjadi beberapa kategori, bisa jadi apabila menggunakan tampilan list label standar blogger akan menyita banyak tempat pada sidebar blog. Padahal jika dibuat lebih ringkas, sisa space sidebar dapat anda manfaatkan untuk widget informatif lainnya. Selain itu meringkas label list standar ke drop-down menu akan membuat blog anda kelihatan lebih rapi. Sebelum mulai ada baiknya backup dulu current template, selanjutnya ikuti step di bawah ini:


  1. Login ke account blogspot

  2. Klik pada tab 'Layout (Tata Letak)'

  3. Klik 'Edit HTML'

  4. Centang pada kotak check box 'Expand Template Widget'

  5. Temukan kode yang mirip (identik) dengan code di bawah:

    [html collapse="false"]
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    [/html]

    atau seperti ini:

    [html collapse="false"]
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    [/html]

    Hapus dan ganti kode di atas dengan kode di bawah ini;

    [html collapse="false"]
    <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'><option>Browse By categories</option>
    <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'><data:label.name/>
    (<data:label.count/>)
    </option>
    </b:loop>
    </select>
    [/html]



Klik pada tombol 'Simpan Template' (Save Template) dan lihat hasilnya.

Have fun...
:D
Diposting oleh di Tidak ada komentar:
Label: , ,
Langganan: Postingan (Atom)

Copyright © 2013 Linggih Note - Several Rights Reserved. Template Designed by Linggih

Loncat ke Atas ↑