Berbagi Pengetahuan di Internet

Cara Membuat iklan Kolom 125 x 125 bertujuan untuk menempatkan banner untuk Pengiklan terlihat rapi bila ada Pengiklan yang ingin menempatkan iklan mereka di situs Anda.

Dengan membuat iklan kolom khusus akan lebih mudah dalam menempatkan iklan banner. Anda dapat menyesuaikannya dengan menempatkan iklan banner di bawah header atau jika Anda ingin menginstal sidebar.

Pengiklan bertujuan untuk membuat banner untuk membawa keuangan tambahan atau mendapatkan lebih dari blog Anda untuk mengelola. sehingga Anda harus dapat menempatkan iklan banner yang harus menempatkan sesuai tempat pengunjung mudah.

Dalam posting ini saya akan memberikan petunjuk untuk pasang banner iklan, hal ini untuk membuat atau pasang iklan advertiser di blog sobat blogger atau mungkin sobat blogger ingin pasang iklan sobat blogger yang dimiliki di blog sobat blogger.

Saya akan menjelaskan Bagaimana Cara Membuat Kolom iklan 125 x 125 di sidebar:


@ Login ke blog Anda

@ Pilih Template

@ Klik Edit Html

@ Kemudian tambahkan kode berikut sebelum kode ]]></b:skin>
.ads { background:#ffffff;
          border:1px solid #cccccc;
          width:280px;  /*standard size*/
          float:left;
          padding-top:15px;
          margin-bottom:10px;
}

.ads img { float:left;
          margin:0;
         padding:0px 0px 10px 10px;  /*adjust if the sidebar is more  width:280px; */
}

.ads img a:hover {border:1px solid #ff0000;}
@ Selanjutnya mencari kode <div id='sidebar-wrapper'>

@ Masukkan kode banner setelah kode Pengiklan
        <div class='ads'>
<a href='#' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_695U44Elkd8/Szy1Q1azvNI/AAAAAAAAAfA/Y32lf2H0s_4/s320/125x125ad.png'/></a>
<a href='#' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_695U44Elkd8/Szy1Q1azvNI/AAAAAAAAAfA/Y32lf2H0s_4/s320/125x125ad.png'/></a>
<a href='#' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_695U44Elkd8/Szy1Q1azvNI/AAAAAAAAAfA/Y32lf2H0s_4/s320/125x125ad.png'/></a>
<a href='#' target='_blank'><img alt='' src='http://1.bp.blogspot.com/_695U44Elkd8/Szy1Q1azvNI/AAAAAAAAAfA/Y32lf2H0s_4/s320/125x125ad.png'/></a>   
            </div>
@ Hasil seperti gambar berikut


Good luck!!!!

Menambah Elemen baru pada Sidebar,untuk menambahkan widget baru yang lebih mudah jika Anda ingin menampilkan konten - konten Anda. halaman depan atau apakah Anda ingin menampilkannya pada halaman berikutnya.

Menambah Elemen bisa Anda tambahkan mana Anda suka, misalnya di header, sidebar, footer atau elemen - elemen seperti bawah dan kredit tambahan.

Menambah Elemen Baru di Sidebar adalah untuk memudahkan anda dalam pengeditan kode CSS dalam template Anda. Selain elemen Sidebar digunakan adalah yang paling penting dalam template blog Anda (biasanya).

Dalam posting ini saya akan menjelaskan cara Menambah Elemen baru pada Sidebar, jika Anda ingin  Menambah Elemen Baru di bagian mana saja pada dasarnya sama seperti pada menambah elemen - emelen yang lainnya

Membuat dan mulai mengedit Elemen baru di Sidebar caranya cukup mudah, sobat blogger hanya cukup mengikuti cara - cara berikut.

@ Pertama Anda login ke blog Anda:

@ Pilih Template

@ Klik Edit Html

@ Download Template Lengkap dan Klik Expand Template Widget

@ Kemudian cari]]> </ b: skin> tambahkan kode di bawah kode di atasnya
#sidebar-top {
           float:right;
           margin:0;
           padding:0px;
           width:352px;
           display:inline;
}

