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

Merubah Tampilan File Explorer Win 8

Kali ini saya akan membagi Ribbon Disabler, pasti bertanya tanya ya? apa itu Ribbon Disabler. Ribbon Disabler fungsinya untuk mengubah tampilan Ribbon File Explorer Win 8 menjadi Win 7.

Biasanya masih terbanyang-banyang akan Win 7 sewaktu menggunakan Win 8. langsung saja bangi yang berminat silakan di download.

Screenshot

 Menjadi

Download :  Ribbon Disabler, Ribbon Disabler

Windows 8.1 Pro Preview

Microsoft merilis Operating System terbarunya, yaitu Windows 8.1. Pada Windows 8.1 Pro Preview ini, begitu banyak perubahan dari OS pendahulunya, seperti kembalinya tombol START, tampilan lockscreen yang lebih keren karena adanya slideshow, kustomisasi Start Screen yang lebih bebas, perubahan fitur search, dan masih banyak lagi. Walaupun Windows 8.1 ini masih sampai pada versi Pro Preview, tidak ada salahnya buat dicoba.

Screenshot

Download :

• Windows 8.1 Pro Preview (32 bit)
• Windows 8.1 Pro Preview (64 bit)

• Product Key : NTTX3-RV7VB-T7X7F-WQYYY-9Y92F