KKK - Blogger's: Blogger Tutorial

Cara Membuat Tabel,kotak,kolom di Blog

Cara Membuat tabel atau kotak di blog atau di artikel postingan itu lah pembahasan kita hari ini. Untuk membuatnya sangat lah mudah. anda sedikit menambahkan atau menyisip kan kode script ke artikel yang ingin anda beri kotak atau tabel. Nah mungkin masih bingung yang saya maksudkan. Mari kita simak kode script di bawah ini.

Berikut langkah-langkah cara membuat tabel atau kotak di blog anda:

Tabel dengan satu (1) kolom

Nama Sahabat

<table border="1"><tr><td>Nama Sahabat></td></tr></table>
Tabel dengan dua (2) kolom

Nama

Hoby

<table border="1" width="300">
<tr><td>Nama Sahabat</td><td>Hoby</td></tr>
</table>
Table tiga (3) kolom dengan empat (4) baris

Nama Kelas Hobby

A 6 Makan bakso

A 6 Makan bakso

A 6 Makan bakso

A 6 Makan bakso

<table border="1" width="300">
<tr bg#3366ff">#E0F8E0">
<td align="center">
<b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td>
</tr><tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
</table>
Dari contoh di atas saya rasa anda sudah mengerti, jika belum silahkan anda coba utak atik saja sendiri. jangan pernah takut untuk bisa.

Selamat mencoba.....

Cara membuat kotak iklan (Banner Box)

Label: Blogger Tutorial, Design

Cara membuat kotak iklan (Banner Box) - Kali ini Wan Bloggers akan menulis tentang Trik Blogspot, yaitucara membuat kotak iklan 125 x 125 atau banner box. Fungsinya tiada lain untuk menempatkan iklan yang akan dipasang di blog kita jika suatu saat blog kita visitornya sudah ramai. Saya sarankan penawaran kepada pemasang iklan pada blog kita jika blog kita sudah benar-benar ramai, percuma saja blog kita masih sepi ditawarin kepada orang buat pasang iklan merekapun akan berpikir dua kali dan mereka tidak akan sudi merogoh koceknya seandainya blog kita biasa-biasa saja. Baiklah untuk jelasnya lihat bentuknya dibawah ini.

Cara membuat kotak iklan (Banner Box):

Pertama, masuk pada halaman Edit HTML, kemudian masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;
}
#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;
}
#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;
}

Kalau sudah, selanjutnya buat element halaman baru (caranya : Klik tata letak >> tambah gadget >> HTM/Javascript).

Pastekan Kode dibawah ini untuk menampilkan iklannya :

<div id="Box-Banner-ads">
<a target="_blank" href="http://kokeykhia.blogspot.com"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd351Z2jIPsFbSafTD21Tk_bTa5YOQk1VvYx6TA2C0v6sfulDQ-7_QavzhUnuujQh5IWxqnGnF5zMzOk5zEw_bN0qcLETIOg6YlTidA3PbnQUHMb8jdtE08SJxL3XWn8H83e4KBZURLdw/s1600/125x125.gif"/></a>

<a target="_blank" href="http://kokeykhia.blogspot.com"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd351Z2jIPsFbSafTD21Tk_bTa5YOQk1VvYx6TA2C0v6sfulDQ-7_QavzhUnuujQh5IWxqnGnF5zMzOk5zEw_bN0qcLETIOg6YlTidA3PbnQUHMb8jdtE08SJxL3XWn8H83e4KBZURLdw/s1600/125x125.gif"/></a>

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd351Z2jIPsFbSafTD21Tk_bTa5YOQk1VvYx6TA2C0v6sfulDQ-7_QavzhUnuujQh5IWxqnGnF5zMzOk5zEw_bN0qcLETIOg6YlTidA3PbnQUHMb8jdtE08SJxL3XWn8H83e4KBZURLdw/s1600/125x125.gif"/></a>

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd351Z2jIPsFbSafTD21Tk_bTa5YOQk1VvYx6TA2C0v6sfulDQ-7_QavzhUnuujQh5IWxqnGnF5zMzOk5zEw_bN0qcLETIOg6YlTidA3PbnQUHMb8jdtE08SJxL3XWn8H83e4KBZURLdw/s1600/125x125.gif"/></a>
</div>

