Membuat Artikel Terkait (Related Posts)

Tutorial Blogger

Dengan membuat artikel terkait di dalam postingan, pengunjung blog akan mengetahui jika artikel yang dibaca masih memiliki relasi atau berhubungan dengan artikel tersebut sehingga hal ini akan meningkatkan page view artikel blog anda jika pengunjung atau pembaca artikel blog tersebut melanjutkan bacaanya yang ada pada bagian related posts.

Berikut adalah cara membuat artikel terkait (Related Posts) seperti pada bagian bawah artikel :
1. Masuk ke blogger
2. Pilih Template > Click Edit Template.
3. Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2
4. Copy-paste kode berikut di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5. Kemudian cari kode ]]></b:skin>
6. Copy-paste code CSS berikut ini tepat diatasnya :

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;padding-top : 0;padding-right : 0px;padding-bottom : 1px;padding-left : 20px;margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
7. Simpan Template Anda.

Keterangan :

maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
background-color: #F2F2F2; adalah warna background kotak related posts
background-color: #EFFBEF; adalah warna background waktu disorot kursor(bisa diganti sesuai keinginan)
Anda juga dapat merubah background gambar dengan memasukkan link url pada kode berwarna hijau diatas.

Mengganti Background Blog dengan Gambar

Tutorial Blogger

Dalam mengedit dan memodifikasi sebuah blog, dibutuhkan pemikiran dan pandangan yang luas. Contohnya, background yang Anda ganti, template yang Anda download, artikel terkait yang Anda gunakan dll. Namun terlepas dari itu semua, kegunaan yang ingin didapat dari pengeditan tersebut bukan untuk tampilan yang mewah tetapi lebih ke kenyamanan pengunjung blog dalam melihat blog kita serta sedikit ditambahkan optimization SEO.

Pada artikel yang berjudul "Cara Mengganti Background Blog dengan Gambar" ini. Saya akan menjelaskan cara merubah background dengan gambar pada blog agar terlihat rapih dan membuat pengunjung merasa nyaman sehingga akan memaksimalkan traffic pengunjung yang lebih baik. Hal ini juga akan membuat pengunjung bertahan lama mengikuti setiap artikel yang kita buat. Untuk tutorial cara mengganti background tersebut sapat anda lihat dalam artikel kali ini.

Cara Mengganti Background Blog dengan Gambar :
1. Silahkan Anda ke halaman template, dan edit HTML
2. Lalu tekan CTRL+F dan carilah kode seperti ini : #body atau .body 
3. Setelah berhasil menemukan kode tersebut, carilah yang mirip seperti kode dibawah ini :

body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
}

4. Setelah ketemu, Anda tinggal menambahkan kode ini :
url('url link gambar yang ingin dijadikan background') repeat-x; 
Sehingga, dari contoh kode diatas, menjadi :

