Spoiler 2

Kode bisa dilihat dibawah ini

<div style="text-align: center;">
<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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 = 'ferryxzyamato.blogspot.com'; } else { this.parentNode.parentNode.getElementsByTagName

('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Cara Download'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Open" /></div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: justify;">
Kode bisa dilihat dibawah ini</div>
<div style="-moz-border-radius: 5px 5px 5px 5px; background: #FFFFFF; border: 1px solid rgb(255, 204, 0); color: white; height: 150px; margin: 5px; overflow: auto; padding: 5px; width: 520px;">
<span style="color: black;">
<span style="font-family: Times New Roman;"><small>
<div style="text-align: justify;">
Masukan kode Ferryxz</div>
</small></span></span>
</div>
<br /></div>
</div>
</div>
</div>
</div>

Slide Widget Untuk Blog

Ferryxz Yamato

Buka

Ingin kayak gini mudah kok. Silakan dilihat-lihat ya? :)

Link Share

• Follow me on Twitter
• Find me on Facebook
• Find me on Google+
• Subscribe via RSS

Kode

<style type="text/css">
h5 {
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 18px;
    margin: -5px -10px 0px;
        margin-top: -5px;
        margin-right-value: -10px;
        margin-bottom: 0px;
        margin-left-value: -10px;
        margin-left-ltr-source: physical;
        margin-left-rtl-source: physical;
        margin-right-ltr-source: physical;
        margin-right-rtl-source: physical;
    padding: 0px 10px 3px;
        padding-top: 0px;
        padding-right-value: 10px;
        padding-bottom: 3px;
        padding-left-value: 10px;
        padding-left-ltr-source: physical;
        padding-left-rtl-source: physical;
        padding-right-ltr-source: physical;
        padding-right-rtl-source: physical;
    text-shadow: 0px 1px 0px rgb(44, 181, 94);
    text-transform: none;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color: #90A7A4; color: rgb(0, 0, 0);
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#000000;
}
</style>
<script src="http://javscript-code.googlecode.com/files/menuaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp ("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mousedown(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp ("slow");
});
});
</script><!--Ferryxzyamato.blogspot.com-->
<br />
<div class="msg_list" id="secondpane">
<h5 class="msg_head">
Isikan Bebas 1</h5>
<div class="msg_body" style="display: block;">
FERRYXZ
</div>
<h5 class="msg_head">
Isikan Bebas 2</h5>
<div class="msg_body" style="display: none;">
FERRYXZ
</div>
<h5 class="msg_head">
Isikan Bebas 3</h5>
<div class="msg_body" style="display: none;">
FERRYXZ
</div>
<h5 class="msg_head">
Isikan Bebas 4</h5>
<div class="msg_body" style="display: none;">
FERRYXZ
</div>
<h5 class="msg_head">
Isikan Bebas 5</h5>
<div class="msg_body" style="display: none;">
FERRYXZ
</div>
</div>
</div>
<div class="clear">
</div>
</div>

Catatan :
1. Untuk yang warna Merah ganti dengan Judul Sobat
2. Untuk yang warna Biru ganti dengan Script/ kata-kata yang diinginkan

Membuat Tab View atau Tab Switch

Untuk 1 Tab

