Tutorial Blogger

Script No Klik Kanan dan CoPas

noreply@blogger.com (Android90) — Tue, 27 Jul 2010 08:25:00 -0700

Kali ini Tutorial Blogger akan memberikan trik "Anti CoPas dan Klik Kanan"

Ini script untuk "Anti CopAs", diletakkan bawah kode <head>

<script type="text/JavaScript">
//courtesy of tutorialblogger.blogspot.com
function killCopy(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar) {
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>

sedangkan untuk "Anti klik kanan"

<script language="JavaScript">

</script>

NB: script untuk blogger, bisa langsung ditaruh di tambah gadget, untuk yang laen di taruh di bawah kode <head>.

Cara Memasang File Flash

noreply@blogger.com (Android90) — Sun, 30 May 2010 19:07:00 -0700

Untuk memasang flash ke dalam blog cukuplah mudah. Yang diperlukan yaitu file flash yang biasanya ber-ekstensi .swf lalu upload file tersebut ke hosting. File animasi flash tersebut bisa dijadikan hiasan pada blog atau bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :

Login ke blogger kemudian pilih menu "Tata Letak".
Kemudian klik link "Tambah gadget" dimana akan ditempatkan animasi flash.
Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

* Ubah "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ubah width="500" height="100" dengan ukuran dari file flash Anda.

Membuat Recent Post Animasi

noreply@blogger.com (Android90) — Tue, 23 Mar 2010 02:07:00 -0700

Cara membuatnya sangat mudah karena tinggal menambahkan widget seperti biasa.

Masuk ke menu Tata Letak
Klik "Tambah Widget"
Pilih HTML/Javascript
Paste kode berikut ke dalamnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://tutorialblogger.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Kode berwarna merah ganti dengan alamat blog kamu

Warna hijau ganti dengan jumlah posting yang ingin ditampilkan

Klik tombol Simpan lalu lihat hasilnya!

Membuat Auto Readmore - Thumbnail

noreply@blogger.com (Android90) — Fri, 5 Mar 2010 16:28:00 -0800

Anda Login ke Akun Blogger, Pilih Template lalu Edit HTML

Jika sudah Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> .

copy paste script auto read more berikut ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Tetap pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" kemudian cari kode dibawah ini

<data:post.body/>

Jika sudah ketemu, maka ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Setelah selesai tekan simpan template.

Keterangan tentang cara membuat auto read more :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel).

Dengan keterangan di atas anda dapat merubah script fungsi auto read more sesuka hati.

Semoga bermanfaat....

Mengetahui Data Visitor Blog

noreply@blogger.com (Android90) — Thu, 25 Feb 2010 23:13:00 -0800

Bagi sebagian pemilik blog, ingin sekali mengetahui data-data dari para pengunjung blognya. Hal tersebut ditunjukkan dengan adanya bermacam-macam pernak-pernik yang ada di blognya, seperti misalnya "Hit Counter", "Site Track Meter", dll. Buat kamu, ada sebuah layanan masyarakat dari "Google", namanya Google Analytics. Bagi yang sering bermain di dunia maya mungkin tahu apa itu Google Analytics, berikut ini tentang Google Analytics :

Google Analytics berbeda dengan Hit Counter. Hit Counter biasanya hanya menghitung jumlah pengunjung yang datang Sedangkan Google Analytics, tidak hanya menghitung jumlah para pengunjung tapi juga data-data yang lainnya tentang pengunjung tersebut.

Daftar disini http://google.com/analytics

Setelah itu kopi kode/script tersebut, lalu login ke blogger Klik Template -->> Edit HTML. Paste kode/script yang udah di copy kedalam tag HTML yaitu sebelum tag </body> jangan lupa disimpan.

Kembali lagi ke google.com/analytics, kamu harus mengklik Check Status dulu. Kalo udah berhasil maka akan ada tandanya, kalo belum ya dicoba lagi.

