Membuat Sliding Box

Membuat Sliding box, code Scriptnya :

<!--Slidbox -->
<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:url(http://1.bp.blogspot.com/_JUg9QsmKp5s/TORmQZAoYXI/AAAAAAAACAI/cLoCJMP1rGo/s000/bo-bg-html.gif)
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
<!--Slidbox tempat isi -->
<strong style="color:#66ad3d;">JUDUL</strong>
Diisi Sesuka Hati
<!--Slidbox end tempat isi -->
</div></div>
<!--Slidbox end -->
<div style="-moz-border-radius: 12px 12px 12px 12px; background-color: #e6e6e6; border: 2px solid rgb(204, 204, 204); color: black; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
Hasil CodeScript </div>

Read more »

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook - Cara agar postingan terakhir blog masuk di akun facebook - Setelah posting mengenai cara membuat fanpage di facebook dan cara membuat like box facebook di blog, kali ini saya akan bahas bagaimana kita bisa memanfaat keduanya untuk mendapatkan traffic tambahan untuk blog kita. Bagi anda yang suka ngeblog (blogger) dan juga online terutama dengan facebook, tentunya ingin juga posting blog terbaru langsung ter-update di facebook. Sekarang ini situs jejaring sosial seperti facebook sungguh luar biasa penggemarnya, hampir setiap orang online atau terkoneksi internet, website yang pertama kali dibuka biasanya adalah facebook.com - login ke account masing-masing dan update status atau baca-baca status orang lain, member komment, sampai-sampai status gak pentingpun rasanya ingin sekali dibagikan di facebook. Bagi para blogger sebagian besar menginginkan blognya rame di kunjungi orang, atau mungkin para pebisnis online yang menginginkan usaha onlinenya (toko online - nya) di serbu orang, pasti sangat menginginkan hal ini, dengan cara menampilkan informasi terbaru (update) dari blog/ web kita di situs jejaring social terutama facebook, dan ini sangat memungkinkan penambahan kunjungan ke blog/ web kita. Pada kesempatan yang sangat baik ini saya akan berbagi tutorial singkat tentang bagaimana cara membuat Posting Blog Terbaru Otomatis Update di Status Facebook kita. Sulitkan membuat postingan terbaru pada blog otomatis update di status facebook? Jawabannya silakan simak panduan (tutorial) Posting Blog Terbaru Otomatis Update di Status Facebook kita di bawah ini. Berikut cara agar postingan terakhir blog masuk di akun facebook:

1. Silahkan anda buka alamat https://twitterfeed.com/
2. Klik Register Now maka akan tampil gambar , silahkan anda isi email aktif anda, password untuk login ke twitterfeed, tulis kode yang tampak dan klik create account.
3. Setelah anda klik create account, selanjutnya anda masukan Feed Name (boleh anda tulis dengan nama blog anda), kemudian pada kolom Blog URL/ RSS Feed anda isi http://nama-blog-anda.blogspot.com/atom.xml
4. Tahap selanjutnya anda pilih situs jejaring sosial facebook.
5. Selanjutnya anda disuruh menghubungkan ke account facebook anda, akan ada jendela aktifasi, setelah anda klik izinkan maka account facebook anda akan masuk didalam kotak Authenticated account facebook.
6. Terakhir Anda klik Create Service, jika berhasil maka akan tampil “congrulation”.

Dan hasil akhirnya, setiap anda posting tulisan terbaru di blog anda, secara otomatis akan terupdate di status facebook anda. Semoga postingan kali ini bermanfaat.

Read more »

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/10/membuat-back-to-top-dengan-efek-jquery.html#ixzz22JD8SqQM
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Hasil CodeScript

Read more »

Cara Membuat Link Blog Berwarna-Warni

Sobat pasti sudah pernah melihat link berwarna warni pada blog. Ada berbagai warna yang ditampilkan link tersebut apabila cursor anda berada diatasnya. Kali ini kita akan membuat setiap link berwarna-warni pada blog anda. Javascript yang satu ini sangat mudah untuk diinstal karena anda tidak perlu mengotak atik template. Jika ingin tau caranya ikuti langkahnya dibawah ini:

1. Login ke Blogger

2. Masuk ke Rancangan --> Edit Laman

3. Tambahkan Gadjet lalu pilih HTML Javascript

4. Masukan kode berikut ini:

<script src="http://andreblog.googlecode.com/files/Rainbow_Colors_Way2blogging.js" type="text/javascript"></script>

5. Simpan gadjet anda

Apabila script tersebut tidak bekerja itu disebabkan karena script tersebut tidak cocok pada css template. Untuk itu coba sobat hapus tag !important. Demikian trik dan tips untuk saat ini semoga bermanfaat.

Read more »

Menambahkan Recent Posts Dan Recent Comments Dengan Javascript

1. Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
2. Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
3. Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:

4. Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan variabel:

• numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting. Jika ingin menampilkan lebih dari 25, silahkan pelajari artikel ini).
• showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
• showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
• numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
• standardstyling = true; artinya menggunakan type standard.

