Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Semua Post Berkategori Kolom
Tampilkan postingan dengan label Kolom. Tampilkan semua postingan
Tampilkan postingan dengan label Kolom. Tampilkan semua postingan

Membuat Widget 3 Kolom Dibawah Header

image Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

 

Baiklah langsung menuju lokasi pengeditan template-nya.

  •  Silahkan login ke blogger.
  • Tuju Tata Letak.
  • Pilih tab Edit HML.
  • Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin>

    /* �- Top --*/

    #top {

    background:#fff;

    margin-top:10px auto;

    width:960px;

    overflow:hidden;

    font-size:12px;

    padding:10px;

    }

     

    #top h2 {

    background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

    font-size:14pt;

    font-weight:400;

    text-align:center;

    font-style:normal;

    line-height:1.3em;

    color:#fff;

    padding:5px;

    margin-top:-10px;

    margin-left:-10px;

    margin-right:-10px;

    }


    #top ul {

    color:#333;

    margin:0;

    padding:0;

    }


    #top ul li {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB81sBvVAdHnOHgRRY7wY0_Go-BsBkq1UInN3licESSNepxDVf10XygR83BbLM1bY0f7bjZ19xlmhVhwlKhfMNKlUsQWx203uvYi4aN5oGvQrT8W3smySDj3iRtJI7K6era-9vVrLVhAHV/s320/b3.gif) no-repeat;

    list-style-type:none;

    border-bottom:1px dashed #CCC;

    margin:0 0 10px;

    padding:0 0 5px 20px;

    }

     

    #top ul li a:hover {

    margin:0px 0px 5px;

    padding:0px;

    }


    #topcenter {

    width:300px;

    float:left;

    margin-left:10px;

    background:#fff;

    padding:10px

    }


    #topleft {

    width:280px;

    float:left;

    margin-left:10px;

    background:#fff;

    padding:10px;

    }


    #topright {

    width:280px;

    float:right;

    margin-left:10px;

    background:#fff;

    padding:10px;

    }

     

  • Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
    </b:section>

    </div>

  • Kemudian letakkan kode berikut ini tepat setelah kode diatas :

    <div id='top'>
    <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
    </b:section>
    </div>

  • Simpan Template.

 

Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.

Write a comment √ Read More... »

Cara Membuat Multi Kolom

kolom Tutorial kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom � kolom ini.

 

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus � putus dibawah tulisan dan icon cantik yang mengawali tulisan.

 

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

 

  1. Seperti biasa login dulu ke blogger.

     

  2. Klik Tata Letak.

     

  3. Pilih Edit HTML dan centang Expand Template Widget. 

     

  4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> :

     

    #bottom {
    width: 990px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#000;
    float: center;
    background:transparent;
    padding: 15px 0 15px 0; }

     

    #bottom h2 {
    padding-left: 5px;
    margin: 0 0 10px 0;
    background:#0B3B0B;
    color:#fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid #000; }

     

    #bottom ul{padding:0; margin:0; color:#333}

     

    #bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

     

    #bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

     
    #bottom ul li a:hover {
    background: #B1ACB1;}

     

    #left-bottom { /* kolom kiri */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;     }

     

    #center-bottom { /* kolom tengah */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;     }

     

    #right-bottom { /* kolom kanan */
    background:#ffffff; width: 300px;
    float: left;
    margin: 0 5px 0 10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px    }

     

  5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :

     

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

     

  6. Copas kode berikut ini tepat sebelum kode diatas :

     

    <div id='bottom'>

    <b:section class='bottom' id='left-bottom'/>

    <b:section class='bottom' id='center-bottom'/>

    <b:section class='bottom' id='right-bottom'/>

    </div>

     

  7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

 

