Slide Widget Coba

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

Read more »

Kode Warna Blog

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

Read more »

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

Read more »