Datanya baru akan muncul satu hari kemudian, jadi ini bukan seperti hit counter yang datanya akan langsung berubah tiap detik tapi data-data google.com/analytics ini akan muncul tiap ganti hari.

Mencari siapa yang mencuri artikel blog kita

noreply@blogger.com (Android90) — Thu, 25 Feb 2010 22:45:00 -0800

Waktu kita tidak sengaja menemui situs bagus. Situs buat mengetahui siapa yang telah menjiplak artikel di blog kita. Caranya cukup mudah, tidak perlu mendaftar, hanya memasukkan alamat/ URL blog Anda lalu tekan tombol "GO", tunggu sebentar lalu langsung keluar siapa yang mengambil atau copy paste artikel blog Anda. Kalau untuk mengetahui siapa yang menjiplak artikel atau postingan tertentu maka yang kamu masukkan ke sana adalah link dari judul postingan Anda, jadi nanti akan ketahuan siapa yang menjiplak postingan tersebut.
Tapi untuk yang versi gratis hanya bisa mengetahui beberapa saja, jadi nggak bisa mengetahui semua yang mengcopy paste blog kita. Tapi lumayan untuk mengintip sedikit... bagi yang ingin tahu ini alamatnya COPYSCAPE.

Terima kasih.

Membuat Scrollbar untuk Blog

noreply@blogger.com (Android90) — Wed, 17 Feb 2010 06:45:00 -0800

Secara sederhana scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Ya, tentunya hal ini dapat menghemat ruang pada blog kita. Cara membuat Scrollbar ini gampang, mari ikuti caranya :

Login ke Blogger. Klik menu Tata Letak
Klik Tambah Widget. Lalu klik tombol + pada HTML/Javascript
Masukkan kode dibawah ini :

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>

Di atas adalah cara membuat scrollbar untuk widget HTML, jika untuk dalam postingan silakan copy kode nya dan paste kan dipostingan dengan format html bukan compose.

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang berwarna biru dengan teks/script yang ingin Anda tampilkan.

Membuat Tampilan di pojok Layar

noreply@blogger.com (Android90) — Mon, 15 Feb 2010 12:32:00 -0800

Untuk membuatnya ikuti langkah berikut :

Login ke blogger trus klik Template -->> Edit HTML
Cari kode ini ]]></b:skin> kalau sudah ketemu taruh kode berikut ini di atasnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); }
Teks yang dicetak merah tebal adalah posisinya, kalau ingin ganti di posisi pojok kanan bawah tinggal teks "left" diganti dengan "right". Begitu juga tulisan "bottom", jika ingin di posisi atas bisa diganti dengan "top".
Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok"><a href="http://tutorialblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbn7KpqOw7J8OuN8xkjaDkykJnrMtGldEUpEG9JAaJuCymYramGVp74cpm7mUu5RtB3lt23zmCay5tIIQt5wXgPrphDfx7aJzrRhEfw1mZ6xCoPvwjX86ksjUaX9Yc2tIxJY-hTAkujw/" border="0" /></a></div>

http://tutorialblogger.blogspot.com

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbn7KpqOw7J8OuN8xkjaDkykJnrMtGldEUpEG9JAaJuCymYramGVp74cpm7mUu5RtB3lt23zmCay5tIIQt5wXgPrphDfx7aJzrRhEfw1mZ6xCoPvwjX86ksjUaX9Yc2tIxJY-hTAkujw/

Jika kamu ingin yang ada disitu bukan gambar tetapi jam/ kalender/ hit counter/ widget-widget yang lain, maka ganti teks yang berwarna biru dengan script widget-widget tersebut.
Simpan hasil kerja kamu dan lihat hasilnya...

Membuat Kotak Link Exchange

noreply@blogger.com (Android90) — Mon, 15 Feb 2010 11:33:00 -0800

Kalo kita mau bertukar link biasanya ada kotak seperti ini :

Bagaimana cara membuat kotak tersebut? Ikuti langkah berikut :

