Membuat Widget Tab flipping Menggunakan jQuery

Membuat Widget Tab flipping Menggunakan jQuery, ini adalah slah satu widget tab view jQuery yang di banyak Request oleh blogger .
Untuk Membuatnya Berikut adalah tutorialnya :
Masuk ke akun Blogger, ke Design pilih tab Edit HTML, Masukkan kode berikut diatas kode </head>

Cara Menampilkan Hanya Judul Postingan Jika Label Diklik

Nah kali saya akan memberikan tips agar saat Anda atau pengunjung di Blog Anda menge-klik label dan saat muncul hanya judul postingan saja, sudah mengerti maksud saya ?
Biasanya ketika ada pengujung atau Anda mungkin menge-klik salah satu label di Blog pastinya postingan yang muncul sangat panjang dan membuat capek jika Anda mengerakan scrolnya, nah agar lebih singkat maka ditampilkan  judul postingannya saja. Contohnya lihat gambar dibawah ini :



Nah jika Anda tertarik ikuti langkahnya sebagai berikut :


1. Login ke blogger dengan ID anda 
2. Klik Tata Letak / Layout
3. Klik Tab Menu Edit HTML
4. Backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap. Mengantisipasi jika penambahan kode salah.
5. Klik kotak keciil diasmping tulisan Expand Widget
6. Cari kode <div class='blog-posts feed'> atau kode <b:include data='post' name='post'> Untuk memudahkan mencari tekan ctrl F / F3. Kemudian hapus dan diganti dengan kode beriku 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>

7. Untuk memberi background gati kode berwrna merah dengan kode berikut ini :

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'> <data:post.title/></div></a>

8. Kode warna biru adalah kode warna silahkan ganti sesuai selera Anda
9. Kemudian jika ingin menambahkan ikon, tambahkan kode dibawah ini di atas kode <data:post.title/></div></a> 

<img alt='>>>' border='0' src='URL icon Anda'/>

10. Kode warna biru ganti dengan alamat URL icon Anda, Sehingga akan seperti ini:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border
bottom:1px solid #000;margin
bottom:2px;background:#0099DD;color:#000000;'>
<img alt='>>>' border='0' src='URL icon Anda'/>
<data:post.title/></div></a>

11. Klik Save Template
sumber : rasiqzonetwork.blogspot.com
Selamat mencobanya semoga berhasil dan bermanfaat!

Membuat judul postingan menjadi seperti link list dihalaman depan

Membuat Judul Postingan Menjadi Seperti Link List di Halaman Depan, Sebenarnya ini trik yang hampir mirip dengan menampilkan judul postingan saja dihalaman depan tapi trik kali ini sangat berbeda.

Demo hasil trik ini bisa lihat di blog yang satunya disini.

Oke langsung saja ke tutorial cara membuatnya, caranya hampir mirip dengan trik buat label cuma beda dikit kode aja.

Langsung saja..
sobat masuk ke Design dan Edit HTML
silahkan sobat backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap. Mengantisipasi jika penambahan kode salah atau gagal.

Kemudian beri centang kotak kecil disamping tulisan Expand Widget.
Cari kode
&amp;lt;div class='blog-posts feed'&amp;gt; atau kode &amp;lt;b:include data='post' name='post'&amp;gt; (karena setiap template berbeda Sob), untuk memudahkan mencari tekan ctrl F / F3. Setelah ketemu silahkan hapus dan diganti dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div onmouseout='this.style.background=&quot;#FFFFFF&quot;;' onmouseover='this.style.background=&quot;#ffc20f&quot;;' style='list-style:none;padding:5px 0px 6px 0px; border-bottom:1px dashed #ffc20f;margin-bottom:2px;background:#ffffff; color:#000000;text-shadow:1px 1px 1px #FFE45E;'>
<ul><data:post.title/></ul>
</div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Keterangan : Silahkan sobat modifikasi sendiri warna yang sudah saya gunakan di CSS'nya yang saya beri warna merah.

Kemudian agar seperti Link List jika terdapat tanggal posting, label silahkan sobat hidden di Halaman depannya

Membuat Widget Tab flipping Menggunakan jQuery

 Membuat Widget Tab flipping Menggunakan jQuery, ini adalah salah satu widget tab view jQuery yang banyak direquest oleh blogger .
Untuk Membuatnya Berikut adalah tutorialnya :
Masuk ke akun Blogger, ke Design pilih tab Edit HTML,
Masukkan kode berikut diatas kode </head>
<script type="text/javascript" src="http://dl.dropbox.com/u/34111559/jquery.quickflip.js" ></script><script type="text/javascript" >$('document').ready(function(){$('#flip-container').quickFlip();$('#flip-navigation li a').each(function(){$(this).click(function(){$('#flip-navigation li').each(function(){$(this).removeClass('selected');});$(this).parent().addClass('selected');var flipid=$(this).attr('id').substr(4);$('#flip-container').quickFlipper('', flipid, 1);return false;});});});</script>