<style type="text/css">
body {color: #554444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="http://moalmules.googlecode.com/files/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<br />
<div class="TabView" id="TabView1">
<div class="Tabs">
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">planetcaang</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">bumicaang</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">electro-study</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">elektronika</a>
</div>
<div class="Pages">
<div class="Page">
TEST 1</div>
<div class="Page">
TEST 2</div>
<div class="Page">
TEST 3</div>
<div class="Page">
TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>

Untuk 3 Tab

<style type="text/css">
body {color: #554444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="http://moalmules.googlecode.com/files/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<div id="TabView1" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 1</div>
<div class="Page">TEST 2</div>
<div class="Page">TEST 3</div>
<div class="Page">TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>
<!-- TabView2 -->
<div id="TabView2" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 5</div>
<div class="Page">TEST 6</div>
<div class="Page">TEST 7</div>
<div class="Page">TEST 8</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView2');</script>
<!-- TabView3 -->
<div id="TabView3" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 9</div>
<div class="Page">TEST 10</div>
<div class="Page">TEST 11</div>
<div class="Page">TEST 12</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView3');</script>

Keterangan:

1. Copy paste kode HTML di atas di HTML/JavaScript 
2. Kode tersebut akan menghasilkan tiga buah tab view atau tab switch
3. Style CSS bisa kawan ubah sesuai dengan keinginan, misalnya color: #554444; menjadi color: red; ukuran font-size: 13px; menjadi font-size: 15px; atau ingin mengubah lebar tab view width: 395px; menjadi 250px;
4. Ganti judul tab view planetcaang, bumicaang, electro-study, dan elektronika dengan judul yang kawan inginkan
5. Ganti isi tab view (gadget) mulai dari TEST 1 s/d TEST 12, dengan gadget blog kawan
6. Demonya bisa kawan lihat di Tes Tab View Lebih dari Satu

Hasil

planetcaang bumicaang electro-study elektronika

TEST 1

TEST 2

TEST 3

TEST 4

xxxxxx

Klik Bisnis Online

Sitemap atau Daftar Isi Menarik 2

Sebelumnya saya sudah memposting Sitemap atau Daftar Isi Menarik 1 dan sekarang lanjut dengan Sitemap atau Daftar Isi Menarik 2.

Dalam Sitemap atau Daftar Isi ini tidak jauh beda dengan yang Pertama 1, karena yang berubah hanya warnanya saja. Untuk mepersingkat langsung saja lihat:
1. Login ke akun Blog Anda
2. Pilih Tata Letak
3. Setelah itu pilih Tambah Gadget
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy kode di bawah ini :

Kodenya bisa dilihat disini:

<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://facewoman.googlecode.com/files/Daftar-isi-andikwin-facewoman.js"> 
</script>
<script src="http://ferryxzyamato.blogspot.com/feeds/posts/summary?max-results=200&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
$(function() {
$("#daftar-isi .judul-list").hide();
$("#daftar-isi .judul-label:first").addClass('headactive').next().slideDown();
$("#daftar-isi .judul-label").css("cursor", "pointer");
$("#daftar-isi .judul-label").click(function() {
if($(this).next().is(':hidden')) {
$("#daftar-isi .judul-label").removeClass('headactive').next().slideUp(); 
$(this).toggleClass('headactive').next().slideDown();
}
});
}); </script>

6. Setelah selesai tinggal disimpan.

NB:
_. ganti warna yang Biru dengan alamat Blog sobat.

Hasilnya bisa dilihat disini: Gimana ??

Sitemap atau Daftar Isi Menarik 1

   Sidikit tambahan untuk yang suka dengan yang menarik-menarik bisa mencoba membuat Sitemap atau Daftar Isi.

  Dimana fungsinya hanya menampilkan hasil postingan sobat dalam bentuk Label-Label yang sudah sobat siapkan, dan dapat menghilang dan terbuka saat mengklik label yang disuka.

Kodenya dibawah ini:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://ferryxzyamato.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

NB:

_. untuk yang berwarna Biru ganti dengan nama blog sobat.

Hasilnya bisa dilihat dibawah ini: menarik bukan??

Kode-Kode Warna

Kali ini khusus membahas tentang cara mengetahui kode kode warna untuk mempermudah mencari tahu tentang kode warna yang akan dipakai saat mengedit tampilan blog sobat. Langsung saja dilihat ya?

Kode Warna

Kode Warna

[Back]

Membuat Tulisan Ditab Addresbar Berubah

Pertama x melihat Blog yang Judul/ nama Blog orang lain berubah-ubah membuat saya tertarik melakukan'y juga, tp itu dulu,, hahaha. Karena sekarang saya tau kode'y dan dapat memperlambat loading blog, membuat saya untuk berfikir 2x untuk memasang'y.

Nah, jika untuk para Blogger yang suka mempercantik/ memperindah Blog'y itu sih tidak masalah buwat di pasang,, kalo begitu langsung saja lihat cara'y di bawah ini :

1. Seperti biasa Login ke Blogger
2. Masuk ke Tata Letak, kemudian Tambah Gadget / Widget
3. Pilih HTML/Javascript
4. Kemudian Copypas kode di bawah ini

<script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "Selamat Datang";
tb8_messages[1] = "Silahkan dikomentari postingan saya";
tb8_messages[2] = "Ferryxzyamato.blogspot.com";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 250;
tb8_delay = 1000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

5. Setelah selesai mengCopypas tinggal di Simpan.

Catatan:
_. Warna biru, untuk membuat tulisan yang sobat inginkan.
_. Warna merah, untuk kecepatan tulisan yang sobat buat, jika semakin kecil angka yang sobat buat maka kecepatan'y akan semakin cepat dan juga sebalik'y jika semakin besar angka'y kecepatan'y semakin lambat.
_. Untuk menambah tulisan'y bisa menambahkan kode seperti di bawah ini

tb8_messages[3] = "ganti dengan kalimat anda";
tb8_messages[4] = "ganti dengan kalimat anda";
tb8_messages[5] = "ganti dengan kalimat anda";
tb8_messages[6] = "ganti dengan kalimat anda";


dan seterus'y.

Membuat Gambar Membesar/ Zoom Pada Blog

Mungkin sobat akan tertarik dengan trik ini seperti saya,, hehehe. Yah trik ini dapat membuat setiap mouse/ cursor yang diarahkan ke suatu gambar akan membesar dengan sendiri'y tanpa sobat mengkllik'y seperti yang terlihat di blog saya ini.

Jika sobat seorang yang suka mempercantik blog'y sendiri, trik ini tidak boleh dilewatkan sama sekali. langsung saja dilihat cara'y ya??

1. Login ke blogger sobat
2. Masuk ke Rancangan, kemudian Edit HTML
3. Setelah itu centang Expand Template Widget
4. Kemudian cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan Ctrl+F atau F3)
5. Setelah ketemu Copypas kode di bawah ini tepat diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Jika sudah di Copypas, lanjut ke Simpan.

Mengganti Warna Background Blog Sesuai Ke Inginan

Kali ini saya akan memberitahukan cara membuat background blog sobat berganti sesuai keinginan sobat. Dimana sobat mungkin merasa background'y itu" saja yang terlihat.

Jadi, widget ini dirfungsikan untukpengganti warna background, dan yang memilih background adalah pengunjung.

Jika penasaran bisa memcoba'y mengklik salah satu dari warna di bawah ini.

Ferryxz Yamato

Langsung saja lihat cara'y :

1. Seperti biasa Login ke Blogger sobat
2. Masuk ke Tata Letak, kemudian Tambah Gadget / Widget 
3. Pilih HTML/Javascript
4. Kemudian Copypas kode di bawah ini

<center><script type="text/javascript">function bgChange(bg) { document.body.style.background=bg; }</script>Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka <table border="3" height="20" style="width: 500px;"><tbody><tr> <td bgcolor="white" onclick="bgChange('#FFFFFF')"></td><td bgcolor="#000000" onclick="bgChange('#000000')"></td><td bgcolor="#F0E68C" onclick="bgChange('#F0E68C')"><br /></td><td bgcolor="#E0FFFF" onclick="bgChange('#E0FFFF')"></td><td bgcolor="#98FB98" onclick="bgChange('#98FB98')"></td><td bgcolor="#87CEFA" onclick="bgChange('#87CEFA')"></td><td bgcolor="#FFDAB9" onclick="bgChange('#FFDAB9')"></td><td bgcolor="#FFC0CB" onclick="bgChange('#FFC0CB')"></td><td bgcolor="#E6E6FA" onclick="bgChange('#E6E6FA')"></td></tr></tbody></table><div class="clear"></div></center>

5. Setelah selesai, kemudian Simpan.

Catatan :
_. Warna biru pada kode adalah lebar yang bisa disesuaikan dengan keinginan anda.
_. Warna merah pada kode adalah kata" yang bisa sobat buat untuk memberitahukan untuk mengklik'y.

Membuat Navbar Auto Hide & Menghilangkan

Pada saat membuka sebuah Blog pasti tau yang nama'y Navbar bukan?, jika belum tau bisa dilihat pada gambar disamping. 

Pada umum'y Navbar digunakan sebagai tempat pemberitahuan, keluar, pencari, dan pengaturan ke blog kita. 

Nah jika sobat tidak suka atau tidak merasa Navbar itu penting sobat memilih untuk Menghilangkan'y atau Menyembunyikan'y.

Cara Pertama Menyembunyikan'y :

1. Login ke Blogger sobat
2. Pilih Rancangan, kemudian Edit HTML
3. Setelah muncul centang Expand widget
4. Kemudian cari kode ]]></b:skin>, untuk mempermudah pencarian gunakan Ctrl+F atau F3
5. Setelah ketemu masukan kode di bawah ini tepat diatas kode ]]></b:skin>

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

