Tampilkan postingan dengan label Widgets. Tampilkan semua postingan
Tampilkan postingan dengan label Widgets. Tampilkan semua postingan

Menambahkan Tombol Facebook Like/Recommend

Langsung aja ke TKP


1. Login ke blogger
2. Pilih Layout- -> Edit HTML
3. Centang "Expand Widget Templates"
4. Cari Kode dibawah ini:

<div class='post-header-line-1'/>


5. Copy kode tombol "StumbleUpon" bookmarking Anda dan paste - kan sebelum kode <div class='post-header-line-1'/>

Catatan: Jika tidak ada kode <div class='post-header-line-1'/> di template anda, paste kode "StumbleUpon" bookmarking buttons tersebut sebelum kode <data:post.body/>



<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>


6. Simpan Template



Read More......

Menambah BlogEngage Vote Button

Langsung aja tutorialnya ya...


1. Login ke blogger
2. Pilih Layout- -> Edit HTML
3. Centang "Expand Widget Templates".
4. Cari kode seperti ini:

<data:post.body/>


5. Copy kode dibawah ini dan paste - kan sebelum kode <data:post.body/>

<div style='float:right; margin-right:10px; margin-top:10px'>
<script type='text/javascript'>
submit_url=&quot;<data:post.url/>&quot;;</script>
<script src='http://blogengage.com/evb/button.php' type='text/javascript'/>
</div>

6. Simpan Template

Read More......

Menambahkan Apture Social Networking Bar

Apture Site Bar adalah jalan pintas untuk mendapatkan readers tanpa meninggalkan halaman/page.

Kegunaannya adalah, pengunjung bisa men-share artikelmu ke Facebook, Twitter dan E-mail hanya dengan skali klik.

Tutorialnya sebagai berikut:

1. Silahkan kunjungi http://www.apture.com/createbar/

2. Masukkan data URL blog anda, email address dan detail lainnya.

3. Lengkapi semuanya dan klik "Get My Bar".

4. Akan muncul kode di bar, copy kode tersebut

5. Loginblogger

6. Pilih Layout --> Edit HTML

7. Cari kode </body>

8. Paste-kan kode yang kamu dapat tadi , sebelumkode </body>

9. Simpan Template. Refresh

Read More......

Menampilkan Tanggal Dan Jam di Title Bar

Cara Menampilkan Tanggal dan Jam 9waktu di Title Bar, tutorialnya sebagai berikut:

1.Login ke account blogger-mu
2.Pilih Layout --> Page Elements.
3.Pilih 'Add a Gadget'
4.Pilih 'HTML/Javascript' type
5. Masukkan kode dibawah ini

<Script Language="JavaScript" Type="Text/JavaScript">
var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>


6. Selesai, Refresh blog kamu

Read More......

Permainan Puzzle untuk Anak

Mau Menampilkan permainan anak di blog kamu ....? Coba deh tampilkan permaiann puzzle seperti ini




Cara Buatnya:

Kamu tinggal posting kode dibawah ini:

<img style="visibility: hidden; width: 0px; height: 0px;" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjc5NDI3MjcwMTYmcHQ9MTI2Nzk*MjczMjUyOCZwPTIyMzA1MiZkPSZnPTEmbz**YTZhMTZjN2MzYTY*YThlYjMx/YzNiOTA5MTc1YmEzYiZvZj*w.gif" width="0" border="0" height="0" /><embed allowscriptaccess="never" src="http://widgia.com/widgets/kids_puzzle/kid_puzzle.swf" quality="high" width="250" height="250"></embed>






Read More......

Ayo Chatting di blog

Chatroom Widget by 99chats.com

Anda ingin menambahkan widgets chatroom di blog..? Jadi kita bisa ngeblog sambil ber chat ria.
Yuk mulai tutorialnya:

LangkahI:

1. Kunjungi www.99chats.com
2. Selanjutnyan uat akun dengan klik tombol Sign up now
3. Masukkan email dan password anda, terus klik sign up
4. Selanjutnya konfigurasi chat room yang kan kita buat, seperti Room name, language, yang paling penting theme-nya agar sesuai dengan tempalte blog kita.
5. Setelah selesai klik Continue.
6. Copy the javascript embed code ke blog anda