.sidebar-top {
            line-height: 1.5em;
}

.sidebar-top .widget {
            float:left;
            width: 332px;
            margin:0;
            padding: 0px 10px 0px 10px;
}

#sidebar-top .widget-content {
            padding:0px 10px;
            background:#ffffff;
            color: #000000;
}

.sidebar-top a, .sidebar a:visited { 
            color:#333333;
            text-decoration:none;
            font:normal 13px Times New Roman;
}

.sidebar-top a:hover {
           text-decoration:none;
           background-color:
           #333333;color:#ffffff;
 }

.sidebar-top h2 {
            background:#333333;
            color: #ffffff;
            text-transform: capitalize;
            height: 26px;
            font-size: 16px; 
            font-family: Arial;
            margin: 0;
            padding: 10px 0px 0px 20px;
            border-bottom:1px solid #eeeeee;
 }
@ Kemudian pencarian <div id='sidebar-wrapper'>

@ Tambahkan kode - kode berikut dibawahnya
<div id='sidebar-top'>
<b:section class='sidebar-top' id='sidebar-top' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Perkenalkan Disini!!!' type='HTML'/>
</b:section>
</div>
@ Simpan template.

@ Menambahkan hasil dari Elemen Baru di Sidebar adalah seperti gambar di bawah ini


@ Good luck!!!!

Border Style CSS buat Template terdiri dari beberapa macam border yang bisa anda gunakan, dalam mendesign template anda agar tampak profesional. diantara macam - macam Border Style CSS yang sering digunakan didalam menghias template. diantaranya:


border dashed = penulisannya border: 5px dashed

border solid = penulisannya border: 5px solid

border dotted = penulisannya border: 5px dotted

border double = penulisannya border: 5px double

border groove = penulisannya border: 5px groov

border ridge = penulisannya border: 5px ridge

border inset = penulisannya border: 5px inset

border outset = penulisannya border: 5px outset

artikel sebelumnya tentang border
Selamat mencoba!!!

Berawal dari sebuah kerutinan  menjadikan saya untuk selalu mengunjungi blog - blog bloggers, dari mulai wordpress, blogspot dan blogspot lagi, hehe....!!. Dari kerutinan tersebut muncul niat saya untuk Membuat blogspot menjadi wordpress, tetapi setelah dipikir bulak-balik ternyata tidak akan pernah mungkin. dan berniat lagi membuat wordpress menjadi blogspot tidakmungkin juga. terakhir berpikir gimana kalo dua blog antara Wordpress dan blogspot disatukan malahan bisa pecah ni kepala ngawur....wakakaaaaaaa

Mulai serius ni begini ceritanya :
Wordpress secara default sudah sudah menghubungkan dengan situs snap ketika pertama kali anda mendaftar / membuat blog di Tuan wordpress. Yakni fasilitas snap sudah disetting otomatis yang langsung dihubungkan ke themes default yang disediakan disana.

Fasilitas snap ini adalah buat memberikan Screenshot digital yang menampilkan halaman depan link yang masuk ke blog anda (sebagai monitor). atau juga anda tidak perlu menampilkan gambar pada potingan anda , karena dengan menggunakan fasilitas snap gambar tersebut, sudah bisa tampil di demo digitalnya snap.

demo blog saya disini

Nah yang saya maksudkan adalah Fasilitas snap tesebut bisa digunakan di blogspot dengan cara:

Buka halaman snap.com

Disana ada tiga pilihan
  1. Publishers / bloggers
  2. Advertisers
  3. End Users
Penjelasannya bisa anda terjemahan di halaman depan situs tersebut,

Klik pada bagian no 1 bloggers, jika ingin di pasang di blog anda / End Users hanya pada komputer anda sendiri.

Kemudian setting warna snap yang akan anda tampilkan


Pengisian pendaftaran seperti biasa, (centangkan tanda dibawah gambar )