Login ke blogger trus pilih Layout --> Page Elements
Klik Add a Gadget lalup pilih HTML/Java Script
Kopi kode berikut ini di tempat yang disediakan.

<textarea name="textarea" cols="20"><a href="http://tutorialblogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png" width="90" height="17" border="0" /></a></textarea>

teks yang berwarna hijau menunjukkan lebar kotak
teks warna biru adalah link, ganti teks tersebut dengan alamat blogmu sedangkan
teks warna merah adalah alamat gambar beserta ukurannya, ganti teks tersebut dengan alamat gambar km.

Simpan templatenya.

Hasilnya akan seperti kotak diatas, lalu gambarnya dimana? di dalam kotak tersebut terdapat teks, jika teks itu di copy lalu di paste di atas kode tadi, maka hasilnya akan menjadi gambar dan juga ada link-nya. Isi kotak diatas jika di copy dan paste akan menjadi seperti ini :

=========================================================================
UPDATE

Untuk membuat Kotak Link Exchange menggunakan tombol "Select All" caranya :

<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png"/></center><br />
<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All" type="button" /> </span></div><p align="center"><textarea style="width: 160px; height: 60px;" name="txt" rows="3" wrap="VIRTUAL" cols="15"><a href="http://tutorialblogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png" /></a>
</textarea></p></form></div>

Keterangan :

Tulisan berwarna merah = gambar banner Anda
Tulisan berwarna Orange = alamat blog Anda
Tuilsan berwarna Hijau = lebar kotak
Tuilsan berwarna Biru = tinggi kotak
Tuilsan berwarna Kuning = baris script
Tuilsan berwarna Ungu = panjang script

Mengganti Icon addressbar (favicon)

noreply@blogger.com (Android90) — Mon, 15 Feb 2010 10:00:00 -0800

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog diBlogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagikamu yang tidak puas dengan icon/gambar tersebut, kamu bisamenggantinya dengan gambar sesuai dengan keinginanmu. caranya sangatmudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) denganukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebassih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu.....

Masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_u-YQSCLIZsWrHJMpSg8Ppv68BDIiLxQo5lASVZtedMHuy1e8vUyHPWkbvyfVyJBm63FuOF2KsK3XACXT0uNqHgF8wV6HsWZMHU4z-thyphenhyphenAstpPyZ6yquDAOXSLXBQ29DuTXwdBXhJgo/h120/tb_icon.png' rel='SHORTCUT ICON'/>

atau

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_u-YQSCLIZsWrHJMpSg8Ppv68BDIiLxQo5lASVZtedMHuy1e8vUyHPWkbvyfVyJBm63FuOF2KsK3XACXT0uNqHgF8wV6HsWZMHU4z-thyphenhyphenAstpPyZ6yquDAOXSLXBQ29DuTXwdBXhJgo/h120/tb_icon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di picasa atau bisa juga di photobucket dan juga di imageshack.

Auto Hide Navbar Blogger

noreply@blogger.com (Android90) — Mon, 15 Feb 2010 09:19:00 -0800

Setelah tutorial Menghilangkan Navbar, Kali ini Cara Auto Hide navbar untuk blog Anda :

Pastikan Anda sudah login ke blogger
Ke menu Template Kemudian Edit HTML
Kemudian cari kode seperti ini ]]></b:skin> (untuk mempermudah pencarian ketik ctrl+F)
Lalu Diatas kode ]]></b:skin> tambahkan kode dibawah ini :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Simpan Template dan lihat hasilnya..

Semoga bermanfaat :D

Membuat Recent Post

noreply@blogger.com (Android90) — Mon, 15 Feb 2010 00:14:00 -0800

Pastikan Anda telah Login ke Blogger
1. Layout --> Page Elements
2. Pilih tempat yang kamu inginkan kemudian Add a Gadget
3. pilih HTML/JavaScipt dan taruh code dibawah didalamnya

<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="AlamatBlogAnda/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Angka 15 adalah angka postingan yang akan Anda tampilkan
AlamatBlogAnda adalah alamat blog Anda

