Tips Blog | Tutorial Blog | Belajar Blog

Menampilkan Judul Postingan Setelah Melakukan Pencarian

standard Perhatikan gambar disamping, terlihat jelas blog hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika sobat bingung maksud saya, silahkan sobat ketik keyword �blogspot� pada kotak search milik saya, terlihat blog hanya menampilkan judul � judul dari postingan saja. Secara default atau bawaan dari template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.

 

Sekarang sobat sudah paham maksud dan tujuan untuk melakukan hasil pencarian dalam bentuk judul postingan. Jika tertarik, silahkan ikuti langkah � langkahnya berikut ini :

  1. Login ke blogger dengan ID sobat.

     

  2. Klik Tata Letak.

     

  3. Pilih Edit HTML.

     

  4. Silahkan klik Download Template Lengkap, untuk jaga � jaga jika gagal dan template jadi rusak..Laughing just kidding sob.

     

  5. Kemudian klik Expand Template Widget.

     

  6. Cari kode <b:include data='post' name='post'/>

     

  7. Hapus kode diatas dan ganti dengan kode berikut ini :

     

    <b:if cond='data:blog.homepageUrl !=
    data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

     

  8. Kemudian Simpan Template.

Silahkan lihat hasilnya, jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa sobat terapkan :

 

  1. Bentuk hasil pencarian dengan garis putus � putus dibawah setiap judul postingan.

     

    hr

     

    Jika sobat tertarik dengan variasi yang seperti ini, sobat tinggal menyisipkan kode <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>��..</br>, sehingga hasilnya menjadi seperti berikut ini :

     

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

     

    Kode warna #CCCCCC adalah warna abu - abu, untuk mengubah warna garis dengan warna lain sobat bisa lihat disini.

     

  2. Bentuk hasil pencarian dengan judul didalam kotak - kotak (seperti di blog saya Blushing).

     

    outset

     

    Untuk hasil yang seperti ini, silahkan sobat ubah kode diatas menjadi seperti berikut :

     

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
    <a expr:href='data:post.url'>
    <data:post.title/></a></div><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

     

    Untuk kode width:500px, sobat sesuaikan dengan lebar main menu atau lebar kolom postingan sobat. Jika lebar kolom post 500px maka sebaiknya buatlah sebesar 400px saja agar terlihat lebih bagus. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan.

     

Selamat mencoba..have a nice day, selamat menunaikan ibadah puasa.smile_teeth

Migrasi Dari Wordpress Ke Blogger

wordpress to blogger Saya sendiri merasakan kurang optimalnya fasilitas yang di berikan oleh wordpress, karena wordpress tidak bisa menampilkan kode javascript. Sedangkan rata � rata widget ataupun kode iklan sekarang menggunakan javascript. Nah bagaimana bisa bisnis adsense jika memasang kode javascript saja tidak bisa.Cool

 

Untungnya ada fasilitas dari kedua situs ini yang menyediakan untuk export dan import dari satu blog ke blog lain. Caranya tidak panjang, sobat hanya membutuhkan waktu kurang lebih 15 menit saja, blog sobat yang tadinya berbasis wordpress, dalam waktu singkat bisa berubah jadi blogspot.

 

Tertarik ingin pindah ? sipp..silahkan siapkan kopi dan rokok biar lebih nikmat..Big Grin

Berikut langkah � langkahnya :

 

  1. Silahkan login ke Wordpress.

     

  2. Masuk ke Dashboard.

     

  3. Kemudian pilih Perkakas (Tools).

     

  4. Pilih Export dan klik Download Export File.

     

  5. Masuk ke http://wordpress2blogger.appspot.com/ dan Browse file yang tadi sobat export lalu klik Convert.

     

  6. Sekarang masuk ke Blogger dengan ID sobat, buat blog baru atau jika sudah ada gunakan saja yang ada.

     

  7. Tuju ke Pengaturan.

     

  8. Lalu pilih Import Blog.

     

  9. Pada jendela Import ini silahkan pilih file yang sudah di convert tadi (blogger-export.xml).

     

  10. Jika sudah, jangan lupa checklist tanda yang ada dibawahnya, kemudian klik Import Blog.

     

Selesai sudah, sekarang blog sobat sudah berubah menjadi blogspot.

Selamat Mencoba. thumbs_up

Cara Membuat Random Posts

post Random Posts adalah judul postingan atau artikel yang tampil secara acak di blog kita. Biasanya kita menampilkan recent posts atau artikel terakhir pada blog, tapi hal itu kurang efektif karena menurut saya recent posts hanya menampilkan postingan terkahir saja, biasanya 5 post sampai 10 post. Sedangkan random posts menampilkan postingan kita secara acak, bahkan postingan kita terdahulu bisa muncul dalam daftar random posts ini.

 