Pada halaman selanjutnya copy text/javascript dan tambahkan diblog anda sebelum </ BODY>

Selamat mencoba

Membuat Kode Warna Secara Online adalah cara yang cukup mudah bahkan bisa dikatakan sangat  mudah buat anda yang membutuhkan kode - kode warna disaat Modifikasi template , (sekalipun belum mengetahuinya),

Situs Kode Warna Online ini salah satu situs yang biasa saya gunakan. mungkin diantaranya anda juga. kebetulan situs tersebut mampu menghasilkan berbagai warna hingga mencapai 4000 ribu macam warna lebih.

Dengan Situs tersebut anda  tidak perlu membebani komputer anda dengan software warna yang barangkali terdapat virus yang dapat membuat loading pada komputer anda.

Nah buat anda yang rajin ngutak ngatik template atau para pakar - pakar design template sendiri, langsung saja hiasi templatenya dengan 4000 warna sekaligus, hehe.....!!!

Screenshot nya dibawah ini:   ficml.org


Cara mengambil kodenya;
Anda hanya mendekatkan kursor pada bagian no 1 atau 2, secara otomatis bagian nomor 4 anda jadikan sebagai monitor warna yang akan anda ambil.
kemudian klik pada bagian no 1 atau 2, kode hasil warna yang anda ambil adalah pada bagian no 3 beserta warnanya, oh iya pada bagian no 3 (sampai 7 warna), ketika anda mengklik yang ke 8 maka warna yang pertama akan anda gantikan dengan warna terakhir yang anda klik.
Situs - situs warna online lainnya yang bisa anda coba:
  1. Color Schemer
  2. COLORlovers
  3. Color-Palette-Generator
  4. Colr
  5. Dynakewb
  6. Metacolor
  7. Returnofdesign
Selamat mencoba

Pasang Emoticon yahoo di atas kotak komentar, sebenarnya postingan tentang pasang emoticon ini sudah terdapat banyak diantara postingan - postingan bloggers yang lainnya, sekedar mengisi waktu luang  serta belumnya menemukannya bahan artikel yang bermutu, maka dari itu.......hehe...

Buat anda yang belum mengetahui apa, bagaimana dan apakah
fungsi daripada Pasang Emoticon yahoo di atas kotak komentar. Oke langsung saja ke topik pemasangannya ya:

Oh iya  lupa sumber materi ini diambil dari Template Blogger-template-elegant-style miliknya  O-om, atau anda bisa membuatnya langsung situs pemiliknya di Pasang Emoticon di kotak komentar

"Buat mempersingkat waktu caranya seperti berikut:"

@ Login ke blogger dengan account anda

@ Kemudian Pilih Tata Letak / Rancangan

@ Klik Edit Html

@ Beri tanda cek pada Expand Template Widget

@ Kemudian Masukan script berikut diatas </body>
<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>
@ Selanjutnya cari  <p class='comment-footer'>, tambahkan kode - kode icon berikut di bawahnya:
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
@ Klik Simpan Template

NB:
Anda bisa menambahkan style / kolom pada Emoticon  tersebut dengan cara: tambahkan <div style='width: 100%; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'> sebelum <b> dan </div> sesudah </b>

Selamat mencoba!!!!

Masih menyinggung tentang postingan sebelumnya tentang cara membuat Menu Vertikal dengan menggunakan Jquery accordion, kenapa saya mengaitkannya dengan postingan »»Jquery accordion Menu Vertikal»»???.karena pada postingan ini masih sama fungsinya dengan postingan tersebut.

Perbedaannya pada postingan ini tentang Cara Membuat List Menu Vertikal menggunakan CSS. Intinya menu - menu yang biasa melintang horizontal diatas bisa anda susun secara vertikal di sidebar anda,

Pembuatan menu vertikal ini murni dengan CSS saja, dengan begitu menu - menu yang akan dibuat tidak akan membuat blog anda menjadi berat:

