Cara membuat dan memasang Tab VIEW di post blogger

Mungkin anda sudah mengenal apa yang dinamakan tab view, suatu widget yang bisa menampung banyak konten dalam satu box atau kotak kolom atau suatu area. Yang dimana konten tersebut akan terlihat bila kita mengklik tab masing-masing. Seringkali kita menemuitutorial cara membuat tab view, namun hanya terbatas pada sidebar. Dan bila kita memaksakan untuk mengimplementasikannya kedalam kotakPostingan (pada blogspot) maka, akan terjadi kegagalan fungsi kode.

Nah, lalu bagaimana Cara Membuat Tab View di Postingan di Blogspot ? Berikut kode alternatif atau lanjutan dari kode Membuat Tab View di Sidebar. Agar bisa digunakan digunakan di postingan, sebaiknya anda menggunakan kode ini. 

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>



<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>



<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>





<style type='text/css'>

.yui-content { padding:1em; /* pad content container */

}

.yui-navset .yui-content {

border:1px solid #ccc;

}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {

background-color:#fff;

}

.yui-navset .yui-nav li a {

background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;

}

.yui-navset .yui-nav li a em {

background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;

padding:0.5em;

}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */

.yui-navset-top .yui-nav li a {

border-bottom:1px solid #ccc;

}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }

.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */

</style>



Buat satu Halaman Posting lagi dan Copy-Paste Code dibawah ini di postingan dalam mode EDIT HTML . 



<div id="demo">

<ul>

<li><a href="#tab1"><em>RCTI</em></a></li>

<li><a href="#tab2"><em>GLOBAL TV</em></a></li>

<li><a href="#tab3"><em>Trans TV</em></a></li>

</ul><br/>

<div>



<div id="tab1"><p>Copy Kode embed Video di Sini</p></div>

<div id="tab2"><p>Copy Kode embed Video di Sini</p></div>

<div id="tab3"><p>Copy Kode embed Video di Sini</p></div>

</div>

</div>

<script>

(function() {

var tabView = new YAHOO.widget.TabView('demo');



YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");

})();

</script>

Ukuran.. dengan sendirinya akan menyesuaikan lebar dan tingginya Video dan Halaman.
Untuk Mengatur Propertynya silahkan edit Kode CSS nya.

Berikut Preview Tab yang dihasilkan.

 


Bila anda sudah berhasil mengimplementasikan kode tersebut. Anda bisa menaruh TV Online atau apapun yang anda butuhkan.  

Read More

link-link tools blogger

 

bagi temen-teman yang membutuhkan inspirasi dari atau referensi berbagai sumber untuk membangun blog teman-teman semua. ada Cara Untuk mempermudah pencarian Anda untuk inspirasi, saya telah menyediakan Beberapa  sumber-sumber yang dapat Anda lihat. Website sangat bagus dan unik, jadi silakan langsung membacanya.

* Most used CSS Tricks *
* Simple, Powerful Product Highlighter with MooTools *
* Timeframe: Prototype date range component *
* Rating Boxes with Starbox *
* Navigation bar with tabs using CSS and sliding doors effect *
* Create beautiful tooltips with ease *
* Solving 5 Common CSS Headaches *
* Lazily load functionality via Unobtrusive Scripts *
* Nice calendar with date-pickers *
* Fantastic News Ticker Newsvine-like using Mootool *
* sAjax Forms with jQuery *
* Sexy Sliding JavaScript Side Bar Menu Using Mootools *
* Pure CSS Animated Progress Bar *
* Drag & Drop Sortable Lists with JavaScript and CSS *
* PHP components: Autosuggest *
* Slick Tabbed Content Area using CSS & jQuery *
* Multiple File Upload Magic With Unobtrusive Javascript *
* Add grunge effect to text using simple CSS *
* Creating a fading header *
* Accessible unobtrusive content scroller *
* How to Display Your RSS Count in a Cool Tooltip *
* Ext Accordion Widget Example *
* LightboxXL -prototype plugin *
* Change form elements appearance using FancyForm *
* FORM elements design using CSS and list (ul and dl) *

* Thank's * 

Read More