Feature news

Tampilkan postingan dengan label modif blog. Tampilkan semua postingan

Cara Membagi Postingan Blog Menjadi Dua Kolom



Saat kita menjalankan aktifitas blogging terutama bagian menulis, kita kadang merasa bosan dengan tampilan tulisan kita yang hanya begitu-begitu saja. Tampilannya hanya satu kolom dan tidak ada sesuatu hal yang rasanya membuat “greget” bagi mata untuk memandang. Karena itu, pasti suatu waktu pernah terlintas di benak kita untuk memodifikasi tampilan tulisan tersebut agar tampil lebih attraktif dan menarik untuk dibaca bukan? Kita ingin sedikit memodifikasi tampilan postingan tersebut agar tampil agak begini, begitu, dsb.


Nah, kali ini kita akan membahas tentang bagaimana cara membagi postingan blog menjadi dua kolom atau bagian. Dengan begitu, postingan kita akan tampil sedikit lebih menarik karena beda dari biasanya. Hal ini juga diperlukan kalau kita membutuhkan sebuah tulisan yang memiliki tampilan dua kolom untuk lebih mendukung sasaran dari penulisan tersebut. Misalnya tulisan tentang perbandingan dua hal yang berbeda, paparan tentang dua kesamaan hal yang sebelumnya kita pikir berbeda, dsb.

Bagaimana cara membuatnya?

Sebenarnya cara untuk membuatnya terbilang cukup mudah. Kita tidak perlu melakukan edit HTML di bagian template blognya. Akan tetapi, kita perlu melakukan sedikit penyesuaian ketika menyusun postingan yang akan kita publikasikan. Saat menulis postingan, jangan menulis pada bagian Compose, tetapi menulis di bagian edit HTML untuk memasukan kode pembagi tulisan yang ingin kita tampilkan menjadi dua bagian atau kolom.

Masukan kode HTML di bawah ini ke dalam bagian kotak edit HTML saat kita menulis postingan.

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> tulisan yang akan muncul di bagian kiri</td><td align="justify" valign="top" width="250"> tulisan yang akan muncul di bagian kanan</td> </tr>
</tbody></table>

Contohnya adalah sebagai berikut ;

Aktifitas posting.
Aturlah aktifitas posting secara teratur agar pengunjung kita lebih senang dalam mengunjungi blog kita. Hal ini penting karena setiap pengunjung selalu ingin mendapatkan perkembangan informasi terbaru dalam blog kita. Jika blog kita jarang diupdate, ini akan memberikan suggesti negatif bagi para pengunjung yang menganggao jika blog kita tidak terawat dan membuat pengunjung merasa enggan untuk mengunjunginya lagi. Jadi, sebelum banyak pengunjung kita yang lari, maka lakukanlah beberapa langkah perbaikan. Apa saja? Misalnya adalah dengan rajin memberikan postingan paling tidak minimal tiga hari sekali agar blog kita selalu terjaga eksistensinya di mata pengunjung dan selalu up to date.
Berikan postingan yang berkualitas.
Yup, ingat dan selalu ingatlah jika content is the king! Jika konten postingan dalam blog kitalah yang menentukan segalanya. Postingan adalah nyawa dari blog kita. Jika pengunjung untuk pertama kalinya melihat postingan kita dan langsung kagum dengan kualitasnya, maka akan membuat mereka merasa tertarik untuk mengunjungi, mengunjungi, dan selalu mengunjungi blog kita setiap hari. Akan tetapi, coba kita bayangkan jika blog kita memiliki kualitas postingan yang rendah apalagi hasil dari copas, tentunya hal ini akan membuat pengunjung menjadi tidak kerasan dan mendatangi blog kita untuk hanya sekedar mampir dan tidak akan lagi mau datang ke blog kita. Wah, begitu vital bukan peranan dari sebuah kualitas postingan dalam blog kita. Maka dari itu, mulailah untuk memperbaiki dan meningkatkan kualitas postingan dalam blog kita dengan mencari banyak referensi, pendapat ahli, dan saran dari pihak yang berkompeten terhadap suatu bidang tertentu yang sedang kita tulis.

Keterangan :
  • Cellpadding merupakan jarak antara tepi kolom dengan tulisan.
  • Cellspacing merupakan jarak pemisah antara dua kolom.
  • Width merupakan ukuran lebar masing-masing kolom.
  • Align digunakan sebagai perintah untuk meratakan tulisan. Pilih lah justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan, dan center untuk rata tengah.
  • Valign merupakan perataan verikal. Di mana top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah.

