Lembar Coretan

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 menemui tutorial cara membuat tab view, namun hanya terbatas pada sidebar. Dan bila kita memaksakan untuk mengimplementasikannya kedalam kotak Postingan (pada blogspot) maka, akan terjadi kegagalan fungsi kode.

<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" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>RCTI</em></a></li>
<li class="selected"><a href="#tab2"><em>GLOBAL TV</em></a></li>
<li><a href="#tab3"><em>Trans TV</em></a></li>
</ul><br/>
<div class="yui-content">

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

Bila anda ingin menonton TV Online Piala Dunia, Cepat dan tanpa Buffering, Ringan Halamannya,  Bisa chatting bareng sambil nonton online, Silahkan menuju ke blog teman penulis di Sharing Mas Doyok.


Thanks to BloggerBuster anda Yahoo YUI

Bila ada yang tahu lebih, silahkan ditambahkan. :)

Melengkapi artikel sebelumnya tentang Free Public DNS, akhirnya dibuatlah tutorial berikut ini. Cara menggunakan Free Public DNS di Windows XP.


Setting Free Public DNS di Windows XP

1. Buka Control Panel dan klik “Network and Internet Connections”.


2. Lalu klik “Network Connections”.


3. Pilih Koneksi Internet yang anda gunakan dan yang sedang aktif.

1. Buka Device Manager (Control Panel ►System►Hardware►Device Manager) atau bisa juga melalui klik kanan My Computer ►Properties►Klik tab Hardware►Klik tombol Device Manager.
2. Hardware (perangkat keras) komputer yang belum dapat dikenali oleh OS, akan diberi tanda warna kuning dengan tanda tanya (?) dan juga dengan tulisan Unknown device.  Jadi sangat mudah sekali ditemukan.
3. Klik kanan pada Device yang belum diketahui tadi dan klik Properties
4. Di dalam window Properties klik tab Details dan pilih Device Instance Id dari kotak pilihan drop down
5. Anda akan menemukan tulisan seperti berikut.

PCI\VEN_8086&DEV_27DC&SUBSYS_30868086 &REV_01\4&1E46F438&0&40F0

6. Artinya, kode yang ditunjukkan dengan warna merah itu merupakan ID Vendor atau pembuat device (perangkat) tersebut. Dan yang berwarna hijau, merupakan ID dari perangkat (device). Jadi seperti ini,

Vendor ID = 8086

Device ID = 27DC 

7. Langkah selanjutnya buka website PCI DATABASE. Situs ini lumayan dikenal sebagai penyedia informasi mengenai perangkat. Dan cari data yang anda dapatkan tadi, ID Vendor dan ID Device. Setelah dapat anda pasti akan diarahkan langsung ke tempat mendownload software driver tadi.

Memasang Favicon
Untuk memasang/mengganti favicon blogger copas kode dibawah ini di bawah kode <head>

<link href='Alamat Tempat favicon Anda' rel='shortcut icon'/>
<link href='Alamat Tempat favicon Anda' rel='icon' type='image/gif'/>

Atau dengan menggunakan kode dibawah ini. Letakkan kode dibawah ini diatas kode </head>

<link rel="shotcut icon" href="..alamat tempat favicon.ico anda.."/>

atau

<link href='..alamat tempat favicon.ico anda..' rel='icon' type='image/vnd.microsoft.icon'/>

atau

<link href='...alamat favicon anda...' rel='icon' type='image/x-icon'/>

Menghilangkan Navbar Blogger
Kenapa harus dihilangkan?. Agar lebih kelihatan profesional kalau menurut saya, walaupun dibelakang URL blog tetap ada embel-embel .blogspot.com. Tapi tetap saja lebih kelihatan profesional. Soalnya navbar blogger tidak stylis. ehehe..
Masukkan kode berikut ini di atas kode ]]></b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

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

Menghapus Quick Edit (Menghilangkan Icon Obeng dan Tang)
Kenapa ini harus dihilangkan ?. Sebenarnya tidak harus, cuman saya pribadi menjadi agak risih bila melihat template blog tidak bersih dan dipenuhi dengan icon obeng dan tang dimana-mana, walaupun hanya kita saja yang tahu, tapi tetap saja mengganggu.. hehe.. Tapi, kembali lagi pada diri anda.
Pasang kode berikut diatas kode ]]></b:skin>

.quickedit{
display:none;
}

Atau langsung saja dengan menghapus kode berikut satu persatu sampai habis. Dengan menggunakan CTRL+F untuk lebih mudah melakukan pencarian.

<b:include name='quickedit'/>

Menghilangkan Angka Dalam Label

(<data:label.count/>)

Feed Link, kadang juga bisa berguna untuk kita, karena kemudahannya untuk digunakan langsung mensubscribe (membookmark) / menyimpang link feed bila belum disediakan oleh pemilik blog. Nah, bila sudah tersedia dengan desain indah jadi saya kira malah mengganggu pemandangan.

CSSnya.

.feed-links {
clear: both;
line-height: 2.5em;
}

HTMLnya

<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>

Atau seperti dibawah ini.

<div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
<a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>