Semoga bermanfaat :D

thanks to Anas

Memasang Save as PDF

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 23:27:00 -0800

Banyak cara untuk menarik pengunjung datang keblog kita, salah satunya memasang sava page as pdf di blog kita, dengan adanya layanan ini mungkin pengunjung akan dimanjakan dengan output yang berbentuk pdf. Anda pasti masih ingat dengan layanan Fasilitas Print, ya tujuannya hampir sama, artikel kita bisa disimpan dan di baca sewaktu - waktu dengan format artikel yang bagus dan rapi dari pada menggunakan save page as browser.

Berikut langkah - langkah Memasang Save Page As PDF di Blog :

Silahkan mendaftar dulu di http://web2.pdfonline.com,
Kalau sudah silahkan singup, isi data temen - temen sesuai form yang sudah disediakan,
Langsung aja klik button generate the javascript
Maka otomatis scriptnya akan muncul dibawahnya,

Semoga bermanfaat :D

Membuat Menu Horizontal Multilevel

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 23:15:00 -0800

Langkah pertama yaitu Login ke Blogger

Masuk pada bagian Template lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<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 kode 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 kode yang berwarna merah karena kode yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah kode 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 "Tambah Widget"

Terlihat pada "Tata Letak" muncul tempat gadget baru, lalu klik saja "Tambah Widget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://tutorialblogger.blogspot.com">Tutorial Blogger</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://tutorialblogger.blogspot.com">Tutorial Blogger</a></li>
</ul>
<br style="clear: left" />
</div>

Kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan SAVE...

Semoga bermanfaat :D

Membuat Floating Box

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 23:03:00 -0800

Pertama yang Anda lakukan adalah Login ke blogger lalu masuk menu "Template" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>
<script src='http://sites.google.com/site/anasprod/adse.js' type='text/javascript'/>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian Save dahulu.

Dan masuk pada bagian "Tata Letak -> Tambah Widget"

Pilih tempat Gadget yang Anda ingin (terserah karena box ini akan melayang) dan klik "Tambah Widget" Masukkan code dibawah ini

<div id="topbar">
MASUKKAN CODE SCRIPT / LAINYA DISINI
<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>
</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget.

Kalau sudah. . . SAVE..

Selesai..

Semoga bermanfaat :D

thanks to Anas

Membuat Fasilitas Print di Blog

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 21:27:00 -0800

Mungkin Anda tidak menyangka bahwa fasilitas print juga bisa dipasang pada halaman blog kita, fasilitas ini bisa memudahkan pengunjung membaca tulisan - tulisan kita lebih mudah atau offline. Pembuatan fasilitas print ini pun tidak terlalu sulit seperti yang biasa digunakan. Langkah pertama Anda harus siapkan icon print.

Dibawah ini script fasilitas print, silahkan ganti alamat icon (teks yang berwarna merah) dengan alamat icon milik Anda, sedangkan teks yang berwarna biru adalah teks yang akan muncul disamping icon print (bisa diganti). Atau jika hanya ingin menampilkan icon print saja hapus tulisan yang berwarna biru.

<a target="blank" href="javascript:print(document)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PS11Ngwy_8I3S5ohzZVYEmEHNrWqLSDzO4vEhRd-DmeYjbIVVKxOVGGS7kjH4XiHNro2iZ25QMaWsG83Hw_T4aFZAFETFuGhvDBhR9ZaaTA4g8ENYTZK_u8ERTNeK4CGimCfCE9cexI/h120/print.png" alt="print this page" border="0"/>Print this page</a>

Hasilnya akan seperti ini :

Dengan tulisan : Print this page

Tanpa tulisan :

Semoga bermanfaat :D

Cara Membuat Komentar Facebook

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 20:57:00 -0800

Sistem komentar ini sebenarnya ditujukan agar pengguna facebook dapat berkomentar di blog kita dengan mudah
Sebelumnya Anda harus sudah dalam keadaan login di facebook