Kode untuk Recent Comments:

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-comments.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.
jika Recent Comments kamu ingin menggunakan bullets,

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-commentsbullet.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu.

Nah, selesai dah. Selamat mencoba.....

Read more »

Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:

1. Login ke akun Blogger kamu.
2. Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
3. Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
4. Beri tanda centrang pada Expand Template Widget.
5. Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {display:inline}
6. Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className=="widgetshown"){
whichpost.className="widgethidden";
}
else{ whichpost.className="widgetshown";
}
}
</script>
7. Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
<h2 class='title'><data:title/></h2>
8. Ganti kode tersebut dengan kode ini:
<a href='javascript:togglespoiler (&quot;widget-spoiler1&quot;)' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>
9. Kemudian pada kode berikut, yang ada di bawahnya:
<div class='widget-content'>
10. Ganti dengan kode ini:
<div class='widgethidden' id='widget-spoiler1'>
11. Simpan dan Lihat hasilnya
    
    Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
    
    Catatan:
    Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

Read more »

Cara Membuat Scroll Pada Bloglist (Daftar Blog) Blogspot

Banyak sobat yang menggunakan gadget Bloglist (Daftar Blog) dari fasilitas blogger/blogspot pada sidebar blognya. Memang ada keuntungan disana. Dengan memamfaatkan gadget Bloglist ini kita bisa melihat setiap artikel-artikel terbaru dari blog-blog yang terdapat di dalamnya, sehingga kita dapat dengan mudah mengetahui setiap perkembangan dan topik bahasan artikel dari blog-blog tersebut.

Sayangnya, jika isi Bloglist ini terlalu banyak maka akan terlihat memanjang sehingga memenuhi halaman blog, dan kadang melebihi panjang halaman artikel yang dimuat. Bahkan sekalipun kita memilih opsi terpendek (5 blog yang ditampilkan), tetap saja apabila kita klik "selengkapnya" (Show all) pada Bloglist tersebut maka akan memanjang memenuhi halaman blog. Tentu saja hal ini terlihat kurang rapih dan menarik.

Untuk mengatasi hal itu kamu bisa menambahkan perintah scroll. Sepintas memang kelihatan sulit untuk menambahkannya karena gadget-nya bukan berupa HTML/JavaSript. Tapi sebenarnya cukup mudah dan simpel, kamu hanya cukup menambahkan perintah overflow dan mengatur ukuran tinggi (height)-nya.

Untuk mengetahui lebih jelas cara membuatnya kamu dapat mengikuti langkah-langkah berikut:

1. Dari halaman dasbor, klik Tata Letak - Edit HTML.
2. Beri tanda centrang pada Expand Template Widget.
3. Kemudian cari kode type='BlogList' (gunakan Control F atau F3).
4. Perhatikan kode yang ada di bawahnya, seperti ini:
<b:includable id='main'>
<!-- 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'>
5. Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:
<b:includable id='main'>
<!-- 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' style='overflow:auto; height:200px'>
6. Atur ukuran tinggi (height)-nya sesuai kebutuhan.
7. Simpan hasil. SEMOGA BERMANFAAT...!!
Catatan: Jika muncul bullets selain logo blogger pada Bloglist tersebut, itu karena CSS untuk widget pada blog kamu diatur seperti itu. Untuk menghilangkannya, cukup kamu hapus kode class='widget-content' pada script di atas.

Read more »