Keterangan untuk JS'nya bisa Anda edit kecepatanya, modifikasi pada kode quickFlipper misanya di modifikasi seperti berikut ini :

quickflipper({ openSpeed:200, closeSpeed:250 }, flipid, 1);

Kemudian masukkan CSS berikut tepat diatas kode ]]></b:skin>

#flip-tabs{
    width:300px;
    margin:20px auto; position:relative;
}
#flip-navigation{
    margin:0 0 10px; padding:0;
    list-style:none;
}
#flip-navigation li{
    display:inline;
}
#flip-navigation li a{
    text-decoration:none; padding:10px;
    margin-right:0px;
    background:#f9f9f9;
    color:#333; outline:none;
    font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
    background:#999;
    color:#f0f0f0;
}
#flip-navigation li.selected a{
    background:#999;
    color:#f0f0f0;
}
#flip-container{
    width:300px;
    font-family:Arial; font-size:13px;
}
#flip-container div{
    background:#fff;
}
#flip-container div ul{
    background:#f9f9f9;
    border:1px solid #f0f0f0;
    margin:0; padding:15px 5px;
    list-style-position:inside;
}
#flip-container div ul li{
    padding:5px 0;
}
#flip-container div ul.orange{ background:#f9d999; }
#flip-container div ul.green{ background:#d9f9d9; }
#flip-container div ul.blue{ background:#c9d9f9 }


Kode CSS bisa Anda ganti dengan selera Anda oke!

Kalau sudah klik Save Template

Setelah itu ke tab Page Element, Add New Gadget (tambah gadget) pilih HTML/JavaScript dan masukkan kode HTML berikut :

<div id="flip-tabs" ><ul id="flip-navigation" >
<li class="selected"><a href="#" id="tab-0"  >Pertama</a></li>
<li><a href="#" id="tab-1" >Kedua</a></li>
<li><a href="#" id="tab-2" >Ketiga</a></li></ul>
<div id="flip-container" ><div>
<ul>
<li>Konten pertama Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>      
</ul>
</div>
<div><ul>
<li>Konten Kedua Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>                  
</ul>
</div>
<div><ul>
<li>Konten Ketiga Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>
</ul>
</div>
</div>
</div>


Silahkan Edit Isi tabnya sesuai keinginan Anda kemudian Klik Save lihat hasilnya....

Membuat Background Blog Berganti-ganti Warna


Membuat Background Blog Berganti-ganti Warna, mungkin agak sedikit membingungkan saya saat memberi judul trik blogger satu ini. Langsung saja ke pembahasan cara membuat bacground blog bergonta ganti warna sepeti disko.

Trik ini menggunakan jQuery dan CSS 3 yang saya peroleh saat saya belajar membuat Blogazine. Saat melihat salah satu karya orang luar bernama Desandro dengan blogazinenya, disalah satu artikelnya dibuat halaman dengan backgound bergonta ganti.

Sebenarnya desandro membuatnya di sebuah web tapi saya coba praktekan di blogspot dan ternyata berhasil.

Pertama dan paling utama login dulu ke akun sobat, "saya masih menggunakan blogger tampilan lama". Sebelum diotak atik silahkan dowload fulltemplate sobat mengatisipasi jika terjadi kesalahan atau tidak berhasil). Jika sudah siap masuk ke Design -> Edit HTML masukkan Kode berikut ini diatas kode </head>.

