Homtimpa: Footer | Your Blog Description

Showing posts with label Footer. Show all posts

XHTML Blogger, Share Buttons

Dalam Konsep

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'>
    <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showBlogThisButton'>
    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showTwitterButton'>
    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showFacebookButton'>
    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showOrkutButton'>
    <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showPinterestButton'>
    <a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToPinterestMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:top.showEmailButton	Boolean	`true`, `false`
data:top.showBlogThisButton	Boolean	`true`, `false`
data:top.showTwitterButton	Boolean	`true`, `false`
data:top.showFacebookButton	Boolean	`true`, `false`
data:top.showOrkutButton	Boolean	`true`, `false`
data:top.showPinterestButton	Boolean	`true`, `false`
data:top.showDummy	Boolean	`true`, `false`
data:post.sharePostUrl	Elemen ini akan menghasilkan URL berbagi	`http://www.blogger.com/share-post.g?blogID=52518732703774XXXX2&postID=703794562479435XXXX`
data:top.emailThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Kirimkan Ini lewat Email`
data:top.blogThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`BlogThis!`
data:top.shareToTwitterMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Twitter`
data:top.shareToFacebookMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Facebook`
data:top.shareToOrkutMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Orkut`
data:top.shareToPinterestMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Pinterest`
data:post.dummyTag	???	...

XHTML Blogger, Formulir Komentar

Dalam Konsep

TemplatesV1

<b:includable id='comment-form' var='post'>
  <div class='comment-form' id='comment-form'>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup' style='width:100px;height:20px;'/>
    </b:if>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:postCommentMsg	Elemen ini akan menghasilkan label judul komentar	`Poskan Komentar:`
data:blogCommentMessage	Elemen ini akan menghasilkan pesan di atas formulir komentar	`Be nice, No spam!`
data:blogTeamBlogMessage	???	...
data:post.commentFormIframeSrc	Elemen ini akan menghasilkan URL formulir komentar mentah	`http://www.blogger.com/comment-iframe.g?blogID=29890010286969XXXX&postID=556779452392602XXXX`
data:post.friendConnectJs	???	...
data:post.cmtfpIframe	Elemen ini akan menghasilkan script `XXX-comment_from_post_iframe.js`	`<script type="text/javascript" src="//www.blogger.com/static/v1/jsbin/2468562941-comment_from_post_iframe.js"></script>`
data:showCmtPopup	[?]	-
data:post.appRpcRelayPath	???	`http://www.blogger.com/rpc_relay.html`
data:post.communityId	???	`0665491695519118XXXX`

TemplatesV2

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form' id='threaded-comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:mobile	Boolean untuk menyatakan apakah blog sedang berada dalam tampilan seluler atau tidak	`true`, `false`

Karena Saya lihat masih banyak yang salah paham dengan istilah Sticky Footer, jadi Saya akan membahasnya. Kebanyakan orang menganggap bahwa sticky footer itu artinya footer menempel di bawah layar dan akan tetap berada pada posisinya meskipun layar digulung.

Baiklah, memang bisa dibilang begitu, mengingat kata 'stick' juga berarti 'menempel'. Tapi bukan seperti itu pengertian sticky footer yang sebenarnya. Sticky Footer maksudnya adalah footer akan tetap berada di bawah layar meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar. Sticky Footer digunakan untuk memastikan agar tampilan halaman yang rendah tidak tampak jelek saat berada pada device yang ukuran layarnya lebih tinggi dari ukuran halaman.

Berikut ini adalah sebuah demonstrasi footer biasa dimana di atasnya hanya terdapat beberapa teks, sehingga tinggi halaman tidak mampu meraih bagian bawah:

Lihat Demo

Bisa Anda lihat bahwa footer tampak menggantung di atas dan menjadikannya tidak menarik. Nah, Sticky Footer berguna untuk mengatasi masalah ini, untuk memastikan agar footer tetap berada di bawah meskipun tinggi halaman lebih rendah dari tinggi layar. Ini adalah contoh sticky footer:

Lihat Demo

Anda lihat bahwa meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar, CSS Sticky Footer tetap menjaga agar halaman menekan ke sisi atas dan sisi bawah (dengan menggunakan ukuran tinggi dominan sebesar 100% pada masing-masing elemen) sehingga tidak akan ada ruang kosong yang tersisa di bagian bawah.