Buat anda yang ingin mencobanya, caranya:

»»»» Login ke blogger.com

»»»» Pilih Tata letak

»»»» Klik Edit Html

»»»» Kemudian cari ]]></b:skin>, letakan kode - kode berikut diatasnya:
#accordion ul {
        list-style:none;
        width:332px;
        margin:0;
        padding:0;
        display:none;  
    }

#accordion li {
       list-style:none;
    }

#accordion li a,  #accordion li a:visited {
       background:#666666;
       color: #FFFFFF;
       border-bottom: 1px solid #FFFFFF;
       display: block;
       text-transform: capitalize;
       margin: 0;   
       padding: 5px 0px 8px 10px;
       font: normal 13px Georgia, Times New Roman;
    }
      
#accordion li a:hover, #accordion li a:active {
      color: #000000;
      background:#ffffff;
      margin: 0;
      padding: 5px 0px 8px 10px;
      text-decoration: none;
    }
»»»» Simpan template

»»»» Klik Element Halaman

»»»» Tambah gadget, klik (HTML/JavaScript), kemudian masukan kode berikut:
<ul id="accordion">

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>  
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
  
</ul>
»»»» Simpan Gadget

»»»» Selamat mencoba!!!!

Pasang Twitter Widget Pada Blog buat memonitori Link postingan anda yang sudah terupdate di Halaman Depan Twitter Anda.

Kelebihan anda Pasang Twitter Widget pada blog tersebut, anda juga bisa memonitori link postingan pengunjung yang dikirimkan ke Twitter anda.(sekaligus anda dapat membalasnya)

Buat anda yang ingin memasangnya, silahkan anda:

@ Login acoount Twitter http://twitter.com/

@ Kemudian buka halaman  http://twitter.com/goodies/widgets

@ Klik My Website

@ Klik Profile Widget, "Ubah pada Customize Your Profile Widget seperti gambar berikut:"


 @ Klik tombol Finish & Grab Code

@ Terakhir Klik Add to Blogger

@ Widget Twitter Sudah muncul di blog anda

@ Selamat mencoba

Satu pengenalan terbaru tentang Jquery yang tidak kalah handalnya untuk membuat blog anda tampak propesional.

Jquery kali ini adalah untuk menggerakan menu - menu  vertikal versi halus yang bisa anda tambahkan di sedebar anda.

Jquery versi accordion menu vertikal mempunyai fungsi buat menyembunyikan
link - link anda sebelum menu utama anda buka (menu yang terdapat di bagian ul akan terlihat setelah menu li anda klik)

Demonya bisa anda lihat disini

Tutorial asli disini

Cara memasangnya cukup mudah hanya dalam pengeditannya cukup mudah juga , hehe....

Buat sobat yang berminat mencobanya, silahkan anda:

@ Logi ke blog anda

@ Pilih Template

@ Klik Edit Html

@ Cari ]]></b:skin> tambahkan kode - kode berikut sebelum kode tersebut
/* First Level UL List */
#accordion {
    margin:0;
    padding:0;   
    list-style:none;
}
   
    #accordion li {
        width:267px;
    }
   
    #accordion li a {
        display: block;
        width: 268px;
        height: 43px;   
        text-indent:-999em;
        outline:none;
    }
       
    /* Using CSS Sprite for menu item */
    #accordion li a.popular {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 0;   
    }

    #accordion li a.popular:hover, .popularOver {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px 0 !important;   
    }
       
    #accordion li a.category {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 -43px;   
    }

    #accordion li a.category:hover, .categoryOver {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px -43px !important;   
    }
       
    #accordion li a.comment {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 -86px;   
    }

    #accordion li a.comment:hover, .commentOver {
        background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px -86px !important;   
    }
       
       
    /* Second Level UL List*/
    #accordion ul {
        background:url(http://www.queness.com/resources/html/accordion/bg.gif) repeat-y 0 0;
        width:268px;
        margin:0;
        padding:0;
        display:none;   
    }
       
        #accordion ul li {
            height:30px;
        }
           
        /* styling of submenu item */
        #accordion ul li a {
            width:240px;
            height:25px;
            margin-left:15px;
            padding-top:5px;
            border-bottom: 1px dotted #777;
            text-indent:0;
            color:#ccc;
            text-decoration:none;
        }

        /* remove border bottom of the last item */
        #accordion ul li a.last {
            border-bottom: none;
        }   