<style>
body {
background-color: yellow;
background-color: hsl(  60, 90%, 40% );
}
.csstransitions body {
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.csstransitions body.color0  { background-color: hsl(   0, 90%, 40% ); }
.csstransitions body.color1  { background-color: hsl(  20, 90%, 40% ); }
.csstransitions body.color2  { background-color: hsl(  40, 90%, 40% ); }
.csstransitions body.color3  { background-color: hsl(  60, 90%, 40% ); }
.csstransitions body.color4  { background-color: hsl(  80, 90%, 40% ); }
.csstransitions body.color5  { background-color: hsl( 100, 90%, 40% ); }
.csstransitions body.color6  { background-color: hsl( 120, 90%, 40% ); }
.csstransitions body.color7  { background-color: hsl( 140, 90%, 40% ); }
.csstransitions body.color8  { background-color: hsl( 160, 90%, 40% ); }
.csstransitions body.color9  { background-color: hsl( 180, 90%, 40% ); }
.csstransitions body.color10 { background-color: hsl( 200, 90%, 40% ); }
.csstransitions body.color11 { background-color: hsl( 220, 90%, 40% ); }
.csstransitions body.color12 { background-color: hsl( 240, 90%, 40% ); }
.csstransitions body.color13 { background-color: hsl( 260, 90%, 40% ); }
.csstransitions body.color14 { background-color: hsl( 280, 90%, 40% ); }
.csstransitions body.color15 { background-color: hsl( 300, 90%, 40% ); }
.csstransitions body.color16 { background-color: hsl( 320, 90%, 40% ); }
.csstransitions body.color17 { background-color: hsl( 340, 90%, 40% ); }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script src="http://dl.dropbox.com/u/34111559/Kusus/Pelangibg.js"></script>

<script src="http://dl.dropbox.com/u/34111559/Kusus/Saya%20pakai%20project%20desandro2010.js"></script>

Setelah itu cari kode body di CSS template sobat .Jika pada kode CSS body terdapat CSS background misalnya : "background-color: white;", dihapus saja kode tersebut. Setelah itu klik Save Template.

Silahkan di coba atau sekedar dibaca buat tambah ilmu juga gak apa apa. Sumber inspirasi kode dari Desandro : http://desandro.com. Semoga bermanfaat.

menu navigasi horizonta

Menu Horisontal Incentria, sudah lumyan lama tidak ada sobat request, akhirnya ada pertanyaan juga untuk dibuat posting dan berbgai lagi. Artikel pada kali ini yaitu menu navigasi horizontal situs PTC incentria. Langsung saja ke tutorialnya. Saya membuat menu ini asli tanpa dropdown menu dan dengan dropdown menu.

Tanpa Dropdwon :

Demo 

Kode CSS :
.nav_menu, .nav_menu .lc, .nav_menu .rc, .nav_menu ul li, #ht_e, #ht_e .lc, #ht_e .rc {background: url(http://4.bp.blogspot.com/-vYKZCzR2260/TqITMJK_UtI/AAAAAAAACyE/0WpeR-pH-00/s1600/nav_m.png);margin: 0 auto;}
.nav_menu {position: relative;margin-top: 36px;float: right;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -62px;background-repeat: x-repeat;}
.nav_menu .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
.nav_menu .lc {left: 0px;background-position: 0px 0px;}
.nav_menu .rc {right: 0px;background-position: 0px -31px;}

.nav_menu ul {height: 31px;list-style: none;padding:0;margin:0;}
.nav_menu ul li {float: left;padding: 0px;background-position: right -93px;background-repeat: no-repeat;}
.nav_menu ul li.ls {background: none !important;}
.nav_menu ul li a {height: 25px;color: #ffffff;text-decoration: none;text-shadow: #212121 1px 1px 1px;position: relative;z-index: 7;float: left;font-weight: bold;font-size: 14px;display: block;padding: 6px 13px 0px 13px;}
.nav_menu ul li a:hover {color: #f7941d;}

#ht_e {display: none;z-index: 6;position: absolute;width: 100px;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -186px;background-repeat: x-repeat;}
#ht_e .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
#ht_e .lc {left: 0px;background-position: 0px -124px;}
#ht_e .rc {right: 0px;background-position: 0px -155px;}

Contoh HTML Kode :
<div class="nav_menu">
<div id="ht_e">
<div class="lc">
</div>
<div class="rc">
</div>
</div>
<div class="lc">
</div>
<div class="rc">
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Store</a></li>
<li><a href="/">View Ads</a></li>
<li><a href="/">Complete Offers</a></li>
<li><a href="/">Register</a></li>
<li><a href="/">Login</a></li>
<li class="ls"><a href="/">Support</a></li>
</ul>
</div>
<div class="clear">
</div>

JavaScript, jQuery.
note: jika sudah ada JS jQuery pada template Anda tidak usah di copy file JS jQuery ini bawah ini, jquery-v1-4.js
<script type="text/javascript" src="http://dl.dropbox.com/u/34111559/jquery-v1-4.js"></script>
<script type="text/javascript">var atHome=true;</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/34111559/incentria.js"></script>

Untuk Penambahan Dropdown

Demo 


Kode CSS'nya
.nav_menu, .nav_menu .lc, .nav_menu .rc, .nav_menu ul li, #ht_e, #ht_e .lc, #ht_e .rc {background: url(http://4.bp.blogspot.com/-vYKZCzR2260/TqITMJK_UtI/AAAAAAAACyE/0WpeR-pH-00/s1600/nav_m.png);margin: 0 auto;}
.nav_menu {position: relative;margin-top: 36px;float: right;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -62px;background-repeat: x-repeat;}
.nav_menu .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
.nav_menu .lc {left: 0px;background-position: 0px 0px;}
.nav_menu .rc {right: 0px;background-position: 0px -31px;}

.nav_menu ul {height: 31px;list-style: none;padding:0;margin:0;}
.nav_menu ul li {float: left;padding: 0px;background-position: right -93px;background-repeat: no-repeat;}
.nav_menu ul li.ls {background: none !important;}
.nav_menu ul li a {height: 25px;color: #ffffff;text-decoration: none;text-shadow: #212121 1px 1px 1px;position: relative;z-index: 7;float: left;font-weight: bold;font-size: 14px;display: block;padding: 6px 13px 0px 13px;}
.nav_menu ul li a:hover {color: #f7941d;}

.nav_menu ul ul{position:absolute;z-index:500; top:auto;display:none;width: 100px;height:auto;margin-top: 11px;background: #C9C9C9;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
.nav_menu ul li ul li{background: none !important;}
.nav_menu ul ul ul{top:0;left:100%;}

div.nav_menu li:hover ul ul,
div.nav_menu li li:hover ul ul,
div.nav_menu li li li:hover ul ul,
div.nav_menu li li li li:hover ul ul
{display:none;}
div.nav_menu li:hover ul,
div.nav_menu li li:hover ul,
div.nav_menu li li li:hover ul,
div.nav_menu li li li li:hover ul
{display:block;}
#ht_e {display: none;z-index: 6;position: absolute;width: 100px;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -186px;background-repeat: x-repeat;}
#ht_e .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
#ht_e .lc {left: 0px;background-position: 0px -124px;}
#ht_e .rc {right: 0px;background-position: 0px -155px;}

Contoh HTML kode :
<div class="nav_menu">
<div id="ht_e">
<div class="lc">
</div>
<div class="rc">
</div>
</div>
<div class="lc">
</div>
<div class="rc">
</div>
<ul>
<li><a href="http://www.blogger.com/">Home</a></li>
<li><a href="http://www.blogger.com/store.php">Store</a></li>
<li><a href="http://www.blogger.com/ptc_ads.php">View Ads</a>
<ul>
<li><a href="http://www.blogger.com/">1234</a></li>
<li><a href="http://www.blogger.com/">3456</a></li>
<li><a href="http://www.blogger.com/">5678</a>
</ul>
</li>
<li><a href="http://www.blogger.com/signup_offers.php">Complete Offers</a></li>
<li><a href="http://www.blogger.com/join.php">Register</a></li>
<li><a href="http://www.blogger.com/login.php">Login</a></li>
<li class="ls"><a href="http://www.blogger.com/support.php">Support</a></li>
</ul>
</div>
<div class="clear">
</div>

Javascript seperti diatas.

Oke sampai disini, jika kurang jelas silahkan berikan kritik dan saran atau sebuah pertanyaan memalui komantar. Terimakasih semoga bermanfaat.

Membuat Auto Read More Thumbnail Tanpa Java Script

Auto Read More Thumbnail Tanpa Java Script, seperti yang Anda ketahui outo read more memang sudah di berikan di fitur Blogger namun masih banyak blogger menggunakan Java Script untuk membuat auto read more tersebut. Setelah sudah lama tidak berseluncur dan menggarap sebuah template request ternyata eh ternyata trik read more bisa tanpa menggunakan Java Script.

Keuntungan trik ini dapat memperingan loading Blog kita seperti postingan saya yang sebelumnya Beberpa trik mempercepat loading Blogspot. Oke dah langsung di coba triknya, tapi ingat dikebalikan dulu jika Anda sudah memakai trik read more dengan Java Script, dengan membaca trik auto read more dengan java script pasti Anda bisa mengembalikannya lagi

Auto Read More tanpa Java Script

Pertama saya berikan tutorial ini masih dengan tampilan lama blogger. Login akun blogger (pastinya), masuk ke design kemudian edit HTML beri centang kotak kecil disamping tulisan Expand Widget Templates. cari kode <data:post.body/> ganti dengan kode berikut ini,
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'><b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div></b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div></b:if>
<b:else/><data:post.body/></b:if>
<b:else/><data:post.body/></b:if>

Kemudian sedikit penambahan CSS, taruh kode CSS berikut diatas kode ]]></b:skin>
.thumb img {float: left; margin: 0 10px 10px 0;} 

Jika sudah Klik Save Template lihat hasilnya.

Semoga berhasil dan bermanfaat, sampai ketemu di artikel selanjutnya.

cara memasang Lifestream twitter



Artikel kali ini saya akan bahas cara memasang Lifestream twitter. Mungkin di media jejaring sosial tersebut sudah di sediakan widegtnya, tapi mungkin sobat pengen punya yang khas dan cocok dengan blog sobat. Disini saya akan memberikan tutorialnya.

Pertama adalah silahkan simpan kode java script diabwah ini hosting sobat. Jika mau yang gratisan hostingnya coba baca disini. Berikut adalah kodenya ,,
 /**
 * remy sharp / http://remysharp.com
 * http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
 *
 * @params
 *   cssIdOfContainer: e.g. twitters
 *   options: 
 *       {
 *           id: {String} username,
 *           count: {Int} 1-20, defaults to 1 - max limit 20
 *           prefix: {String} '%name% said', defaults to blank
 *           clearContents: {Boolean} true, removes contents of element specified in cssIdOfContainer, defaults to true
 *           ignoreReplies: {Boolean}, skips over tweets starting with '@', defaults to false
 *           template: {String} HTML template to use for LI element (see URL above for examples), defaults to predefined template
 *           enableLinks: {Boolean} linkifies text, defaults to true,
 *           timeout: {Int} How long before triggering onTimeout, defaults to 10 seconds if onTimeout is set
 *           onTimeoutCancel: {Boolean} Completely cancel twitter call if timedout, defaults to false
 *           onTimeout: {Function} Function to run when the timeout occurs. Function is bound to element specified with 
 *              cssIdOfContainer (i.e. 'this' keyword)
 *
 *      CURRENTLY DISABLED DUE TO CHANGE IN TWITTER API:
 *           withFriends: {Boolean} includes friend's status
 *
 *       }
 *
 * @license MIT (MIT-LICENSE.txt)
 * @version 1.12 - Tweaked relative date and linkify to match Twitter.com usage
 * @date $Date: 2009-02-25 14:43:36 +0000 (Wed, 25 Feb 2009) $
 */

// to protect variables from resetting if included more than once
if (typeof renderTwitters != 'function') (function () {
    /** Private variables */
    var browser = (function() {
        var b = navigator.userAgent.toLowerCase();

        // Figure out what browser is being used
        return {
            safari: /webkit/.test(b),
            opera: /opera/.test(b),
            msie: /msie/.test(b) &amp;&amp; !(/opera/).test(b),
            mozilla: /mozilla/.test(b) &amp;&amp; !(/(compatible|webkit)/).test(b)
        };
    })();

    var guid = 0;
    var readyList = [];
    var isReady = false;
   
    /** Global functions */
   
    // to create a public function within our private scope, we attach the 
    // the function to the window object
    window.renderTwitters = function (obj, options) {
        // private shortcuts
        function node(e) {
            return document.createElement(e);
        }
       
        function text(t) {
            return document.createTextNode(t);
        }

        var target = document.getElementById(options.twitterTarget);
        var data = null;
        var ul = node('ul'), li, statusSpan, timeSpan, i, max = obj.length &gt; options.count ? options.count : obj.length;
       
        for (i = 0; i &lt; max &amp;&amp; obj[i]; i++) {
            data = getTwitterData(obj[i]);
                       
            if (options.ignoreReplies &amp;&amp; obj[i].text.substr(0, 1) == '@') {
                max++;
                continue; // skip
            }
           
            li = node('li');
           
            if (options.template) {
                li.innerHTML = options.template.replace(/%([a-z_\-\.]*)%/ig, function (m, l) {
                    var r = data[l] + &quot;&quot; || &quot;&quot;;
                    if (l == 'text' &amp;&amp; options.enableLinks) r = linkify(r);
                    return r;
                });
            } else {
                statusSpan = node('span');
                statusSpan.className = 'twitterStatus';
                timeSpan = node('span');
                timeSpan.className = 'twitterTime';
                statusSpan.innerHTML = obj[i].text; // forces the entities to be converted correctly

                if (options.enableLinks == true) {
                    statusSpan.innerHTML = linkify(statusSpan.innerHTML);
                }

                timeSpan.innerHTML = relative_time(obj[i].created_at);

                if (options.prefix) {
                    var s = node('span');
                    s.className = 'twitterPrefix';
                    s.innerHTML = options.prefix.replace(/%(.*?)%/g, function (m, l) {
                        return obj[i].user[l];
                    });
                    li.appendChild(s);
                    li.appendChild(text(' ')); // spacer :-(
                }

                li.appendChild(statusSpan);
                li.appendChild(text(' '));
                li.appendChild(timeSpan);
            }
           
            ul.appendChild(li);
        }

        if (options.clearContents) {
            while (target.firstChild) {
                target.removeChild(target.firstChild);
            }
        }

        target.appendChild(ul);
    };
   
    window.getTwitters = function (target, id, count, options) {
        guid++;
       

        if (typeof id == 'object') {
            options = id;
            id = options.id;
            count = options.count;
        } 

        // defaulting options
        if (!count) count = 1;
       
        if (options) {
            options.count = count;
        } else {
            options = {};
        }
       
        if (!options.timeout &amp;&amp; typeof options.onTimeout == 'function') {
            options.timeout = 10;
        }
       
        if (typeof options.clearContents == 'undefined') {
            options.clearContents = true;
        }
       
        // Hack to disable withFriends, twitter changed their API so this requires auth
        // http://getsatisfaction.com/twitter/topics/friends_timeline_api_call_suddenly_requires_auth
        if (options.withFriends) options.withFriends = false;

        // need to make these global since we can't pass in to the twitter callback
        options['twitterTarget'] = target;
       
        // default enable links
        if (typeof options.enableLinks == 'undefined') options.enableLinks = true;

        // this looks scary, but it actually allows us to have more than one twitter
        // status on the page, which in the case of my example blog - I do!
        window['twitterCallback' + guid] = function (obj) {
            if (options.timeout) {
                clearTimeout(window['twitterTimeout' + guid]);
            }
            renderTwitters(obj, options);
        };

        // check out the mad currying!
        ready((function(options, guid) {
            return function () {
                // if the element isn't on the DOM, don't bother
                if (!document.getElementById(options.twitterTarget)) {
                    return;
                }
               
                var url = 'http://www.twitter.com/statuses/' + (options.withFriends ? 'friends_timeline' : 'user_timeline') + '/' + id + '.json?callback=twitterCallback' + guid + '&amp;count=20';

                if (options.timeout) {
                    window['twitterTimeout' + guid] = setTimeout(function () {
                        // cancel callback
                        if (options.onTimeoutCancel) window['twitterCallback' + guid] = function () {};
                        options.onTimeout.call(document.getElementById(options.twitterTarget));
                    }, options.timeout * 1000);
                }
               
                var script = document.createElement('script');
                script.setAttribute('src', url);
                document.getElementsByTagName('head')[0].appendChild(script);
            };
        })(options, guid));
    };
   
    // GO!
    DOMReady();
   

    /** Private functions */
   
    function getTwitterData(orig) {
        var data = orig, i;
        for (i in orig.user) {
            data['user_' + i] = orig.user[i];
        }
       
        data.time = relative_time(orig.created_at);
       
        return data;
    }
   
    function ready(callback) {
        if (!isReady) {
            readyList.push(callback);
        } else {
            callback.call();
        }
    }
   
    function fireReady() {
        isReady = true;
        var fn;
        while (fn = readyList.shift()) {
            fn.call();
        }
    }

    // ready and browser adapted from John Resig's jQuery library (http://jquery.com)
    function DOMReady() {
        if ( browser.mozilla || browser.opera ) {
            document.addEventListener( &quot;DOMContentLoaded&quot;, fireReady, false );
        } else if ( browser.msie ) {
            // If IE is used, use the excellent hack by Matthias Miller
            // http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited

            // Only works if you document.write() it
            document.write(&quot;&lt;scr&quot; + &quot;ipt id=__ie_init defer=true src=//:&gt;&lt;\/script&gt;&quot;);

            // Use the defer script hack
            var script = document.getElementById(&quot;__ie_init&quot;);

            // script does not exist if jQuery is loaded dynamically
            if (script) {
                script.onreadystatechange = function() {
                    if ( this.readyState != &quot;complete&quot; ) return;
                    this.parentNode.removeChild( this );
                    fireReady.call();
                };
            }

            // Clear from memory
            script = null;

            // If Safari  is used
        } else if ( browser.safari ) {
            // Continually check to see if the document.readyState is valid
            var safariTimer = setInterval(function () {
                // loaded and complete are both valid states
                if ( document.readyState == &quot;loaded&quot; || 
                document.readyState == &quot;complete&quot; ) {

                    // If either one are found, remove the timer
                    clearInterval( safariTimer );
                    safariTimer = null;
                    // and execute any waiting functions
                    fireReady.call();
                }
            }, 10);
        }
    }
   
    function relative_time(time_value) {
        var values = time_value.split(&quot; &quot;),
            parsed_date = Date.parse(values[1] + &quot; &quot; + values[2] + &quot;, &quot; + values[5] + &quot; &quot; + values[3]),
            date = new Date(parsed_date),
            relative_to = (arguments.length &gt; 1) ? arguments[1] : new Date(),
            delta = parseInt((relative_to.getTime() - parsed_date) / 1000),
            r = '';
       
        function formatTime(date) {
            var hour = date.getHours(),
                min = date.getMinutes() + &quot;&quot;,
                ampm = 'AM';
           
            if (hour == 0) {
                hour = 12;
            } else if (hour &gt; 12) {
                hour -= 12;
                ampm = 'PM';
            }
           
            if (min.length == 1) {
                min = '0' + min;
            }
           
            return hour + ':' + min + ' ' + ampm;
        }
       
        function formatDate(date) {
            var ds = date.toDateString().split(/ /),
                mon = ds[1],
                day = ds[2],
                dayi = parseInt(day),
                year = date.getFullYear(),
                thisyear = (new Date()).getFullYear(),
                th = 'th';
           
            // anti-'th' - but don't do the 11th, 12th or 13th
            if ((dayi % 10) == 1 &amp;&amp; day.substr(0, 1) != '1') {
                th = 'st';
            } else if ((dayi % 10) == 2 &amp;&amp; day.substr(0, 1) != '1') {
                th = 'nd';
            } else if ((dayi % 10) == 3 &amp;&amp; day.substr(0, 1) != '1') {
                th = 'rd';
            }
           
            if (day.substr(0, 1) == '0') {
                day = day.substr(1);
            }
           
            return mon + ' ' + day + th + (thisyear != year ? ', ' + year : '');
        }
       
        delta = delta + (relative_to.getTimezoneOffset() * 60);

        if (delta &lt; 5) {
            r = 'less than 5 seconds ago';
        } else if (delta &lt; 30) {
            r = 'half a minute ago';
        } else if (delta &lt; 60) {
            r = 'less than a minute ago';
        } else if (delta &lt; 120) {
            r = '1 minute ago';
        } else if (delta &lt; (45*60)) {
            r = (parseInt(delta / 60)).toString() + ' minutes ago';
        } else if (delta &lt; (2*90*60)) { // 2* because sometimes read 1 hours ago
            r = 'about 1 hour ago';
        } else if (delta &lt; (24*60*60)) {
            r = 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
        } else {
            if (delta &lt; (48*60*60)) {
                r = formatTime(date) + ' yesterday';
            } else {
                r = formatTime(date) + ' ' + formatDate(date);
                // r = (parseInt(delta / 86400)).toString() + ' days ago';
            }
        }

        return r;
    }
   
    function linkify(s) {
        var entities = {
            '&quot;' : '&amp;quot;',
            '&amp;' : '&amp;amp;',
            '&lt;' : '&amp;lt;',
            '&gt;' : '&amp;gt;'
        };
       
        return s.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&amp;\?\/.=]+/g, function(m) {
            return m.link(m);
        }).replace(/(^|[^\w])(@[\d\w\-]+)/g, function(d, m1, m2) {
            return m1 + '@&lt;a href=&quot;http://twitter.com/' + m2.substr(1) + '&quot;&gt;' + m2.substr(1) + '&lt;/a&gt;';
        }).replace(/&quot;&amp;&lt;&gt;/, function (m) {
            return entities[m];
        });
    }
})();


getTwitters('tweets', { 
    id: 'ID Twitter', 
    count: 1,
    enableLinks: true, 
    ignoreReplies: false,
    template: '&quot;%text%&quot; &lt;div&gt;Posted &lt;a href=&quot;http://twitter.com/%user_screen_name%&quot;&gt;%time%&lt;/a&gt;'
});
Sialhkan ganti kode yang bercetak tebal, ID: 'ID twitter sobat' dan count: 1 yang artinya cuma menampilkan 1 update twit silahkan ganti sesuai selera.

Setelah disimpan maka kita dapatkan kode URL JS diatas tai misalnya:
http://hosting-ANDA.com/twitter.js

Simapn kode JS tersbut di atas kode </body> contohnya
<script src='http://hosting-ANDA.com/twitter.js' type='text/javascript'></script>

</body>

Kemudian penambahan CSS, ini bisa dimodifikasi sesuai selera Sobat atau di sesuaikan dengan template sobat, kalau punya saya, Hnaya sebagai contoh, bisa dipakai juga, letakkan di atas kode ]]></b:skin> :

#tweets {
 margin: 5px 0px 0 10px;
}
#tweets ul {
        background: none;
 list-style: none;
 margin: 0;
 padding: 0;
}
#tweets ul li{
        background: none;
}
#tweets div {
 font-size: 11px;
 text-align: right;
 padding-top: 8px;
}
#tweets img {
 vertical-align: middle;
}
Jangan lupa di save.