Masih Belum Yakin dengan Istilah Sticky Footer?

Cek situs ini ⇒ http://www.cssstickyfooter.com/

Pada bagian prolog sudah jelas tertulis, "It Sticks to the Bottom of the Page!", bukan "It Sticks to the Bottom of the Window!"

Dan ini adalah halaman demonstrasi tampilan footer biasa beserta masalahnya, yang juga terdapat pada sub-halaman dari situs tersebut: http://www.cssstickyfooter.com/non-stick-footer.html

Sticky Footer bukan berarti bahwa footer melayang di bawah layar. Sticky Footer lebih tepat dikatakan sebagai metode untuk memastikan footer tetap berada di bawah halaman meskipun tinggi halaman lebih pendek dari tinggi layar.
Sticky Footer hanya akan terlihat efeknya jika tinggi halaman lebih pendek dari tinggi layar. Jika tinggi halaman tidak lebih pendek dari tinggi layar (atau katakanlah: Jika Anda bisa memastikan bahwa halaman situs Anda tidak pernah lebih pendek dari tinggi layar), maka Anda tidak perlu menggunakan Sticky Footer.

Saat tinggi halaman sudah melebihi tinggi layar, maka efek Sticky Footer akan menghilang. Dan CSS Sticky Footer sudah tidak ada gunanya lagi saat itu:

Lihat Demo

CSS & HTML Sticky Footer

HTML

<div id="wrap">
    <section id="main"> ... </section>
</div>
<footer id="footer"></footer>

CSS

/**  
 * Sticky Footer Solution
 * by Steve Hatcher 
 * http://stever.ca
 * http://www.cssstickyfooter.com
 */

* {margin:0;padding:0;} 

/* Must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
  height:100%;
}

#wrap {
  min-height:100%;
}

#main {
  overflow:auto;
  padding-bottom:180px; /* must be same height as the footer */
}

#footer {
  position:relative;
  margin-top:-180px; /* negative value of footer height */
  height:180px;
  clear:both;
} 

/* Opera Fix */
body:before { /* thanks to Maleika (Kohoutec)*/
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px; /* thank you Erik J - negate effect of float */
}

Tambahan Untuk Internet Explorer

<!--
You also need to include this conditional style in the <head> of your HTML file
to feed this style to IE 6 and lower and 8 and higher...
-->

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

StickyBar JQuery Plugin

StickyBar is a JQuery plugin to make the element keep stayed in the visible area when the page is being scrolled.

StickyBar adalah plugin JQuery untuk membuat elemen selalu berada pada tempat yang terlihat. Anda mungkin pernah melihat plugin semacam ini di luar sana. Jenisnya memang ada banyak, tapi mereka memiliki beberapa keterbatasan dalam segi opsi dan keamanan. Di sini Saya telah memberikan opsi-opsi penting tambahan yang lebih lengkap dan juga mencoba untuk menerapkan metode yang lebih aman:

Lihat Demo Unduh Plugin Unduh Plugin (Minified)

Sebagian besar plugin sejenis hanya menerapkan posisi fixed pada elemen ketika elemen telah mencapai batas akhir area terlihat pada layar dan melepaskan posisinya jika elemen telah berada pada posisi awal. Bisa dilihat pada salah satu potongan kode yang pernah Saya catat di sini.
Padahal, menerapkan posisi fixed secara mendadak pada elemen bisa menyebabkan struktur elemen di sekelilingnya menjadi rusak/berantakan disebabkan ruangan tempat elemen yang menjadi target telah kosong.

Ini terjadi karena perpindahan posisi elemen termanipulasi secara mendadak dari posisi static yang memakan ruang menjadi posisi fixed yang tidak memakan ruang.

Saat elemen termanipulasi berubah menjadi fixed, maka elemen-elemen di sekelilingnya akan berloncatan berusaha menutupi kekosongan. Selain itu, posisi elemen static yang berubah menjadi fixed juga akan mengalami perubahan posisi dalam segi koordinat (terutama posisi atas dan kiri) sehingga kita akan membutuhkan lebih banyak perhitungan untuk itu. Intinya: terlalu rumit!

Lalu bagaimana kita bisa mengubah posisi elemen menjadi melayang tanpa harus menghilangkan ruang asal elemen? Caranya adalah dengan memperbaharui nilai top secara terus-menerus berdasarkan jarak gulungan layar. Cara ini akan membuat elemen seolah-olah melayang:

Lihat Konsep Dasar

Metode yang sama juga Saya pakai untuk menciptakan plugin ini. Keuntungannya, kita tidak perlu khawatir dengan keadaan posisi elemen di sekitar target jika target telah mengalami manipulasi, karena di sini plugin akan memanipulasi posisi elemen dengan tetap menjaga jenis posisinya sebagai posisi relative, sehingga betatapun jauh elemen berpindah dari elemen-elemen lain, dia tidak akan mengganggu posisi elemen yang lain dan tidak akan mengosongkan ruang asalnya. (Ingat: top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left).

Pembaharuan: Saya memutuskan untuk menggunakan posisi fixed asli pada plugin ini karena beberapa kekurangan yang terjadi, namun tetap mempertahankan posisi fixed palsu untuk opsi StickyBar dengan efek animasi.

Konfigurasi Plugin StickyBar

Letakkan JQuery, plugin StickyBar dan kode eksekusi di atas </head> dengan susunan seperti ini, dan selesai sudah:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hompimpa.googlecode.com/svn/trunk/StickyBar/js/jquery.stickybar.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#sidebar').stickyBar();
});
</script>

Opsi Lanjutan

Terdapat beberapa opsi lanjutan pada plugin ini:

$('#sidebar').stickyBar({
    animated: false,
    speed: 400,
    easing: null,
    top: 0,
    bottom: 0,
    until: "",
    fixedClass: 'isFixed',
    stoppedClass: 'isStopped',
    onFixed: function() {},
    onStatic: function() {},
    onStopped: function() {}
});

Opsi	Keterangan
top	Digunakan untuk menentukan jarak atas elemen melayang (sticky element)
bottom	Digunakan untuk menentukan jarak bawah elemen termanipulasi terhadap elemen penghenti. Secara umum tidak terlalu penting, jadi abaikan saja jika tidak perlu.
animated	Jika bernilai `true`, elemen akan melayang dengan efek animasi. Demonya bisa dilihat di sini
speed	Digunakan untuk menentukan kecepatan animasi jika opsi `animated` bernilai `true`
easing	Digunakan untuk menentukan tipe easing JQuery. Demonya bisa dilihat di sini. Saya memakai tipe easing `"easeOutElastic"`
until	Digunakan untuk menentukan elemen penghenti posisi melayang pada elemen termanipulasi. Sehingga jika elemen melayang telah menyentuh elemen penghenti, maka elemen tersebut akan berhenti melayang. Jika bingung Anda bisa melihat contoh penerapannya di sini
fixedClass	Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut berada dalam kondisi `fixed`.
stoppedClass	Digunakan untuk menentukan nama kelas elemen termanipulasi saat elemen tersebut terhenti karena suatu elemen penghenti di bawahnya.
onFixed	Callback fungsi yang akan dijalankan jika elemen termanipulasi berada dalam kondisi `fixed`.
onStatic	Callback fungsi yang akan dijalankan jika elemen termanipulasi kembali pada posisi normal.
onStopped	Callback fungsi yang akan dijalankan jika elemen termanipulasi terhenti karena suatu elemen penghenti di bawahnya.

Dua Macam Kelas Baru

Dua macam kelas baru akan diterapkan pada elemen yang dimanipulasi berdasarkan keadaannya, yaitu kelas isFixed dan isStopped. Anda bisa menggunakan kelas-kelas tersebut untuk membedakan tampilan elemen saat berada dalam keadaan normal, keadaan melayang atau dalam keadaan terhenti oleh elemen penghenti melalui CSS:

.isFixed {
  /* Kode CSS tampilan elemen melayang... */
}
.isStopped {
  /* Kode CSS tampilan elemen terhenti... */
}

Atau, Anda juga bisa menentukan sendiri nama kelas-kelas tersebut melalui opsi fixedClass dan stoppedClass:

$('#sidebar').stickyBar({
    fixedClass: 'my-fixed-class',
    stoppedClass: 'my-stopped-class'
});

Efek pembedaan tanda berdasarkan keadaan elemen bisa Anda lihat dengan mudah pada demo StickyBar - Limit

Demo Lain

StickyBar - Another Test

Toggle Sidebar dengan JQuery

Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan.