body{
background:#ded8c0 url('url link gambar yang ingin dijadikan background') repeat-x; color:#28261A;font:12px verdana,arial,Sans-erif;text-align:left;margin:0;}

5. Klik Preview untuk melihat hasilnya. dan Simpan apabila gambar background telah sesuai dengan pengaturan tampilan Anda.

Gambar tersebut juga dapat diatur agar ketika di scroll ke bawah, gambar menjadi tetap dan tidak berubah. Syaratnya ukuran gambar harus memiliki panjang vertikal minimal 860px. Contoh : 1160 x 880, 600 x 880, 1400 x 880. Caranya tinggal kamu rubah  kata repeat-x; menjadi repeat-x top left fixed;

Atau kamu juga bisa merubah sebuah gambar kecil menjadi gambar besar. Caranya sama tinggal mengganti repeat-x; menjadi repeat scroll 0 0;

Bagaimana, mudah kan untuk cara mengganti background sebuah blog. Sekian dulu artikel Media Blogger dengan kategori Tutorial Blogger ini. Terimakasih telah membaca artikel saya berjudul Cara Mengganti Background Blog dengan Gambar , semoga dapat bermanfaat.

Membuat Keyword Smart Link di Artikel Blogger

Tutorial Blogger

Penggunaan Smart Link di setiap Artikel Blog sering kali digunakan oleh para master blogger. Hanya saja berbeda nama, Bagi para master blogger sering kali membuat internal link di setiap artikelnya. Tentu akan membuat kita mencari terlebih dahulu url linknya dan nama judul link tersebut.

SEO Smart Link berbeda dan jauh lebih praktis dibandingkan pemasangan Link To Internal Link. SEO Smart Link ini bekerja secara otomatis terhadap salah satu kata kunci yang ingin kita berikan link internal. Jadi, apabila kita membuat sebuah artikel dan memakai salah satu kata yang ada di Smart Link maka secara otomatis kata tersebut akan ada link aktif yang dapat kita arahkan sesuai keinginan kita.

Dengan kemudahan SEO Smart Link ini, kita tidak perlu lagi memberikan link secara manual dan satu persatu. Karena telah kita setting sebelumnya dan otomatis setiap kata tersebut akan menuju ke sebuah halaman dari blog kita. Sebagai Contoh, Anda membuat kata SEO Agar diindex dan diberikan auto link. Memang membahas masalah berkaitan SEO sangat inovatif dan memiliki beragam teknik. Apakah auto link atau Smart Link ini menyalahkan aturan Google? Tentu tidak, asalkan kita tidak terlalu banyak menggunakan kata kunci yang telah dipasangi SEO Smart Link di setiap artikel posting yang kita buat.


Bagaimana cara kerja seo smart link untuk blogspot ini ?
Script ini akan membaca setiap kata pada setiap posting. Contohnya, jika sobat memasukkan kata "SEO" pada script tersebut maka otomatis pada semua halaman yang terdapat kata "seo" akan di link ke alamat url yang telah anda tentukan.

Cara Membuat SEO Smart Link :
1. Login ke blogger.com, Pilih Template.
2. Lalu Edit HTML.
3. Dibiasakan setiap mengedit html template, ceklis Expand Widget Template.
4. Carilah kode </body> bisa dengan menggunakan CTRL + F
5. Jika sudah ketemu, copy kode di bawah ini dan letakkan diatas </body> .

<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;SEO&quot;, &quot;http://kumpulsuka.blogspot.com/&quot;);
f.startScript();
</script></b:if>

Panduan Membuat SEO Smart Auto Link :

• Ganti tulisan berwarna merah (' SEO ') dengan salah satu kata kunci Anda.
• Ganti tulisan berwarna ungu dengan url link yang Anda inginkan. 

Fungsi dari pembuatan SEO Smart Link memang telah banyak dipakai oleh para blogger. Tentu, akan membuat link internal kita semakin baik. Tetapi, rekomendasi saya gunakan kata kunci tersebut di setiap artikel postingan maksimal adalah 3 kali. Jangan terlalu banyak agar Google menyukai halaman blog kita. Cara Membuat Artikel Berkualitas SEO Friendly mungkin dapat Anda terapkan juga. Terimakasih dan semoga bermanfaat.

menampilkan foto google plus di kotak komentar

Tutorial Blogger

Cara menampilkan foto google plus di kotak komentar

1. Masuk ke Akun Blog kamu

2. Klik template => Edit HTML => Centang Expand Template Widget

3. Cari kode yang mirip seperti ini <data:commentPostedByMsg/>

4. Copy kode dibawah ini dan taruh diatas kode tadi :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7481783979633435006&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onClick='javascript:window.open (this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450,&quot;);return false;' style='padding:0px 5px; border:1px solid #ddd; float:right'>Reply Comment</a>
</b:if>

Ganti kode yang berwarna merah dengan id blog kamu.


5. Kemudian cari kode berikut <dl id='comments-block'> atau <dl class='comments-block' id='comments-block'> lalu ganti kode diatas dengan kode dibawah ini :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Kemudian cari lagi kode seperti ini :

<a expr:name='data:comment.anchorName'/>

lalu ganti kode diatas dengan kode dibawah ini :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

7. Letakan Kode dibawah ini diatas kode ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(ini adalah link tempat foto yg ingin ditampilkan bila user tidak memakai akun google, ukuran foto 32px) no-repeat left top;
width:32px;
height:32px
}

8. Simpan Template.

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Membuat Menu Navigasi Horizontal Melayang Dengan CSS

Tutorial Blogger