Cukup mudah bukan untuk membuatnya?
Ada yang sudah pernah mempraktikannya? Kalau belum, yuk kita mulai mencobanya sekarang. Karena dengan begitu, postingan dalam blog kita akan tampil sedikit lebih menarik dan akan mengundang lebih banyak lagi pengunjung untuk membacanya.

Kalau ada yang ingin bertanya atau menanggapi silakan disampaikan lewat kotak komentar ya kawan! Mari kita saling berbagi kebaikan yang bermanfaat.
Salam blogger!

Learn more »

Membuat Effect JQuery Link Nudging di Blog

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
  3. Tambahkan Script JQuery berikut diatas kode </head>
    1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  ></script>  
    Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
  4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
    1. <script type='text/javascript'>          
    2. $(document).ready(function()  {           
    3. $(&#39;#Label1 li&#39;).hover(function() {  //mouse in           
    4. $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
    5. }, function() { //mouse out            
    6. $(this).animate({ marginLeft: 0 }, 400);           
    7. });            
    8. });           
    9. </script><!-- end LinkNudging -->  
  5. Terakhir Save Template anda, dan lihat hasilnya
Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat
Learn more »

Membuat Menu Navigasi Horizontal Glossy di Blog

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.


Langsung saja. berikut ini tutorial membuat glossy horizontal menu
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai.
  4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
  5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <ul class='glossymenu'>
    <li class='current'><a href='http://www.maskolis.co.cc/'><b>Home</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/SEO' title='SEO'><b>SEO</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
    <li><a href='http://www.maskolis.co.cc/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
    </ul>
  6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
  7. Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....
Learn more »

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.


Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun   
  2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
  3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
  4. Letakkan script JQuery berikut sebelum tag </head>
    1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  
    Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
  5. Tambahkan juga script berikut setelah script JQuery yadi
    1. <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>           
    2. <style type="text/css">           
    3. html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/           
    4. </style>            
    5. <![endif]-->   
    6. <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>  
  6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
  7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://www.maskolis.co.cc/">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
            <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
            </ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.maskolis.co.cc/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
  8. Terakhir Save Template anda, dan lihat hasilnya.
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Learn more »

Membuat Menu Horizontal Animasi di Blog

Seperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua).


Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

    .animatedtabs{
    border-bottom: 1px solid gray;
    overflow: hidden;
    width: 100%;
    font-size: 14px; /*font of menu text*/
    }
    .animatedtabs ul{
    list-style-type: none;
    margin: 0;
    margin-left: 10px; /*offset of first tab relative to page left edge*/
    padding: 0;
    }
    .animatedtabs li{
    float: left;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a{
    float: left;
    position: relative;
    top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5TQQBvF_tc5_zcfJk5HlRzeHsXXjmHrdCJ2v-Ha0vodSWqNYm3FpG1DkqRtGDVm8za9vat5mbglljN3qyyPS3g7TKnytuA7kRR7SN-5pwwCRYvS_8YxyGwFK97v-ycCmzHBTv8ZrEILA/s320/tab-blue-left.gif) no-repeat left top;
    margin: 0;
    margin-right: 3px; /*Spacing between each tab*/
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs a span{
    float: left;
    position: relative;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLOj83H5wjgDEPCub3vlPAPKTJs4TibV8GHNtAgHZHkhJzhODi5kYXc11MQYNhgv_PFA4HSJm8x_IG0IIthg8NrhFYxDUjpyvicc69dg88qQzrpYdbsvR0aDa-DdQHRhprIuBlU7m2rng/s320/tab-blue-right.gif) no-repeat right top;
    padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
    font-weight: bold;
    color: black;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .animatedtabs a span {float:none;}
    /* End IE5-Mac hack */
    .animatedtabs .selected a{
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected a span{
    background-position: 100% -125px;
    color: black;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
    .animatedtabs a:hover{
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a:hover span{
    background-position: 100% -125px;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }

  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class='animatedtabs'>
    <ul>
    <li><a href='http://www.maskolis.co.cc' title='Home'><span>Home</span></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/SEO' title='SEO'><span>SEO</span></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
    <li><a href='http://www.maskolis.co.cc/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
    </ul>
    </div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah
Learn more »

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.


Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun   
  2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
  3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
  4. Letakkan script JQuery berikut sebelum tag </head>
    1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  
    Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
  5. Tambahkan juga script berikut setelah script JQuery yadi
    1. <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>           
    2. <style type="text/css">           
    3. html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/           
    4. </style>            
    5. <![endif]-->   
    6. <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>  
  6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
  7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://www.maskolis.co.cc/">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
            <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
            </ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.maskolis.co.cc/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
  8. Terakhir Save Template anda, dan lihat hasilnya.
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Learn more »

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.


Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun   
  2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
  3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
  4. Letakkan script JQuery berikut sebelum tag </head>
    1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  
    Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
  5. Tambahkan juga script berikut setelah script JQuery yadi
    1. <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>           
    2. <style type="text/css">           
    3. html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/           
    4. </style>            
    5. <![endif]-->   
    6. <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>  
  6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
  7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://www.maskolis.co.cc/">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
            <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
            </ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.maskolis.co.cc/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
  8. Terakhir Save Template anda, dan lihat hasilnya.
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Learn more »

Memasang Text Resizer di Blog

terkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil.
Untuk contoh soalnya, temen-temen bisa lihat disini, klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya :
  1. Login ke blogger dengan akun anda
  2. Selanjutnya klik Rancangan >> pilih Edit html
  3. Jangan lupa centang Expand Template Widget
  4. Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
  5. Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode ]]></b:skin>
    .textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {
    padding-top: 20px;
    -o-transition: font 2s ease-in;
    -moz-transition: font 2s ease-in;
    -webkit-transition: font 2s ease-in;
    }
    .textsizersmall{font-size:12px}
    .textsizernorm{font-size:13px}
    .textsizerbig{font-size:14px}
    .textsizerbigger{font-size:15px; font-weight:bold}
    span.sizer {
    float: right;
    text-align: center;
    height: 20px;
    width: 250px;
    margin: 0 10px 10px 0;
    background: #333366;
    display: block;
    font-size: 18px;
    padding: 2px 10px;
    color: #00CCFF;
    text-shadow: 1px 1px 1px blue;
    cursor: pointer;
    border: 1px solid #eee;
    font-family: Times New Roman;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 6px #000;
    -moz-box-shadow: 1px 1px 6px #000;
    -webkit-box-shadow: 1px 1px 6px #000;display: block;
    }
    span.sizer:active {
    border: 1px solid #555;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: #003399;
    box-shadow:0px 0px 12px #000;
    -moz-box-shadow:0px 0px 12px #000;
    -webkit-box-shadow:0px 0px 12px #000;
    margin-top: -1px;
    }
    .clr20 {clear: both; height: 20px;}
  6. Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya
    <div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
    <div class="clr20"/>
  7. Kemudian letakkan kode </div> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat contoh dibawah ini.
    <div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
    <div class="clr20"/>

    <data:post.body/>

    </div>
  8. Yang terakhir Save Template anda, kemudian lihat hasilnya.
Jika temen-temen ingin tampilan hurufnya lebih besar lagi, anda bisa menggantinya dengan cara mengganti font-size diatas. Sudah dulu ya penjelasannya, waktunya tidur selamat mencoba dan semoga bermanfaat.
Learn more »

Membuat Efek Image Zoom dengan Jquery


jquery zoom imageSeperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. 
 
Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger anda
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit HTML
  4. Lalu anda cari kode berikut ]]></b:skin>
  5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.
  7. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
    <script type="text/javascript">
    jQuery(document.body).imageZoom();
    </script>
  8. Yang terakhir Save Template anda. Selesai dah....
Catatan :
Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
Learn more »

Membuat Efek Image Zoom dengan Jquery


jquery zoom imageSeperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. 
 
Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger anda
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit HTML
  4. Lalu anda cari kode berikut ]]></b:skin>
  5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.
  7. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
    <script type="text/javascript">
    jQuery(document.body).imageZoom();
    </script>
  8. Yang terakhir Save Template anda. Selesai dah....
Catatan :
Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
Learn more »

Membuat Daftar Isi Manual Di Blogspot