Langkah II:

Memasukkan kode javascript ke dashborad blogger
1. Masuk ke akun blogger
2. Pilih Layout --> Page Element
3. Pilih Add a Gadget --> HTML/Javascirpt type
4. Copy paste kode yang kamu dapat tadi
5. Simpan
6. Selesai deh


Read More......

Sodoku Widgets

Mau bermain Sodoku di blog. Buat aja widgets dibawah ini.



Tutorial:

1. Login ke blogger
2. Pilih Layout
3. Pilih Page Element
4. Pilih Add a gadgets --> HTML/Javascript type
5. Copy paste script dibawah ini ke dalam kontennya

<iframe src="http://free-sudokus.blogspot.com" scrolling="no" width="200" frameborder="0" height="230"></iframe><div style="margin: -8px 0pt; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: center; width: 234px;"><a style="font-size: 75%; text-decoration: none;" href="http://tips-mempercantik-blog.blogspot.com/2010/02/sodoku-widgets.html">Sudoku Widget</a></div>



Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Widgets Selamat Ulang Tahun

Ingin mengucapkan selamat ulang tahun ke teman, tampilkan aja widgets ini di blog kamu.

Lihat contoh dibawah ini:


Birthday Widget by Widgia

Tutorial cara buatnya:

1. Login ke blogger
2. Pilih Layout --> Page Element
3. Pilih Add a Gadgets --> HTML/Javascript Type
4. Masukkan Konten berikut ini kedalamnya


<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjcyMjIyNDI*NjgmcHQ9MTI2NzIyMjM*MDg3NSZwPTIyMzA1MiZkPSZnPTEmbz1iMmMxOWJlMmJlNjE*YWJiYjg4/ZGFiNDZjMWQ1MzNiZCZvZj*w.gif" /><embed allowScriptAccess="never" src="http://widgia.com/widgets/birthday/birthday.swf" quality="high" width="250" height="250"></embed><br /><a href="http://tips-mempercantik-blog.com/" target="_blank">Birthday Widget by Widgia</a>


Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang



Read More......

Menampilkan Random Post ver.2

Sebelumnya telah dibuat tutorial Cara Membuat random post ver.1. Nah kali ini ada versi 2 nya, apa bedanya, silahkan buat aja dulu lantas bandingkan bedanya. Tool yang diperlukan dalam versi 2 ini cukup sederhana, anda cukup memasukkan alamat RSS FEED blog anda. Berikut tutorial selengkapnya :

Langkah I:
1. Buka situs http://www.blastcasta.com
2. Masukkan alamat Feed Rss anda.


http://www.Alamat Blog Anda.com/feeds/posts/default



3. Pada bagian bawah pilih Create a News Ticker. Kemudian Klik tombol Go >>
4. Pada halaman selanjutnya, anda dapat merubah settingan tampilan dari News Ticker seperti huruf dan warna.
5. Copy kode HTML yang berada sebelah kanan, paste-kan ke Notepad.

Langkah II:
1. Login ke Blogger
2. Pilih Layout--> Elemen Halaman.
3. Klik Add Gadget --> HTML/Java Script.
4. Paste kode HTML yang di Notepad ke dalam Elemen HTML / Java Script.
5. Setelah itu simpan. Lihat perubahan pada blog anda.


Read More......

Menampilkan Random Post ver.1

Pernah lihat artikel yang tampil secara acak di blog orang lain... Mau tau cara buatnya... Oke ikuti langkahku..

1. Login to Blogger
2. pili "Layout"
3. Pilih "Page Element" trus pilih "Add a Gadget --> HTML/Javascript"
4. Copy Paste Script Berikut:

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



4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Random Post" yang ditampilkan, kamu bisa menggantinya
6. Simpan.


Read More......

Widgets Light Bubble Clock

Ingin menampilkan sebuah jam terus ada background yang kelap-kelaip di belakangnya...? Jam ini sering disebut Light Bubble Clock.

Lihat contoh dibawah ini:


widgets Bubble Clock by Widgia

Tutorial cara buatnya:

1. Login ke blogger
2. Pilih Layout --> Page Element
3. Pilih Add a Gadgets --> HTML/Javascript Type
4. Masukkan Konten berikut ini kedalamnya


<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjcyMjExODU*MDYmcHQ9MTI2NzIyMTU4OTU*NiZwPTIyMzA1MiZkPSZnPTEmbz1iMmMxOWJlMmJlNjE*YWJiYjg4/ZGFiNDZjMWQ1MzNiZCZvZj*w.gif" /><embed allowScriptAccess="never" src="http://widgia.com/widgets/bubble_clock/bubble_clock.swf" quality="high" width="250" height="250"></embed><br /><a href="http://tips-mempercantik-blog.com/" target="_blank">widgets Bubble Clock by Widgia</a>


Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang



Read More......

Widget Menurunkan Berat Badan

Ingin menampilkan widgets Cara Menurunkan Berat Badan. Widgets ini bagus bagi yang sedang diet.

Lihat Demonya disini

Ingin tahu cara buatnya:

1. Login ke blogger
2. Pilih Layout
3. Pilih Page Element
4. Pilih Add a gadgets --> HTML/Javascript type
5. Copy paste script dibawah ini ke dalam kontennya


<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjczMjk*MjQ3MTgmcHQ9MTI2NzMyOTQzNjkzNyZwPTIyMzA1MiZkPSZnPTEmbz1iMmMxOWJlMmJlNjE*YWJiYjg4/ZGFiNDZjMWQ1MzNiZCZvZj*w.gif" /><embed allowScriptAccess="never" src="http://widgia.com/widgets/weight_loss_tips/weight_loss_tips.swf" quality="high" width="251" height="300"></embed>


6. Simpan Template


Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Daily Horoscope

Mau tau apa kata bintang mu setiap hari, buat aja widgets Daily Horoscope di blog kamu..


Lihat Demonya disini


Tutorial cara buatnya:
1. Login ke blogger
2. Pilih Layout
3. Pilih Page Element
4. Pilih Add a gadgets --> HTML/Javascript type
5. Copy paste script dibawah ini ke dalam kontennya

<img style="visibility: hidden; width: 0px; height: 0px;" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjczMjc5NjkyODEmcHQ9MTI2NzMyNzk5OTY4NyZwPTIyMzA1MiZkPSZnPTEmbz1iMmMxOWJlMmJlNjE*YWJiYjg4/ZGFiNDZjMWQ1MzNiZCZvZj*w.gif" width="0" border="0" height="0" /><embed allowscriptaccess="never" src="http://widgia.com/widgets/horoscopes/horoscopes.swf" quality="high" width="400" height="200"></embed>


6. Simpan


Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Chinese Horoscope 2010 Clock

Chinese Horoscope 2010 Clock
terdiri dari Chinese sign seperti tikus, macan, ular, naga, kuda, monyet, anjing , kelinci, dan lain-lain di Chinese Astrology.

Lihat Demonya di sini

Ingin tahu cara buatnya:

1. Login ke blogger
2. Pilih Layout
3. Pilih Page Element
4. Pilih Add a gadgets --> HTML/Javascript type
5. Copy paste script dibawah ini ke dalam kontennya


<img style="visibility: hidden; width: 0px; height: 0px;" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjczMjcwMTc5ODQmcHQ9MTI2NzMyNzA3OTg5MCZwPTIyMzA1MiZkPSZnPTEmbz1iMmMxOWJlMmJlNjE*YWJiYjg4/ZGFiNDZjMWQ1MzNiZCZvZj*w.gif" width="0" border="0" height="0" /><embed allowscriptaccess="never" src="http://widgia.com/widgets/chinese_horoscope_clock/chinese_horoscope.swf" quality="high" width="250" height="250"></embed>


6. Simpan Template


Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Menambahkan Tombol Google Buzz

Ingin menambahkan Tombol Google Buzz, ikuti tutorial berikut ini:

1. Log in Ke blogger
2. Pilih layout- -> Edit HTML
3. Centang "Expand Widget Templates"
4. Cari kode <data:post.body/>
5. Copy paste kode berikut ini diatas kode <data:post.body/>