Pada kesempatan kali ini saya akan share tentang cara membuat menu navigasi horizontal melayang dengan CSS. Menu navigasi horizontal melayang ini terbilang unik dan elegant. Selain tampilannya yang berbeda dengan menu-menu navigasi pada umumnya dan memang sangat indah, menu ini juga fast loading (ringan) sehingga tidak membebani bobot loading blog anda. Kita bisa membuat menu navigasi horizontal melayang ini dengan menggunakan CSS.

jika berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.
Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Tata letak
3. Tambah Gadget.
4. Pilih HTML/Javascript
5. Copy kode di bawah ini dan Letakkan di dalamnya.

<style type="text/css"> #kumpulsuka ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kumpulsuka li .current{color: transparant;}#kumpulsuka li a:hover, #kumpulsuka li a:active {background: #009900; background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff; margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kumpulsuka {width: auto;float: left;margin: 0;padding: 0;}#kumpulsuka {margin: 0;padding: 0;}#kumpulsuka ul {float: left;list-style: none;margin: 0;padding: 0;}#kumpulsuka li {list-style: none;margin: 0;padding: 0;}#kumpulsuka li a, #kumpulsuka li a:link, #kumpulsuka li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kumpulsuka li a:hover, #kumpulsuka li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kumpulsuka li li a, #kumpulsuka li li a:link, #kumpulsuka li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kumpulsuka li li a:hover, #kumpulsuka li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kumpulsuka li {float: left;padding: 0;}#kumpulsuka li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kumpulsuka li ul a {width: 140px;}#kumpulsuka li ul ul {margin: -32px 0 0 171px;}#kumpulsuka li:hover ul ul, #kumpulsuka li:hover ul ul ul, #kumpulsuka li.sfhover ul ul, #kumpulsuka  li.sfhover ul ul ul {left: -999em;}#kumpulsuka  li:hover ul, #kumpulsuka  li li:hover ul, #kumpulsuka  li li li:hover ul, #kumpulsuka  li.sfhover ul, #kumpulsuka  li li.sfhover ul, #kumpulsuka  li li li.sfhover ul {left: auto;}#kumpulsuka  li:hover, #kumpulsuka  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kumpulsuka{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD23nYPHGrUfAXzLYmh0A7pFWBWdYWY8cPH90bE3Xyk6ygg7FdAFNkbh0KvRw-mxd9zwBYbUwsnartR6R7slatY-_CqBR97V4U87LzFxLtd4O59j8J9lyT_rVNyNr9i4q8V3NGxlk3a7un/)repeat-x;(0,0,0, 0.80);border: 0; padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='kumpulsuka'> <ul id='kumpulsuka'> <li><a href='#'>Beranda</a></li> <li><a href='#'>Daftar Isi</a></li> <li><a href='#'>Tutorial Blog</a> <ul class='children'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>About Me</a> <ul class='children'> <li><a href='#'>Facebook</a></li> <li><a href='#'>Tweeter</a></li> <li><a href='#'>Google+</a></li> </ul> </li> <li><a href='#'>Tips And Triks</a> <ul class='children'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>Tutorial Blog</a> <ul class='children' target='_blank'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>kumpulsuka</a> <ul class='children'> <li><a href='#' target='_blank'>Null</a></li> <li><a href='#' target='_blank'>Null</a></li> </ul> </li> <li><a href='#'>xxx</a></li> </ul> </div>

6. Simpan dan lihat hasilnya...

Note :
Ganti tanda # dengan alamar URL tujuan kamu, dan sesuaikan teks atau tulisan yang ada di sampingnya.

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Membuat Menu Navigasi Slide Out

Tutorial Blogger

menu ini sangat praktis dan bisa kita gunakan sebagai menu tambahan yang tidak memerlukan banyak tempat, tanpa harus mengganggu pandangan pengunjung yang lagi baca artikel kita.
Lebih bagus lagi karena menu ini hanya menggunakan fitur Css dan beberapa Html, tanpa menggunakan javascript juga jQuery. Sehingga menu ini akan bekerja lebih ringan.

jika berminat, Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Klik Template
3. Klik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy kode di bawah ini dan taruh sebelum kode </head> :

Berikut kode Css, bila menu ditampilkan disebelah kanan :

