Friday 31 January 2014

User Online Status



english  English Version

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :

histat.jpg


How to get it? please following the steps :

  1. Please visit www.histats.com.


  2. If you was on the histats site, click Register at the top tab.


  3. Content the form with your information, such as email, password, your blog url and etc.


  4. Click Continue button.


  5. Choose the style of histats counter, click Choose a counter from this category.


  6. Please mark the radio button beside the counter style you wanted.


  7. Click Continue button at the bottom of page.


  8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.


  9. Click Continue button.


  10. Wait a moment, your counter is updating.


  11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.


  12. Logout and close your internet browser.


  13. Done. Now you has have a counter code to add at your blog.



Next step is add your counter code to your blog, please following the steps :

  1. Login to blogger with your ID.
  2. After entering the dasboard page , click Layout.


  3. Click at Page Element tab. See the picture below :

  4. page element
  5. Click at Add a Page element.
  6. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

  7. javascript
  8. Open your Counter code, copy and then paste into available column.


  9. Click   save changes   


  10. Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

  • http://www.neoworx.net

  • http://www.webfooted.net

  • http://www.fastonlineusers.com



See you next time at my new tips. Happy blogging.

bahasa indonesia  Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

  1. Silahkan buka www.geovisite.com


  2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash


  3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email


  4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com


  5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24


  6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy


  7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)


  8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet


  9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)


  10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik


  11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic


  12. Klik tombol yang berlogo disket


  13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad


  14. Silahkan close window browser sobat


  15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya


  16. Selesai.



Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

  • http://www.neoworx.net

  • http://www.webfooted.net

  • http://www.fastonlineusers.com

  • http://www.histats.com



Selamat menikmati tool baru...

Cara menambahkan kolom

Bagaimana cara menambah kolom pada blog?
yap.......
sebenarnya saya sendiri pada awalnya tidak tahu dan ingin tahu. akhirnya, seperti nasihat pepatah modern "jika ingin tahu sesuatu yang belum di ketahui, cobalah tanya pada mbah google". setelah mencari ternyata tidak sulit.