Cara membuatnya sangat mudah hanya memerlukan sedikit kode script. Baiklah, langsung tuju blogger dan masuk dengan ID sobat.

 

  • Kemudian klik Tata letak.

     

  • Tuju Elemen Halaman.

     

  • Klik Tambah Gadget.

     

  • Pilih yang HTML / Javascript.

     

  • Kemudian masukkan kode script berikut ini :

     

    <script type="text/javascript">
    function pipeCallback(obj) {
    document.write('<ul style="text-transform: capitalize;">');
    var i;
    for (i = 0; i < obj.count ; i++)
    {
    var href = "'" + obj.value.items[i].link + "'";
    var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
    document.write(item);
    }
    document.write('</ul>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>

     

  • Untuk tulisan yang saya tandai dengan warna merah, sobat ganti dengan alamat blog sobat, dan yang berwarna biru adalah jumlah post.

Selamat mencoba. Thumbs-up

Cara Membuat Tab View Menu

Tab Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

 

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik � baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

 

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh�mantaabbbbb kita langsung ke TKP.Hot

 

  1. Silahkan login ke blogger dengan ID sobat tentunya.

     

  2. Tuju Tata Letak.

     

  3. Klik Edit HTML.

     

  4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.

     

  5. Kemudian letakkan kode javascript berikut sebelum kode </head>

     

    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);

      // ----- Tabs -----

      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

      var Tab = Tabs.firstChild;
      var i   = 0;

      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);

      // ----- Pages -----

      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;

      var Page = Pages.firstChild;
      var i    = 0;

      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }

    // ----- Functions -------------------------------------------------------------

    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>

     

  6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

     

    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Lebar Menu Utama Atas */

    text-align: center;
    height: 30px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* Warna Font Menu Utama Atas */
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #E6E6E6; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

     

  7. Kemudian Simpan Template.

     

  8. Langkah selanjutnya, silahkan sobat klik Tata Letak.

     

  9. Klik Elemen Halaman dan tambahkan Gadget.

     

  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

     

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>

    </div>
    <div class="Pages" style="width: 300px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />

    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

     

  11. Kemudian Simpan.

 

Keterangan :
  • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.

     

  • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.

     

  • Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba. smile_teeth

Modifikasi Label Cloud Dari Blogger

Tags Beberapa waktu yang lalu, Blogger telah menambahkan fitur baru yaitu label cloud. Saya sendiri tidak tahu pasti kapan Blogger menambahkan fitur ini, setelah minggu lalu saya secara tidak sengaja ingin menampilkan label pada blog saya yang lain, saya melihat ada yang baru tapi lama.

 

Baru tapi lama ? iya dong, kan label cloud sudah sering kita jumpai tutorialnya di berbagai blog.

 

Setelah mencoba, rasanya fasilitas label cloud ini kurang menarik tampilannya. Saya mencoba untuk menambahkan beberapa kode pada HTML blog untuk merubah warna dan besarnya huruf pada label cloud ini.

Karena memang label cloud asli dari blogger ini warna dan hurufnya sangat standard atau terlihat biasa � biasa saja. Saya menambahkan beberapa warna kedalamnya, untuk mengetahuinya silahkan sobat ikuti langkahnya berikut ini.

 

  1. Seperti biasa, sobat login ke blogger.

     

  2. Klik Tata Letak.

     

  3. Kemudian klik Edit HTML.

     

  4. Backup dulu template sobat dengan mengklik Download Template Lengkap.

     

  5. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

     

    .label-size-1 a {
    font-size: 13px;
    text-decoration: none;
    color:#4B8A08;
    }
    .label-size-2 a {
    font-size: 15px;
    text-decoration: none;
    color:#DF0101;
    }
    .label-size-3 a {
    font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
    color:#045FB4;
    }
    .label-size-4 a {
    font-size: 18px;
    text-decoration: none;
    color:#DF7401;
    }
    .label-size-5 a {
    font-size: 23px;
    text-decoration: none;
    color:#045FB4;
    }

    .label-size-1 a:hover,
    .label-size-2 a:hover,
    .label-size-3 a:hover,
    .label-size-4 a:hover,
    .label-size-5 a:hover { text-decoration:underline;}

          
     

  6. Kemudian Simpan Template.

 

Sekarang sobat bisa lihat hasilnya, ada beberapa warna yang saya tambahkan ke dalam label cloud tersebut. Untuk kode yang saya tandai dengan warna merah, sobat bisa ubah sendiri sesuai keinginan sobat. Kode warna bisa sobat lihat disini.

 

Selamat mencoba !! Wink