Menghilangkan Pesan Pencarian Blogger
caranya masukan kode berikut diatas ]]></b:skin>

.status-msg-wrap{
display:none;
}

Menghilangkan Logo Blogger di Comment
Biar tidak terkesan gratisan dan biar kelihatan lebih profesional kalau menurut saya.. ehehe..
cari kode berikut:

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

ganti dengan:

<dt expr:class='&quot;comment-author &quot; + data:comment.anchorName' expr:id='data:comment.anchorName'>

Reset Heading
1. Pembenahan Pada Judul Post 
pada kode CSS secara default tersusun sebagai berikut

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Pada kode HTML

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
     <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
       <b:else/>
       <data:post.title/>
    </b:if>
</b:if>
</h3>

Ganti kode heading h3 menjadi h2.

2. Pembenahan pada judul pada Sidebar/Footer (Widget)
Pada kode CSS :

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

dan pada HTML nya

<h2 class='title'><data:title/></h2>

Ubah kode h2 menjadi h3

3. Pembenahan pada Date (Tanggal) 
Penanggalan tidak terlalu mempunyai arti bagi kekuatan SEO, jadi kita tidak membutuhkannya. Untuk itu kita hilangkan saja tag heading pada 'Date'.
Pada kode CSS :

h2.date-header {
margin:1.5em 0 .5em;
}

hilangkan kode h2 nya sehingga menjadi seperti berikut :

.date-header {
margin:1.5em 0 .5em;
}

dan pada HTML :

<h2 class='date-header'><data:post.dateHeader/></h2>

ganti kode h2 menjadi div . Sehingga menjadi seperti berikut :

<div class='date-header'><data:post.dateHeader/></div>

Update :
Ganti kode berikut, bila masih ada di template anda

<b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

Dan ganti dengan kode berikut dibawah :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='Tulis Deskripsi Blog anda disini, ini yang disebut meta description' name='description'/>
<meta content='Tulis Keyword blog anda di sini' name='keywords'/>

biasanya terletak dibawah <head>  dan diatas kode <b:skin><![CDATA[/*

1. Langkah Pertama, untuk cara ini, anda perlu menggunakan browser Firefox.
2. Langkah kedua Download addons Firefox bernama Download Helper
3. Langkah ketiga, Cari Video Musik dari Youtube.Com yang ingin anda download dan dengarkan.
4. Langkah keempat, download Video Musik dari Youtube.Com yang anda inginkan dengan Download Helper. Dengan cara mengklik icon kecil berwarna merah, biru, kuning yang berputar bila anda mengakses Youtube.Com. Setelah itu klik nama video yang anda inginkan.
5. Langkah berikutnya, Download the Freez FLV to MP3 Converter untuk Windows, atau bisa juga selain yang sejenisnya.
6. Step Berikutnya, Convert Video hasil Download anda tadi dengan Freez FLV to MP3 Converter tadi. Dan, ciluuk.baa.. MP3 dari musik video anda tadi selesai dan siap didengarkan.

Cara Menginstal Theme/tema Otomatis di Google Chrome
2. Pilih Options
3. Pilih dan klik tab Personal Stuff.


7. Theme/tema akan didownload dan akan melakukan proses instalasi secara otomatis.




Cara menghapus/ menguninstall tema/theme Google Chrome.

Dan Berikut Link untuk download file

• Masuk ke Google Friend Connect setelah itu klik salah satu blog yang ingin anda tambahkan fitur sistem komentar/review dari GFC.
• Klik link/tombol Browse Gadgets Gallery.

• Pilih dan Klik Widget Comments

• Setelah di halaman opsi konfigurasi.

Opsi 1

• Pilih "Page" di menu dropdown bertuliskan Scope.
• Tulisan - add your comment here - bisa anda ganti dengan sesuka anda. Ini tulisan yang akan muncul didalam kotak komentar.
• Kotak bertuliskan Comments bisa diganti. ini sebagai header kota komentar GFC.
• Allow visitors to post Youtube links. Mengijinkan pengunjung memasang link dari youtube.
• Allow anonymous posts. Mengijinkan pengunjung diluar komunitas GFC anda menuliskan komentar.

Opsi 2

• Width. Mengatur lebar kotak komentar
• Number of posts to show. Menunjukkan berapa nantinya komentar yang dimunculkan. Untuk saat ini maksimal 15.
• Start expanded, allow expand and contract. Kotak komentar akan terbuka, tapi bisa juga ditutup dan dibuka kembali. Pilih opsi yang ini.
• Start contracted, allow expand and contract. Kotak komentar akan tertutup. tapi bisa juga ditutup dan dibuka kembali.
• Always expanded, can't contract. Kotak komentar akan selalu terbuka dan tidak bisa ditutup.

Opsi 3

• Konfigurasi warna yang anda inginkan.

Konfigurasi terakhir

• Create the HTML Code. Klik tombol Create the HTML Code dan kode HTML dari Kotak komentar GFC anda siap.

Copy-paste kode tersebut dibawah kode

<b:includable id='comments' var='post'>

Save dan Selesai. Lihat Kotak komentar baru blog anda.

Owh iya. Mohon dukungannya dalam kontes SEO nowGoogle.com Adalah Multiple Search Engine Popular.

Lama tidak mengupdate blog karena ada suatu urusan di dunia nyata yang lumayan membuat pusing. Walah kok malah curhat. Cara membuat menu horizontal.

Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2bLvZrLnZ9nnYragwUv5c_pe2jrRtaUMsVC6r8Zwnkbng13He9ib6XbeTBhYT_jFqo2QOvBAtXOwTzpNYh8ELN_VhWZG_E0UaYHLlLmMdlg2-pytXzfTqFu9nrTVHipJt4f2bBZHTYtN/") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYXMzgN_bAxoOIcqHwaB9SBVev0aKy78mt4cCvcFATfcRVQI1r_Oc66oT1nmUGL4vpIyZy07nOPBVfWAXMv2qXdj3z8mhVxwxL7GIBq_HMpM5XbQP-XqWR6bPbNfmxkhbaQEtNT5MUzFQ/") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
       
        }
    .menu li li {
        background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SUghjwso9POJ5Cznb7UAbv6I4dF1DofyrxhdQL2SVt1QR8xocaBMxSljrsOa9ZCXpjSHJWX9ABZpwRCNDZwhAuNqoFI_QD-rwvLIKCga_JEjR5L7_I2x7gkag3WsHDUwf-SnntLGmswA/') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
       
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0pcOv2AMsnCKt-V7pFY8711z9Gpj1exsr3tLQJkts14RfptuWmdL9hF0uSmLKkw2uq-PWq6OtWXl8Cy7sJTArrIkRC2s3RFjWO5mD8mmPeGg9CM5Ds60KS94sxVcmOnHhow9asXiL-nX/') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }   

Copy kode di bawah ini :

<div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Menu 1</a>
                <ul>
                    <li><a href="#">Sub Menu 1</a></li>
                    <li><a href="#">Sub Menu 2</a></li>
                    <li><a href="#">Sub Menu 3</a></li>
                    <li><a href="#">Sub Menu 4</a></li>
               </ul>
          </li>
            <li><a href="#">Menu 2</a>
                <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                </ul>
          </li>
            <li><a href="#">About</a></li>
        </ul>
    </div>

dan paste di

/******   H3    */
ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    background:transparent url("images/OFF.gif") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    border-bottom:4px solid #555555;
    border-top:1px solid #919191;
}
ul#menu li{
    display:block;
    float:left;
    margin:0;
    pading:0;}