Karena banyak yang meminta jadi Saya membuatnya. Plugin ini digunakan untuk megubah sidebar blog menjadi toggle. Bisa ditampilkan dan bisa disembunyikan berdasarkan perintah. Demonya bisa dilihat di sini:

Lihat Demo

Sebagai catatan, Saya tidak bisa menjamin bahwa blog demo di atas akan terus Saya lengkapi dengan plugin ini, jadi jangan heran jika suatu saat nanti blog di atas tidak bekerja. Tapi pada intinya Saya sudah mengetes plugin ini pada template yang sesungguhnya.

Integrasi Plugin ke dalam Template

Pertama-tama masuk ke halaman editor HTML Template Anda:

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya. Ini digunakan untuk mengatur dimensi tombol toggle:

#sidebar-toggler-wrapper {
  clear:both;
  position:relative;
}

#sidebar-toggler-wrapper a.sidebar-toggler {
  color:white;
  font:normal bold 11px/100% Arial,Sans-Serif;
  text-decoration:none;
  margin:0 0;
  padding:4px 10px;
  background-color:#123;
  border-left:4px solid #789;
  outline:none;
  position:absolute;
  bottom:0;
  right:0;
}

#sidebar-toggler-wrapper a.active {
  color:black;
  background-color:#789;
  border-left-color:#123;
}

Setelah itu temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='http://dte-project.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper').toggleSidebar({
        expand: "#main-wrapper"
    });
});
//]]>
</script>

Kode yang Saya garis bawahi adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut! Minimal versi 1.7, karena di sini (dan mulai saat ini) Saya tidak lagi memakai event .click() melainkan .on("click") Jika versi JQuery yang sedang Anda pakai berada di bawah itu, lebih baik ganti JQuery Anda dengan kode yang Saya garis bawahi di atas.

Klik Simpan Template.

Selektor #sidebar-wrapper adalah ID yang diambil dari sidebar yang akan muncul dan tampil berdasarkan perintah, sedangkan selektor #main-wrapper adalah elemen kolom yang akan melebar dan menyempit untuk menutupi kekosongan karena hilangnya sidebar. Saya rasa sampai di sini bisa dipahami. Jika belum, Saya beri gambaran mudahnya seperti ini:

Lihat Sampel

Bagian kiri adalah #main-wrapper yaitu kolom artikel/posting (sebut saja begitu) dan bagian kanan adalah #sidebar-wrapper yaitu sidebar blog.
Kolom artikel & kolom sidebar = #main-wrapper & #sidebar-wrapper.
Kesimpulannya:

$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"});

Begitu saja. Jika sudah berhasil, kita bisa memasuki konfigurasi lanjutan yang lebih mendalam. Tapi jika belum, mungkin ID kolom artikel dan sidebar blog Anda bukan berupa #main-wrapper dan #sidebar-wrapper. Sebagai contoh, template blog yang Saya gunakan memiliki dua kolom dengan masing-masing ID berupa #leftcol dan #rightcol:

ID Kolom yang berbeda dari template pada umumnya — Umumnya sebuah template memiliki ID kolom utama berupa **#main-wrapper** dan kolom sisi berupa **#sidebar-wrapper**. Tapi dalam beberapa template tidak begitu.

Pengaturan Lanjutan

Ada cukup banyak konfigurasi yang bisa dilakukan pada plugin ini. Termasuk pengaturan sesi kuki. ~~Jadi, script cookie.js yang Saya sertakan di atas jquery-toggle-sidebar.js sebenarnya tidak perlu disertakan/bisa dibuang jika Anda menonaktifkan fitur sesi toggle pada sidebar~~:

$('#sidebar-wrapper').toggleSidebar({
    expand: "#main-wrapper",
    hideText: "&rArr; Hide Sidebar",
    showText: "&lArr; Show Sidebar",
    animated: false,
    animateSpeed: 400,
    easingType: null,
    extraWidth: 0,
    enableCookie: false,
    defaultHidden: false
});