@ Kemudian cari  </head> , Tambahkan Script berikut di bawah kode tersebut
<script type='text/javascript'>

$(document).ready(function () {
       
    $(&#39;#accordion li&#39;).click(function () {

        /* FIRST SECTION */

        //slideup or hide all the Submenu
        $(&#39;#accordion li&#39;).children(&#39;ul&#39;).slideUp(&#39;fast&#39;);   
           
        //remove all the &quot;Over&quot; class, so that the arrow reset to default
        $(&#39;#accordion li &gt; a&#39;).each(function () {
            if ($(this).attr(&#39;rel&#39;)!=&#39;&#39;) {
                $(this).removeClass($(this).attr(&#39;rel&#39;) + &#39;Over&#39;);   
            }
        });
           
        /* SECOND SECTION */   
           
        //show the selected submenu
        $(this).children(&#39;ul&#39;).slideDown(&#39;fast&#39;);
           
        //add &quot;Over&quot; class, so that the arrow pointing down
        $(this).children(&#39;a&#39;).addClass($(this).children(&#39;li a&#39;).attr(&#39;rel&#39;) + &#39;Over&#39;);           

        return false;
    });
   
});


</script>
@ Simpan Template

@ Selanjutnya klik Elemen Halaman

@ Tambah gadget (HTML/JavaScript), masukan kode berikut:
<ul id="accordion">
    <li>
        <a href="#" class="popular" rel="popular">Popular Post</a>
        <ul>
            <li><a href="#">Popular Post 1</a></li>
            <li><a href="#">Popular Post 2</a></li>
            <li><a href="#" class="last">Popular Post 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="category" rel="category">Category</a>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
            <li><a href="#" class="last">Category 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="comment" rel="comment">Recent Comment</a>
        <ul>
            <li><a href="#">Comment 1</a></li>
            <li><a href="#">Comment 2</a></li>
            <li><a href="#" class="last">Comment 3</a></li>
        </ul>
    </li>
</ul>
@ Simpan gadget

@ Selamat mencoba!!!!

Sesuai namanya Convert Image tersebut merupakan Software yang dapat anda gunakan untuk memperkecil ukuran size file gambar.

Convert Image 1.983 dapat meng-Converter file dari atau ke file JPG, GIF, TIF, BMP, EMF, PNG, PCX, TGA, WMF, RAS, J2K. (3,9MB)

Convert Image sangat diperlukan buat anda didalam menjalankan blog, Khususnya bagi anda yang banyak menggunakan gambar / image pada templatenya.


Fungsi dari Convert Image tsb adalah sebagai alat untuk memberikan sedikit kecepatan pada blog anda, akurat dan mudah digunakan.

Download link : Download Now

Anda dapat menggunakan software dengan gratis & gambar dibawah ini setelah menginstalnya:

Pengunduhan software tersebut dalam file exe ( abaikan saja jika dalam penginstalan ada pembertahuan mengandung virus "tidak berbahaya")

Selamat mencoba!!!

Mengganti template Tanpa menghapus Widget ini diperuntukan buat sobat - sobat yang suka gunta - ganti template dan kehilangan widget saat pengeditannya!!.

Kehilangan widget ini dialami oleh seorang sahabat ketika mengganti templatenya, nah hal pertama buat anda yang ingin mengganti templatenya adalah :

@ Login ke blog "PERCOBAAN"

@ Pilih Template

@ Klik edit html

@ Unggah template anda yang akan digunakan

@ Simpan template.

@ Klik Elemen halaman

@ Delete semua widget */mencegah nomor yang sama pada widget*/

@ Simpan perubahan.

@ Kemudian kembali lagi klik Edit Htlm

@ Klik Download Template Lengkap */ yang sudah anda rubah*/

 */...........................................................................................................................*/

Hal penting dalam keamanan template anda adalah pada bagian ini: */ WASPADALAH*/

@ Klik Edit Html pada template blog anda */yang akan diganti*/

@ Download kembali Template Anda (cadangan)

@ Beri tanda cek pada ""

@ COPAS semua kode - kode template anda ke WordPad 1  */Tidak ke Notepad bisa selain Notepad*/

@ Langkah berikutnya buka kembali template pengganti pada WordPad 2 */yang sudah anda Download diatas*/

@ Cari pada bagian sedebar seperti kode berikut (Ctrl + F)
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:includable>
</div>
@ Kemidian buka kode - kode template anda pada WordPad 1

@ Kode - kode yang dipindahkan dimulai dari kode seperti
<b:widget id='HTML2' locked='false' title='Stats' type='HTML'>
....................................
</b:widget>*/akhir widget*/
@ Pindahkan ke bagian sidebar WordPad 2
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
*/SEMENTARA DIPINDAHKAN DI BAGIAN INI*/
</b:includable>
</div>
@ Jika satu widget sudah dipindahkan (Klik enter) buat spasi widget yang berikutnya

@ Pindahkan kembali widget - widget anda  seperti langkah diatas hingga semua widget sudah dipindahkan setelah spasi enter, Simpan WordPad 2(Ctrl + s)

 */...........................................................................................................................*/

@ Kembali lagi ke Edit Html

@ Klik browsse,,, masukan WordPad 2

@ Unggah template

@ Selesai

NB
Jika dalam pengditan muncul pmberitahuan "WIDGWT AKAN DIHAPUS & KONFIRMASI" klik batalkan, edit kembali pada WordPad 2 */ widget ada yang tidak dipindahkan*/

WordPad 1 = Kode- kode template Yang akan diganti

WordPad 2 = Kode- kode template pengganti

Pemindahan letak widget pada halaman emelen
@ Selamat Mencoba!!!!

Membuat Menu Docking dengan jquery
Menu Docking adalah menu tiga dimensi yang sepenuhnya digerakan  jquery, Menu Docking tersebut banyak digunakan di website - website profesional tidak terkecuali blogspot.

Menu Docking diatas bahkan terdapat pula pada software-nya untuk bisa digunakan di PC / komputer anda. (link software doc pada postingan selanjutnya)

Jika anda ingin Membuat Menu Docking dengan jquery ini ke blogspot anda, sebelumnya anda bisa lihat dulu demonya disini

@ Kemudian Login ke blog anda

@ Pilih tata letak

@ Elemen halaman

@ Tambah gadget "JavaScript"

@ Masukan jquery dibawah beserta stylenya:
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/jquery1.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/interface.js"></script>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 90,
proximity: 90,
halign : 'center'
}
)
}
);