6. Jika sudah tingal di simpan.


Cara Kedua Menghilangkan'y :

1. Lakukan langkah yang sama seperti diatas
2. Kemudian masukan kode di bawah ini ini tepat diatas kode ]]></b:skin>

#navbar-iframe {display: none !important;}

3. Kemudian simpan

Semoga bermanfaat yo,, :)

Membuat Spoiler Untuk Blog & Web

Ferryxz

Mau kayak gini?? lihat kodenya dibawah ini:
<div> <div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"> <i><span style="font-weight: bold;">Ferryxz Yamato</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Ganti dengan tulisan </div> </div> </div> </div>

Catatan : Ganti yang "Ferryxz Yamato" dan "Ganti dengan tulisan" dengan yang anda inginkan

Ferryxz

Buat Link

Membuat Link Di Blog Terbuka Pada Halaman Baru

Sering x kita merasa risih/ capek jika harus meng klik kanan untuk membuka halaman baru pada web kita dan membuat blog kita sendiri tax ASIK. Nah sekarang ada solusinya, dengan cara mengakali kode target blank ke dalam template, bisa di klik link berikut Link Test, untuk lebih lanjutnya lakukan langkah" berikut ini:

1. Masuk/ login ke Blogger anda
2. Lalu klik menu design kemudian klik Edit HTML
3. Cari kode <head>
4. Masukkan kode di bawah ini sesudah kode <head> (untuk mempermudah pencarian gunakan Ctrl + F / F3)
<base target='_blank' />
5. Save Template anda View Blog