Opsi	Keterangan
expand	Elemen yang akan melebar dan menyempit untuk mengisi kekosongan karena hilangnya sidebar
hideText	Label tombol saat sidebar sedang tampil
showText	Label tombol saat sidebar sedang tersembunyi
animated	Jika bernilai `true` maka efek animasi akan diterapkan pada saat proses muncul/hilangnya sidebar
animateSpeed	Digunakan untuk menentukan kecepatan animasi jika opsi `animated` bernilai `true`
extraWidth	Digunakan untuk menentukan lebar ekstra pada kolom artikel. Pada dasarnya, saat sidebar menghilang, lebar kolom artikel akan berubah berdasarkan perhitungan lebar dirinya sendiri ditambah dengan lebar sidebar yang disembunyikan. Opsi ini tidak terlalu penting dan hanya digunakan jika kolom artikel tidak melebar dengan lebar yang tepat. Nilai bisa berupa angka positif ataupun negatif. Positif akan menambah standar lebar kolom, sedangkan negatif akan mengurangi stardar lebar kolom saat sidebar sedang tersembunyi
easingType	Digunakan untuk menentukan tipe easing animasi jika opsi `animated` bernilai `true`
enableCookie	Jika `true`, sesi toggle pada sidebar akan diingat oleh peramban. Sehingga sesi sidebar tidak akan berubah ke sesi awal meskipun Anda berpindah-pindah halaman. Saya menggunakan JavaScript cookie yang cara kerjanya sudah pernah Saya jelaskan di sini
defaultHidden	Jika `true` sidebar akan disembunyikan saat keadaan normal.

JQuery Toggle Sidebar JQuery Toggle Sidebar Minified

Tip: Membuat Sidebar Akordion dengan JQuery

Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini » Tambahkan State Aktif untuk JQuery Accordion. Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari potongan kode tersebut.

Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut?

Mari kita coba mengambil sudut pandang ini:

Kerangka Sidebar dan Widget pada Template Blogspot — Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion.

Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini:

<div id='sidebar-wrapper'>
    <h2>Blogger templates</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Blogroll</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Labels</h2>
    <div class='widget-content'>
        ....
    </div>
</div>

Jika Anda teliti dengan baik, ternyata model kerangka di atas sama persis dengan kerangka yang ada pada percobaan JQuery akordion yang pernah Saya tuliskan:

<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>
</div>

Itulah kesempatan Anda untuk menjadi kreatif hari ini. Kali ini kita akan menciptakan sidebar dengan efek akordion hanya dengan bermodalkan ide tersebut. Pertama-tama, tentunya harus kita ketahui beberapa elemen yang sama sebagai pemandu dan itu akan kita gunakan untuk memodifikasi potongan kode efek akordion ini:

$(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');
        }
    });
});

Sebagai contoh, elemen #accordion memiliki peran yang sama persis dengan elemen #sidebar-wrapper dan elemen .content juga memiliki peran yang sama dengan elemen .widget-content. Elemen h2 tidak perlu dipertanyakan lagi. Kesimpulannya adalah, untuk menciptakan sidebar akordion setidaknya kita harus memodifikasi kode di atas menjadi seperti ini:

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

Ya, cuma begitu saja modal dasar untuk menciptakan efek akordion pada sidebar. Asalkan kita sudah menemukan ID sidebar yang ingin kita jadikan sebagai target, maka sisanya tinggal melakukan beberapa modifikasi kecil saja.

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:

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;}

Lihat Demo

Info Template

Bleach

Template author: NBTemplate
Description: Bleach is a free blogger template with 3 columns, sidebar on the right and left and exclusive design for Blogger.
Excellent layout for blogs about animals, anime, kids or love.
Download Bleach for free in BTemplates.

Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini:

Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja.

Pertama-tama, masuklah ke halaman editor HTML templatemu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Temukan kode ini:

<div class='post-footer'>

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

Salin kode ini, kemudian letakkan tepat di atas kode tadi:

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='admin-tulisan'>
          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>
          <div class='kontainer'>
               <img src='http://1.bp.blogspot.com/_yGa4b5VGx6w/Skrkk_0ByLI/AAAAAAAAAC8/gJy0GYR_M08/S220/toilet.jpeg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. <data:post.author/> adalah seorang penulis mahadahsyat yang masih suka pipis di celana dan maunya nenen sama mama. Suka minta jajan yang aneh-aneh dan suka kentut di depan mikrofon.
               <div style='clear:both;'/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->

Sekarang gulung formulirnya ke atas, dan segera temukan kode ]]></b:skin> atau </style>. Letakkan kode ini tepat di atasnya:

.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px Arial,Sans-Serif;
  padding:5px 10px;
  margin:0 0 0 0;
  display:block;
}

