Cara Membuat Efek Banjir di Blog

Halo Sobat blogger kembali lagi bersama Blog Trik dan Tips. Sobat sudah pernah belum ngalamin rasanya banjir ditempat sobat tinggal. Banjir pasti sangat menggangu aktivitas yang sobat ingin lakukan. Namun kali ini, blog trik dan tips akan membahas cara membuat efek banjir di blog. Ingin tau caranya, langsung saja ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. Pilih HTML/Javascript 
5. Masukan kode berikut ini:

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>

6. Simpan gadjet

Sekarang sobat sudah bisa melihat hasilnya. Efek ini akan membuat blog anda tenggelam akibat banjir. Akan muncul ikan dan gelembung udara di screen blog anda. Menarik bukan? Selamat mancobanya!!

Cara Membuat Bayi Merangkak di Blog

Selamat malam sobat blogger, bagaimana kabar anda? Kali ini Blog Trik dan Tips akan memberikan tutorial cara membuat efek bayi merangkak di blog. Efek ini sudah cukup menarik namun juga cukup menggangu karena si bayi akan menyoret screen blog anda. Dari pada basa basi mari langsung aja kita praktekan. Berikut ini adalah langkahnya:

1. Login ke blogger
2. Masuk ke Tata Letak/Rancangan
3. Tambah gadjet blog
4. Pilih HTML/Javascript
5. Kopi kode dibawah ini lalu paste pada gadjet:

<script language="javascript"> nd_mode="baby"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efekbayiberjalan.js"></script>

6. Simpan gadjet 

Jika sobat udah mengikuti langkah diatas, sekarang dilihat aja hasilnya diblog. Semoga informasi ini bermanfaat. Selamat mencoba!

Cara Membuat Google Translate dengan Menggunakan Bendera

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

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 Menampilkan Kode Script pada Posting

Jika sobat mempunyai blog yang bertemakan tutorial blog, atau blog trik maka yang pasti anda sering menggunakan kode script HTML, CSS, dll. Ada cara yang mudah untuk menayangkan kode tersebut pada blog agar mudah dilihat namun tetap terlihat cantik dan stylis. Jika sobat ingin tau cara kerjanya maka ikuti langkah berikut ini:

1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode ]]></b:skin>
3. Paste kode dibawah ini diatas kode tadi:

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
line-height:1.6;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYIMsBBab5paddwaWTEfaKYszNlp6mLy28c45z4WtV7tpuPyDBngIECVQ6wVE2CqbV44vX457IJHTuwoWyWvNsupEVhjB6YrFZSTC624qM1p7GDw-piAChFwtbnta3PaxlJrHrnglFVTG/') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}

Keterangan: Anda dapat mengganti kode berwarna biru dengan url gambar yang anda inginkan

4. Simpan template anda

Untuk cara kerjanya, jika sobat menulis Script Kode pada posting maka masuk ke tab Edit HTML, lalu sisipan kode yang ingin ditayangkan (kode warna merah) pada div class seperti dibawah ini:

<div class="codeview">
<!-- Letakkan kode anda disini -->
</div>

Demikian tutorial dari Blog Trik dan Tips, semoga bermanfaat!

Membuat Label Blog Sebagai Link RSS Feed Untuk Tiap Kategori

Jika anda memiliki banyak konten yang berbeda berdasarkan kategori maka sebaiknya anda menggunakan trik berikut ini agar pengunjung dengan mudah dapat mengsubscribe konten berdasarkan kategori yang mereka inginkan. Jadi pengunjung tidak perlu mensubscribe semua posting anda, hanya artikel tertentu berdasarkan kategori. Kali ini kita akan membuat tombol rss feed sebagai label untuk kategori pada blog anda. Untuk itu ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan --> Edit HTML
3. Centang Expand Template Widget
4. Carilah kode seperti berikut ini:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>

5. Lalu ganti kode diatas dengan kode berikut ini:

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'>
<img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0' />
</a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>

6. Simpan template anda

Lalu sobat coba lihat label widget anda. Anda akan mendapat label dengan link rss subscribe. Jika sobat ingin mengganti gambar subscibe diatas cukup mengubah kode berwarna biru dengan url gambar yang anda inginkan.

Membuat Komentar Terbaru dengan Gambar

Halo sobat blog trik dan tips, 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 Membuat Random Post Versi News Headline Animasi

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

Cara Mencegah Kopi Paste Artikel pada Blog

Jika artikel anda sering menjadi sasaran kopi paste maka tidak ada salahnya anda menerapkan trik yang satu ini. Kali ini kita akan membuat script anti kopi paste pada blog, dimana tombol mouse sebelah kanan yang biasanya digunakan untuk mengkopi artikel akan dinonaktifkan (disable). Biasanya script ini diterapkan pada artikel tulisan yang orisinal atau hasil penelitian sendiri. Namun sebaiknya jika blog yang anda buat yaitu mengenai tutorial blogging maka jangan menggunakan script berikut ini. Untuk memasangnya sangat mudah sekali, langsung ikuti saja langkah dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode </head>
4. Letakkan kode berikut ini dibawah kode </head>

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

5. Simpan Template anda lalu lihat hasilnya

Jika seseorang ingin mengkopi artikel anda maka ia tidak bisa melakukannya apabila anda telah menginstal script diatas. Jika anda berkunjung ke blog yang menginstal script diatas dan anda membutuhkan artikelnya maka sebaiknya anda menyimpan halaman blognya dengan mengsave halaman tersebut atau klik CTRL+S. Sekian dan salam blogging....

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/AVvXsEjDDx9nZy2MqVlbgne4tmJj5ymx1CZNV5AZjJT_VNvyr6ryQ47XWEDJBzoWXARXGoQXMOS-cdAqLAOb_m59v2jSsy-bV8Ubt8W9E5_B-eTrR-1wX35bedMTw7124uwjBKqDkTE_IExCf0Wm/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/AVvXsEjDDx9nZy2MqVlbgne4tmJj5ymx1CZNV5AZjJT_VNvyr6ryQ47XWEDJBzoWXARXGoQXMOS-cdAqLAOb_m59v2jSsy-bV8Ubt8W9E5_B-eTrR-1wX35bedMTw7124uwjBKqDkTE_IExCf0Wm/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 Page / 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

Mempercepat Loading Blog dengan Chrome Frames

Jika anda memiliki masalah dengan loading blog maka masalah tersebut akan mengurangi pengunjung blog anda. Untuk itu anda perlu mencari solusi untuk mempercepat waktu loading blog. Jika anda pengguna browser internet explorer maka anda dapat mempercepat loading blog dengan menggunakan Chrome Frames. Chrome Frames adalah plug-in open source yang menyajikan kecepatan Chrome dan teknologi website dari internet explorer. Plugin yang satu ini akan mempercepat loading dari aplikasi dan javascript pada blog anda. Untuk mendownload plugin ini maka klik disini. Apabila anda ingin menginstal plugin ini pada blog anda maka ikuti langkah dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode <head>

<meta http-equiv='X-UA-Compatible' content='chrome=1'/>

4. Sekarang carilah kode </head>
5. Paste kode dibawah ini dibawah kode </head>

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style type='text/css'>
.chromeFrameOverlayContent{top:10px;margin-top:10px;}
</style>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "overlay"
});
});
</script>
<![endif]-->

6. Simpan template anda

Jika anda menggunakan internet explorer cobalah berkunjung ke blog anda maka akan muncul pop up untuk menginstal Chrome Frames. Jika anda sudah menginstalnya maka anda akan lebih mudah menjelajahi blog karena loading time blog anda menjadi lebih cepat