Trik Untuk Menampilkan Widget Pada Halaman Tertentu

Trik blogger kali ini memberikan  suatu trik untuk menampilkan widget pada halaman tertentu. Sebenarnya trik ini sudah lama sekali, tapi mungkin masih banyak yang belum tahu tentang trik untuk menampilkan widget  pada halaman tertentu ini.



Bagaimana Anda tertarik untuk mencobanya?



Berikut tutorialnya:



Menampilkan Widget Hanya di Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>

..........................

</b:if>

Menampilkan Widget selain di Homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>

.....................................

</b:if>

Menampilkan Widget hanya di Archivepages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

......................................

</b:if>

Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>

....................................................

</b:if>

Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>

............................................

</b:if>

Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != &quot;item&quot;'>

....................................

</b:if>

Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

..................................

</b:if>

Menampilkan widget selain di staticpages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

............................

</b:if>

Menampilkan widget pada URL Postingan Tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

.........................................

</b:if>

Catatan : Pada "alamat posting", ganti dengan url postingmu





Menampilkan widget selain di URL postingan tertentu

<b:if cond='data:blog.url != &quot;alamaatpostingan&quot;'>

................................................

</b:if>

Catatan : Pada "alamat posting", ganti dengan url postingmu



Sekarang Cara menaruh kodenya dengan susunan sebagai berikut :



Misal Judul Gadget yang ingin disembunyikan adalah "translator"



Maka kode keseluruhan pada templatenya adalah:

<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>

    <b:includable id='main'>

    Masukkan kode penyembunyi widget

      <!-- only display title if it's non-empty -->

      <b:if cond='data:title != &quot;&quot;'>

        <h2 class='title'><data:title/></h2>

      </b:if>

      <div class='widget-content'>

        <data:content/>

      </div>

      <b:include name='quickedit'/>

    Masukkan kode penutup

    </b:includable>

    </b:widget>

Misalnya kita akan menampilkan widget translator pada home page saja maka hasil keseluruhan kodenya adalah :

<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>

    <b:includable id='main'>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

      <!-- only display title if it's non-empty -->

      <b:if cond='data:title != &quot;&quot;'>

        <h2 class='title'><data:title/></h2>

      </b:if>

      <div class='widget-content'>

        <data:content/>

      </div>

      <b:include name='quickedit'/>

    </b:if>

    </b:includable>

    </b:widget>

Catatan kode yang berwarna merah adalah kode penyembunyi dan kode penutup



Bagaimana cukup jelas dengan tutorial ini



Selamat mencoba

Read More

Memasang Widget I Love Indonesia

Kali ini  saya share tentang cara memasang widget I Love Indonesia seperti yang ada di blog ini. Untuk sobat blogger yang tertarik untuk memasangnya di blog sobat dan tanpa panjang lebar saya menjelaskannya langsung saja cara memasang widget I Love Indonesia berikut ini :



Seperti biasa sobat login ke blogger



Pilih Design >> Add Gadget >> HTML/Javascript



Copy kode di bawah ini dan pastekan ke dalam gadget

<script language="JavaScript" src="http://trik-blogger-andreas-widget.googlecode.com/files/widget.js

" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://img38.imageshack.us/img38/8584/iluvindonesia.png")</script>

Jika sudah selesai simpan gadget sobat dan lihat hasilnya



Selamat mencoba

Read More

Cara Menambahkan Scrool Pada Label Kategori

   

Beberapa waktu lalu saya pernah share tentang memasang fungsi scrool pada Arsip blog, pada kesempatan  ini saya akan share tentang menambahkan fungsi scrool pada label atau kategori. Caranya sangat mudah sekali dan hanya menambahkan beberapa script saja tampilan label kategori pada blog sobat akan lebih menarik, trik ini sangat berguna untuk menghemat tempat pada blog sobat,



Ingin tahu cara untuk memasangnya? Mari ikuti langkah-langkah memasang fungsi scrool pada label atau kategori

 

Seperti biasa sobat harus login ke Blogger



Pilih Design → Edit HTML



Klik tulisan Download Template Lengkap



Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula



Beri tanda centang pada kotak di samping tulisan Expand Widget Templates



Kemudian cari kode seperti dibawah :



Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

</a>

</b:if>

<span dir='ltr'>(<data:label.count/>)</span>

</li>

</b:loop>

</ul>

Untuk menambahkan Scroll Copy kode berikut :

<div style='overflow: auto; width: 175px; height: 200px; text-align: left;'>