Pada dasarnya, template standard blogger 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)


      
    
     
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
      &lt;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'&gt;
    
    <head>
    
    <b:include data='blog' name='all-head-content'/>
    
    <title><data:blog.pageTitle/></title>
    
    <b:skin><![CDATA[/*
    
    -----------------------------------------------
    
    Blogger Template Style
    
    Name: Minima
    
    Designer: Douglas Bowman
    
    URL: www.stopdesign.com
    
    Date: 26 Feb 2004
    
    Updated by: Blogger Team
    
    ----------------------------------------------- */
    /* Variable definitions
    
      ====================
    
    <Variable name="bgcolor" description="Page Background Color"
    
      type="color" default="#fff" value="#ffffff">
    
    <Variable name="textcolor" description="Text Color"
    
      type="color" default="#333" value="#333333">
    
    <Variable name="linkcolor" description="Link Color"
    
      type="color" default="#58a" value="#5588aa">
    
    <Variable name="pagetitlecolor" description="Blog Title Color"
    
      type="color" default="#666" value="#666666">
    
    <Variable name="descriptioncolor" description="Blog Description Color"
    
      type="color" default="#999" value="#999999">
    
    <Variable name="titlecolor" description="Post Title Color"
    
      type="color" default="#c60" value="#cc6600">
    
    <Variable name="bordercolor" description="Border Color"
    
      type="color" default="#ccc" value="#cccccc">
    
    <Variable name="sidebarcolor" description="Sidebar Title Color"
    
      type="color" default="#999" value="#999999">
    
    <Variable name="sidebartextcolor" description="Sidebar Text Color"
    
      type="color" default="#666" value="#666666">
    
    <Variable name="visitedlinkcolor" description="Visited Link Color"
    
      type="color" default="#999" value="#999999">
    
    <Variable name="bodyfont" description="Text Font"
    
      type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
    
    <Variable name="headerfont" description="Sidebar Title Font"
    
      type="font"
    
      default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
    
    <Variable name="pagetitlefont" description="Blog Title Font"
    
      type="font"
    
      default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
    
    <Variable name="descriptionfont" description="Blog Description Font"
    
      type="font"
    
      default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
    
    <Variable name="postfooterfont" description="Post Footer Font"
    
      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;
    
      }
    
      ]]></b:skin>
    
      
    
    </head>
    
    
    <body>
    
    <div id='outer-wrapper'><div id='wrap2'>
    
    
    <!-- skip links for text browsers -->
    
    <span id='skiplinks' style='display:none;'>
    
    <a href='#main'>skip to main </a> |
    
    <a href='#sidebar'>skip to sidebar</a>
    
    </span>
    
    
    <div id='header-wrapper'>
    
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    
    <b:widget id='Header1' locked='true' title='3 kolom (Header)' type='Header'/>
    
    </b:section>
    
    </div>
    
      
    
    <div id='content-wrapper'>
    
    
    <div id='crosscol-wrapper' style='text-align:center'>
    
    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
    
    </div>
    
    
    <div id='main-wrapper'>
    
    <b:section class='main' id='main' showaddelement='no'>
    
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    
    </b:section>
    
    </div>
    
    
    <div id='sidebar-wrapper'>
    
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    
    </div>
    
    
    <!-- spacer for skins that want sidebar and main to be the same height-->
    
    <div class='clear'>&#160;</div>
    
    
    </div> <!-- end content-wrapper -->
    
    
    <div id='footer-wrapper'>
    
    <b:section class='footer' id='footer'/>
    
    </div>
    
    
    </div>
    
    </div> <!-- end outer-wrapper -->
    
    
    </body>
    
    </html>
    
      
    
    



    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 !
  • JQuery UI


    Logo JQuery UI
    JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah sistem JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain.
    Sejauh yang Saya pelajari selama ini, dibandingkan dengan kemampuannya sebagai pembuat efek-efek animasi baru yang tidak ada di dalam JQuery, peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan dengan pembuatan aplikasi online dengan standar yang sangat baik:
    JQuery UI Themes
    JQuery UI ThemeRoller

    Meskipun entah kenapa saat ini JQuery UI tidak begitu populer di internet. Mungkin karena ini adalah bahasa yang lumayan sulit dan bisa dibilang "terlalu lengkap".
    Slider, Button, Dialog Box, Accordion, Alert Messages, Tooltip, Tabs, Date Picker, Progressbar dan entah apa lagi. Bahkan juga Autocomplete seperti halnya fitur HTML5.
    Semuanya begitu lengkap hingga sangat mudah sebenarnya ketika seorang programmer menemukan sebuah konsep aplikasi online, JQuery UI bisa mengatasi beberapa masalah yang tersisa seperti tema, objek, variabel dan termasuk dukungan browser penuh (setidaknya selalu diusahakan begitu sampai sekarang).
    Aplikasi berbasis JQuery UI
    CSS3 Button Generator merupakan salah satu aplikasi yang dibangun dengan JQuery UI.

    Contoh Instalasi JQuery UI dalam Bidang Kerja

    <link rel='stylesheet' type='text/css' href='jqueryui-theme.css' />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='jqueryui-1.8.1.js'></script>
    <script type='text/javascript'>
    // Lakukan sesuatu di sini...
    </script>

    Google Ajax Libraries API (CDN) (?)

    JQuery UI siap pakai dari Google yang dapat digunakan:

    Framework JQuery UI

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js'></script>
    dan seterusnya sampai versi terakhir di tahun 2011 ...
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

    CSS

    Revisi CSS mengikuti revisi Framework JQuery UI:
    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css' />
    ...
    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' />

    Dokumentasi

    JQuery UI dalam Dokumen Google
    Library ini tergantung pada JQuery. Anda juga harus memuat JQuery sebelum memuat modul ini. Versi 1.8.3 tidak didokumentasikan karena jangka waktu revisi yang pendek (saat Anda mencoba mengakses JQuery UI 1.8.3, yang keluar adalah JQuery UI 1.8.4):
    183-184-JQuery UI

    Referensi:

    Membuat menu D tree

    Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

    Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :


    pasanglah kode ini di atas kode </head> :

    <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

    kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet sobat :

    http://amen24.googlepages.com/Readmore.js

    Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat :

    http://juned.googlepages.com/Readmore.js

    Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

    <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />



    Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

    <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

    Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

    Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri kode milik orang lain.


    Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

    Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

    Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

    Kode ini di simpan di atas kode </head> :

    <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="dtree.js"></script>


    Kode di bawah ini di simpan di bagian sidebar :

    <h2>Example</h2>
    <div class="dtree">
    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    d.add(2,0,'Node 2','example01.html');
    d.add(3,1,'Node 1.1','example01.html');
    d.add(4,0,'Node 3','example01.html');
    d.add(5,3,'Node 1.1.1','example01.html');
    d.add(6,5,'Node 1.1.1.1','example01.html');
    d.add(7,0,'Node 4','example01.html');
    d.add(8,1,'Node 1.2','example01.html');
    d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    d.add(11,9,'Mom\'s birthday','example01.html');
    d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
    document.write(d);
    //-->
    </script>
    </div>





    Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.

    Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat seperti ini :


    Kode ini di simpan di atas kode </head> :

    <link rel="StyleSheet" href="http://dtree-menu.googlecode.com/files/dtree.css" type="text/css" />
    <script type="text/javascript" src="http://dtree-menu.googlecode.com/files/dtree.js"></script>


    Kode di bawah ini di simpan di bagian sidebar :

    <div class="dtree">
    <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


    d.add(1,0,'Free template & navigation')

    d.add(3,1,'free template','');
    d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
    d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
    d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
    d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
    d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
    d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
    d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
    d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
    d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
    d.add(100,3,'template klasik');
    d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
    d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

    d.add(5,1,'Free css menu navigation');
    d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
    d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
    d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
    d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
    d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
    d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
    d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

    d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
    d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

    d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
    d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
    d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
    d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


    document.write(d);
    //-->
    </script>
    </div>


    Untuk melihat hasilnya, silahkan klik dulu di sini !

    Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

    Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

    d.add(1,0
    d.add(2,0
    d.add(4,0
    d.add(6,0
    d.add(7,0

    Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.

    d.add(3,1
    d.add(5,1
    Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0


    d.add(10,5
    d.add(20,5
    d.add(30,5
    d.add(40,5
    d.add(50,5
    d.add(60,5

    Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
    begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1


    Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

    d.add(10,3,'','','','','');

    Jika di jabarkan denga isi menu, seperti ini :

    d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');



    isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
    isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
    isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
    isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
    isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
    isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5


    Misal :

    d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
    Blogroll = tulisan yang kan muncul pada menu induk
    http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll
    http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)


    dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.


    Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:






  • Untuk template Klasik


    1. Sign in di blogger


    2. Klik menu Template


    3. Klik menu Edit HTML


    4. Copy seluruh kode HTML yang ada, lalu save untuk back up


    5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :


    6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>



    7. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):


    8. <div class="dtree">
      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
      <script type="text/javascript">
      <!--
      d = new dTree('d');
      d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


      d.add(1,0,'Free template & navigation')

      d.add(3,1,'free template','');
      d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
      d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
      d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
      d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
      d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
      d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
      d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
      d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
      d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
      d.add(100,3,'template klasik');
      d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
      d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

      d.add(5,1,'Free css menu navigation');
      d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
      d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
      d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
      d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
      d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
      d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
      d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
      d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
      d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

      d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
      d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

      d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
      d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
      d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
      d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


      document.write(d);
      //-->
      </script>
      </div>


    9. Klik tombol Simpan Perubahan Template


    10. Selesai.








  • Untuk Template Baru


    1. Sign in di blogger


    2. Klik menu Layout


    3. Klik menu Edit HTML


    4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman


    5. Copy paste kode berikut di atas kode </head>


    6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>



    7. Klik tombol Simpan Template


    8. Klik menu Elemen Halaman yang ada di sebelah atas monitor


    9. Klik tulisan Tambahkan sebuah Elemen Halaman


    10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript


    11. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)


    12. <div class="dtree">
      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
      <script type="text/javascript">
      <!--
      d = new dTree('d');
      d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


      d.add(1,0,'Free template & navigation')

      d.add(3,1,'free template','');
      d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
      d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
      d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
      d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
      d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
      d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
      d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
      d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
      d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
      d.add(100,3,'template klasik');
      d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
      d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

      d.add(5,1,'Free css menu navigation');
      d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
      d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
      d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
      d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
      d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
      d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
      d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
      d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
      d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

      d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
      d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
      d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

      d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
      d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
      d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
      d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


      document.write(d);
      //-->
      </script>
      </div>


    13. Klik tombol Simpan


    14. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)


    15. Klik tombol Simpan yang berada di sebelah atas


    16. Selesai. Silahkan lihat hasilnya



    Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga di posting.

    Selamat mencoba !

    Membuat Slideshow Gambar seperti Yahoo

    Meskipun sudah lama sekali saya tidak menulis karena banyak sekali kesibukan, kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman semua mengenai cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slide ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.


    Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing. 

    slideshow yahoo

    Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

    Langkah Pertama
    1. Login ke blogger dengan akun anda
    2. Kemudian klik Tata Letak > pilih Edit HTML
    3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
    4. Letakkan kode berikut di atas kode ]]></b:skin>
      /*<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f80500c5a5c0571"></script>
      <script type='text/javascript'>
      document.doAT = function(cl)
      {
              var myclass = new RegExp('hentry');
              var myTitleContainer = new RegExp('post-title');
              var myPostContent = new RegExp('post-footer');
              var elem = this.getElementsByTagName('div');
              for (var i = 0; i < elem.length; i++)
              {
                  var classes = elem[i].className;
                  if (myclass.test(classes))
                  {
                      var container = elem[i];
                      for (var b = 0; b < container.childNodes.length; b++)
                      {
                          var item = container.childNodes[b].className;
                          if (myTitleContainer.test(item))
                          {
                              var link = container.childNodes[b].getElementsByTagName('a');
                              if (typeof(link[0]) != 'undefined')
                              {
                                  var url = link[0].href;
                                  var title = link[0].innerHTML;
                              }
                              else
                              {
                                  var url = document.url;
                                  var title =  container.childNodes[b].innerHTML;
                              }
                              if (typeof(url) == 'undefined'|| url == 'undefined' ){
                                  url = window.location.href;
                              }
                          var singleq = new RegExp("'", 'g');
                          var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                        
                          title = title.replace(singleq, '&#39;', 'gi');
                          title = title.replace(doubleq, '&#34;', 'gi');
                        
                          }
                          if (myPostContent.test(item))
                          {
                              var footer = container.childNodes[b];
                          }
                      }
                      var n = document.createElement('div');
                      var at = "<div class='addthis_toolbox addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_preferred_1'></a> <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a> <a class='addthis_button_preferred_4'></a> <a class='addthis_button_compact'></a> <a class='addthis_counter addthis_bubble_style'></a> </div> ";
                      n.innerHTML = at;
                      container.insertBefore(n , footer);
                  }
              }
          return true;
      };

      document.doAT('hentry');
      </script><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f80500c5a5c0571"></script>
      <script type='text/javascript'>
      document.doAT = function(cl)
      {
              var myclass = new RegExp('hentry');
              var myTitleContainer = new RegExp('post-title');
              var myPostContent = new RegExp('post-footer');
              var elem = this.getElementsByTagName('div');
              for (var i = 0; i < elem.length; i++)
              {
                  var classes = elem[i].className;
                  if (myclass.test(classes))
                  {
                      var container = elem[i];
                      for (var b = 0; b < container.childNodes.length; b++)
                      {
                          var item = container.childNodes[b].className;
                          if (myTitleContainer.test(item))
                          {
                              var link = container.childNodes[b].getElementsByTagName('a');
                              if (typeof(link[0]) != 'undefined')
                              {
                                  var url = link[0].href;
                                  var title = link[0].innerHTML;
                              }
                              else
                              {
                                  var url = document.url;
                                  var title =  container.childNodes[b].innerHTML;
                              }
                              if (typeof(url) == 'undefined'|| url == 'undefined' ){
                                  url = window.location.href;
                              }
                          var singleq = new RegExp("'", 'g');
                          var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                        
                          title = title.replace(singleq, '&#39;', 'gi');
                          title = title.replace(doubleq, '&#34;', 'gi');
                        
                          }
                          if (myPostContent.test(item))
                          {
                              var footer = container.childNodes[b];
                          }
                      }
                      var n = document.createElement('div');
                      var at = "<div class='addthis_toolbox addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_preferred_1'></a> <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a> <a class='addthis_button_preferred_4'></a> <a class='addthis_button_compact'></a> <a class='addthis_counter addthis_bubble_style'></a> </div> ";
                      n.innerHTML = at;
                      container.insertBefore(n , footer);
                  }
              }
          return true;
      };

      document.doAT('hentry');
      </script>
      ----------------------------------------------- */
      div.jqans-wrapper {-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;}
      div.jqans-wrapper img {border: 0;}
      div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;}
      div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;}
      div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;}
      div.jqans-wrapper li {list-style:none;float: left;display: inline;}
      /* Yahoo Slider Content
      ----------------------------------------------- */
      div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}
      div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;}
      div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 458px;background:#fff;}
      div.jqans-wrapper.default li {width: 115px;}
      div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}
      div.jqans-wrapper.default strong {color: #000;}
      /* wrapper */
      div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}
      /* container */
      div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}
      div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;}
      div.jqans-wrapper.default .jqans-container img {width:438px;height:210px;}
      /* headline */
      div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;}
      div.jqans-wrapper.default .jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;}
      div.jqans-wrapper.default .jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px Arial;line-height:1.3em;height:30px;overflow:hidden;}
      /* stories */
      div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaXTTNhthBuFXd9eN3x4lf0MdgS7PQORWdpO9JJBVSN6rXCKs5v1bJMHtcb_gdEj9SdE6p4IlnPtDjBkQERnxLVsi7dRWQQTm8mrvwiou1uNz1gnP7TK4pR1GCjR9EV_M8ZNDY-WKIDro/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;}
      div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;}
      div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2C8Ht3mhh8KWyE9J72684O6dp-vIFrbpLj0xIZCiM3XIT_8ER9t3EgxJAL_AUTZanUHDuL4nrLfY8-ghhhSy9HD2rnaEgSioTtOgL6v84xX3Ij5n4caMNiKl4ImwWbIAoLh6JzdxUXdQ/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
      div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;}
      div.jqans-wrapper.default .jqans-stories li img {margin-top: 22px;width:100px; height:52px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #555;border-top:1px solid #555;}
      div.jqans-wrapper.default .jqans-stories li p {display: none;}
      div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;
      font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}
      div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2C8Ht3mhh8KWyE9J72684O6dp-vIFrbpLj0xIZCiM3XIT_8ER9t3EgxJAL_AUTZanUHDuL4nrLfY8-ghhhSy9HD2rnaEgSioTtOgL6v84xX3Ij5n4caMNiKl4ImwWbIAoLh6JzdxUXdQ/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
      /* pagination */
      div.jqans-wrapper.default .jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin: 0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear: both;width: 448px;overflow: hidden;}
      div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}
      div.jqans-wrapper.default .jqans-pagination-controls {float: right;}
      div.jqans-wrapper.default .jqans-pagination-controls a {display: inline-block;width: 22px;height: 13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;}
      div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkQ86snun6h71AzUwj3Odwl5gqW9uTdkpEHjFDD77KznBjKPlZ2mW2bG3b5__GlDUuDEmFPRj4hdO9WD0_-iwgLBZGU3P7L_37RSw5nXkmNOrnkT9ZL_2btN-cJ3rPjORlN2pzJ6hf6Y/s1600/previous.gif);}
      div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIQAHVFbwePhmp4a2_RwLOpJdoHn0Ulqj48aYj7kebdQahDW5VmCk1yNfRnZJtwaDQzLdAajR9m4ih9xp1Ck4y_xOodauVqf48Aa61gAdxYwC-_PLYgZif4qukqbkw7zU8qAgr3mAEuz0/s1600/next.gif);}
    Langkah Kedua
    1. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'/>
      <script type='text/javascript'>
      //<![CDATA[
      (function(a){a.fn.accessNews=function(b){var c={title:"HARI INI -",subtitle:"<span id='clock'/>",slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var h=k.children();var i;var j;var f;var e={_wrapper:'<div class="jqans-wrapper '+b.theme+'"></div>',_container:'<div class="jqans-container"></div>',_headline:jQuery("<div class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong> ",b.subtitle,"</p>"].join("")),_content:jQuery("<div class='jqans-content'></div>"),_stories:'<div class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var m="";for(var l=1;l<=h.length;l++){m+="<li><div/></li>"}var p=jQuery('<div class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var l=jQuery("<div></div>");var s=jQuery(b.contentTitle+" a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var n=jQuery('<div class="jqans-pagination"></div>').html(['<div class="jqans-pagination-count"><span class="jqans-pagination-count-start">1</span> - <span class="jqans-pagination-count-end">',b.slideBy,'</span> of <span class="jqans-pagination-count-total">',h.length,'</span> <strong>News Pagination</strong></div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back">&lt;&lt; Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next &gt;&gt;</a></span></div>'].join(""));k.after(n);var m=jQuery(".jqans-pagination-controls-next > a",n);var l=jQuery(".jqans-pagination-controls-back > a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return false});l.click(function(){var o=d._currentPage-1;d.to(o);return false})},to:function(p){if(this._animating){return}this._animating=true;var q=k.parent("div").next(".jqans-pagination");var l=jQuery(".jqans-pagination-count-start",q);var s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var o=parseInt(k.css("left"));var m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var o=jQuery("li.selected",k);var m=o.next("li");var n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery);
      //]]>
      </script>
      <script type='text/javascript'>
      // when the DOM is ready, convert the feed anchors into feed content
      jQuery(document).ready(function() {

          jQuery(&#39;#newsslider&#39;).accessNews({
        
          });

          jQuery(&#39;#newsslider2&#39;).accessNews({
              title : &quot;BREAKING NEWS:&quot;,
              subtitle:&quot;stories from the internet&quot;,
              speed : &quot;slow&quot;,
              slideBy : 4,
              slideShowInterval: 100000,
              slideShowDelay: 100000
          });

      });
      </script>
      <script type='text/javascript'>
      /* <![CDATA[ */
      jQuery.noConflict();jQuery(function(){jQuery("ul.menu-primary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(function(){jQuery("ul.menu-secondary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(document).ready(function(){jQuery(".fp-slides").cycle({fx:"fade",timeout:4000,delay:0,speed:400,next:".fp-next",prev:".fp-prev",pager:".fp-pager",continuous:0,sync:1,pause:1,pauseOnPagerHover:1,cleartype:true,cleartypeNoBg:true})});
      /* ]]> */
      </script>
    2. Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :
      <script type='text/javascript'>
      //<![CDATA[
      var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='666666' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};
      //]]>
      </script>
    3. Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
        <body onLoad='goforit()'>
    4. Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
    Langkah Ketiga
    1. Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
    /* Slide Content
      ----------------------------------------------- */
        .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;
          word-wrap: break-word; overflowhidden;}
            .slide {color#666666;line-height1.3em;}
              .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
                .slide li {margin:0;padding-top:0;
                  padding-right:0;padding-bottom:.25em;
                    padding-left:0px;text-indent:0px;line-height:1.3em;}
                      .slide .widget {margin:0px 0px 6px 0px;}
                      1. Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div class='main-outer'> kemudian letakkan kode berikut dibawahnya :
                        1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
                        2.       <div id='slide-wrapper'>  
                        3. <b:section class='slide' id='slide' preferred='yes'/>  
                        4.       </div>  
                        5. </b:if>   
                      2. Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
                      3. Klik Tambah Gadget >> pilih HTML/Javascript
                      4. Copy kode di bawah dan letakkan di kotak HTML/Javascript
                        <ul id="newsslider">

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaX8zmCnD1bxqwDFkHd2S-11PbXT8UI5_GqbF7fj90vcbNYeF_9S44U_M7R4s-wRaWOwe4Sfx3ccDCM9sIq0Ot6t8lXQdxc5pxh-qAuXkZ8nOUvzjiGxbvTWIxg7NAEzUGgumJVLY3C55S/s1600/emak.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
                        <p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>
                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TMYRp10ttczk7KSx1tYrJuR5T4YAtfVJRoGeOAQhRM44K6gk4Y8avmTIz9F7C2A7wbdPYp64BcerZhMicspXj1LG-UdYElRPBKaqEen_5qyETh5elngI_oKhBTTk3RhYzz7JpUvE8zVS/s1600/hawa.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>

                        <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
                        </li>

                        <li>
                        <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibfFBNp2D5F3Zux59TmJ9X2r4UmsygoYSGD23XeX17Hy8EuDv_mdaL9YJl4g2wwTikDw2bropcUbcNmgOtnpWZQYiOlhXuoqYmU36xFfjbhahUZMmT58VCjvfzHy3iNVkF1JXcmGKtLzz7/s1600/hawa+2.jpg" /></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
                        <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL83NgYVz6HrQuNuulEfwSkbnFrFM_rsDlffvA3WhSKurLy61-CzznNCUaykwSagHPL9a217YhKyKlg-QWEWNejlgryUn3UYxZwbPv208yp27Px9jqhyphenhyphennO7nHfSd2eMVSJ9UL3LrJ2APQ/s1600/youly+chang.jpg"/></a>

                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
                        <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaX8zmCnD1bxqwDFkHd2S-11PbXT8UI5_GqbF7fj90vcbNYeF_9S44U_M7R4s-wRaWOwe4Sfx3ccDCM9sIq0Ot6t8lXQdxc5pxh-qAuXkZ8nOUvzjiGxbvTWIxg7NAEzUGgumJVLY3C55S/s1600/emak.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
                        <p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>

                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TMYRp10ttczk7KSx1tYrJuR5T4YAtfVJRoGeOAQhRM44K6gk4Y8avmTIz9F7C2A7wbdPYp64BcerZhMicspXj1LG-UdYElRPBKaqEen_5qyETh5elngI_oKhBTTk3RhYzz7JpUvE8zVS/s1600/hawa.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
                        <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
                        </li>

                        <li>
                        <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibfFBNp2D5F3Zux59TmJ9X2r4UmsygoYSGD23XeX17Hy8EuDv_mdaL9YJl4g2wwTikDw2bropcUbcNmgOtnpWZQYiOlhXuoqYmU36xFfjbhahUZMmT58VCjvfzHy3iNVkF1JXcmGKtLzz7/s1600/hawa+2.jpg" /></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
                        <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL83NgYVz6HrQuNuulEfwSkbnFrFM_rsDlffvA3WhSKurLy61-CzznNCUaykwSagHPL9a217YhKyKlg-QWEWNejlgryUn3UYxZwbPv208yp27Px9jqhyphenhyphennO7nHfSd2eMVSJ9UL3LrJ2APQ/s1600/youly+chang.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
                        <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mjUszLqtqJh3KwGgEy5tAT1ODnwDGCNKuaT7bXgdaRQA2brTrbReUpDaE5efe7YJt5N21xgHEOiW0j2koWkU59v-Ufesy1oayyN3IgUJpbe9g-nddd1-uHjMfM7mwYC8_S7T4Y1TwarF/s1600/emak.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/oh-emak-oh-ibu.html">Oh Emak Oh Ibu</a></h3>

                        <p>5 tahun yang lalu waktu emak mengantarku ke terminal bus antar provinsi guna merantau dan berangkat kuliah ke Jakarta... <a href="#"> more &raquo; </a></p>
                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TMYRp10ttczk7KSx1tYrJuR5T4YAtfVJRoGeOAQhRM44K6gk4Y8avmTIz9F7C2A7wbdPYp64BcerZhMicspXj1LG-UdYElRPBKaqEen_5qyETh5elngI_oKhBTTk3RhYzz7JpUvE8zVS/s1600/hawa.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
                        <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
                        </li>

                        <li>

                        <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibfFBNp2D5F3Zux59TmJ9X2r4UmsygoYSGD23XeX17Hy8EuDv_mdaL9YJl4g2wwTikDw2bropcUbcNmgOtnpWZQYiOlhXuoqYmU36xFfjbhahUZMmT58VCjvfzHy3iNVkF1JXcmGKtLzz7/s1600/hawa+2.jpg" /></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
                        <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

                        </li>

                        <li>
                        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL83NgYVz6HrQuNuulEfwSkbnFrFM_rsDlffvA3WhSKurLy61-CzznNCUaykwSagHPL9a217YhKyKlg-QWEWNejlgryUn3UYxZwbPv208yp27Px9jqhyphenhyphennO7nHfSd2eMVSJ9UL3LrJ2APQ/s1600/youly+chang.jpg"/></a>
                        <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
                        <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>

                        </li>

                        </ul>
                        Keterangan :
                        -  Warna biru : URL image
                        -  Warna merah : URL post
                        -  Warna kuning : Ringkasan post
                        -  Warna hijau : judul post
                      5. Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
                      6. Kemudian save/simpan template selesai sudah
                      Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda.  Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

                      Two Reasons why IPS is a "Must Have" for your Network

                      Introduction This is the third in my Security Series of Connect articles.  For more information on how to keep your enterprise environm...