Kunjungi pengaturan Facebook Developer
Daftarkan blogmu dengan mengisi formulir yang diberikan:
Nama situs: Nama situs/blog kamu
Url situs: Alamat blog Anda (contoh:http://tutorialblogger.blogspot.com/ selalu akhiri dengan slahs "/")
Lokasi: pilih bahasa Indonesia
Kamu akan diberikan beberapa kode seperti ID Aplikasi,
Copy kode tersebut atau catat di notepad karena nantinya kode itu akan dibutuhkan sebagai APP ID FACEBOOK ANDA

Perlu diketahui bahwa sistem komentar ini menggunakan kode FBML

Supaya Template support FBML maka kita lakukan langkah berikut :

Masuk ke Blogger kamu
Menuju ke "Template" dan pilih "Edit HTML"
Cari kode <html lalu paste kode dibawah ini tepat disebelahnya

xmlns:fb='http://www.facebook.com/2008/fbml'

Sehingga secara keseluruhan menjadi:

<html xmlns:fb='http://www.facebook.com/2008/fbml'expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >

Lalu langkah berikutnya paste kode dibawah ini dibawah <body>

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'APP ID FACEBOOK KAMU', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); };
(function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

Kode berwarna merah adalah kode (ID) aplikasi facebook Anda yang tadi kamu dapatkan di langkah sebelumnya.

Langkah selanjutnya adalah memasang Open Graph protocol
Caranya cari kode dan paste kode berikut distasnya

<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='SITUS ANDA' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='APP ID FACEBOOK KAMU' property='fb:app_id'/> <meta content='ID FACEBOOK PROFILE KAMU' property='fb:admins'/> <meta content='article' property='og:type'/>

Keterangan kode:
kode berwarna ungu adalah nama situs Anda
kode berwarna kuning adalah logo aplikasi facebook Anda
kode berwarna merah adalah kode (ID) aplikasi facebookAnda yang tadi Anda dapatkan di langkah sebelumnya
kode berwarna hijau adalah kode (ID) faceboom profile Anda

Cara mengetahui ID facebook profile:

Anda masuk ke Profil Anda lalu lihat alamat di adress bar browser
Contoh: http://www.facebook.com/namaanda
Simpan template

Selamat Blog kamu sudah support FBML

Selanjutnya adalah tahap pemasangan kotak komentar!

Anda expand widget template Anda
Cari kode <data:post.body/>
Lalu paste kode ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #FFFFFF;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8aYHu9TvjhAl5Bta7vR9mLi9n6hwIEI2Qa3lNc_NrP5o0BhPDsz9lMWhQb2wZwlZISJVfWkEBiyWcDdVFm4NlWRYtqTiC0lEVAdmN5KULx0JWEkA8l11iGlyKpAUv4q1D_C5u2Mj9MA/' width='16'/> <b><a href='http://tutorialblogger.blogspot.com/' target='_blank'>Facebook comments untuk blogger</a> untuk mendapatkannya <a href='http://tutorialblogger.blogspot.com/2010/02/cara-membuat-komentar-facebook.html' target='_blank' title='Facebook Comment'>KLIK di sini</a></b></div>
</b:if>

Keterangan : Kode berwarna orange adalah lebar kotak komentar, ganti sesuai keinginan!

Simpan template

Bagi yang menginstal auto readmore, paste kode fecebook tadi tepat dibawah kode auto readmore..

Semoga bermanfaat :D

Cara Membuat Label Cloud Putar - Cloud Blogumus

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 19:31:00 -0800

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog.
Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template Anda, jadi mengedit template, ada baiknya backup terlebih dahulu template Anda.
I. Langkah Pertama

Login ke Blogger dengan ID Anda
Klik Tata Letak
Klik tab Edit HTML
Download dahulu template sobat dengan mengklik Download Template Lengkap
Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>
Copy kode berikut ini setelah kode diatas :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Kemudian Simpan Template.

II. Langkah Kedua

Mengubah lebar dan tinggi kolom serta warna background

Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
Merubah warna font

so.addVariable("tcolor", "0x333333");
Merubah ukuran font

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Jika dalam membuat label cloud ini tidak berfungsi, silahkan Anda ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

Semoga bermanfaat :D
thanks to Ilham

Membuat Translate Simbol Bendera

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 18:57:00 -0800

Untuk membuat translate seperti di atas, berikut langkahnya :

Pastikan Anda Login ke Blogger.
Lalu pilih Tata Letak >> Tambah Gadget.
Tambah Gadget >> HTML Gadget.
Copy paste kode di bawah ini

<div><a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobKGNRTWmpI9Qm5nEFEHBtN-SOHkGRpfZ5q9eO5hHdVcy3DX7qnn6At7pzEa_L7SnSBK2CEldJiICAaYnQ7Krwmjx2K2omxqQezM_N5HI7_7JhrmOaEDm9ykRrEaNs0lAuUrxIP-uxGo/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKCtrtbz1NlMf3PqcUhjRhI0-gpFYjyFDu7IktaRMamrqmq4MTjQEae6fAFvcp1Q-yiXt5K92p18QJ8bSmgXElzf0NrbxNu2KnEZqNMuSsJCcFgn2Jb8YCz64oFFsb5UOjQkdDzr1TjU/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeMDyFAEgkUfh7VDE1OfXJxLnOJ4NaO6SvTepUSUmaAT0Afg8wHgpxOEh5Gk8PEIHG-W8-edk4TxKQp93IEFNwpcLGxOfuCtE1wr6GzW0tsHshKkpRH8Tk61P_L4swfa6DbnpB3515SEU/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONob3PXPWFrDRBtwHtk6SYHQVHG8WEsnTMQFORC62gnERtaUar-_ENHa0cxV-uExX0GXOtdUXBbe87RUNZSC_7uzaBJyyoxMniPb_zuIpGKkcuMhM9O5XJ_jYd8S5alJdzv6CY2hWeZgf/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Vx1jdaSY3Qxouvuaf8qht3VC-I67UEztorUC69-ddmGvxXtGH370rMaVMnTlKdvFaENwURHPAl3C6YEg8JqMUbqMxuQHh3seWmXM-rMFK7qjwMWN47KmXVNx7pcXLsgDMzr3wQ08ZMM/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiwRcjtIiuIPWzTtaiTzKczG4WSUar4n02Cbr-fSsYdZSVM3tSVLZ20yCRhsyj768k5CkT9hGFFFKzX6zRYKRjafkNiiAJr5R60wdDHYvkO4tr2Rai9sPVqNudAeLZxmSRFRchELyAj58/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2q2vrlmPMY4lP8p_3XbeX4DCNCup8b847MYNdboVGhXRn0LLAvSZblvqXKtP95SCX99daUZ51jQzFD4zQT3JPwGARo4Nd7ltpsJAv2MY5pmRn_xz0NF-NDXg9UeveLOOKDPdsODQkfs/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrYIoraqPY3JaBobGnDt1FH0efhgOL_rUPa26OmPfetVnhdzjsysOy-u3QMtUUp5xSO0xnRIn_RRTMblit_AIT6kIZv3hjSQanCdBFC5I_eWkqhyLtb2-UR8MFD1122iaFi3Y13HMFjRk/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnL7Y5BcnLlmp0zToxY8uH6ek_5WKjcJw7KIoBQ7Qplhew8tQwuCF6DUtep_3pnaIRIdkpeaMtZyYGZBBOSLfx7dZpFNl63Ooqy3zSWHQPvEAo7a7lk65lXi6db360t1bli6838X8TY5r/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6DHurkoBD2HSZNitjDmOTccH6jouhQf0YQnGut5qnL9Rm_t5WG7k7llIyDAsCb9S-RILliOvuzSGBe37HtMPJZwuxqpsKwRy00G23eZqfuRK8A80q6zasKtWXKK-jeVqnVTD-4uXuMY/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FvLR4YKvSjzbMK-lGf9R_dCgdwyBOhTHCOLcOJ965NgDOavujFkwZqBv2UtgfVDnUSURoFE0jod28x0Y2IkC8TwIww9hFrVldhZj7UsoVcdjXzu9XPlMYORKbED6kDYRFBl8jYmpIzk/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTrno_lEtgVScbTHG9lSY0I_C69xEh4fQVWUhaGqAvQkkQOrPzUnPWvIFalLz4W1JA3XDN6g5ZI59lOKPemScgZGGt4CllH-yYxxmGAxelKe-v-lYlqKItzrNBnqhmJTEUmQKD00fDgo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> </div>

Simpan

Pilih tempat Untuk menaruh Gadget tersebut.
Lihat hasilnya..

Semoga bermanfaat :D

Cara Membuat Efek Heart/Hati

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 18:35:00 -0800

Langkah pertama yang harus Anda lakukan adalah Log In ke Blogger lalu masuk menu Template kemudian masuk menu Edit HTML
Lalu taruh Code dibawah ini diatas code </body>

<script src='http://sites.google.com/site/anasku2000/lovingheart.js'></script>

Jika sudah Simpan dan lihat hasilnya...

Semoga bermanfaat :D

thanks to Anas

Dasar-Dasar HTML

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 18:29:00 -0800

Jenis Font :
<font face="times new roman">Tulisan Anda</font> =Tulisan Anda
<font face="verdana">Tulisan Anda</font> =Tulisan Anda
<font face="Arial">Tulisan Anda</font> =Tulisan Anda
catatan :
>> Text "Tulisan Anda" adalah teksnya gantilah dengan teks yang Anda inginkan
>> Tulisan yang berwarna merah adalah jenis font, gantilah sesuai dengan keinginan Anda
>> Jika font yang anda pakai tidak terdapat pada sistem pengunjung WFO anda. Jenis font akan menjadi font standar

Ukuran Huruf :
<font size="-2">Teks </font> = Teks
<font size="-1">Teks </font> = Teks
<font size="+1">Teks</font> = Teks
<font size="+2">Teks</font> = Teks
<font size="+3">Teks</font> = Teks

Warna Huruf :
<font color="#FF0000">Warna MERAH </font>
Hasilnya = Warna MERAH
Jika anda ingin mencari Code warna Html silakan kunjungi http://www.colorschemer.com/online.html
Catatan : Text yang berwarna merah adalah Code warna yang dapat kamu ganti dengan kode warna sesuai pilihan kamu

Header :
<H1>CONTOH</H1> =

CONTOH

<H2>CONTOH</H2> =

CONTOH

<H3>CONTOH</H3> =

CONTOH

<H4>CONTOH</H4> =

CONTOH

<H5>CONTOH</H5> =

CONTOH

<H6>CONTOH</H6> =

CONTOH

Variasi Teks :
Teks miring : <i>Teks Miring</i> = Teks Miring
Teks Tebal : <b>Teks Tebal</b> = Teks Tebal
Teks bergaris bawah : <u>Teks Bergaris Bawah</u> = Teks Bergaris Bawah
Text Bergaris : <strike>Teks Salah</strike> = ~~Teks Salah~~

Efek Pada Teks :
Teks berkedip : <blink>Teks Berkedip</blink> = Teks Berkedip
Teks bergerak dari kanan ke kiri : <marquee>Teks Bergerak</marquee> = Teks Bergerak
Teks bergerak dari atas ke bawah : <marquee direction="down" width="300px" height="50px">Teks Bergerak <br> dari atas ke bawah</marquee> = Teks Bergerak
dari atas ke bawah
catatan :

Tanpa value "XXXpx" untuk nilai tinggi dan lebar, sering menyebabkan script tidak berfungsi pada browser Firefox dan Netscape
Ganti "down" dengan "up" untuk arah dari bawah keatas.
Ganti "down" dengan "right" untuk arah dari kiri ke kanan.
Tambahkan scrolldelay="XX" untuk mengatur kecepatan teks
Pembatasan area teks bergerak dengan menggunakan width tidak berpengaruh pada browser Firefox dan Netscape

Teks Dengan Link :
Link untuk e-mail : <a href=mailto:mailku@mail.com> e-mailku </a>
Link untuk URL : <a href="URL_adress">situsku.com</a>
Tambahkan "target="_blank" jika anda ingin link tersebut terbuka dengan jendela sendiri.
contoh : <a href="http://tutorialblogger.blogspot.com" target="_blank">Tutorial Blogger</a>

Posisi Teks :
Teks di kiri: <p align=left>Posisi</p>

Posisi

Teks di tengah: <p align=center>Posisi</p>

Posisi
Teks di kanan: <p align=right>Posisi</p>

Posisi

Semoga bermanfaat :D

Cara Menghilangkan Widget Attribution Blogger

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 18:06:00 -0800

Untuk menghilangkan Atribut Blogger, caranya cukup simple dan mudah, ikuti Saja langkah dibawah ini.

Pastikan Anda sudah login ke Blogger
Masuk pada "Template" Lalu "Edit HTML"
Masukkan code css dibawah ini diatas code ]]></b:skin>

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

