Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Artikel Terkait dengan Ringkasan
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang hanya terdiri dari gambar dan judul saja. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

  • Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
  • Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <style type='text/css'>
          #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
          #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
          #relpost_img_sum:hover         {background:none;}
          #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
          #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
          #relpost_img_sum li:hover      {background-color:#F0ECE9;}
          #relpost_img_sum .news-title a {color:#2C6BA8;}
          #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
          #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
          #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
     </style>
     <script type='text/javascript'>
          var relnojudul = 0;
          var relmaxtampil = 10;
          var numchars = 200;
          var morelink = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>

Selanjutnya temukan kode ini:

<div class='post-footer'>

TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.


Salin kode di bawah ini, kemudian letakkan tepat di atasnya: 
<!-- Artikel Terkait dengan Gambar dan Ringkasan -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='related_posts'>
          <h4>Artikel Terkait</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</b:if>
<!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->
  • Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
  • Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian-Penyesuaian:

  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
  • var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
  • var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
  • var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
  • Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.

Sumber: http://modification-blog.blogspot.com
READ MORE - Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

State Aktif untuk JQuery Accordion

State Aktif untuk JQuery Accordion
State Aktif JQuery Akordion
Tambahkan class active pada panel akordion yang sedang aktif:


JQuery

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Kerangka

<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 4</h2>
    <div class='content'>
        ....
    </div>
</div>

Contoh Hasil Penerapannya Ada Dibawah ini :

Panel 1

....
Contoh Isi Panel 1

Panel 2

....
Contoh Isi Panel 2

Panel 3

....
Contoh Isi Panel 3

Panel 4

....
Contoh Isi Panel 4
READ MORE - State Aktif untuk JQuery Accordion

Membuat Sidebar Akordion dengan JQuery

JQuery Akordion
jquery Accordion
Langkah-Langkah Membuat Sidebar Akordion.- Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode ini:

</head>

Salin kode di bawah ini dan letakkan di atasnya: 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');

    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut.

Sekarang coba simpan template Anda dan lihat apa yang terjadi pada sidebar blog Anda...

Tidak berhasil?

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:

<div id='sidebar-wrapper-2'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
      <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
      <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
      <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
      <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
   </b:section>
</div>

Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya (Click right mouse=> inspect Element:

Membuat Sidebar Akordion dengan JQuery
firebug/Inspect Elemen
Nah, Anda bisa mengganti kode #sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.

Satu tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang penting (alah!). Kita harus mengubah pointer teksnya menjadi pointer jari telunjuk seperti halnya pointer standar yang selalu muncul pada semua link.

Ada dua cara untuk mengubah pointer teks pada elemen <h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:

#sidebar-wrapper h2 {
  cursor:pointer;
}

Atau cukup sisipkan fungsi JQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:

$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Mengenai fungsi .addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:

#sidebar-wrapper h2.active {color:red;}

Membuat Sidebar Akordion dengan JQuery
Gambar Sidebar Akordion

Lihat DEMO
READ MORE - Membuat Sidebar Akordion dengan JQuery

Langganan: Postingan (Atom)
 
© Copyright 2012.BlogKu.BlogSpot.com: Widget | Template by blogku.blogspot.com