0 Trik Blogger : Cara menambah dan mengganti jenis font

By Hhh | At 6/12/2013 | Label : Trik Blogger | 0 Comments

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut :

Memilih Jenis Font

• Buka halaman http://www.google.com/webfonts/
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik Add to Collection pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik Use

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 2 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya

• Kedua, copy kode yang diberikan untuk dipasang di blog

 

Menambahkan Font Pada Blog

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu Template > Edit HTML
• Cari kode  </b:skin> dan paste kode yang tadi anda copy dibawahnya
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Template

Menggunakan Font

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :

#outer-wrapper {
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
 font-family:"Cinzel Decorative";
 font-size:13px;
margin:10px auto;
  }

#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: Cinzel Decorative; }

Sekian tutorial saya kali ini mohon maaf bila ada kekurangan, terimakasih telah berkunjung

0 Trik Blogger : Cara Membuat Menu Horizontal Blog Drop Down Search Engine

By Hhh | At 6/12/2013 | Label : Trik Blogger | 0 Comments

Cara Membuat Menu Horizontal Blog Drop Down Search Engine :
1. Masuk ke akun blogger anda
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>

#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6JEURqB91qAAnCNDp4HZ2-hKB5RI7eAP0qtAL8jnsQvbPf7el0pH-gMM15VmMquHua4chzipIiPj-q7TgQPw0hnwxhTAoscKoGiHL50Hh3Ewpm5AbYLHVKq9EI50XqsN5EuXzGM6c2s/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqei12TOiRYxYCgCZQR-WUCu2KrJbuLXxZyIvGmmLfWgyCuDLwVWGEvmn5ktZummWbLvzFHrOlG6SWfyEQ30ALJT68BnLpWd2TJmCCnMuudSy9PcdgQabOlOXB-F42idoLekSdeleDp4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

5. Cari kode seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Panduan Template Blog(Header)' type='Header'/>
</b:section>
</div>
6. Letakkan kode menu horizontal berikut dengan memperhatikan dua pilihan ini :
Jika anda ingin menampilkan menu horizontal diatas judul blog, letakkan kode menu horizontal dibawah <div id='header-wrapper'>

Jika anda ingin menampilkan menu horizontal dibawah judul blog, letakkan kode menu horizontal dibawah </b:section>
9. Kode Menu Horizontal Blog Drop Down Dengan Search Engine

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yeFVlwKp_abAyG8VxlDcb0xPYtr222dxqqLDcPk-L7sWaFP3x1gi6uDhghDw_u9SKdhAeGv3a0PQz9ivk0BGMLFvMB8n7d1mzMSQ_laUByW3OQWU6juchi17Blf1HtIsxsxHYRxBYgM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLH2FnvUAr8_TzV4s3onFoYmyisFy3e-Ai4yJHhES4rDpQacEisIPqslTwvalE9RLl-8G8Du-KLqgV5I9VwtTTlkg0gLGJOE-_WzZnPXLuzJaGHbeZQ2jkwUP5jvYISUnuzD-eAWmg4xo/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5znnPbf65RFa2Ek39pIWHoGGOAwAnzFvZ6W3bantUeuoryn7o1jqKhwrJnrp22_9VzJPflQqco4hILQazcjlwUoYByIdzwsY7EdD3SZEN-DAkZ0Frqpc6o8dL4FX8qMvkbofdjBiP-Vo/s1600/bg_search.gif' type='image' value='Search'/>

</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

0 Trik Blogger : Cara disable klik kanan

By Hhh | At 6/12/2013 | Label : Trik Blogger | 0 Comments

Berikut ini adalah caranya :

1. login dulu ke blogger sobat
2. pilih menu layout
3. pilih add a gadget
4. pilih HTML/JavaScript
5. masukkan kode ini : 

 <script>

var message="Ganti tulisan ini";

///////////////////////////////////

function clickIE4(){if (event.button==2){alert(message);return false;}}

function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}

if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}

else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}

document.oncontextmenu=new Function("alert(message);return false")

</script>

kemudian ubah tulisan "Ganti tulisan ini",ini merupakan pesan pada combo box yang muncul ketika seseorang yang mengklik kanan pada tulisan di blog sobat.

0 Trik Blogger : Cara agar tulisan tidak bisa di copas

By Hhh | At 6/12/2013 | Label : Trik Blogger | 0 Comments

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan.
Berikut tutorial cara mematikan klik kanan pada blogspot :

1. Login terlebih dahulu ke Blogger.com
2. Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
3. Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
4. Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian. <body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>
5. Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas : 

• oncontextmenu='return false' (untuk mematikan klik kanan mouse) 
• onmousedown='return false' (untuk mematikan klik blok ke bawah) 
• onselectstart='return false' (untuk mematikan seleksi blok) 
• onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.