Setelah itu silahkan ke Page element, tambahkan widget baru pilih HTML java script

masukkan kode HTML nya :

<div id="tweets">
<div align="center">
Loading tweets <img alt="loading..." height="16" src="http://dl.dropbox.com/u/34111559/ajax-loader.gif" width="16" /></div>
</div>

Keterangan untuk URL yang saya cetak tebal adalah gamabar animasi loading sebelum lifestream muncul, jadi bisa Anda ganti gambar animasinya. Setelah selesai klik save dan lihat hasilnya, jika ada yang kurang paham mohon komentarnya,,, :-D

Threaded Comment Blogger/Blogspot

Threaded Comment Blogger/Blogspot ini merupakan vitur baru yang diblogger, namun untuk pengguna template donwloadtan dan versi lama biasanya tidak akan muncul viturnya untuk itu saya berikan trik untuk memunculkan vitur tread comment tersebut.



Trik pertama untuk tampilan lama/interface lama (tanpa edit template)
1. Masuk ke Dasbor -> Rancangan -> Edit HTML
2. Backup dulu template anda -> Download Template Lengkap (jika trik gagal/tidak berhasil)
3. Klik -> Kembalikan template widget ke default (dibawah kotak HTML template) -> klik OK
4. Selesai, lihat hasilnya dan test apakah sudah bisa apa belum ?!?

