This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Sabtu, 22 Desember 2012

memasang nomor halaman pada blog

Para blogger yang tertarik membuat nomor halaman pasti udah gak sabaran untuk memulainya. Nomor halaman yang akan kita buat sangat mudah. Fungsi dari nomor halaman ini yaitu membantu sahabat menavigasi halaman satu ke halaman yang lain seperti pada google search engine. Navigasi halaman menjadi lebih mudah dibandingkan anda memasang link new post and old post. Berikut ini adalah langkah-langkah memasang nomor halaman pada blog sobat.

1. Login ke blogger
2. Pilih Rancangan dan klik Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah tepat diatas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
5. Cari kode </body>
6. Kopi dan paste kode berikut tepat diatas kode </body>
<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigasi -->

5. Jika sudah simpan templatenya...

Keterangan: pada script diatas ada kode var displayPageNum=5; menunjukan jumlah nomor halaman yang ingin ditampilkan. Selamat mencoba

membuat alert selamat tinggal pada blog

Pada posting sebelumnya kita telah membuat welcome alert, kali ini ada trik baru yang sama yaitu membuat alert selamat tinggal. Ketika pengunjung akan berpindah ke situs lain lalu menutup jendela blog sobat maka sebuah pesan akan muncul. Namun kekurangan dari trik ini yaitu pengunjung akan merasa terganggu apabila pesan ini terus muncul saat mereka menutup jendela blog anda. Tetapi bila sobat tertarik untuk membuatnya berikut ini adalah triknya

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode </head>
4. Kopi dan paste kode dibawah ini sebelum kode </head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39; Selamat Tinggal ^_^ &#39;);
}
parent.window.onunload=goodbye;
</script>
5. Simpan template anda

Sobat dapat mengganti kode berwarna merah dengan kata-kata pesan sendiri. Good Luck dan selamat mencoba!

membuat efek bunga sakura bertaburan di blog

Sakura adalah bunga yang identik dengan negara Jepang dimana bunga ini bermekaran pada musim semi yaitu pada awal April hingga awal Mei. Negara ini memiliki varian bunga sakura kurang lebih 200 jenis. Buka sakura mempunyai arti yang berkaitan dengan wanita, kesedihan serta kematian. Kali ini saya akan memberikan tips kepada sobat blogger bagaimana membuat efek bunga sakura gugur dan bertaburan di blog. Trik berikut ini dapat membuat blog anda lebih menarik dan cantik. Caranya sangat mudah saja, anda hanya perlu ikuti langkah berikut ini:

1. Login ke blogger.
2. Pilih Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/SakuraRain.js' type='text/javascript'/></script>
5. Simpan template anda

Sekarang sobat coba lihat hasilnya di blog. Taburan bunganya pasti cantik dan membuat blog anda lebih menarik. Selamat mencoba!

membuat alert perkenalan bagi pengunjung

Sobat mungkin pernah mengikuti salah satu trik yang saya berikan mengenai cara membuat alert pesan selamat datang bagi pengunjung. Trik kali ini sedikit agak berbeda, kita akan mencoba membuat alert selamat datang dengan perkenalan sepintas. Ketika seseorang mendatangi blog anda maka orang tersebut akan diminta untuk menulis namanya apab. Setelah memasukan nama maka pengunjung akan disapa sesuai namanya. Oke bagi yang berminat langsung saja saya tunjukan langkahnya.

1. Login dulu ke blogger
2. Klik Rancangan -- Elemen Laman
3. Klik Tambah Gadjet lalu pilih HTML/Javascript
5. Masukan script dibawah ini:
<script type='text/javascript'>
var name = prompt("Selamat Datang!! Boleh Tau Nama Anda?", "Nama Anda ");
alert("Salam Kenal "+name)
alert("Selamat Surfing di Blog Saya, Semoga Bermanfaat!!")
</script>
Keterangan:
Kode berwarna merah adalah pesan bagi pengunjung. Sobat dapat menganti sesuai dengan selara.

6. Simpan gadjet dan lihat pada blog anda!