<style type='text/css'> ul#navigation-slide-out-kanan {     position: fixed;     margin: 0px;     padding: 0px;     top: 100px;     right: 0px;     list-style: none;     z-index:9999; } ul#navigation-slide-out-kanan li {     width: 100px; } ul#navigation-slide-out-kanan li a {     display: block;     margin-left:80px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF; } ul#navigation-slide-out-kanan li a {     display: block;     margin-left:80px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF;     -moz-border-radius:10px 0px 0px 10px;     -webkit-border-bottom-left-radius: 10px;     -webkit-border-top-left-radius: 10px;     -khtml-border-bottom-left-radius: 10px;     -khtml-border-top-left-radius: 10px;     -webkit-transition: all 0.1s ease-in-out;     -moz-transition: all 0.1s ease-in-out;     opacity: 0.6;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation-slide-out-kanan li a:hover {     display: block;     margin-left: -2px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF;     -moz-border-radius:10px 0px 0px 10px;     -webkit-border-bottom-left-radius: 10px;     -webkit-border-top-left-radius: 10px;     -khtml-border-bottom-left-radius: 10px;     -khtml-border-top-left-radius: 10px;     -moz-box-shadow: 0px 3px 3px #000;     -webkit-box-shadow: 0px 3px 3px #000; } ul#navigation-slide-out-kanan .home a{     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0rVzQ1C8LzwHVrIKnDF1xsFUK9VQeN_4T-EmiRIoGkbnNT5nCq6piCux6mX75L7wBAl6rL6_vIV4Eu2A-w3-hQJ-92I9B7vByZma5bnFQUaC0KCrNzBdQUFtbynakC4Iy6DRXZbqY4CVc/s104/home.png); } ul#navigation-slide-out-kanan .about a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8AIDHUO4R7RbQZMkJNWq4eRMl7OUn0j9zcEPcSWrGTHu0ebd5wPDA9QnbOCahILz1AajAfSp8aISzee02WKPpuo8RtUYhvWIuJ4c6weB-HMFAyWt1e5ZPO4xgAOBzuZm7QSh3HZeWlOl/s104/id_card.png); } ul#navigation-slide-out-kanan .news a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqziY0bwzXwXemF8nqCZtgICMwAPhZiM6sI87SQyhP3IRSFY5z_mWM05db10d68axACRvlrEspWxz-RwtwV4_uCC0G22EcALTsK0Qh6JCmvqf8_b9Wzlfid0iBG0oa12QzI_utoZQIZceI/s104/promotion_new.png); } ul#navigation-slide-out-kanan .rssfeed a   {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgF53xXw5loIR-h9C_RRMDMe_mite3DUSJlAIOy_EaWSPSaUA43Qa79ZDLTWHvMf50mCnlKAbaEG-0ZVxj_z4sdwhEOijc3EKktnkIrxO2T3A6jwqUCzjWWbRGY-FTdpO3NK8Zg-zfK8I/s104/rss.png); } ul#navigation-slide-out-kanan .contact a    {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkzqXjB3BvCfjmAXmJ14iyHHUg1IqSia8JYNVmp6DeXG7cxzLO76Z6scEL3UEtE5ZAUg_34KPKtO8XqKyRktso6jMZKv9FTWr04R2-JWPQfzY9aWL88L0gw9L_j2964ruT225frsYAd4v/s104/mail.png); } </style>

Berikut kode Css, bila menu ditampilkan disebelah kiri :