Trik kedua untuk tampilan baru/interface baru (tanpa edit template)
1. Login ke Blogger -> klik Blog yang akan diedit
2. Backup template anda (jika trik gagal/tidak berhasil) -> klik Template -> klik Cadangkan/Pulihkan (sebelah kanan atas) kemudian Unduh template lengkap
3. Edit HTML -> Lanjutkan -> Kembalikan template widget ke default -> klik OK
4. Selesai, lihat hasilnya dan test apakah sudah bisa apa belum ?!?

Trik Ketiga untuk dengan mengedit template
1. Login ke blogger -> dasbor -> Edit HTML
2. Centang kotak kecil disamping tulisan Expand Template Widget
3. Cari kode berikut ini :


<b:include data='post' name='comments'/>

(di template saya ada 4 kode seperti itu, mungkin setiap template berbeda apalagi template hasil downloadtan versi lama)

4. Ganti semua kode diatas dengan :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

5. Save dan lihat hasilnya

Selesai, untuk trik diatas menjadikan komentar di blog Anda kembali seperti semua tanpa editan jadi tampilannya beda sama sebelumnya kembali kewal. Jadi untuk artikel berikutnya saya akan bahas bagaimana cara mengubah tampilan tersebut, semoga bermanfaat.

Recent Comments Blogger Plus Avatar