dan

</div>

Dan letakkan kode tadi tepat di bawah kode berikut :



<div class='widget-content'>



dan di bawah kode ini:



<ul>



Maka hasil akan menjadi seperti di bawah ini :



<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div style='overflow: auto; width: 100%px; height: 300px; text-align: left;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

</a>

</b:if>

<span dir='ltr'>(<data:label.count/>)</span>

</li>

</b:loop>

</ul>

</div>

Lihat kode yang berwarna merah,  itu adalah kode tambahannya.



Catatan nilai dari width: 100%px; dan height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.



Jika sudah selesai SIMPAN TEMPLATE sobat dan lihat hasilnya



Selamat mencoba semoga berhasil

Read More

Memasang Widget SMS Gratis

 

Dengan teknologi internet kita bisa mendapatkan layanan SMS secara gratis yang dapat digunakan oleh siapapun dan dimana saja.

Pada  postingan kali ini saya  share tentang  memasang  widget  SMS Gratis pada blogger, dengan widget ini para pengunjung blog bisa mengirim sms secara gratis. Sobat blogger  bisa mencobanya sendiri di blog ini.



Untuk memasang widget Sms gratis maari kita ikuti langkah-langkah berikut ini :



1,    Login ke blogger sobat.



2.     Pilih Design/ Rancangan.



3.     Pada Tab Element Halaman >> Tambah Gadget.



4.     Pilih HTML/Java Script.



5.     Langkah berikutnya copy paste kode-kode dibawah ini.

 

<iframe height="350" name="I2" src="http://sms-online.web.id/widget" width="270">&amp;lt;p&amp;gt;not support&amp;amp;amp;lt;br /&amp;amp;amp;gt; &amp;lt;/p&amp;gt;</iframe><br/>

<center><b>Get this Widget from <a
target="_blank"
href="http://trik-blogger-andreas.blogspot.com/2010/12/memasang-widget-sms-gratis.html">here!!!</a></b></center>

6.    Simpan Gadget sobat dan lihat hasilnya



Selamat mencoba dan semoga berhasil

Read More

Memasang Widget Animasi Entri Populer

 

Kali ini saya akan mencoba share tentang memasang widget animasi entri populer dan menampilkannya secara slide dengan mengunakan jQuery Spy.



Untuk lebih jelasnya langsung saja ikuti tutorial berikut ini :



1.    Login ke Blogger pilih Design >> Add Gadget >> Entri Populer



2.    Simpan Gadget sobat



3.    Setelah itu klik tab Edit HTML >> centang  Expand  Widget Templates



4..    sebelum sobat menambahkan kode css, nackup dahulu template sobat 



5.    Lalu cari kode ]]></b:skin> dan masukkan kode CSS berikut di atasnya atau sebelum kode ]]></b:skin>

#postlist-spy {

 font-size: 11px;

 overflow: hidden;

 margin-top: 5px;

 padding : 0; }

#postlist-spy ul {

 width: auto;

 overflow: hidden;

 list-style-type: none;

 padding: 0;

 margin: 0; }

#postlist-spy li {

 padding: 0;

 margin: 0 0 5px;

 list-style-type: none;

 float: left;

 height: auto;

 overflow: hidden;

 line-height: 12px;

 text-indent: 0px;}

#postlist-spy li a {

 margin-left: 0; }

#postlist-spy li a img {

 margin-top: 0;

 float: left; }

6.    Cari lagi kode </head>  dan masukkan code JavaScript berikut sebelum </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'><!--//--><![CDATA[//><!--

jQuery(function () {

    jQuery('ul.spy').simpleSpy();

});

(function (jQuery) {

jQuery.fn.simpleSpy = function (limit, interval) {

    limit = limit || 2; // Number popular post shown - maximal 4 default 2

    interval = interval || 10000;

    return this.each(function () {

        // 1. setup

            // capture a cache of all the list items

            // chomp the list down to limit li elements

        var jQuerylist = jQuery(this),

            items = [], // uninitialised

            currentItem = limit,

            total = 0, // initialise later on

            height = jQuerylist.find('> li:first').height();

        // capture the cache

        jQuerylist.find('> li').each(function () {

            items.push('<li>' + jQuery(this).html() + '</li>');

        });

        total = items.length;

        jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

        jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        // 2. effect       

        function spy() {

            // insert a new item with opacity and height of zero

            var jQueryinsert = jQuery(items[currentItem]).css({

                height : 0,

                opacity : 0,

                display : 'none'

            }).prependTo(jQuerylist);

            // fade the LAST item out

            jQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {

                // increase the height of the NEW first item

                jQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                // AND at the same time - decrease the height of the LAST item

                // jQuery(this).animate({ height : 0 }, 1000, function () {

                    // finally fade the first item in (and we can remove the last)

                    jQuery(this).remove();

                // });

            });

            currentItem++;

            if (currentItem >= total) {

                currentItem = 0;

            }

            setTimeout(spy, interval)

        }

        spy();

    });

};

})(jQuery);