<style type='text/css'> ul#navigation-slide-out-kiri {     position: fixed;     margin: 0px;     padding: 0px;     top: 100px;     left: 0px;     list-style: none;     z-index:9999; } ul#navigation-slide-out-kiri li {     width: 100px; } ul#navigation-slide-out-kiri li a {     display: block;     margin-left: -82px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF; } ul#navigation-slide-out-kiri li a {     display: block;     margin-left: -82px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF;     -moz-border-radius:0px 10px 10px 0px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-top-right-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-top-right-radius: 10px;     -webkit-transition: all 0.1s ease-in-out;     -moz-transition: all 0.1s ease-in-out;     opacity: 0.6;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation-slide-out-kiri li a:hover {     display: block;     margin-left: -2px;     width: 100px;     height: 70px;     background-color:#CFCFCF;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF;     -moz-border-radius:0px 10px 10px 0px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-top-right-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-top-right-radius: 10px;     -moz-box-shadow: 0px 3px 3px #000;     -webkit-box-shadow: 0px 3px 3px #000; } ul#navigation-slide-out-kiri .home a{     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0rVzQ1C8LzwHVrIKnDF1xsFUK9VQeN_4T-EmiRIoGkbnNT5nCq6piCux6mX75L7wBAl6rL6_vIV4Eu2A-w3-hQJ-92I9B7vByZma5bnFQUaC0KCrNzBdQUFtbynakC4Iy6DRXZbqY4CVc/s104/home.png); } ul#navigation-slide-out-kiri .about a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8AIDHUO4R7RbQZMkJNWq4eRMl7OUn0j9zcEPcSWrGTHu0ebd5wPDA9QnbOCahILz1AajAfSp8aISzee02WKPpuo8RtUYhvWIuJ4c6weB-HMFAyWt1e5ZPO4xgAOBzuZm7QSh3HZeWlOl/s104/id_card.png); } ul#navigation-slide-out-kiri .news a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqziY0bwzXwXemF8nqCZtgICMwAPhZiM6sI87SQyhP3IRSFY5z_mWM05db10d68axACRvlrEspWxz-RwtwV4_uCC0G22EcALTsK0Qh6JCmvqf8_b9Wzlfid0iBG0oa12QzI_utoZQIZceI/s104/promotion_new.png); } ul#navigation-slide-out-kiri .rssfeed a   {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgF53xXw5loIR-h9C_RRMDMe_mite3DUSJlAIOy_EaWSPSaUA43Qa79ZDLTWHvMf50mCnlKAbaEG-0ZVxj_z4sdwhEOijc3EKktnkIrxO2T3A6jwqUCzjWWbRGY-FTdpO3NK8Zg-zfK8I/s104/rss.png); } ul#navigation-slide-out-kiri .contact a    {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkzqXjB3BvCfjmAXmJ14iyHHUg1IqSia8JYNVmp6DeXG7cxzLO76Z6scEL3UEtE5ZAUg_34KPKtO8XqKyRktso6jMZKv9FTWr04R2-JWPQfzY9aWL88L0gw9L_j2964ruT225frsYAd4v/s104/mail.png); } </style>

Selanjutnya cari kode </body>
Copy kode dibawah ini dan paste sebelum kode </body>:

bila menu ditampilkan disebelah kanan :

<ul id="navigation-slide-out-kanan">  <li class="home"><a href="URL HALAMAN/ARTIKEL" title="Home"></a></li>  <li class="about"><a href="URL HALAMAN/ARTIKEL" title="About"></a></li>  <li class="news"><a href="URL HALAMAN/ARTIKEL" title="news"></a></li>  <li class="rssfeed"><a href="URL HALAMAN/ARTIKEL" title="Rss Feed"></a></li>  <li class="contact"><a href="URL HALAMAN/ARTIKEL" title="Contact"></a></li> </ul>

bila menu ditampilkan disebelah kiri :

<ul id="navigation-slide-out-kiri">  <li class="home"><a href="URL HALAMAN/ARTIKEL" title="Home"></a></li>  <li class="about"><a href="URL HALAMAN/ARTIKEL" title="About"></a></li>  <li class="news"><a href="URL HALAMAN/ARTIKEL" title="news"></a></li>  <li class="rssfeed"><a href="URL HALAMAN/ARTIKEL" title="Rss Feed"></a></li>  <li class="contact"><a href="URL HALAMAN/ARTIKEL" title="Contact"></a></li> </ul>

Lalu simpan Template.

Selamat mencoba dan Semoga bermanfaat.
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

membuat kotak komentar facebook berdampingan dengan kotak komentar blogger

Tutorial Blogger

Jika ingin kotak komentar blog kamu berdampingan dengan kotak komentar facebook, kamu tinggal modifikasi saja pada template blog kamu.
Berikut tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger,


Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Klik Template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode <div class='comments' id='comments'>
6. Lalu copy-paste kode berikut tepat dibawah kode <div class='comments' id='comments'>