Kali ini artikel saya akan membahas tentang daftar isi sebuah bllog atau website. Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog dan bicara soal alat navigasi sebetulnya juga pernah dibahas pada posting saya yang berjudul Membuat Menu Scroll di Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Creating Website, contohnya seperti di bawah ini:


Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjad pada label dan judul postingan.

Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini , silahkan ikuti langkah-langkahnya sebagai berikut :
  1. Login ke Blogger, Klik Rancangan/Design;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :
    <style>
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR54HLJOLN3BsQVTIrqe3E_AzD5wLvMtuK7vmArAJQObakt188DZff1zUnMjYHX3_7MFLCPGePeOZqVkAOlzdD6WLAMJiw-QHt7nXoi94jiQI_jmOAy9__VKslO06jwaWsGtynauw4qyV/") no-repeat left center;
    line-height:1.5em;
    padding:3px 0px 3px 20px;
    }
    </style>
    <div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
    <div class="list">
    <a href="http://ozybebas.blogspot.com/ /2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/memasang-text-resizer-di-blog.html">Memasang Text Resizer di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a></div>
    <div class="list">
    <a href="http://ozybebas.blogspot.com//2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a></div>
    </div>
  5. Klik Tombol Save/Simpan.
Keterangan :
  • Link dan Teks, silahkan diganti dengan link dan teks Anda; 
  • width : 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan; 
  • height : 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.
Untuk tutorial membuat daftar isi manual sudah selesai, silahkan tunggu tutorial berikutnya ,terima kasih...
Learn more »

Membuat Daftar Isi Otomatis di Blogspot

Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat daftar isi manual, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:
  1. Login ke Blogger, Klik Layout/Tata Letak;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :
    <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
    <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://ozybebas.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  5. Klik Tombol Save/Simpan.

Keterangan :
  • Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
  • Width: 300px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
  • Height: 200px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.
Demikianlah tutorial Membuat Daftar Isi Otomatis Di Blogspot ini, semoga bermanfaat.
Learn more »

Membuat Menu dTree di Blogger


Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

cara membuat menu dtree

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini. Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Letakkan kode/ script berikut di atas kode </head>
    1. <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>          
    2. <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/>  
  4.  Save Template anda.
Langkah Kedua
  1. Pada dasbor klik rancangan 
  2. Kemudian klik elemen halaman => Tambah Gadget 
  3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
    <div class="dtree">
    <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'Creating Website');
    d.add(1,0,'Folder 01','#.html');
    d.add(2,1,'Sub Folder 01',' #.html');
    d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
    d.add(4,0,'Folder 02',' #.html');
    d.add(5,4,'Sub Folder 02',' #.html');
    d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
    d.add(7,0,'Folder 03',' #.html');
    d.add(8,7,'Sub Folder 03',' #.html');

    d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,0,'File[non-folder]',' link anda.html');
    d.add(11,0,'File[non-folder]',' link anda.html');
    d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
    document.write(d);
    //-->
    </script>
    </div>
  4. Terakhir simpan, dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 
<h2>Arsip</h2>
<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Creating Website');
d.add(1,0,'Daftar Isi','#.html');
d.add(2,1,'Tutorial Blog','http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial%20blog');
d.add(3,1,'Joomla','http://creatingwebsite-maskolis.blogspot.com/search/label/joomla');
d.add(4,1,'Wordpress','http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress');
d.add(5,0,'SEO','#.html');
d.add(6,5,'Tips Dasar-Dasar SEO','http://creatingwebsite-maskolis.blogspot.com/2011/02/tips-dasar-dasar-seo.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Google','#.html');
d.add(10,9,'Cara Daftar Google Adsense','http://creatingwebsite-maskolis.blogspot.com/2011/02/cara-mendaftarkan-blog-di-google.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kode warna','http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-kode-warna-di-blog.html');
d.add(15,13,'Google Page Rank','http://creatingwebsite-maskolis.blogspot.com/2011/01/google-page-rank-dan-manfaatnya.html');
d.add(16,0,'SEO Tips','http://creatingwebsite-maskolis.blogspot.com/2011/01/seo-tips-dengan-melakukan-blog-ping.html');
document.write(d);
//-->
</script>
</div>
Tentu saja temen-temen bisa ganti alamat url diatas dengan link url anda. Terakhir simpan dan lihat hasilnya. Demikian tutorial membuat menu d'tree kali ini, selamat mencoba dan semoga bermanfaat
Learn more »

Cara Memasang Iklan di blog

- Cara ini biasanya lebih sering ditujukan untuk pemakai blogger/blogspot dan untuk wordpress premium biasanya memakai plugins kalau untuk yang wordpress.com mungkin edit di temanya :D

- Kalau ini pake cara ane sendiri gan, yang ane masukin di blog ane.
Caranya yang jelas login blogger.com dulu, Klik Tata Letak atau design abis itu edit HTML abis itu centang Expand Widget Template.

Kemudian cari kode dibawah ini :

<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>