Recent Comments Blogger Plus Avatar. Setelah adanya fitur baru Threaded Comments, memungkinkan menampilkan avatar pada widget Recent Comments/Komentar Terakhir akrena adanya perubahan pada API komentar blogger. Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat Komentar Sahabat di blog ini.


Cara membuat Reccent Comments Blogger plus avatar
1. Login Blogger -> dasbor -> Racangan
2. Buat widget baru HTML/JavaScript
3. Masukan kode dibawah ini pada widget.

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://alamat.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Keteragan : kode yang berwarna merah bisa disesuaikan dengan selera Anda dan Ganti alamat.blogspot.com dengan alamat blog Anda, ganti max-results=5, sesuai jumlah komentar yang akan ditampilkan.

numComments = 5, (jumlah komentar yang ditampilkan)
showAvatar = true, (Menampilkan avatar atau tidak, jika tidak ganti dengan "false")
avatarSize = 30, (ukuran avatar dalam pixel)
roundAvatar = true,(Menampilkan avatar jadi bulat atau tidak, jika tidak ganti dengan "false")
characters = 30, (jumlah karakter yang ditampilkan)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true; (Menampilkan link credit atau tidak, jika tidak ganti dengan "false")

4. Klik Simpan.

selain cara diatas silahkan ada bisa pakai Widget Generator Recent Comments Avatar