Keterangan:
Apabila terdapat 2 kode yang sama <div class='comments' id='comments'> pastekan kode dibawah ini di kode yang kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'> <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/> <fb:comments-count expr:href='data:post.url'/> Comments </div> <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'> <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/> </div> <div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <fb:comments expr:href='data:post.url' num_posts='2' width='400'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='Masukan ID Fb anda disini' property='fb:admins'/> <script type='text/javascript'> function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show(); } </script> <style>.comments-page { background-color: #f2f2f2;} #blogger-comments-page { padding: 0px 5px; display: none;} .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;} .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #eeeeee;} .inactive-select-tab { background-color: #d1d1d1;}</style>

6. Simpan Template dan lihat hasilnya.
 
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Membuat Widget melayang atau sliding widget

Tutorial Blogger

Sliding widget ini bisa diartikan widget yang tetap pada posisi, bila kita menggerakkan mouse ke atas dan kebawah widget tersebut takkan menghilang dari pandangan kita..
untuk Membuat Widget Melayang (Sliding Widget) ini cukup mudah,

1. Cari kode ]]></b:skin>
2. copy-paste kode dibawah ini di atas ]]></b:skin>

#widget_fly { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression (document.documentElement.scrollTop + document.documentElement.clientHeight- this.clientHeight); _left:expression (document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth); }

3. Tambahkan kode dibawah ini pada gadget yang ingin kamu buat:

<div id="widget_fly"> Kode HTML sobat </div>

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Cara buat tab menu atau multi tab

Tutorial Blogger

Tips kumpulsuka kali ini adalah Cara membuat menu Multitab, gunanya ini adalah untuk menghemat ruang blog kita, kamu bisa menyesuaikan sendiri nantinya.
Kamu bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger kamu.
2. Klik Template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) {  t.headingText = headingElement.innerHTML;  if (this.titleElementsStripHTML) {    t.headingText.replace(/<br>/gi," ");    t.headingText = t.headingText.replace(/<[^>]+>/g,"");  }  break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script> <style type='text/css'> .tabberlive{ margin-left:0px; margin-right:0px; padding-left:5px; padding-right:5px; padding-top:6px; padding-bottom:5px; clear:both; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYflaydtNPJ_N1QZBDCFL97FYxLkCmgV2ZJYE_92OpsjXmXlXMA-tCz34_NcaGm-ioSgoTJ3TcXmXPGWMCspAFj0Or1O8c4ap5rC3LajZTS8nwMh7ikQFJmDFx-Kzb-2Dt6SDqp2NrINQ/h1600/bg_post.jpg) top left repeat-x; border:1px solid #DDD; } .tabbernav { list-style:none; list-style-type:none; margin-left:0; padding-left:0px; padding-top:7px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; list-style-type:none; width:20%; margin-right:1px; margin-bottom:0px; display:inline; } .tabbernav li a { padding-top:7px; padding-bottom:7px; padding-left:6px; padding-right:6px; list-style:none; list-style-type:none; margin-right:1px; background:#3e5fa2; text-decoration:none; color:#ffffff; outline:none; } .tabbernav li a:hover { list-style:none; list-style-type:none; color:#000; background:#7290ce url() center left no-repeat; text-decoration:none; outline:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { list-style:none; list-style-type:none; background:#fff; color:#3e5fa2; outline:none; padding-bottom:22px; padding-left:6px; padding-right:6px; border-right:2px solid #ddd; border-left:2px solid #ddd; border-top:1px solid #ddd; } .tabberlive .tabbertab { margin-top:0px; margin-left:0px; margin-right:0px; padding-top:5px; padding-left:6px; padding-right:6px; padding-bottom:5px; background:#fff; border:2px solid #ddd; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ margin-top:5px; margin-left:5px; padding:0px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYflaydtNPJ_N1QZBDCFL97FYxLkCmgV2ZJYE_92OpsjXmXlXMA-tCz34_NcaGm-ioSgoTJ3TcXmXPGWMCspAFj0Or1O8c4ap5rC3LajZTS8nwMh7ikQFJmDFx-Kzb-2Dt6SDqp2NrINQ/h1600/bg_post.jpg) top left repeat-x; } .tabbertab .widget-content ul a:hover{ text-decoration:none; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz1vtEEC9UGGymT7LqwLgkx1T4t1ZB30sL1f7U46Is2MLGpkTw3F_miTMEYD-LPBaSDFQKckNUFyvO1VpwCuzVFnSZSw5MFW_QuwRXRzJtsGG3z0KZ3cBOoJHdYMYmRjrhGVPSkSPE58/h1600/bg_menu.jpg)top repeat-x; } .tabbertab .widget-content li { color:#488040; border-bottom:1px solid #ddd; margin:0 5px; padding:5px; } </style>

7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan kamu cari pada bagian sidebar, pada blog ini kodenya seperti berikut <div id='rsidebar-wrapper'>

Catatan :
•Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
•kamu bisa meletakkan pada bagian tengah atau bagian "main-wrapper"

8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) <div class='tabber'>