//--><!]]></script>

Catatan :



    Angka 2 yang berwarna merah pada javascript diatas adalah jumlah post yang di tampilkan, anda bisa mengubahnya hingga sesuai dengan keinginan anda, maksimal 4 dan default 2.





 7.    Selanjutnya  cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang ada dibawahnya dengan :

<div id='postlist-spy'>

<ul class='spy'>

8.    Cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode berikut setelah </ul> :



</div>



9.    Simpan template sobat dan lihat hasilnya

Selamat mencoba dam semoha berhasil



sumber http://edopranata.blogspot.com/

Read More

Cara Pasang Widget Top Komentator

Cara pasang widget top komentator. Sebelumnya saya sudah memasang widget top komentator di blog ini. Kali ini saya akan menulis tutorial blog mengenai cara pemasangan widget ini di blogspot/blogger.

Seperti yang sudah saya tulis pada posting top komentator dofollow, widget ini akan menampilkan 10 komentator yang paling banyak berkomentar di blog anda (berupa link dofollow). Jadi, widget top

Read More

Cara Membuat Random Post di Wordpress

Cara membuat random post di Wordpress (Self-Hosted). Website dengan platform wordpress (Self-Hosted) juga bisa menggunakan random post yang sudah pernah saya posting-kan ini. Sebenarnya hampir sama dengan blogger. Perbedaan scriptnya hanya terletak pada url feed.

Posting ini saya buat karena ada salah satu pembaca yang menanyakan tutorial random post ini untuk platform wordpress. Seperti random

Read More

Cara Membuat Random Post di Blogger

Cara membuat random post di blogger. Tutorial blog kali ini akan menjelaskan bagaimana cara menampilkan posting/artikel secara acak di blogspot.

Random post ini disebut dengan random post dinamis, karena tampilannya yang berupa slide. Dengan tampilan slide tersebut, tentu random post ini juga akan menarik perhatian pengunjung. 

Bagi anda yang jarang mengupdate blog, mungkin widget ini cukup

Read More

Pasang Widget Top Referrer

Pasang widget top referrer. Bagi para blogger tentu akan lebih baik jika anda bisa memantau perkembangan blog anda. Banyak tool-tool online yang bisa anda gunakan untuk hal itu. Misalnya untuk memantau jumlah pengunjung, pageview, bagaimana pengunjung datang, halaman yang dikunjungi dan lain-lain.

Dari sekian banyak tool online, ada satu tool yang bisa anda gunakan dalam memantau trafik blog

Read More

Cara Membuat Kotak Chatting Tersembunyi

Cara membuat kotak chatting tersembunyi. Sebelumnya saya pernah membahas mengenai alternatif chatting bagi pengguna shoutmix. Kali ini saya akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul setelah diklik. Script yang digunakan pada kotak chatting tersebut

Read More

Chatting dengan Widget dari Google

Chatting dengan widget dari google. Banyak widget chatting yang bertebaran di internet sekarang ini. Tapi setiap widget tentu berbeda-beda, mulai dari tampilan hingga fungsi yang dimiliki.

Widget chatting yang paling banyak digunakan di Indonesia khususnya adalah shoutmix. Namun sekarang shoutmix tidak bisa digunakan seperti dulu lagi. Beberapa fungsi sudah tidak bisa digunakan lagi.

Di posting

Read More

Alternatif Chatting dengan Cbox dan Shoutbox

Alternatif chatting dengan Cbox dan Shoutbox. Shoutmix yang selama ini sudah banyak dipakai oleh blogger Indonesia sebagai widget chatting sekarang sudah tidak seperti dulu lagi. Fungsi link yang dulu ada tidak bisa muncul, kecuali jika kita log in dan juga jika menggunakan layanan premium.

Ada yang bilang masalah error pada shoutmix ini hanya terjadi di Indonesia karena banyaknya blogger

Read More