.admin-tulisan h4 a {color:#FEEA83;}

.admin-tulisan img {
  width:70px;
  height:70px;
  margin:0 10px 0 0;
  float:left;
  border:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan URL foto profilmu. Untuk mendapatkan URL foto profil caranya mudah. Cukup klik kanan pada foto profil di dasbormu, kemudian pilih copy image location:

Untuk selebihnya Saya yakin kamu bisa menyesuaikannya sendiri.
Klik Simpan Template.

Tabulasi Widget Sidebar Otomatis dengan JQuery

Selain menggunakan tag kondisional, salah satu cara praktis untuk menghemat ruang sidebar adalah dengan menerapkan sistem tabulasi widget sidebar otomatis seperti ini:

Hasil akhir proyek ini nantinya akan secara otomatis membuat sejumlah widget (bisa ditentukan jumlahnya) membentuk tabulasi-tabulasi dimana judul widget akan menjadi elemen tabulasinya, sedangkan konten widget akan menjadi tubuhnya.

Pertama-tama masuklah ke halaman editor HTML templatemu, kemudian cari script yang tampak seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Jika templatemu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head>

Setelah itu salin kode ini kemudian letakkan di bawah script tadi:

<script type='text/javascript'>
//<![CDATA[
var starttab = 0;
var endtab = 3;
var sidebarname = 'sidebar-wrapper';

var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul></div>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("hompitab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .hompitab").hide();$jtab1("#widg"+$jtab1(this).attr("id")).fadeIn();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>

Terakhir tinggal meletakkan kode CSS ini di atas kode ]]></b:skin> atau </style>:

/*
 * Modifikasi 3 Oktober 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 * (original: http://www.abu-farhan.com)
 */

.hompitab {
  position:relative;
  z-index:1;margin:0px 0px;
  padding:0px 0px;
  border:1px solid #ccc;
  background:#fff;
}

.hompitab .widget-content {
  margin:10px 15px !important;
}

ul.tab-wrapper {
  margin:15px 0 -10px 0;
  padding:0 0 0 0;
}

ul.tab-wrapper li {
  position:relative;
  z-index:0;
  cursor:pointer;
  background:#666;
  padding:6px 8px 5px;
  text-decoration:none;
  color:#ebebeb;
  font:bold 11px Arial,Sans-serif;
  text-shadow:0 1px rgba(0,0,0,0.4);
  display:inline;
  list-style:none !important;
  margin:0px 1px;
  text-transform:uppercase;
  -webkit-border-radius:3px 3px 0px 0px;
  -moz-border-radius:3px 3px 0px 0px;
  border-radius:3px 3px 0px 0px;
}