Kode 1:

<div style='padding: 4px; float: right;'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJPvTLWajJZM3gZNw0VGE-AsH_NqpOObTZf1NuaMgfMgY92OnUS7_El1oDVIIFi-kZvlWkSoNw-i4o8tfOpjoBcU0ujbO6NS3oJ1NAmGWH0-YXEXzD9HsNsTU5gnf2Lwbhat__jiUbQBe/' style='border:0px;'/></a>
</div>



Hasilnya:



Buzz It










Kode 2:

<div style='padding: 4px; float: right;'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6bZR4cp0HLSAdqE35xbDmtmvPRQfH9FEbJVzCs_rCxG3nTQE1GmWW7SavKfqjv9LIo8Mm3fvX0mHxjg4Bb1z4PYrmrT485ZHrXf2ZDIkRv-jg4TeXwlk5r43j2JmRMEVjyqcFD6St8kBF/' style='border:0px;'/></a>
</div>



Hasilnya:



Buzz It








6.Simpan Template



Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Widgets Ikan Unik

Ingin menampilkan ikan kesana kemari di blog kamu...? Widgets ini unik, bahkan menurut fengshui bisa mendatangkan keberuntungan lho. Siapa tau akan membawa kebruntungan pada blog kamu. Coba aja tampilkan yang seperti ini:






Ingin tahu cara buatnya:

1. Login ke blogger
2. Pilih Layout
3. Pilih Page Element
4. Pilih Add a gadgets --> HTML/Javascript type
5. Copy paste script dibawah ini ke dalam kontennya

<div class="widget-content">
<object data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?up_fishColor5=0AE6FA&amp;up_fishColor6=0D02E0&amp;up_fishColor1=0B9637&amp;up_fishColor9=D113C4&amp;up_fishColor3=F5D90A&amp;up_fishColor7=D4C7C7&amp;up_fishColor10=4ECF08&amp;up_fishColor4=6109E6&amp;up_fishColor8=F0850C&amp;up_foodColor=F7B859&amp;up_numFish=10&amp;up_backgroundColor=000000&amp;up_fishName=MyFish&amp;up_fishColor2=F50A0A&amp;up_backgroundImage=http://&amp;" style="outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;" type="application/x-shockwave-flash" width="350" height="600"><param value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?up_fishColor5=0AE6FA&amp;up_fishColor6=0D02E0&amp;up_fishColor1=0B9637&amp;up_fishColor9=D113C4&amp;up_fishColor3=F5D90A&amp;up_fishColor7=D4C7C7&amp;up_fishColor10=4ECF08&amp;up_fishColor4=6109E6&amp;up_fishColor8=F0850C&amp;up_foodColor=F7B859&amp;up_numFish=10&amp;up_backgroundColor=1F1F24&amp;up_fishName=MyFish&amp;up_fishColor2=F50A0A&amp;up_backgroundImage=http://&amp;" name="movie"><param value="always" name="AllowScriptAccess"><param value="opaque" name="wmode"><param value="noscale" name="scale"><param value="tl" name="salign"></object>
</div>



6. Simpan

Tertarik dengan artikel ini, silahkan kirim ke lintas berita agar bisa dibaca oleh semua orang

Read More......

Membuat Section Berlangganan

Langkah I:

1. Login ke account blogger
2. Pilih Layout --> Edit HTML
3. Cari kode </head>
4. Selanjutnya copy paste script berikut ini sebelum kode </head>


<style type='text/css'>
#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;font-weight:bold; }
#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKKlX6fCJgZczYSGH72EM4mf_J7MGOk7qN3gtsA1D4s2j5ftdEZcSb6E3SNNO7s4Cvct2bl5fmsrHk44qexNQmC87Gbfsb36eIcfk05J31_vM-Si0lvhrZ4Jjcapw9nmIL6T4Hmkq7gO9K/) no-repeat top left; }
#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4EAr4arApykGiBpdCQbU91tn_JMqkSpmOSyMpKFAysE2lWb6ccvrChrjCuIBtwFV07Xf_DHFg80x_agAnsNzJ1Kq3aiv2Y8XBiE89gsOPzMhRDTLxUNQSCNWnvPVAz25m45-0DjAVWV3/) no-repeat top left; }
#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjbowoFiZtiIHFkYtKEHl864oN-wJclzgxuANOZTObpdnKBl5C98gltcKfpcXZsEt0ZBBjduSN9DTGcXY4__6N020E-wAR5u6iSl09Kq-X4HCOMqKrQKXnY7SW_3_gP25KwAiPU9Mc3TE/) no-repeat top left; }
>#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }
</style>