Caranya tekan control F aja terus cari kode diatas.
Setelah itu masukkan saja kode iklannya, TAPI SEBELUM DIMASUKKAN HARUS DIPARSE. Kode iklannya bisa di masukkan di http://centricle.com/tools/html-entities/ abis itu klik encode, setelah kode iklan sudah di encode baru di masukkan di bawah kode :
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>
[kode iklan teman-teman taruh dsini]

Itu kalau untuk template yang sulit di pasang. Tapi jangan kawatir. DIbawah ini sudah saya carikan dari berbagai sumber yang membahas artikel yang serupa.
Silahkan Download Saja artikelnya :
Tutorial Cara memasang iklan diatas dan dibawah postingan.doc

Cara memasang iklan diatas dan dibawah postingan | sipandu.com
Tutorial ini diambil dari pengalaman dari blogger2 lainnya.

1. Cara Membuat memasang iklan di bawah Judul Postingan

Login ke Blogger
- Klik Tata Letak
- Klik Edit HTML dan jangan lupa centang Expand Widget Template
- Selanjutnya cari kode <p><data:post.body/></p>
- Letakan kode iklan yang sudah di parse tadi tepat di bawah kode <p><data:post.body/></p>
Misalnya :
<div style=’float:left’>
- LETAKAN KODE IKLAN YANG SUDAH DI PARSE DISINI
</div>
- Kemudian simpan template sobat

2. Cara Memasang Iklan Dibawah Halaman Posting

- Login ke Blogger
- design > Edit HTML > Centang Expand Witget Templates
- Cari Kode <div class=’post-body entry-content’>
- Untuk memudahkan tekan ctrl + F di keybord.
- Sisipkan script kode script berikut tepat di bawah kode <div class=’post-body entry-
content’>
<b:if cond=’data:blog.pageType == "item"’>
[Masukkan Kode Iklan disni]
</b:if>
- Save Template

3. Memasang Iklan Adsense di Atas Postingan
- Anda login ke blogger terus anda masuk ke menu tata letak >> Edit HTML jangan lupa beri
tanda centang pada "expand widget template"setelah itu anda cari kode seperti dibawah ini.
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<a expr:href=’data:post.url’> Readmore</a>
<b:else/>
</b:if>
- Setelah anda temukan kode seperti diatas selanjutnya anda paste kode iklan yang telah
anda parse sebelumnya tepat dibawah kode <b:else/> maka hasilnya akan terlihat seperti
dibawah ini.
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<a expr:href=’data:post.url’> Readmore.</a>
<b:else/>
[skcript iklan]
</b:if>
- klik simpan/save template.
- Selesai. Silahkan anda buka blog anda untuk melihat hasilnya.

4. Memasang Iklan Adsense di Atas Postingan
- Untuk memasang iklan adsense di atas postingan, silahkan ikuti tutorial di bawah ini.
- Tuju ke bag. Edit HTML, centang Expand Widget Templates, lalu cari kode berikut ini :
<data:post.body/>
- Jika terdapat 2 kode seperti di atas, maka pilihlah kode yang kedua.
- Setelah itu, siapkan kode iklan Adsense yang akan dipasang. Jika sudah siap, lakukan step
berikutnya.
- Jika anda ingin memasang iklan adsense di atas postingan seperti blog ini, silakan
masukan kode berikut sebelum kode di atas.
<div style=’clear:right; float:right; margin-left:15px;’>
<!– Kode Adsense Anda Disini –>
</div>
Keterangan:
float:right fungsinya untuk menempatkan iklan di sebelah kanan atas postingan artikel
margin-left:15px fungsinya untuk mengatur posisi antara jarak artikel sebelah kanan
dengan iklan
NB: Anda bisa mengaturnya sendiri dengan mengubah kode di atas.
Jika sudah, klik tombol Save Template, dan selesai.

5. Memasang Iklan Adsense di Bawah Postingan
- Tuju ke bag. Edit HTML, centang Expand Widget Templates, lalu cari kode berikut ini :
<data:post.body/>
- Jika terdapat 2 kode seperti di atas, maka pilihlah kode yang kedua.
Setelah itu, siapkan kode iklan Adsense yang akan dipasang. Jika sudah siap, lakukan step
berikutnya.
Kemudian, masukan kode iklan adsense anda sesudah kode di atas.
Jika sudah, klik tombol Save Template, dan selesai.