Untuk jumlah iklan anda tinggal menambahkan atau mengurangi sesuai kode dibawah ini. Jangan lupa mengganti warna Merah dengan alamat URL target iklan mau diarahkan kemana, dan warna Hijau untuk alamat gambarnya.

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd351Z2jIPsFbSafTD21Tk_bTa5YOQk1VvYx6TA2C0v6sfulDQ-7_QavzhUnuujQh5IWxqnGnF5zMzOk5zEw_bN0qcLETIOg6YlTidA3PbnQUHMb8jdtE08SJxL3XWn8H83e4KBZURLdw/s1600/125x125.gif"/></a>

Semoga tutorial ini bermanfaat buat anda, jangan lupa setelah praktek !!!

GABUNG Halaman Facebook saya Kokeykhia.com ,

dengan mengklik Tombol SUKA dibawah ini
www.facebook.com/kokeykhia

Membuat Recent Post by Label Thumbnail Saja

Label: Blogger Tutorial

Kemaren saya sudah menuliskan Cara Bikin Recent Post by Label With Thumbnai.
Nah sekarang saya akan menuliskan cara membuat Membuat Recent Post by Label Thumbnail Saja tanpa tulisan.

Pada dasarnya cara membuat recent post by label dengan thumnail saja ini hampir sama dengan cara bikin recent post by label with thumnail, cuma ada sedikit pembedaan

Ok langsung saja ...
Cara Pasang Recent Post by Label With Thumbnail di Blogger
Seperti biasa langkah yang harus di lakukan adalah :

Login ke Dashboard Blogger
Klik Rancangan/Design/Tata Letak

Jika bingung gimana caranya silakan baca Panduan Cara Menghias Blog Blogger.

Jika teman sudah berada di halaman Rancangan silakan pilih widget HTML/JavaScript kemudian
masukkan script berikut:

<<style> 
/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'><b>var numposts = 6</b>;</script>
<script type="text/javascript" src="/feeds/posts/default/-/<b>NamaLabel</b>?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>;

Keterangan:

numposts = 6 (Angka 6 adalah jumlah recent post yang akan di tampilakn, silakan ganti sesuai keinginan teman)
Nama Label = Isi dengan Nama Label yang artikelnya ingin di tampilkan ( contoh blogger%20template) biasanya label yang pakai spasi di pisahkan dengan %20.

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down

Label: Blogger Tutorial

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,

Masuk ke akun blogger> Rancangan > tata letak > add gadget pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

add menu navigasi

    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;

        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0 -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='#'>Sub Halaman 1</a></li>
                    <li><a href='#'>Sub Halaman 2</a></li>
                    <li><a href='#'>Sub Halaman 3</a>
                   <ul>
                    <li><a href='#'>Sub Sub Halaman 1</a></li>
                    <li><a href='#'>Sub Sub Halaman 2</a></li>
                    <li><a href='#'>Sub Sub Halaman 3</a></li>
                  </ul>
                  </li>
                  </ul>             </li>
          </ul>
        </div>

Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE
2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru

    <ul>
                    <li><a href='#'>Sub Sub Halaman 1</a></li>
                    <li><a href='#'>Sub Sub Halaman 2</a></li>
                    <li><a href='#'>Sub Sub Halaman 3</a></li>
                  </ul>

bisa juga sobat tambahkan di item menu lainnya jika ingin.
3. Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.

Oke saya kira sudah cukup jelas dan mudah, untuk live demo silahkan buka di sini

Selamat mencoba.

Read more: http://blogbelajar2.blogspot.com/2012/04/cara-membuat-menu-navigasi-horisontal.html#ixzz1uk8ezUjU

CopyGator | Menemukan Penggemar Situs Anda

Label: Blogger Tutorial, Tips N Trik

Pernahkan Anda berselancar di dunia maya, lalu secara tidak sengaja menemukan tulisan dari suatu blog yang sangat mirip sekali dengan tulisan yang pernah Anda buat publikasikan di blog Anda sendiri? Lantas apa yang ada dalam benak Anda? Kaget, marah, senang, bangga, atau jika Anda cukup percaya diri mungkin Anda juga akan berpikir adanya kemungkinkan adanya penggemar lain di internet yang menyukai tulisan dan menyalin tulisan Anda. Kemudian Anda berusaha mencarinya ke seluruh jagat maya, proses tersebut tentunya sangat melelahkan dan memakan banyak waktu, lantas bagaimana cara yang mudah untuk menemukan penggemar rahasia Anda tersebut?

CopyGator - Menemukan Penggemar Situs Anda