ul.tab-wrapper li.active-tab {
  border:1px solid #ccc;
  border-bottom-color:#fff;
  background:#fff !important;
  z-index:2;
  color:#666;
  text-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan ID sidebarmu. (ID sidebar??)

Untuk menentukan ID sidebar, kamu cari baris kode yang kurang lebih tampak seperti ini:

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/>
          <b:widget id='Label1' locked='false' title='Media' type='Label'/>
          <b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/>
          <b:widget id='HTML4' locked='false' title='Label' type='HTML'/>
          <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
     </b:section>
</div>

Nah, kode yang Saya beri warna merah itulah yang dimaksud sebagai ID sidebar.
Kode var starttab=0;var endtab=3; adalah variabel untuk menentukan jumlah widget yang akan dijadikan tabulasi. Urutan pertama dimulai dari 0, keudian tentukan batas akhir widget pada variabel var endtab. Misalnya, jika kamu menuliskan angka 3 pada var endtab, maka empat buah widget di sidebarmu akan secara otomatis berubah menjadi elemen tabulasi, sementara selebihnya tidak.

Klik Simpan Template.

Contoh Template dengan Sistem Tabulasi Sidebar

Berikut ini adalah beberapa contoh template yang dilengkapi dengan sistem tabulasi sidebar, namun dengan metode target tabulasi yang sedikit berbeda. Ingin tahu perbedaannya? Bongkar saja!!!

Sidebar Hanya Tampil Selain pada Halaman Artikel

Beberapa orang mungkin merasa sedikit pusing ketika menemui sebuah situs dengan elemen halaman yang super komplit di segala penjuru, baik di sisi kanan maupun sisi kiri artikel. Mungkin tujuanmu memang baik, yaitu menyediakan semua fasilitas yang ada kepada para pembaca. Monitoring komentar, posting terbaru, daftar isi, ikon-ikon jejaring sosial dan masih banyak lagi. Tapi kalian harus ingat satu hal terpenting mengenai apa itu blog: ARTIKEL!

Jangan sampai mata para pembaca gentayangan melirik sisi kiri dan kanan artikel (yang kebetulan dipenuhi oleh gambar gadis-gadis cantik), sementara artikel itu sendiri dilupakan. Sangat tidak menyenangkan apabila pada akhirnya kamu menemukan komentar-komentar yang tidak bermutu di dalam artikelmu.

Kadangkala, seseorang memutuskan untuk menuliskan komentar dahsyat tidak semata-mata karena mereka tidak menyukai artikelmu, tetapi tidak jarang juga karena mereka merasa kebingungan.

Sidebar. Sebuah blok kecil dalam blog yang seharusnya menjadi prioritas pandangan ke dua justru menjadi berkuasa penuh karena munculnya godaan-godaan setan pernak-pernik blog yang merajalela merangsang nafsu birahi umat manusia di muka bumi ini. Jika kalian merasa bahwa sidebar di blogmu itu sangat mengganggu, ayo kita hilangkan saja!

Jangan khawatir, di sini kita akan menghilangkannya dengan tag kondisional, jadi sidebar hanya akan menghilang pada halaman tertentu saja.

Pertama-tama, masuklah ke tab Rancangan kemudian pilih Edit HTML.

Cari baris kode yang kurang lebih tampak seperti ini:

<div id='sidebar-wrapper'> 
    <b:section class='sidebar' id='sidebar' preferred='yes'> 
        <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
        <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
        <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
    </b:section> 
</div>

Sisipkan tag kondisional halaman item di luar elemen tersebut, sehingga tag kondisional tersebut sekarang berperan sebagai pembungkus sidebar. Seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
    <div id='sidebar-wrapper'> 
        <b:section class='sidebar' id='sidebar' preferred='yes'> 
            <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
            <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
            <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
        </b:section> 
    </div> 
</b:if>

Klik Simpan Template.

Sebagai catatan, atribut id='sidebar-wrapper' itu tidak mutlak, setiap template mempunyai ID-nya masing-masing. Intinya adalah, kamu cari saja elemen <b:section> yang memiliki class='sidebar', kemudian temukan elemen divisi yang menjadi pembungkus dari tulang-belulang sidebar tersebut. Terakhir tinggal letakkan saja tag kondisional di luar objek tersebut.

Widget-widget yang berada di dalam seksi sidebar juga bisa menjadi panduan yang baik.

Berikut ini adalah contoh tampilan saat awal pertama kamu mengunjungi blogmu:

tutorial cara menampilkan sidebar hanya di halaman muka — Halaman depan

Setelah kamu memasuki halaman artikel (menekan tombol Baca Selengkapnya atau link Komentar), maka hasil tampilannya akan berubah menjadi seperti ini:

sidebar hanya tampil di halaman muka — Setelah masuk ke halaman item

Info Template:

	Life Collage
	Capture Capture adalah salah satu jenis template yang telah memanfaatkan tag kondisional ini dengan baik.

XHTML Blogger, Share Buttons

XHTML Blogger, Formulir Komentar

TemplatesV1

TemplatesV2

Apa Itu Sticky Footer?

Masih Belum Yakin dengan Istilah Sticky Footer?

CSS & HTML Sticky Footer

HTML

CSS

Tambahan Untuk Internet Explorer

StickyBar JQuery Plugin

Konfigurasi Plugin StickyBar

Opsi Lanjutan

Dua Macam Kelas Baru

Demo Lain

Toggle Sidebar dengan JQuery

Integrasi Plugin ke dalam Template

Pengaturan Lanjutan

Tip: Membuat Sidebar Akordion dengan JQuery

Langkah-Langkah Membuat Sidebar Akordion

Tidak berhasil?

Info Template

Bleach

Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting

Tabulasi Widget Sidebar Otomatis dengan JQuery

Contoh Template dengan Sistem Tabulasi Sidebar

Sidebar Hanya Tampil Selain pada Halaman Artikel

Info Template:

Life Collage

Capture

Artikel Terbaru

Kategori