Tinggal SAVE TEMPLATE.

Semoga bermanfaat :D

Cara Mengalihkan Blog

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 18:00:00 -0800

Jika Anda membutuhkan tutorial ini ikuti langkah-langkah dibawah ini :

Masuk ke akun Blogger anda yang akan di alihkan
Klik tata letak/rancangan
Klik Edit Html
Cari Kode <head>
Copy Script Kode Dibawah Ini :
<meta content='nofollow' name='robots'/>
<meta content='noindex' name='robots'/>
<script type='text/javascript'><![CDATA[//><!]]></script>
<meta content='0;URL= URL tujuan Anda' http-equiv='refresh'/>
Paste Script Kode Di atas Tepat Di bawah Kode <head>
Klik Simpan

Keterangan :
Tulisan berwarna Biru : Ganti Dengan URL yang akan di gunakan sebagai tujuan pengalihan.

Semoga bermanfaat :D

Cara Membuat Spoiler

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 17:36:00 -0800

Sebelum membahas Cara Sembunyikan Isi/Content Posting Dengan Spoiler, ada baiknya kita mengenal terlebih dahulu tentang Spoiler.

Spoiler adalah tehnik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk menghemat space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 detik, maka jika dengan Spoiler cukup dengan 30 detik bahkan bisa kurang (tergantung dari isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga bisa untuk sembunyikan gambar dalam ukuran besar serta video.

Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya bisa dilihat seluruhnya oleh pembaca apabila tombol perintahnya diklik. Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

Tutorial Blogger

Cara pasang spoiler pada postingan blog/website bukanlah hal yang sulit, karena kita tinggal memasukan isi content ke dalam kode HTML dan menaruhnya dalam content posting, sedangkan yang sulit itu adalah membuat kode-kode HTML-nya.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Tutorial Blogger</span><input value="Spoiler" style="margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Spoiler'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">http://tutorialblogger.blogspot.com/2010/02/cara-membuat-spoiler.html </div></div></div></div>

Keterangan:

Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
Teks warna Biru adalah tempat menaruh isi content postingan Anda;

Semoga bermanfaat :D

Cara Membuat ScrollBar Pada Arsip Blog

noreply@blogger.com (Android90) — Sun, 14 Feb 2010 17:32:00 -0800

Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Masuk ke blogger
Klik Tata Letak
Klik Tambah Widget
Tambahkan sebuah Widget => Tambah Widget Arsip Blog
Tapi Anda harus pilih gaya Hierarki

Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

Setelah itu, klik Edit Html
Beri tanda centang pada tulisan Expand Widget Template
Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:150px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut

Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan Anda ganti agar sesuai dengan blog Anda.

Semoga bermanfaat :D