Semoga berhasil dan bermanfaat!

trik seo dengan breadcrumb

Breadcrumb yaitu salah satu trik penunjang SEO. Namun belakangan ini saya menemui breadcrumb blogger yang yang sangat bagus saat di pencarian google. saya mencoba beberapa trik hack breadcrumb atau sebuah tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya. Nah trik yang saya tulis ini pun saya baru memakainya soalnya beda pemasangan dengan trik pemasangan terdahulu dan yang paling jelas adalah perbedaan kode yang digunakan dan penempatannya. Oke saya mulai...

Demo


Cara Pasang Breadcrumbs Blogger SEO Friendly.

1. Masuk ke Layout -> Edit HTML -> cetang kotak kecil disamping tulisan Expand Widget Templates.

2. Sebelum di edit sebaiknya sobat download full template, jaga jaga jika terjadi kesalahan.

3. Kemudian masukan kode CSS berikut diatas kode ]]></b:skin> gunakan from pencarian di browser sobat tekan Ctrl F.

.breadcrumbs {
  border-bottom:1px dotted #999;
  margin:2em 0 0.5em;
  padding:0 0 0.5em;
  font-size:10px
  }

Kode CSS diatas bisa Anda modifikasi sesuai tampilan laman sobat.

4. Cari kode HTML : <b:includable id='main' var='top'> gunakan from pencarian di broswer sobat tekan Ctrl F.