6. Cara Memasang Iklan di Bawah Postingan
- Tetapi perlu diingat, kode iklan ini harus kita Parse dulu, karena kalau tidak kita Parse
maka iklan tersebut tidak akan muncul, tetapi yang muncul justru kode-kode iklan javascrive
yang kita masukkkan tadi�gimana bingguuung�.??? saya juga binguung, heheheee
- Untuk mem-Parse silahkan sobat klik disini � caranya masukkan kode iklan, dan klik tombol
Parse dibagian dibawah, kemudian copy hasilnya.
Langkah selanjutnya, sobat Login Blogger � Deshboard � Tata Letak � Edit HTML � dan centang
Expand Template Widget. Cari kode Read More yang ada <p><data:post.body/></p> seperti ini ;
<b:if cond=’data:blog.pageType == "item"’>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a
expr:href=’data:post.url’><strong>Selengkapnya…</strong></a></p>
</b:if>
- Kalau sudah, tinggal copy kan kode iklan yang udah di Parse tadi tepat dibawah
<p><data:post.body/></p> dan hasilnya akan seperti ini :
<b:if cond=’data:blog.pageType == "item"’>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<br /> <br />
[[kode ikan teman2 disini]]
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a
expr:href=’data:post.url’><strong>Selengkapnya…</strong></a></p>
</b:if>
- kode <br/><br/> ditambahkan untuk memberikan jarak (enter2x).
- Sekarang tinggal SIMPAN atau SAVE, dan lihat hasilnya��selamat mencoba

Mohon maaf apabila cara diatas ada kekurangan dalam penulisan atau ada yang masih belum berjalan. Semoga Kumpulan “Cara Memasang Iklan Dibawah Postingan” bisa bermanfaat



Learn more »

BIKIN RINGAN BLOG KAMU



Pernahkan kalian sewaktu membuka Blog Kalian mengalamai koneksi internet yang semula cepat dan lancar tiba-tiba menjadi sangat lambat bahkan tidak bergerak sama sekali..?

Bisa jadi penyebabnya adanya satu atau lebih program yang mengambil Jatah bandwidth koneksi yang sangat berlebihan sehingga program lain menjadi tidak kebagian.

Solusinya akan mudah bila program Penyedot bandwidth tersebut menyediakan fasilitas untuk mengatur kecepatan koneksi download/upload saat membuka Blog Kita.
Namun masalahnya akan sangat sukar diatasi apabila aplikasinya tidak memiliki fungsi untuk mengatur kecepatan koneksi dalam membikin agar Blog Kita terasa ringan.

Nah untuk kasus yang begitu ,ini aku share ke kalian semua satu Aplikasi yang sangat ampuh,semoga saja aplikasi ini sangat berguna bagi kalian yang mendambakan Blog nya sangat ringan.

Ini linknya yang sengaja aku kasih 3 aplikasi,jadi terserah kalian mau yang mana tapi yang pasti aplikasi tersebut bagus semua disamping GRATIS...hahahayy.
Silahkan pilh bang..:


DOWNLOAD DISINI=


DOWNLOAD HERE


DOWNLOAD YANG INI
Learn more »

BIKIN RINGAN BLOG KAMU



Pernahkan kalian sewaktu membuka Blog Kalian mengalamai koneksi internet yang semula cepat dan lancar tiba-tiba menjadi sangat lambat bahkan tidak bergerak sama sekali..?

Bisa jadi penyebabnya adanya satu atau lebih program yang mengambil Jatah bandwidth koneksi yang sangat berlebihan sehingga program lain menjadi tidak kebagian.

Solusinya akan mudah bila program Penyedot bandwidth tersebut menyediakan fasilitas untuk mengatur kecepatan koneksi download/upload saat membuka Blog Kita.
Namun masalahnya akan sangat sukar diatasi apabila aplikasinya tidak memiliki fungsi untuk mengatur kecepatan koneksi dalam membikin agar Blog Kita terasa ringan.

Nah untuk kasus yang begitu ,ini aku share ke kalian semua satu Aplikasi yang sangat ampuh,semoga saja aplikasi ini sangat berguna bagi kalian yang mendambakan Blog nya sangat ringan.

Ini linknya yang sengaja aku kasih 3 aplikasi,jadi terserah kalian mau yang mana tapi yang pasti aplikasi tersebut bagus semua disamping GRATIS...hahahayy.
Silahkan pilh bang..:


DOWNLOAD DISINI=


DOWNLOAD HERE


DOWNLOAD YANG INI
Learn more »