ul#menu li a{
    display:block;
    float:left;
    color:#8c3a3a;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0 20px;
    height:24px;
    background:transparent url("images/DIVIDER.gif") no-repeat top right;
    }
ul#menu li a:hover{
    background:transparent url("images/HOVER.gif") no-repeat top right;   
    }

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>

<body>

<br /> <br />
<ul id="menu">
    <li><a href="#" title="">Home</a></li>
    <li><a href="#" title="">PRODUCTS</a></li>
    <li><a href="#" title="" >FAQ</a></li>
    <li><a href="#" title="">CONTACT</a></li>
    <li><a href="#" title="">Contact Us</a></li>
</ul>

</body>
</html>

7. Copy lalu paste kode/script yang berwarna biru di atas kode

<div id='outer-wrapper'><div id='wrap2'> : Jika ingin meletakkan menu tersebut di puncak template anda.
<div id='main-wrapper'> : Jika ingin diletakkan di atas halaman posting/artikel.

<ul id="menu">
    <li><a href="http://lembar-coretan.blogspot.com/" title="">Home</a></li>
    <li><a href="http://www.sham-af.co.cc/" title="">Anime Info</a></li>
    <li><a href="link anda" title="" >FAQ</a></li>
    <li><a href="link anda" title="">CONTACT</a></li>
    <li><a href="link anda" title="">Contact Us</a></li>
</ul>

10. Terakhir, Save/ Simpan Template anda. Selamat menikmati menu anda. :)





Tips : 

• Membuat Menu Horizontal Tanpa Coding Sama Sekali. 
• Menggunakan Blogger Sebagai Hosting Gambar
  

Misalkan anda ingin membuat yang strukturnya seperti ini : Nama Email Website/Blog Isi Pesan
 

Anda bisa membuatnya dengan cara

Utarakan pendapat anda melalui kotak komentar. hehe

Sedangkan untuk memasang kode emoticon di atas kotak komentar, ( masih berada di dalam halaman Edit HTML ). Cari kode merah di bawah ini


Lalu copy -paste code emoticon di bawah ini


dan letakkan di bawah kode <p class='comment-footer'>


Ok, lalu bagaimana agar kode emoticon muncul di atas kotak komentar dengan benar??

Silahkan sobat mencari kode <b:if cond='data:post.embedCommentForm'> . dan copy kode emoticon di bawah ini


dan paste di atas code <b:if cond='data:post.embedCommentForm'> . Nah untuk tambahan, bila sobat ingin menambahkan kata - kata di atas emoticon di atas kotak komentar tersebut dengan kata - kata "Tinggalkan Pesan" atau apalah terserah sobat. Bisa ditambahkan di atas kode emoticon yang kedua.

Setelah itu klik Save Template.