5. Jika sudah ketemu ganti kode tersebut dengan kode HTML berikut ini (silahkan bilih salah satu no V.1 atau V.2):

Kode HTML v.1

<b:includable id='breadcrumbs' var='post'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <p class='breadcrumbs'>
  <span class='post-labels'>
<b:if cond='data:post.labels'>
    Go&#160; :
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
  <b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
   <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
    </b:if>
  </b:loop>
<b:if cond='data:post.title'>
    &gt; <b><data:post.title/></b>
 </b:if>
  </b:if>
    </span>
   </p>
 </b:if>
</b:includable>
&lt;b:includable id='main' var='top'&gt;

Kode HTML v.2

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
  <b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
  <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
  </b:if>
 </b:loop>
&#187; <span><data:post.title/></span>
</div>
 <b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
  </b:if>
</b:loop>
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for<data:blog.pageName/></span>
</div>
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
  <b:if cond='data:blog.pageName == &quot;&quot;'>
     <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
     <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
  </b:if>
</div>
  </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Note : Pilih salah satu ya Sob.. sama SEO Friendly nya kok!!!

6. Untuk Kode V.1 belum selesai silahkan cari kode HTML : <b:loop values='data:posts' var='post'> ganti dengan kode HTML : <b:include data='posts' name='breadcrumb'/>

7. Sudah selesai Klik Save template.

Untuk percobaan silahkan buat posting dan berikan label, dan cobalah cari dengan label yang diberikan atau keyword untuk mencari postingan sobat, semoga trik seo dengan breadcrumb ini berhasil dan bermanfaat Amin.