Keterangan :

  • #bottom { width: 990px

     

    --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

     

  • background:#0B3B0B

     

    --> latar belakang (background kolom).

     

  • color:#fff

     

    --> warna tulisan judul

     

  • #left-bottom { /* kolom kiri */ width: 300px

     

    --> lebar kolom kiri.

     

  • -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;

     

    --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode �moz-border-radius tersebut.

     

  • Border-top: 2px solid #1B2A0A
    Border-bottom: 2px solid #1B2A0A
    Border-left: 2px solid #1B2A0A
    Border-right: 2px solid #1B2A0A

     

    --> untuk ketebalan garis pinggir masing � masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini. 

     

  • Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkKyhnQvyY27jTU4wkEDKvMD7-II2Z41qzlo18IQ_UAL7ubByrVuRKW0ay1fjPi7IjO999JyH3o_vkeIfUXxI-0FT1cR-N_XJ8RC9f1qIEwAxmXjeljhpmvf2ZffoKHNq_MsIYZPjTPxB/s320/z3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMqeFhEUHY-M3Gib8_BYI1jK4SqJBKvFWTaLDA0NVSZqCh3icaBDFMD7B9VlI4Yyjju0PUs_Qpoardos4BFA0GP_OVwam_lAwGSKCYmqBWETuZBkdJ70rkr96PfUyhpArdVEwTue7aY0B/s320/z2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75S3TuTuyu-Gk5QFE_PM-Z59DwVsf0hkOJHvFVMWwDl0F4MQGo9Pv6iQf2kUWGJ7EQ-qZqsF7NpCXo4xYSUCo8XYbUHp4RAyaDI3X-iK9yej3EUfm42EsQk0vVaOAxRt2M0vUB1BYD22V/s320/z1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4knts7a02t_13sPIlZ_J9HK42d27zsbtolQLbfEgLlnV-i1zU7Y-7vHgfX7mEO3f0t-DImFIFmT4kyKyxsnnZ8u8WTK6ucXEIRVgD2ZiW1qYyrEw8c4IR4dfG1EDK4TKxUXRlSAgdbLCB/s320/d1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4a1ALHjFYEw5IBFr-_QJOf5AvJPC6EUhpl8HvxVsAIGE2WiwsiKRxWDPsrfGx5SCVVFIfrdQ-LSmEEPc8anJTQmlyv-kjorRiq15Qlo8lb20vxoCRfEhX6y-IBvbJSFbj7kID462oh7h1/s320/d2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsb4xbm17Ymya2XpGBVZ19KshCBQpKMsEzSgukGnEi8g5o3wlMO1BKXx_JJibPwr7ODqnvjDTEYv-NWtAqKeuMBZNmu6qDvjx1qCLNGsESHL4Q8-2u5LPZwdJ1ZynQeUx9WtVoakvCAIx/s320/c1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcIDYxe372T3PIWrIohUCQ31xmqkKYxGpIsFUuqqex6cRERAj06sYRQBFflowIlgjZnOcX0a6978R0QYH7x8D1MIcxsaCI0paeaQ67ZLsxzZKRGs2y2XjXcb-F3B4dO1ZyfA3ubWUv7Kf/s320/c2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAxhCPjZyQJSpqqdswbtu7npsn_CusI3PxOHLmYRp-qy2vcsyVyfgBTQTXyLrxxYqHwIDRlRPo07WY-V2IVbp6pPw0imxl1oTVNcKD2X94Ei30sY3mMLK9DbFd8XdcJzt4f6xFalvMQRb/s320/c3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2y0zUPaBViKsnR8fCtJPSOL1JUkDFwjJdmzzmTZcG2wrJHRiL4p3g7nYiVw09WnebsZDJQm7g23sPJdpoa3WFNnL_5u4UGtNxvfIUyIu9n6dtxDVnikV-j0uIqWg27k034aZoPlqimRj/s320/a1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_6Gb0QSOQCZJDuZipOwpzWXg3F-SCPia5wzpni9k9kee2i4PPIIaq7_Hr37C8epcJZMGoK9UWuh7BPMFSerZGBjM9pkaTDh68wB-n1bSs4D0-_29fxlcvG9UXBbxFnp4IQjScqrehhg6/s320/a2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4QSonusp3jDoRrIWmh8u1uP2Pkk2nchCp1MGtpTYU49XS9q9HjUu5rQVpxixtExiYKTP89MnhfKpeweh67clXmJdM3Ol4nB67_YylB8uzSAZcUawNVXglgstAHu-Yom-OKssBDs86nZ6/s320/a3.gif

 

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat. Lihat contoh yang sudah jadi disini.

Selamat berkreasi !smile_wink
Write a comment √ Read More... »
Garis Melengkung Pada Kolom

Garis Melengkung Pada Kolom

Seperti janji saya pada pembahasan sebelumnya tentang membuat kotak postingan terpisah dan kebetulan ada pertanyaan dari salah seorang sobat yang bernama sadulur yang berkomentar pada tgl 19 mei lalu, isinya kira-kira seperti ini "makasih berbagi ilmu, ...kawan, tapi bagaimana cara membuat postingan garis melengkung pada sudut kolom agar tidak terlihat kaku". Thanks buat mas sadulur yang telah menanyakan hal ini.

Perhatikan kolom postingan blog milik saya, tampak kolom postingan terpisah-pisah dan membentuk garis lengkung pada sudut-sudutnya, bagus kan..
Tertarik dengan pembahasan ini ?? sipp..mari kita lanjutkan

  1. Login ke Blogger dengan ID blogger sobat tentunya.

  2. Klik Tata Letak

  3. Klik Edit HTML

  4. Cari kode h2.date-header {

  5. Copy kode berikut tepat setelah kode diatas


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:3px solid #0080FF;
    border-bottom:0px solid #0080FF;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;


  6. Cari kode .post-body {

  7. Kemudian copy dan letakkan kode berikut ini setelah kode tersebut.


    border-right:3px solid #0080FF;
    border-left:3px solid #0080FF;


  8. lalu cari kode .post-footer { dan letakkan kode berikut dibawah kode tersebut.


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:0px solid #0080FF;
    border-bottom:3px solid #0080FF;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;


  9. Oke, sudah selesai..Simpan Template sobat.

Untuk kode yang saya tandai dengan warna merah adalah kode untuk warna border, sobat bisa menggantinya sesuai dengan keinginan sobat. Untuk kode warna-warna, sobat bisa melihatnya disini. Selamat mencoba !
Write a comment √ Read More... »
Kotak Postingan Terpisah

Kotak Postingan Terpisah

Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :
  1. Silahkan login dahulu ke Blogger dengan ID sobat tentunya.

  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

  4. Setelah itu cari kode yang seperti ini

    .post {


  5. Kemudian tambahkan kode berikut ini tepat setelah kode tersebut


    Padding:15px; /* Jarak text post dengan garis pinggir */

    Border-top: 2px solid #000000; /* warna garis pinggir atas */

    Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

    Border-left: 2px solid #000000; /* warna garis pinggir kiri */

    Border-right: 2px solid #000000; /* warna garis pinggir kanan */

    Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */



  6. Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!
Write a comment √ Read More... »