<div class='tabbertab' id='tab1'> <h2>TAB MENU 1</h2> <b:section class='sidebar101' id='sidebar101' preferred='yes'> <b:widget id='HTML101' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> <div class='tabbertab' id='tab2'> <h2>TAB MENU 2</h2> <b:section class='sidebar102' id='sidebar102' preferred='yes'> <b:widget id='HTML102' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> <div class='tabbertab' id='tab3'> <h2>TAB MENU 3</h2> <b:section class='sidebar103' id='sidebar103' preferred='yes'> <b:widget id='HTML103' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> </div> <div style='clear:both;'/>

Catatan :
• Teks warna biru adalah Judul tab menu.
• Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
• Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.

9. SIMPAN TEMPLATE.

Langkah selanjutnya kamu tinggal mengisi tab menu dengan gadget yang kamu suka.
Langsung saja kamu menuju "Tata letak", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja kamu buat, coba kamu sesuaikan dengan gadget yang kamu inginkan:
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Cara Membuat Blog hanya menampilkan judul postingan saja

Tutorial Blogger

bagi yang memerlukan trik ini silahkan kamu coba dan saya bisa pastikan kepada kamu akan berhasil tanpa keluhan.
1. Login ke blogger kamu.
2. Klik Template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type='text/css'> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> .post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;} .post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;} .post h3 strong, .post h3 a:hover {color:#333333;} .post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;} </b:if></b:if> </style>

7. Lalu simpan Template

Selamat mencoba dan semoga bermanfaat,

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Cara membuat tabel kode warna sendiri di Blog

Tutorial Blogger

Warna memang sangat berperan penting dalam pembuatan Blog atau Website dalam pemberian warna di Blog atau Website. Pada waktu lalu saya sudah mem-posting cara membuat tabel kode warna interaktif di blog. Yang dibutuhkan bagi para Admin adalah kode warna untuk membuat cantik blog atau website.Hampir setiap saat kita edit dan posting artikel yang membuat repotnya... ketika kita butuh kode warna, sering kali kita harus mencari sebuah Blog atau website yang menyediakan kode warna tersebut, iya kan?.Tutorial blog kali ini saya akan berbagi pada kamu, bagaimana cara mebuat tabel kode warna sendiri.


jika berminat membuat tabel kode warna ini, silahkan ikuti langkah-langkah berikut ini :
1. Login ke blogger kamu.
2. Klik template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy dan paste kode berikut diatas kode </head> :

<br />  <script language='javascript'> function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); } </script><br /> <script type='text/javascript'> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); } </script><!--[if gte IE 5.5000]><br /> <script type="text/javascript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } YAHOO.util.Event.addListener(window, "load", correctPNG); </script><br /> <![endif]-->

7. Selanjutnya Save Template

Kemudian :
copy-paste kode dibawah ini pada Entri baru, bila kamu menghendaki tabel kode warna dipasang pada postingan kamu atau copy-paste kode dibawah ini pada Gadget bila kamu menghendaki tabel kode warna dipasang pada bilah samping, dengan cara tambah gadget pada Elemen Laman.

<center><form name="hcc" id="hcc"><table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="375" align="center" border="0" cellpadding="0" cellspacing="1"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"><br /> </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"><br /> </td></tr><tr height="10"><td><br /> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#151515"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#424242"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#585858"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#848484"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"><br /> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"><br /> </td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24"><br /> </td><td valign="bottom"><p><span style="font-weight: bold; font-style: italic;">Kode HTML Warna :</span> <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table></form></center>

Coba ya langsung di Praktekan,

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.