Mengubah Warna Dan Ukuran Tulisan

Seringkali saat membaca sebuah postingan kita merasa bosan melihat tulisan, bentuk, warna itu” aja dan mungkin ingin suasana yang baru,,  terkadang juga jika tulisan terlalu kecil bias membuat mata kita sakit denganterus”an membaca tulisan dengan ukuran yang kecil.

Nah sekarang saya akan memberikan solusi untuk keluhan”an seperti itu,, langsung saja lihat cara’y :

1. Login ke akun Blogger

2. Pilih Rancangan, kemudian Elemen Laman

3. Klik Tambah Gadget

4. Kemudian pilih HTML/Java Script

5. Copypas kode di bawah ini

<!-- Code Begins -->
<!-- Ferryxz Yamato -->
<style type="text/css">

/** TUW Font Color and Size Change widget begins **/

#tuw-font-change-widget {width: auto;}

#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-red { background: #FF0000 !important; } #fcw-orange { background: #ffa500 !important; } #fcw-yellow { background: #FFFF00 !important; } #fcw-white { background: #088A08 !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-red ").click(function() {
$(" .post-body ").css({ color: "#FF0000" });
return false;
});

$(" #fcw-color #fcw-orange ").click(function() {
$(" .post-body ").css({ color: "#ffa500" });
return false;
});

