Kamis, Juli 21, 2011

Tip Menambah Kolom pada Template Baru

Karena banyaknya pertanyaan seputar bagaimana cara menambah kolom pada blog, akhirnya saya meluangkan waktu untuk menulis artikel ini. Sebenarnya untuk menambah sebuah kolom baru bukanlah sebuah hal yang terlalu sulit, akan tetapi tetap saja perlu sedikit pengetahuan untuk melakukannya.

Pada kesempatan kali ini saya tidak akan menerangkan bagaimana cara membuat kolom dengan bantuan gambar, akan tetapi seperti biasa saya akan menggunakan template Minima yang merupakan template resmi yang di sediakan blogger yang notabene tidak menggunakan gambar.


Jika mengacu kepada standarisasi dari template blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :


  • Elemen Header

  • Elemen Outer

  • Elemen Footer


    Untuk elemen Outer di bagi kembali menjadi :

  • Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

  • Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.


    Akibat ketidak puasan dari sidebar yang hanya satu buah, maka jika kita menginginkan adanya sidebar tambahan maka kita tentu saja harus menambahnya sendiri, agar sedikit jelas maka akan saya perlihatkan kode template asli dari template minima (template baru/XML)


      
    
     
      
    
      <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    
    
    
    
    
    <data:blog.pageTitle/>
    
    
    -----------------------------------------------
    
    Blogger Template Style
    
    Name: Minima
    
    Designer: Douglas Bowman
    
    URL: www.stopdesign.com
    
    Date: 26 Feb 2004
    
    Updated by: Blogger Team
    
    ----------------------------------------------- */
    /* Variable definitions
    
      ====================
    
    
      type="color" default="#fff" value="#ffffff">
    
    
      type="color" default="#333" value="#333333">
    
    
      type="color" default="#58a" value="#5588aa">
    
    
      type="color" default="#666" value="#666666">
    
    
      type="color" default="#999" value="#999999">
    
    
      type="color" default="#c60" value="#cc6600">
    
    
      type="color" default="#ccc" value="#cccccc">
    
    
      type="color" default="#999" value="#999999">
    
    
      type="color" default="#666" value="#666666">
    
    
      type="color" default="#999" value="#999999">
    
    
      type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
    
    
      type="font"
    
      default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
    
    
      type="font"
    
      default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
    
    
      type="font"
    
      default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
    
    
      type="font"
    
      default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
    
      */
    
    
    /* Use this with templates/template-twocol.html */
    
    
    body {
    
      background:$bgcolor;
    
      margin:0;
    
      color:$textcolor;
    
      font:x-small Georgia Serif;
    
      font-size/* */:/**/small;
    
      font-size: /**/small;
    
      text-align: center;
    
      }
    
      a:link {
    
      color:$linkcolor;
    
      text-decoration:none;
    
      }
    
      a:visited {
    
      color:$visitedlinkcolor;
    
      text-decoration:none;
    
      }
    
      a:hover {
    
      color:$titlecolor;
    
      text-decoration:underline;
    
      }
    
      a img {
    
      border-width:0;
    
      }
    
    
    /* Header
    
      --------------------------------------- */
    
    
    #header-wrapper {
    
      width:660px;
    
      margin:0 auto 10px;
    
      border:1px solid $bordercolor;
    
      }
    
    
    #header-inner {
    
      background-position: center;
    
      margin-left: auto;
    
      margin-right: auto;
    
      }
    
    
    #header { 
    
      margin: 5px;
    
      border: 1px solid $bordercolor;
    
      text-align: center;
    
      color:$pagetitlecolor;
    
      }
    
    
    #header h1 {
    
      margin:5px 5px 0;
    
      padding:15px 20px .25em;
    
      line-height:1.2em;
    
      text-transform:uppercase;
    
      letter-spacing:.2em;
    
      font: $pagetitlefont;
    
      }
    
    
    #header a {
    
      color:$pagetitlecolor;
    
      text-decoration:none;
    
      }
    
    
    #header a:hover {
    
      color:$pagetitlecolor;
    
      }
    
    
    #header .description {
    
      margin:0 5px 5px;
    
      padding:0 20px 15px;
    
      max-width:700px;
    
      text-transform:uppercase;
    
      letter-spacing:.2em;
    
      line-height: 1.4em;
    
      font: $descriptionfont;
    
      color: $descriptioncolor;
    
      }
    
    
    #header img {
    
      margin-left: auto;
    
      margin-right: auto;
    
      }
    
    
    
    
    /* Outer-Wrapper
    
      ------------------------------------------ */
    
      #outer-wrapper {
    
      width: 660px;
    
      margin:0 auto;
    
      padding:10px;
    
      text-align:left;
    
      font: $bodyfont;
    
      }
    
    
    #main-wrapper {
    
      width: 410px;
    
      float: left;
    
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    
      }
    
    
    #sidebar-wrapper {
    
      width: 220px;
    
      float: right;
    
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    
      }
    
    
    
    
    /* Headings
    
      ------------------------------------------- */
    
    
    h2 {
    
      margin:1.5em 0 .75em;
    
      font:$headerfont;
    
      line-height: 1.4em;
    
      text-transform:uppercase;
    
      letter-spacing:.2em;
    
      color:$sidebarcolor;
    
      }
    
    
    
    
    /* Posts
    
      ------------------------------------------ */
    
      h2.date-header {
    
      margin:1.5em 0 .5em;
    
      }
    
    
    .post {
    
      margin:.5em 0 1.5em;
    
      border-bottom:1px dotted $bordercolor;
    
      padding-bottom:1.5em;
    
      }
    
      .post h3 {
    
      margin:.25em 0 0;
    
      padding:0 0 4px;
    
      font-size:140%;
    
      font-weight:normal;
    
      line-height:1.4em;
    
      color:$titlecolor;
    
      }
    
    
    .post h3 a, .post h3 a:visited, .post h3 strong {
    
      display:block;
    
      text-decoration:none;
    
      color:$titlecolor;
    
      font-weight:normal;
    
      }
    
    
    .post h3 strong, .post h3 a:hover {
    
      color:$textcolor;
    
      }
    
    
    .post p {
    
      margin:0 0 .75em;
    
      line-height:1.6em;
    
      }
    
    
    .post-footer {
    
      margin: .75em 0;
    
      color:$sidebarcolor;
    
      text-transform:uppercase;
    
      letter-spacing:.1em;
    
      font: $postfooterfont;
    
      line-height: 1.4em;
    
      }
    
    
    .comment-link {
    
      margin-left:.6em;
    
      }
    
      .post img {
    
      padding:4px;
    
      border:1px solid $bordercolor;
    
      }
    
      .post blockquote {
    
      margin:1em 20px;
    
      }
    
      .post blockquote p {
    
      margin:.75em 0;
    
      }
    
    
    /* Comments
    
      -------------------------------------------- */
    
      #comments h4 {
    
      margin:1em 0;
    
      font-weight: bold;
    
      line-height: 1.4em;
    
      text-transform:uppercase;
    
      letter-spacing:.2em;
    
      color: $sidebarcolor;
    
      }
    
    
    #comments-block {
    
      margin:1em 0 1.5em;
    
      line-height:1.6em;
    
      }
    
      #comments-block .comment-author {
    
      margin:.5em 0;
    
      }
    
      #comments-block .comment-body {
    
      margin:.25em 0 0;
    
      }
    
      #comments-block .comment-footer {
    
      margin:-.25em 0 2em;
    
      line-height: 1.4em;
    
      text-transform:uppercase;
    
      letter-spacing:.1em;
    
      }
    
      #comments-block .comment-body p {
    
      margin:0 0 .75em;
    
      }
    
      .deleted-comment {
    
      font-style:italic;
    
      color:gray;
    
      }
    
    
    #blog-pager-newer-link {
    
      float: left;
    
      }
    
      
    
      #blog-pager-older-link {
    
      float: right;
    
      }
    
    
    #blog-pager { 
    
      text-align: center;
    
      }
    
    
    .feed-links {
    
      clear: both;
    
      line-height: 2.5em;
    
      }
    
    
    /* Sidebar Content
    
      ------------------------------------------ */
    
      .sidebar { 
    
      color: $sidebartextcolor;
    
      line-height: 1.5em;
    
      }
    
    
    .sidebar ul {
    
      list-style:none;
    
      margin:0 0 0;
    
      padding:0 0 0;
    
      }
    
      .sidebar li {
    
      margin:0;
    
      padding:0 0 .25em 15px;
    
      text-indent:-15px;
    
      line-height:1.5em;
    
      }
    
    
    .sidebar .widget, .main .widget { 
    
      border-bottom:1px dotted $bordercolor;
    
      margin:0 0 1.5em;
    
      padding:0 0 1.5em;
    
      }
    
    
    .main .Blog { 
    
      border-bottom-width: 0;
    
      }
    
    
    
    
    /* Profile 
    
      ------------------------------------------- */
    
      .profile-img { 
    
      float: left;
    
      margin: 0 5px 5px 0;
    
      padding: 4px;
    
      border: 1px solid $bordercolor;
    
      }
    
    
    .profile-data {
    
      margin:0;
    
      text-transform:uppercase;
    
      letter-spacing:.1em;
    
      font: $postfooterfont;
    
      color: $sidebarcolor;
    
      font-weight: bold;
    
      line-height: 1.6em;
    
      }
    
    
    .profile-datablock { 
    
      margin:.5em 0 .5em;
    
      }
    
    
    .profile-textblock { 
    
      margin: 0.5em 0;
    
      line-height: 1.6em;
    
      }
    
    
    .profile-link { 
    
      font: $postfooterfont;
    
      text-transform: uppercase;
    
      letter-spacing: .1em;
    
      }
    
    
    /* Footer
    
      -------------------------------------------- */
    
      #footer {
    
      width:660px;
    
      clear:both;
    
      margin:0 auto;
    
      padding-top:15px;
    
      line-height: 1.6em;
    
      text-transform:uppercase;
    
      letter-spacing:.1em;
    
      text-align: center;
    
      }
    
    
    /** Page structure tweaks for layout editor wireframe */
    
      body#layout #header { 
    
      margin-left: 0px;
    
      margin-right: 0px;
    
      }
    
      ]]>
    
      
    
    
    
    
    
    
    
    
    
    



    Dari kode diatas, yang perlu di perhatikan adalah kode di sekitar Outer-Wrapper :


    /* Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }
    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    width: 220px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }


    Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri.

    Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh seperti ini :

    #sidebarbaru-wrapper {
    width: 180px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }


    Maka apabila di tambahkan kodenya jadi seperti ini :


    /* Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 840px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }
    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    width: 220px;
    float: right;
    padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebarbaru-wrapper {
    width: 180px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }



    Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template diatas, kode id untuk sidebar adalah seperti ini :



    Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang akan kita buat, kodenya seperti ini :



    Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli, kodenya kira-kira seperti ini :





    Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang sama untuk Outer-wrapper yaitu sebesar 840 px.


    Masih bingung? 

    Agar tidak terlalu bingung, saya ajak sobat untuk mempraktekannya langsung. Silahkan sobat buat satu blog baru sebagai percobaan (jangan pada blog yang utama), pilihlah template minima yang biasa. Sudah siapkah sobat? Ok, kita langsung meluncur ke TKP dan saya asumsikan sobat sudah mempunyai satu blog baru sebagai bahan percobaan :


  • Sign in di blogger

  • Klik menu Layout

  • Klik menu Edit HTML

  • Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.

  • Cari kode seperti di bawah ini :



  • ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :




  • Cari kode seperti di bawah ini :

  • ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :



  • cari kode seperti di bawah ini :



  • Copy paste kode berikut persis di bawah kode yang seperti di atas :




  • Cari kode seperti di bawah ini :




  • Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :




  • Cari kode seperti di bawah ini :



  • Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :



  • Klik tombol Simpan Template

  • Selesai.

    Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.

    Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, silahkan klik di sini !

    Eh kunjungi juga ya blog baruku, coba klik di sini !

    Selamat berexperimen !
  • 0 komentar:

    Posting Komentar

    Jangan lupa kasih komennya : }

    Posting Lebih Baru Posting Lama Beranda
    1. Panduan membuat Blog
    2. Cara setting blog di blogger
    3. Cara Custom Domain di Blogger / blogspot
    4. Cara Mengganti Template di blogspot
    5. Cara memposting artikel
    6. buat Read more pada template klasik
    7. Cara membuat Text Area
    8. Cara membuat menu dropDown
    9. cara Upload foto
    10. Cara membuat Link(1)
    11. Cara membuat Link(2)
    12. Cara membuat marquee (text berjalan)
    13. Cara membuat efek Refresh
    14. Kode HTML tampil pada postingan
    15. Masalah posting artikel
    16. Simbol Yahoo! Emoticons
    17. Simbol Blogger Emoticons
    18. Cara Pasang jam
    19. Cara membuat banner animasi
    20. Cara membuat buku tamu
    21. HTML Tutorial
    22. Free Download
    23. Foto animasi
    24. Cara pasang Statistik & Tracker
    25. Perlunya IE dan FireFox
    26. Cara pasang musik
    27. Logo & Button
    28. Membuat Menu D Tree (menu mirip pada windows explorer)
    29. HTML Tutorial(2)
    30. Membuat Read more pada template baru
    31. User Online status
    32. Cara membuat blogroll Alternatif
    33. Cara pasang gambar
    34. Cara membuat Icon YM
    35. cara pasang Video
    36. Daftar Mybloglog
    37. Membuat Navigasi dengan CSS
    38. Template baru VS template Klasik
    39. Membuat Penggalan Artikel
    40. Membuat Link Untuk Download
    41. Menu Dropdown dengan JavaScript
    42. Menu Dropdown dengan JavaScript (2)
    43. Cara Membuat Favicon
    44. Pasang Recent Comments
    45. Text Berjalan di Bar menu
    46. Rotating banner
    47. Cara membuat kategori (label)
    48. Read more versi baru
    49. Pasang Link di New Blogger Template
    50. Cara Pasang Feed di Blog
    51. Pasang Banner di Header Blog
    52. Membuat Banner Bertaburan
    53. Tips Menghilangkan Border Image
    54. Cara membuat Navigasi Dengan Css (2)
    55. Mengatur Perataan Posting Artikel
    56. Tips Mengganti Background Blog
    57. Pasang Image pada judul Artikel
    58. Membuat link satu halaman
    59. Photo profile berbingkai
    60. Photo profile berbingkai
    61. Gambar berbingkai
    62. Image dalam kode marquee
    63. Pasang kode tuker link
    64. Cara daftar search engine
    65. Cepat terindeks di google
    66. Pasang Kalender
    67. Hilangkan garis bawah Link
    68. Ubah Warna Link
    69. Pelacak IP Address
    70. Pasang Jadwal Sholat
    71. Mengubah lebar kolom template
    72. Daftar Google Sitemap
    73. Daftar Feedburner
    74. Pasang Snaps Shots
    75. membuat navbar
    76. pasang label cloud
    77. Membuat tulisan bergaya koran
    78. horizontal dropdown menu
    79. membuat marquee text dalam gambar
    80. Marquee dengan Javascript
    81. Siapa yang pasang link ke blog kita
    82. Kotak komentar dengan haloscan
    83. Cara membuat daftar isi blog
    84. Cara menghilangkan Subcribe to
    85. Tips menambah kolom pada template baru
    86. Setting Widget Mybloglog
    87. membuat kursor animasi
    88. Download Mini Icon
    89. Menyisipkan Mini icon pada label
    90. Lebih jauh mengenai Read more
    91. Cara menghilangkan navbar Blogger
    92. Cara membuat frame iklan
    93. Cara mengganti warna sidebar pada template minima
    94. menyisipkan Icon pada View Profile
    95. Baca feed melalui Google Reader
    96. Cara Upload data ke Google Page Creator
    97. Cara membuat ONLINE BOOKMARK
    98. mengenal perintah Iframe
    99. Cara menampilakan karakter khusus
    100. tutorial software HTML Color V.1.4
    101. Cara pasang search engine di blog
    102. Membuat sidebar ada di kiri dan kanan
    103. Tutorial software scott box shot maker
    104. Menambah emoticons di shoutbox
    105. Tips membuat multi kolom
    106. Cara membuat tabel di blog
    107. Horizontal tab menu j
    108. Horiontal tab menu 10
    109. POp up generator
    110. Backup blog secara Online
    111. Atasi error widget harus unik
    112. Backup data dalam widget
    113. Pasang fasilitas print
    114. Trik mudah membuat Read more
    115. Pasang google talk di blog
    116. Pasang feed dalam kode marquee
    117. Pasang yahoo messenger (2)
    118. Pasang google talk di blog (2)
    119. Hilangkan angka dalam label
    120. Tips Search Engine Optimization (SEO)
    121. Pasang Game di blog
    122. Free CSS menu tabs 6
    123. Setor muka via gravatar
    124. membuat gambar thumbnail
    125. Read more sejajar dengan posting
    126. Pasang tombol digg
    127. Drop down menu sama lebar
    128. Drop down menu dengan CSS
    129. membuat daftar isi (2)
    130. Pasang widget post terbaru dan komentar terbaru
    131. pasang yahoo emoticon (2)
    132. install assteg emoticon ke post editor
    133. membuat background posting berbeda-beda
    134. Pasang iklan google adsense di bawah posting
    135. Pasang iklan kliksaya.com di bawah read more
    136. cara membagi dua kolom header
    137. Install Emoticon More-smilies Cosa aranda ke Editor Posting
    138. Buat Tulisan bergaya web 2.0 secara Online
    139. Ziddu - free file hosting
    140. Tutorial navigasi : Dynamic-FX Slide-In menu
    141. Free Logo Maker
    142. Cara Membuat Favicon (2)
    143. Atasi error copy paste kode wordpress
    144. fitur-fitur baru dari Blogger.com
    145. Setting komentar di bawah posting
    146. Kotak Komentar di bawah Posting
    147. membuat efek Photo Blur
    148. Mengubah Lebar Arsip Dropdown
    149. Cara mengcopy gambar di layar monitor
    150. menyimpan widget di bawah header
    151. Cara membuat elemen Persis di bawah header
    152. Mengatur Tampilan Judul Sidebar
    153. Google Docs : pasang data excel di blog
    154. Mengatur tampilan judul posting
    155. Widget baru mybloglog
    156. fitur baru blogger
    157. Membuat warna link berkedip
    158. Cara Modifikasi Kotak Komentar
    159. Revisi: Cara Modifikasi Kotak Komentar
    160. Alternatif Warna Kotak Komentar
    161. Memilah Milah Komentar
    162. Zoom Efek Dengan Script Fancy Zoom
    163. Cara membuat Contact form / Kontak Kami
    164. Elemen Halaman Mempunyai Fungsi Scroll
    165. Tips Menghilangkan Pesan Pencarian Blogger
    166. Membuat Read more Plus Judul Artikel
    167. Membuat Sidebar Dalam Kotak-Kotak Terpisah
    168. Free Template : Magazine Template 2
    169. Tanya Jawab seputar Template magazine 2
    170. Menghilangkan Icon Obeng dan Tang / Quick edit Blogger
    171. Tanya Jawab Seputar Template Magazine 1
    172. Pasang Skrip Alert Di Blog
    173. Pasang Google Toolbar
    174. Free Icon Untuk Blog Dan Website
    175. Asyik Ngeblog Bersama Windows Live Writer
    176. Tanya Jawab Seputar Windows Live Writer (WLW)
    177. Buat Kolom Diatas Kolom Posting Pada Magazine template 2
    178. Buat Kolom Dibawah Header Pada Magazine Template 2
    179. Blog Pertama Kang Rohman
    180. Free html dan PHP Editor
    181. Apa sih Alexa Rank atau Peringkat Alexa Itu?
    182. Tutorial Pasang Widget Alexa di Blog
    183. Tips Meningkatkan Alexa Rank
    184. Apa Sih Situs Social Bookmarking Network Itu?
    185. Solusi Mengatasi Kotak Komentar Yang bermasalah
    186. Tutorial Membuat Horizontal Navigasi

    FREEDOM PALESTINE

     

    Follow Me

    bLOGGER

    Sitemeter

    Statistik

    Arsip Blog