That's it. Selamat mencoba!!!

membuat efek halaman yang melengkung

halaman melengkung ketika cursor mouse berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian pengunjung mengklik gambar iklan dibalik lekungan halaman. Efek ini juga dapat digunakan untuk berbagai macam tujuan misalnya untuk mengarahkan pengunjung ke sebuah blog atau website.

Efek ini seringkali digunakan untuk mempercantik dan memperindah blog. Ini adalah salah satu efek yang saya sukai dan saya merekomendasikan sobat blogger untuk mencobanya. Jika sobat ingin tau cara membuatnya ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang pada Expand Template Widget
4. Kopi script dibawah ini dan letakan diatas kode
<b:skin><![CDATA[
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/page_peel.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://3.bp.blogspot.com/-gdg7o8HCtqA/T547peqhuTI/AAAAAAAADPg/REelXg1UcHM/s220/DSC01465.JPG) no-repeat right top;
text-indent: -9999px;
}
Keterangan:
- Kode berwarna merah adalah gambar latar belakang page peel. Sobat dapat menggantinya dengan gambar yang lain.

7. Letakan kode dibawah ini tepat dibawah kode
<body>
<div id='pageflip'>
<a href='http://blogtrikdantips.blogspot.com/' target='_blank'>
<img alt='' src='http://2.bp.blogspot.com/-Wb14xiN0KPc/T7sJg5sldPI/AAAAAAAADS8/vtmXQM0CMuo/s400/page_peel_image.png'/>
<span class='msg_block'/>
</a>
</div>
Keterangan:
- Kode berwarna biru adalah link yang akan mengarahkan pengunjung ke sebuah halaman (sobat dapat menggantinya)

8. Simpan template sobat dan lihat hasilnya

Selamat mencoba dan semoga berhasil....!

cara pasang headline news keren pada blog

Blog Trik dan Tips akan membahas salah satu trik yaitu bagaimana cara membuat headline news. Pasti yang udah sering dengarin berita di televisi udah tau apa itu headline news. Tapi headline news di tv beda dong ama yang dibuat di blog. Sesuai dengan namanya headline news ini memuat judul-judul posting yang sobat terbitkan. Sobat dapat memasang headline news diatas atau dibawah blog. Headline news akan berhenti bergerak apabila cursor mouse anda berada diatas link judul posting. Oke langsung aja kita membuatnya:

1. Login ke blogger
2. Klik Rancangan -- Elemen Laman
3. Tambahkan gadjet anda dan pilih HTML/Javascript
4. Kopi kode berikut ini dan paste pada gadjet sobat

<script type="text/javascript">
var hn_url_blog="http://blogtrikdantips.blogspot.com";
var hn_jumlah_post= 15;
var hn_warna_latar="#CCFEBF";
var hn_warna_garis="#FEF9BF";
var hn_posisi="top";
var hn_tampilkan_judul=true;
var hn_backlink= true;
</script>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/headline_news_marquee.js"></script>
Keterangan:
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Ganti url (kode berwarna biru) dengan url blog sobat
6. Simpan gadjet sobat!!

cara pasang lagu di blog

Mau punya lagu di blog anda? ya pasti mau lah....kalo gak mau untuk apa di baca posting ini!....he3 just kidding (bercanda). Oke kali ini Blog Trik dan Tips akan memberikan resep khusus bagaimana anda bisa membuat lagu di blog. Ketika seorang pengunjung membuka halaman blog anda maka lagu tersebut secara otamatis akan dimainkan (play). Caranya mudah saja hanya perlu memasukan script pada gadjet anda. Kalau gitu ikuti langkahnya dibawah ini:

1. Login ke akun blog anda
2. Pilih Rancangan --> Elemen
3. Tambahkan Gadjet anda --> Pilih HTML/Javascript
4. Masukan kode di bawah ini

<embed align="CENTER" autostart="1" height="0" loop="1" src="http://www.4shared.com/embed/s8qieq3Y/Nikita_Willy_-_Kutetap_Menanti.swf " width="0"></embed>
5. Klik saved untuk menyimpan kode tadi

Coba anda tes lagunya. Buka saja halaman blog anda pasti akan ada lagunya Nikita Willy - Ku Tetap Menanti. Kalau anda ingin menganti lagu lain, ganti script yang berwarna merah dengan kode ektensi lagu dalam format swf. Untuk lagu-lagu lainnya dapat anda klik disini: Kumpulan Ekstensi Musik SWF untuk Blog

membuat rating 5 star pada blog

Saya akan memberikan tutorial bagaimana caranya membuat gadjet penilaian 5 bintang pada blog anda atau biasanya disebut juga 5 star rating widget. Ada beberapa cara kita bisa membuat widget seperti ini misalnya dengan menggunakan rich snippets, namun cara saya akan memberikan cara yang lebih sederhana. Widget yang kita buat ini dikembangkan oleh js kit dan mempunyai fitur atau tampilan yang cukup menarik. Ada pilihan 5 bintang untuk penggunjung dapat memilih. Biasanya widget ini ditempatkan dibawah postingan artikel blog anda dimana penggunjung akan membaca artikel dan memberikan penilaian terhadap artikel tersebut. Ingin tau cara membuatnya ikuti langkahnya dibawah ini:

1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'></div>
</b:if>
Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.

5. Letakan kode dibawah ini diatas kode </body>
<script src="http://js-kit.com/ratings.js"></script>
6. Terakhir yaitu simpan template anda.

Coba anda lihat bagaimana widget ini tampil pada posting anda. Tampilannya pasti menarik bukan? Selamat mencoba ya semoga bermanfaa

Membuat Tombol Twitter dan Jumlah Follower pada Blog

Sobat Blog Trik dan Tips jika anda punya akun twitter dan ingin mempromosikan blog anda, cobalah buat widget yang satu ini. Kita akan membuat tombol twitter follower pada blog, fungsinya yaitu untuk mengajak pengujung dari blog untuk mengikuti status anda pada twitter. Tombol twitter biasanya ditempatkan di sidebar atau dibawah posting. Penempatannya tergantung selera anda yang penting mudah dilihat oleh pengunjung aja. Kebetulan saya juga akan memberikan tips bagaimana memunculkan jumlah follower pada tombol twitter anda. Mudah saja untuk membuatnya, ingin tau caranya untuk itu ikuti langkah berikut ini:

1. Kunjungi situs ini https://twitter.com/about/resources/buttons#follow
2. Pilihlah tombol follow
3. Pada Button Option masukan username twitter anda
4. Kopi kode atau script untuk tombol twitter
5. Paste kode tersebut pada widget di blog anda.

6. Untuk memunculkan jumlah pengunjung pada tombol twitter tersebut maka ganti data-show-count="false" menjadi data-show-count="true". Hasilnya akan seperti tombol twitter milik Blog trik dan tips dibawah ini:


menjadi seperti ini:

7. Simpan widget anda lalu lihat blog anda
Dengan membuat tombol twitter mudah-mudahan anda semakin banyak followernya ya. Kebetulan karena sudah membaca artikel saya ini jangan lupa ya untuk follow saya di twitter ...Oke deh terima kasih sudah membaca, selamat mencobanya...

Membuat Widget Penilaian Artikel Menggunakan Jempol

Pada Trik dan Tips kali ini kita akan membuat Penilaian Menggunakan Jempol atau Thumbs Up and Down Rating Widget pada blog anda. Sebelumnya kita telah membuat 5 star rating widget dengan menggunakan bintang namun widget yang satu ini berbeda karena menggunakan jempol. Jompol atas dan jempol bawah adalah dua penilaian yang berbeda. Jempol atas menunjukan isi dari artikel anda disukai oleh pembaca, sebaliknya jempol bawah menunjukan isi artikel tidak disukai oleh pembaca. Widget jempol ini akan tampil dengan jumlah banyaknya jempol atas dan jempol bawah. Jika ingin membuat blog anda lebih menarik maka cobalah tampilkan widget ini. Untuk membuatnya ikutilah langkah berikut ini:

1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>
Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.

5. Letakan kode dibawah ini diatas kode </body>
<script src="http://js-kit.com/ratings.js"></script>
6. Lalu simpan template anda.

Coba anda lihat bagaimana widget ini tampil pada posting anda. Anda akan melihat Jempol Up dan Jempol dawn dengan tampilan yang sangat menarik. Smoga artikel in ibermanfaat. Selamat mencoba ya semoga bermanfaat.

Membuat Email Subscription dengan Icon Bergambar Sketsa

Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuOJxh4G394v91rl-lqK9He7hL0cuq2xI7F6b_t0-rOTNMTWmyfNTL_TYcgIydQjj_S52RdXqMtEwLPS_qD6UqmyXKnArCA7_whrddURmtwVZI_SY1vukQYtQQVxu9pS-oKyn1M2r9Yo6/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGSiElFYDBekuATZOzXIK2a0nSadthK-GLHKpOY520SYKWhvuxA1Uu4ozNVsVShTk4Rr8XDmJ3r2a7_vt5Ns2o80rRk6fdREc5d2EG_QO4TGGJrpNlIinqV0oM4uFEnoQpfDE1xnsDDCB/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO35piZERt4bCw3wokglB6V80kph10sw07ocDbsgt7abTvR5EpdSXzgVNxmTT47W6NwWGTlB1tnqfNvogXqf3xh0I49GDjieQFDOW227at5ajwnkPqWXbVbtmnjP3zlZoEO3cJ9dKcnGjN/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNYe4J3gJM0RwaaXhpXsF7lQ_2n0o3_SdiVd22nhtr9YK4d7x405JA2M4I271XBLIGMAte4bCQe28b-RF9ZWKOlMuvb2apg9sKeXyLl_0PqeDIuEceE21fjOW8bVi2B-cEnZnxtvGml0I/s1600/google-48.png" /></a></td>
</tr></table>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/blogtrikdantips"><img src="http://feeds.feedburner.com/~fc/blogtrikdantips?bg=FF6600&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.blogtrikdantips.blogspot.com">Blogger Widgets</a>
</div>

4. Gantilah kode berikut ini:

http://www.facebook.com/pages/blogtrikdantips dengan fanpage facebook anda.
http://twitter.com/blogtrikdantips dengan halaman twitter Anda.
http://feeds.feedburner.com/blogtrikdantips dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
blogtrikdantips (dari bagian bawah kode di atas) dengan id feedburner Anda.

5. Klik simpan.

Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!

membuat tombol facebook twitter goggle melayang

Sebelumnya kita membuat tombol facebook, twitter dan Google+ pada halaman posting atau disidebar, namun kali ini kita akan membuat tombol tersebut melayang dan akan bergeser ketika pengguna mengscroll halaman ke atas atau bawah. Trik yang satu ini akan menambah efek pada halaman blog anda sehingga tampak lebih indah. Kita akan menggunakan kode Javascript untuk membuat widget yang satu ini. Caranya sangat mudah, jika sobat ingin membuatnya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan -- Elemen Halaman
3. Tambahkan gadjet lalu pilih HTML/JavaScript
4. Masukkan kode berikut ini:
<style>
/*-------Blogtrikdantips Tombol Melayang------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}

#bttsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="bttsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="blogtrikdantips">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.blogtrikdantips.blogspot.com" target="_blank">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>

5. Gantikan kode berwarna biru (blogtrikdantips) dengan username twitter anda
6. Simpan gadjet
7. Masuk ke Rancangan -- Edit Halaman lalu cari kode </head>
8. Paste kode dibawah ini diatas kode </head>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
9. Simpan Template anda

Cobalah lihat hasilnya sekarang, widget tersebut akan melayang disamping kiri blog anda. Selamat mencobanya..

membuat pop up selamat datang pada blog

Blog trik dan tips kali ini akan memberikan tutorial bagaimana membuat pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
4. Masuk lagi ke Rancangan --> Edit Laman
5. Tambahkan gadjet lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadjet tersebut

<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}



div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://blogtrikdantips.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://blogtrikdantips.blogspot.com/ ">Blog Trik dan Tips</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXytlwEAzajbWjgv_T_-FGX_4YrTOmIHWVKO4Zh9Ay9Yl8GgII6ilWlU4VXn8FjmbRV3xWWT5HGlk0Y2b61QFkH9UeizZgo6_qY8IvyIykAyEwCx5NahGV549sKiHzoZ0U1Q6PBSMmQEX/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXytlwEAzajbWjgv_T_-FGX_4YrTOmIHWVKO4Zh9Ay9Yl8GgII6ilWlU4VXn8FjmbRV3xWWT5HGlk0Y2b61QFkH9UeizZgo6_qY8IvyIykAyEwCx5NahGV549sKiHzoZ0U1Q6PBSMmQEX/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

7. Gantikan kode berwarna biru dengan url blog dan judul blog anda
8. Simpan template anda lalu lihat hasilnya

Demikian langkah2 untuk membuat pop up selamat datang pada blog. Jika anda ingin memodifikasi pop up tersebut maka perhatikan kode-kode yang perlu diedit. Sekian tutorial dari saya salam blogging

cara membuat indikator loading halaman

Ada beberapa blog yang pernah saya kunjungi menggunakan indikator loading halaman. Biasanya sebuah gambar akan muncul ketika kita sedang membuka halaman sebuah web. Gambar tersebut menunjukan halaman tersebut sedang dalam proses loading. Blog Trik dan Tips kali ini akan memberikan tutorial bagaimana membuat loading page atau indikator loading halaman yang sederhana pada blog anda. Untuk membuatnya tidaklah sulit, ikuti saja langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Back up (upload) template anda terlebih dahulu untuk mencegah kesalahan editing
3. Cari kode <body>
4. Hapus kode tersebut lalu ganti dengan kode dibawah ini:
<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://1.bp.blogspot.com/-l6kpGSbwlAk/T4QyAAmu78I/AAAAAAAAC8M/3JL_qrskbEs/s400/kotak.gif'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>
5. Ganti kode berwarna biru dengan url gambar loading page yang anda suka
6. Simpan template anda lalu lihat hasilnya

membuat widget rating star

Jika sobat ingin agar posting yang sudah ditulis diberi penilaian atau rating maka widget yang akan kita buat ini bisa bermanfaat. Pengunjung yang membaca artikel anda dapat memberikan penilaian dengan memilih jumlah bintang. Semakin banyak bintang maka semakin menarik artikel yang mereka baca. Widget yang akan kita buat diperoleh dari Outbrain, yang mana sangat mudah untuk diinstal. Berikut ini adalah langkahnya.....

1. Kunjungi situs ini http://www.outbrain.com/getwidget
2. Lalu Choose Blogger Platform (pilihlah platform blogger jika sobat menggunakan blogger)
3. Pilih Bahasa Indonesia untuk language
4. Lalu centang kotak untuk menyetujui TOS
5. Klik Tombol Instal
6. Anda akan langsung diredirect untuk menginstal widget pada blogger.


7. Jika sobat ingin langsung diinstal maka klik tombol Menambah Widget
8. Lalu lihat hasilnya

Demikian langkah2 membuat rating star widget. Anda bisa melihat widget tersebut tampil pada blog, semakin banyak bintang maka semakin disukai posting anda. Sekian dan salam blogging...

cara ,e,buat random post versi headline

Blog Trik dan Tips akan memberikan tutorial cara membuat headline news random post dengan efek animasi seperti gambar disamping. Random post yang akan kita buat tidak hanya memuat judul posting namun ada beberapa elemen tambahan seperti judul blog, penulis, waktu penerbitan serta rincian posting (summary). Random post akan memuat artikel secara acak pada blog anda, dimana tiap judul artikel ditampilkan dengan animasi yang sangat keren. Nah jika sobat penasaran gimana dengan tampilannya mengapa tidak dicoba aja. Untuk itu langsung aja ikuti tutorialnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode dibawah ini pada gadjet tersebut

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 13px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 13px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 300px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://blogtrikdantips.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Blog Trik dan Tips"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="www.blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"><a href="http://www.blogtrikdantips.blogspot.com" target="_blank">Click Here To Grab This Widget</a></div>

5. Untuk customize atau pengeditan widget tadi dilihat dibawah ini:
- kode berwarna biru adalah ukuran font
- kode berwarna merah adalah ukuran kotak widget
- kode berwarna hijau adalah judul blog dan url blog, ubah bagian tersebut sesuai blog anda

6. Simpan gadjet lalu lihat hasilnya

Demikianlah langkah Cara Membuat Random Post Versi News Headline Animasi untuk blog anda. Untuk widget ini membutuhkan loading yang sedikit lama jadi cobalah sabar untuk menunggu loadingnya. Sekian dan salam blogging

membuat komentar area paling keren

Untuk membuat komentar area menjadi stylis biasanya membutuhkan banyak waktu untuk mengedit template anda, namun dengan IntenseDebate, anda bisa membuat komentar area menjadi lebih mudah dan terlihat keren. Pengunjung yang datang ke blog anda akan memperoleh kemudahan serta menyukai komentar area yang anda miliki. Beberapa fitur yang ditawarkan IntenseDebate yaitu, threaded comment, email notifikasi, profil komentator, moderasi serta blacklist, open id, integrasi twitter, facebook dan rss, plugin api, dan widget. Jika sobat tertarik untuk membuatnya ikuti petunjuk dibawah ini:

1. Simpan template anda terlebih dahulu untuk mencegah terjadi kesalahan editing
2. Kunjungi situs IntenseDebate lalu daftarkan diri anda (Isi Username, password, email)
3. Lakukan konfirmasi email untuk aktivasi akun IntenseDebate
4. Setelah itu instal IntenseDebate (masukan url blog anda)

5. Selanjutnya upload template blog anda ke IntanseDebate, dimana secara otomatis template anda akan dimodifikasi.
6. Kopi kode yang telah dimodifikasi
7. Lalu login ke Blogger, masuk ke Rancangan --> Edit HTML
8. Centang Expand Template Widget
9. Hapus semua kode tersebut lalu paste kode yang telah kita kopi dari IntenseDebate
10. Simpan template anda lalu lihat hasilnya

Mudah sajakan untuk membuat komentar area IntenseDebate pada blog anda. Anda juga dapat menambah widget dari intense debate seperti blog stat, komentar terbaru, popular blog post, top user widget dan my recent comment widget. Lengkap semua fiturnya yang pasti sangat bermanfaat. Demikian tutorial blog trik dan tips semoga bermanfaat.

membuat komentar terbaru dengan gambar

kali ini kita akan membuat komentar terbaru dengan gambar. Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar memperindah atau mempercantik blog. Anda dapat mengetahui apabila seseorang berkomentar pada blog anda. Gambar komentator ditampilkan dalam bentuk lingkaran sehingga memberikan efek yang sangat menarik. Jika sobat ingin memasangnya pada blog ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:
<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://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Selanjutnya sobat tinggal menganti kode berwarna merah dengan url blog anda.
6. Jika sobat ingin mengedit tampilan widget ini berikut adalah penjelasannya:
- Kode berwarna hijau adalah jumlah komentar yang ditampilkan
- Kode berwarna biru aadalah ukuran gambar komentator
- Kode berwarna orens adalah rincian komentar dari komentator
7. Terakhir simpan gadjet anda.

Demikian adalah sekilas penjelasan bagaimana membuat komentar terbaru dengan gambar atau istilah lainnya yaitu membuat recent comment dengan avatar. Semoga dengan widget ini tampilan blog anda lebih menarik serta lebih banyak yang berkomentar. Sekian dan salam blogging....

cara memasang google translate pada blog

cara membuat Google Translate pada halaman blog anda. Google translate ini dikembangkan oleh Google untuk mentranslet bahasa pada blog blogger ke berbagai bahasa lainnya. Dengan membuat Google Translate penggunjung dari luar negeri dapat membaca artikel anda apabila ia menggunakan widget ini. Cara pemasangan widget ini sangat mudah, untuk itu langsung saja ikuti langkahnya berikut ini:


1. Masuk ke Rancangan --> Edit Laman
2. Tambah Gadjet pilih HTML Javascript
3. Masukan kode dibawah ini:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
4. Simpan gadjet anda

Demikian cara pemasangan Google Translate pada blog anda. Mudah2an tutorial singkat ini dapat memberikan manfaat. Salam blogging...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/04/memasang-google-translate-pada-blog.html#ixzz2FqxaASm8
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Membuat efek hover transparan pada gambar

Anda bisa membuat berbagai macam efek hover pada objek yang anda inginkan di blog. Salah satunya yaitu membuat efek hover transparan pada gambar. Efek hover ini akan nampak apabila anda mengarahkan cursor mouse pada object. Jika cursor mouse berada tepat diatas gambar maka gambar tersebut akan menjadi normal, namun jika anda tidak mengarahkan cursor pada gambar maka gambar tersebut menjadi transparan. Jika sobat ingin tau cara membuat efek tersebut ikuti langkahnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode ]]></b:skin>
4. Lalu tambahkan kode Css berikut ini diatas kode ]]></b:skin>
a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
5. Simpan template anda.

Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini

<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>
Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna biru adalah url gambar

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://bloggerblogwidgets.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

caea membuat google translate dengan gambar

Google menawarkan berbagai macam widget yang dapat kita gunakan untuk mempercantik atau menambah elemen pada blog, salah satunya yaitu Google Translate. Google Translate ada bermacam tampilan yang dapat dipasang pada blog. Kali ini kita akan membuat Google Translate dengan menggunkanakan bendera dari beberapa negara. Anda bisa mentranslate halaman dengan cara menklik bendera yang ada. Ingin tau cara memasangnya ikuti langkah dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<style type="”text/css”">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="”w2bgft”"><!--–google flag translator by blogtrikdantips.blogspot.com–--><form action="”http://www.google.com/translate”"><script language="”javascript”">document.write (“<input name="u" value="”+location.href+”" type="hidden">”)</script><noscript><a href="”http://blogtrikdantips.blogspot.com/”">BlogTrikdanTips</a></noscript><input value="”en”" name="”hl”" type="”hidden”/"><input value="”UTF8″" name="”ie”" type="”hidden”/"><input value="”&quot;" name="”langpair”" type="”hidden”/"><input onclick="”this.form.langpair.value=this.value”" title="”English”" value="”auto|en”" src="%E2%80%9Dhttp://www.google.com/images/flags/uk_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Chinese" value="”auto|zh-CN”" src="%E2%80%9Dhttp://www.google.com/images/flags/cn_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Greek”" value="”auto|el”" src="%E2%80%9Dhttp://www.google.com/images/flags/gr_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Hindu”" value="”auto|hi”" src="%E2%80%9Dhttp://www.google.com/images/flags/in_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”German”" value="”auto|de”" src="%E2%80%9Dhttp://www.google.com/images/flags/de_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Dutch”" value="”auto|nl”" src="%E2%80%9Dhttp://www.google.com/images/flags/nl_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Russian”" value="”auto|ru”" src="%E2%80%9Dhttp://www.google.com/images/flags/ru_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Bulgarian”" value="”auto|bg”" src="%E2%80%9Dhttp://www.google.com/images/flags/bg_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Polish”" value="”auto|pl”" src="%E2%80%9Dhttp://www.google.com/images/flags/pl_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Czech”" value="”auto|cs”" src="%E2%80%9Dhttp://www.google.com/images/flags/cz_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Croatian”" value="”auto|hr”" src="%E2%80%9Dhttp://www.google.com/images/flags/hr_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”French”" value="”auto|fr”" src="%E2%80%9Dhttp://www.google.com/images/flags/fr_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Italian”" value="”auto|it”" src="%E2%80%9Dhttp://www.google.com/images/flags/it_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Portuguese”" value="”auto|pt”" src="%E2%80%9Dhttp://www.google.com/images/flags/pt_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Spanish”" value="”auto|es”" src="%E2%80%9Dhttp://www.google.com/images/flags/es_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Arabic”" value="”auto|ar”" src="%E2%80%9Dhttp://www.google.com/images/flags/sa_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Japanese”" value="”auto|ja”" src="%E2%80%9Dhttp://www.google.com/images/flags/ja_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Korean”" value="”auto|ko”" src="%E2%80%9Dhttp://www.google.com/images/flags/kr_flag.gif%E2%80%9D" name="”langpair”/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Chinese" value="”auto|zh-TW”" src="%E2%80%9Dhttp://www.google.com/images/flags/tw_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Danish”" value="”auto|da”" src="%E2%80%9Dhttp://www.google.com/images/flags/dk_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Finnish”" value="”auto|fi”" src="%E2%80%9Dhttp://www.google.com/images/flags/fi_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Norwegian”" value="”auto|no”" src="%E2%80%9Dhttp://www.google.com/images/flags/no_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Swedish”" value="”auto|sv”" src="%E2%80%9Dhttp://www.google.com/images/flags/se_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Catalan”" value="”auto|ca”" src="%E2%80%9Dhttp://www.google.com/images/flags/cl_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Filipino”" value="”auto|tl”" src="%E2%80%9Dhttp://www.google.com/images/flags/ph_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Hebrew”" value="”auto|iw”" src="%E2%80%9Dhttp://www.google.com/images/flags/il_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Indonesian”" value="”auto|id”" src="%E2%80%9Dhttp://www.google.com/images/flags/id_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Latvian”" value="”auto|lv”" src="%E2%80%9Dhttp://www.google.com/images/flags/lv_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Lithuanian”" value="”auto|lt”" src="%E2%80%9Dhttp://www.google.com/images/flags/lt_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Serbian”" value="”auto|sr”" src="%E2%80%9Dhttp://www.google.com/images/flags/rs_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Slovak”" value="”auto|sk”" src="%E2%80%9Dhttp://www.google.com/images/flags/sk_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Slovenian”" value="”auto|sl”" src="%E2%80%9Dhttp://www.google.com/images/flags/si_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Ukrainian”" value="”auto|uk”" src="%E2%80%9Dhttp://www.google.com/images/flags/ua_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><input onclick="”this.form.langpair.value=this.value”" title="”Vietnamese”" value="”auto|vi”" src="%E2%80%9Dhttp://www.google.com/images/flags/vn_flag.gif%E2%80%9D" name="”langpair2″/" height="”20″" type="”image”" width="”30″"><span style="”float:right;margin:3px"><a href="http://www.blogger.com/%E2%80%9Dhttp://blogtrikdantips.blogspot.com/%E2%80%9D">+Dapatkan Widget Ini</a></span></form><!--–google flag translator by blogtrikdantips.blogspot.com–--><!--!–google--><!--!–google--></div>

5. Simpan gadjet anda

Demikian Cara Membuat Google Translate dengan Bendera pada blog anda. Sobat dapat menghapus beberapa bendera dengan cara mengedit kode diatas. Semoga artikel ini dapat bermanfaat. Salam Blogging

Cara Membuat Efek Kembang Api di Blog


 kali ini kita akan membuat animasi yang manarik dan juga bisa menjadi inspirasi buat teman-teman blogger lainnya. Animasi yang akan kita buat yaitu efek kembang api pada blog. Jika sobat tertarik bagaimana tampilan dari animasi ini silahkan coba langkahnya dibawah ini:





1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode </body>
4. Paste kode dibawah ini diatas kode </body>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/fireworks1.js"></script>
5. Simpan template sobat dan lihat hasilnya

Jika sobat ingin membuat efek kembang api yang berbeda bisa dilihat langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:
<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>
5. Simpan gadjet sobat dan lihat hasilnya

Selamat mencoba!


Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-kembang-api-di-blog.html

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More