5. Simpan Template.


Langkah II:

1. Pilih Menu Layout -->Page Element
2. Pilih "Add a gadget" dengan type "html/java script"
3. Masukkan script berikut ini ke dalam kontennya.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">
<h2 class="subscription rss"><a href="http://tips-mempercantik-blog.blogspot.com/feeds/posts/default">SUBSCRIBE VIA RSS</a></h2>
<h2 class="subscription email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=TipsMempercantikBlog">SUBSCRIBE VIA EMAIL</a></h2>
<h2 class="subscription twitter"><a href="http://www.twitter.com/sehatserasi">FOLLOW ON TWITTER</a></h2>
</div></div>
</div>
Keterangan:
Silahkan ganti yang berwarna merah dengan RSS feed kamu

Read More......

Pasang tombol Tweet

Kali ini tips yang akan dibahas adalah memasang tombol Tweet. Cara pasang mirip dengan Cara Pasang tombol Facebook Share yang telah diposting sebelumnya. Dengan adanya tombol Tweet maka pembaca akan mudah men-share artikel kita ke tweeter.
Tutorialnya:
  • Login ke account Blogger
  • Pilih Layout --> Edit HTML
  • Centang expand the widget templates
  • Cari kode <data:post.body/>
  • Selanjutnya copy paste kode script berikut, di atas kode <data:post.body/>
<div style='float:right; padding:10px 0 0 5px'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>


Keterangan:
float:right berarti mengapung disebelah kanan, jika ingin mengapung disebelah kiri tinggal ganti dengan float:left






Read More......

Membuat Widgets Daftar Isi

Ada cara sederhana agar pengunjung blog kita gampang melakukan surfing di blog kita, yaitu dengan membuat sitemap atau daftar isi atau apalah namanya.
Berikut ini tutorial cara membuat daftar isi yang akan kita letakkan di sidebar.

Ikuti tutorial berikut:
  • Login ke Blogger
  • Pilih Layout --> Page Elements
  • Pilih Add a Gadget dengan type "HTML/JavaScript"
  • Copy scrpit berikut ini ke dalam kontennya:

<div style="border: 1px solid #000; overflow: auto; height: 200px;">
<script style="text/javascript" src="http://hensblog.googlecode.com/files/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
  • Simpan Gadget

Keterangan:

Jika ingin menampilkan daftar isi sesuai dengan label/kategori tertentu silahkan tambahkan kode /-/Label sehingga menjadi seperti kode dibawah ini (ganti Label dengan kategori yang ingin ditampilkan):

<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

Read More......

Membuat Widgets Terapung

Ada yang ingin membuat sebuah widgets yang “terapung”, maksudnya meski kita scroll ke bawah tetap widgets tersebut mengikutinya. Widgets tersebut bisa kita isi dengan iklan, shoutmix, menu daftar isi atau apa aja terserah kita. Coba lihat demonya disini (lihat di sebelah kanan terdapat widgets shoutbox yang terapung.

Cara buat:

  • Login ke blogger
  • Masuk ke Layout --> Page elements
  • Pilih Add a Gadget dengan tipe HTML/JavaScript
  • Copy paste script berikut konten gadget yang baru kita buat:



<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">

<!-- Letakkan kode script widgets yang kamu inginkan, seperti iklan, shoutbox -->

<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[X]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://tips-mempercantik-blog.blogspot.com/2010/02/membuat-widgets-terapung.html" target="_blank">Widget by Tips Mempercantik Blog</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>


  • Ganti <!-- Letakkan kode script widgets yang kamu inginkan, seperti iklan, shoutbox --> dengan kode yang akan kita tampilkan pada gadget terapung.
  • Simpan



Read More......