Kini Anda akan merasa sangat beruntung karena dapat dipertemukan dengan penggemar Anda melalui layanan berlambang buaya yang berbau teknologi ini. CopyGator akan membantu menemukan berbagai situs, blog bahkan forum yang memajang tulisan Anda, baik secara parsial maupun keseluruhan.

Bagaimana cara kerja CopyGator? Layanan ini mengumpulkan data dari lebih dari 2 juta blog atau situs yang memiliki sindikasi RSS dan menjaring lebih dari setengah juta artikel baru setiap harinya. Server milik CopyGator kemudian memanfaatkan seluruh data yang didapat untuk kemudian memeriksa dan mengevaluasi satu postingan dengan postingan lainnya untuk menetapkan apakah ada dua postingan yang memiliki beberapa kesamaan atau memang 100% sama.

Cara penggunaannya sangat mudah, Anda tinggal memasukkan URL situs/blog yang ingin Anda lacak kontennya (tidak harus situs yang Anda miliki). Tekan “Enter” atau klik Show me, kemudian CopyGator akan menampilkan daftar situs yang memiliki konten yang sama dengan yang Anda tulis, jika tidak muncul berarti ada beberapa kemungkinan:

URL feed untuk situs Anda tidak ditemukan oleh CopyGator, maka solusinya adalah dengan memasukkan link sindikasi RSS ke situs CopyGator atau bisa juga dengan menanamkan badge CopyGator ke situs yang Anda miliki
Situs Anda atau tidak mempublikasikan konten melalui sindikasi RSS
Tidak ada yang menyalin konten dari situs Anda

Jika Anda menemukan beberapa situs yang mirip, klik link Compare untuk melihat perbandingannya secara lebih detil. CopyGator akan memperlihatkan waktu publikasi, URL postingan, alamat situs, URL feed dan menampilkan isi teks yang sama antara dua situs tersebut dan ditentukan berapa persen tingkat kesamaannya.

Cara membuat status loading blog

Label: Blogger Tutorial

Cara membuat status loading di blog / website.

Status loading keren ini akan muncul sementara blog kamu sedang memuat halaman sampai 100%, silahkan lihat contoh tampilan status loading (preload page) pada demo dibawah ini.

Demo tampilan status loading:

Memuat halaman…

Langkah-langkah membuat status loading:
1) Pasang kode javascript dibawah ini pada bagian <head> blog kamu:

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

2) Kemudian cari baris <body>, ganti baris kode tersebut dengan kode html dibawah ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

Selamat mencoba!!

cara membagi elemen gadget menjadi dua kolom

Label: Blogger Tutorial

Yak Setelah saya Share tentang bagaimana Teknik Melukis Dalam Air, kali ini saya akan share tentang tutorial Blog kepada anda yaitu bagaimana cara membagi elemen gadget menjadi dua kolom versi Kertas Kecil Kita. Mungkin sobat mempunyai template yang cocok untuk sobat tetapi kurang pas di hati sobat.

Disini akan dijelaskan trik untuk membagi gadget di blogspot menjadi dua kolom sehingga blog sobat akan terlihat lebih rame. Dengan membagi gadget menjadi dua kolom atau lebih, sobat juga bisa memanfaatkannya untuk meletakkan iklan

Langsung saja ini scrip Cara Membagi Elemen Gadget menjadi dua kolom :

Login Ke Blogger sobat
Klik Rancangan > Pilih Edit HTML dan jangan lupa download template/backup untuk jaga jaga.
Cari Kode ]]></b:skin>
Copy paste kode berikut letakkan di atas kode ]]></b:skin>

#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

Dalam tutorial ini menambahkan gadget di sidebar so cari dahulu kode sidebar misalnya seperti ini

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>

Catatan : Tidak semua template sama dan label di atas hanyalah contoh
Setelah itu kita sisipkan kode CSS yang sudah di buat tadi di antara </b:section> dan </div>

</div>

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'/>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'/>

<div style='clear: both;'/>

Save dan Lihat di Page elemen

UNIK

Translate

Cara Membuat Tabel,kotak,kolom di Blog

Cara membuat kotak iklan (Banner Box)

Membuat Recent Post by Label Thumbnail Saja

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down

CopyGator | Menemukan Penggemar Situs Anda

Cara membuat status loading blog

cara membagi elemen gadget menjadi dua kolom

Nama	Kelas	Hobby
A	6	Makan bakso
A	6	Makan bakso
A	6	Makan bakso
A	6	Makan bakso