</script>

<style type="text/css">
.dock {
position: relative;
height: 50px;
padding-left:0px;
margin-top:0px;

}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;

}
a.dock-item {
display: block;
width: 60px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: 14px Arial, Helvetica, sans-serif;
}

.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

.dock-item span {
display: block;
padding-left: 20px;
}
</style>

<div style="display: block;" class="dock" id="dock">
<div style="left: -7.48972px; width: 814.979px;" class="dock-container">

<a style="width: 90px; left: 0px;" class="dock-item" href="link 1"><img src="http://i342.photobucket.com/albums/o433/bkprobk/home.png" alt="home"><span style="display:block;">Home page</span></a>

<a style="width: 90px; left: 90px;" class="dock-item" href="link 2"><img src="http://i342.photobucket.com/albums/o433/bkprobk/about.png" alt="Gi�i thi�u"><span style="display:block;">Introduce</span></a>

<a style="width: 90px; left: 180px;" class="dock-item" href="link 3"><img src="http://i342.photobucket.com/albums/o433/bkprobk/dichvu.png" alt="D�ch vụ"><span>Service</span></a>

<a style="width: 90px; left: 270px;" class="dock-item" href="link 4"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/sanpham.png" alt="Site ���£ thiết kế">Customer</a>

<a style="width: 90px; left: 360px;" class="dock-item" href="link 5"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/template.png" alt="Template"><span style="display: block;">Template</span></a>