$(" #fcw-color #fcw-yellow ").click(function() {
$(" .post-body ").css({ color: "#FFFF00" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#088A08" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});

$(" #fcw-size #fcw-20 ").click(function() {
$(" .post-body ").css({ fontSize: "20px" });
return false;
});

$(" #fcw-size #fcw-24 ").click(function() {
$(" .post-body ").css({ fontSize: "24px" });
return false;
});

$(" #fcw-size #fcw-30 ").click(function() {
$(" .post-body ").css({ fontSize: "30px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Ganti warna tulisan </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-red" href="#">Red</a> </li>
<li> <a id="fcw-orange" href="#">Orange</a> </li>
<li> <a id="fcw-yellow" href="#">yellow</a> </li>
<li> <a id="fcw-white" href="#">green</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Ganti ukuran tulisan </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
<li> <a id="fcw-20" href="#">20</a> </li>
<li> <a id="fcw-24" href="#">24</a> </li>
<li> <a id="fcw-30" href="#">30</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

6. Setelah selesai mengCopypas kode diatas kemudian Simpan
7. Selesai, mudah kan??

Membuat Blockquote

Sering x untuk mempercantik Artikel/ tulisan kita dengan banyak'y kode"/ tulisan yang penting terkadang sulit untuk mempercantik'y. nah sekarang sudah ada solusi'y dengan mengunakan blockquote/ bingkai.

disini saya akan memberitahukan beberapa jenis blockquote,, silakan dilihat,,,

ferryxz yamato 

.
Kode'y d bawah ini :

<blockquote style="background-color: #424242; border: 4px outset rgb(216, 216, 216); color: #cccccc; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; line-height: 1.4em; margin: 10px; padding: 10px;">
<span style="line-height: 1.4em;">ferryxz</span></blockquote>

Ferryxz Yamato

Kode'y d bawah ini :

<div style="border: 3px solid rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Ferryxz Yamato</div>

Ferryxz Yamato

Kode'y d bawah ini :

<div style="border: 3px  Dashed  rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Ferryxz Yamato</div>

Ferryxz Yamato

Kode'y d bawah ini :

<div style="border: 3px   Dotted  rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Ferryxz Yamato</div> 

Ferryxz Yamato

Kode'y d bawah ini :

<div style="border: 3px Double rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Ferryxz Yamato</div>  

Membuat Tulisan Dengan Bingkai

Membuat tulisan bergerak seperti di bawah ini, gmana mau??

Ferryxz Yamato II

kode :

<table border="1" style="height: 28px; width: 550px;">
                  <tbody>
<tr>
                    <td bgcolor="#CCCCCC"><div align="justify">
<span class="style113"> <span class="style96">
                      <marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">
                      <strong>Ferryxz Yamato II</strong>
                        </marquee>
                    </span> </span></div>
</td>
                  </tr>
</tbody></table>

keterangan warna:
_. orange > tinggi
_. biru > lebar
_. merah > tulisan text

Cara Menambahkan Scroll Pada Archive

Setelah sebelumnya saya telah memposting cara Membuat Daftar Isi otomatis 2, sekarang saya akan memberitahukan Menambah Scroll Pada Archive yang sahabat blogger punya,,
Mungkit sedikit menganggu jika postingan kita terlalu banyak dan akan memperpanjang ruang pada blogger kita,, Nah.. sekarang bisa mempermudahnya dengan menambahkan scroll,,,

Langsung saja lihat caranya:
1. Masuk ke akun Blogger anda
2. Pilih rancangan > kemudian pilih Edit HTML
3. Jangan lupa dicentang Expand Widget Templates
4. kemudian cari kode seperti ini: <div id='ArchiveList'> untuk mempermudah pencarian bisa mengunakan Ctrl + F atau F3
5. Setelah itu tambahkan kode yang berwarna Biru di bawah ini

</b:if>
<div class='widget-content'>

<div style='overflow:auto; width:ancho;height:300px;'>

<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>

<b:include name='quickedit'/>

6. Setelah selesai tinggal di Simpan Template.