<a style="width: 90px; left: 450px;" class="dock-item" href="link 6"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/history.png" alt="history"><span style="display:block;">Advisor</span></a>

<a style="width: 134.979px; left: 540px;" class="dock-item" href="link 7"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/doitac.png" alt="calendar"><span style="display:block;">Partners</span></a>

<a style="width: 140px; left: 674.979px;" class="dock-item" href="link 8"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/email.png" alt="rss"><span style="display:block;">Contact</span></a>

</div>
</div>
@ Simpan Gadget

@ Selamat berdimensi

Cara Menambahkan Icon Pada Sidebar atau menurut bahasa Html (list style image), mengenai penambahan list style image ini tidak hanya
icon yang bisa ditambahkan tetapi anda juga bisa menambahkan border, background, color dll.

Karena judul postingan diatas Cara Menambahkan Icon Pada Sidebar maka yang harus anda siapkan sebelum praktek tentunya icon yang akan ditambahkan (URL image) hehe...

Setelah proses upload anda selesai, atau yang belum tahu cara uploade image bisa di Photobucket Upload

@ Langkah selanjutnya;

@ Login ke blog anda

@ Di Dashboard Pilih Template

@ Klik Edit HTML


@ Kemudian cari kode (sidebar) seperti;
#sidebar {
            float: right;
            margin: 0px 0px 10px 0px;
            padding: 0px;
            width:273px;
            line-height:1em;
            word-wrap: break-word;
            overflow: hidden;
            font-size:12px;
            text-align:left;
}
@ Selanjutnya tambahkan
#sidebar li {
           list-style-image: url('http://i33.tinypic.com/et70qe.jpg');
           margin-left:15px;
           padding:3px 0;
           line-height:normal;
}
@ Ganti url icon yang berwarna biru + anda bisa menyesuaikan margin dan padding pada sidebar li yang bercetak tebal.

@ Simpan template anda.


@ Terakhir anda tambahkan
<li>Link anda</li>
@ contoh
<li><a href="http://amuysblog-berbagi.blogspot.com/">blog buat bloggers</a></li>
@ Selamat mencoba

Buat tulisan Selamat datang dengan JavaScript pada postingan ini adalah postingan awal tentang JavaScript.

JavaScript atau Script adalah kode - kode yang digunakan dalam pemograman untuk menjalankan animasi - animasi biasa, style CSS maupun 3 dimensi.

Terdapat banyak fungsi JavaScript untuk membuat blog/website anda lebih menarik dan profesional (maaf menarik dan profesional tidak terdapat di blog ini) hehe...

Contoh Tulisan Selamat datang dengan JavaScript

-->-->

Script yang digunakan
<script language="JavaScript">
<!-- begin
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
"Selamat datang di blog buat bloggers" // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_"; if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",50);
}
// end -->
</script>
<script language="JavaScript">
<!--
document.write("<FORM NAME=\"tickform\">");
document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"30\">"); // Bei SIZE können Sie die Grö�e des Feldes ändern
document.write("</FORM>");
textticker();
//-->
</script>
@ Kalimat "Selamat datang di blog buat bloggers" ubah sesuai kenginan anda

@ Sudah tau cara pasangnya belum??hehe...

@ Jika anda yang belum mengetahuinya silahkan anda:

@ Login ke blog anda

@ Pilih Tata Letak (Elemen Halaman)

@ Tambah Gadget

@ Klik JavaScript

@ Masukan scipt diatas

@ Simpan gadget

NB; Semua animasi yang digerakan JavaScript akan bekerja setelah proses loading