RSS
Twitter
Facebook
Showing posts with label Tips dan Triks. Show all posts
Animasi × Tips dan Triks
1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. Pilih HTML/Javascript
5. Masukan kode berikut ini:
<script language="javascript">6. Simpan gadjet
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>
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!!
Animasi × Tips dan Triks
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!
Google × Tips dan Triks
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="”"" 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
Animasi × Tips dan Triks
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 {5. Simpan template anda.
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;
}
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
Tips dan Triks
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 {Keterangan: Anda dapat mengganti kode berwarna biru dengan url gambar yang anda inginkan
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/AVvXsEhY3tj42XO-SJS2_GdgurFsjslktTs5_NUfnWzjnoUFyo-HFJLFCHNf-Zu2VMid3YgDW-vX3bIPgifP_s9qeNZdgGTAABUNlDMPvYgn186y-nVMOSbFbBh2oLEJQX6FnkEuDP5dkPBa5GdT/') 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;
}
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">Demikian tutorial dari Blog Trik dan Tips, semoga bermanfaat!
<!-- Letakkan kode anda disini -->
</div>
Tag - Label × Tips dan Triks
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'>5. Lalu ganti kode diatas dengan kode berikut ini:
<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>
<b:loop values='data:labels' var='label'>6. Simpan template anda
<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>
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.
Komentar × Tips dan Triks
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....
Tips dan Triks
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
Tips dan Triks
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">5. Simpan Template anda lalu lihat hasilnya
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>
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....
Tips dan Triks
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>4. Masuk lagi ke Rancangan --> Edit Laman
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
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("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">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/AVvXsEjNHp4sWwYb8KqHq3JlEt1lH5I8suh8BGz7fLxhkE0FUwPTYb7B6gtCYvaBdhsyNngIXPpjb5IrXJdXnGmh1WzoUXCfpDO2CbPQCRkIIdL6EuMcUv_Wd_Z2-VVnJTAE6vvvODZviJNi0685/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/AVvXsEjNHp4sWwYb8KqHq3JlEt1lH5I8suh8BGz7fLxhkE0FUwPTYb7B6gtCYvaBdhsyNngIXPpjb5IrXJdXnGmh1WzoUXCfpDO2CbPQCRkIIdL6EuMcUv_Wd_Z2-VVnJTAE6vvvODZviJNi0685/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
Tips dan Triks
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()'>5. Ganti kode berwarna biru dengan url gambar loading page yang anda suka
<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&&!document.all;
var ie4=document.all;
if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init() {
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
6. Simpan template anda lalu lihat hasilnya
Tips dan Triks
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]>6. Simpan template anda
<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]-->
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
Tips dan Triks
Blogger mengambil tindakan yang serius apabila terjadi pelanggaran atau penyalahgunaan terhadap Ketentuan Layanannya. Blogger dapat menghapus konten atau memberikan peringatan terhadap konten yang bersifat berbahaya dan menggangu banyak orang seperti konten yang berisikan kebencian terhadap sebuah grup, kontent yang berisi gambar pornografi dan dewasa, promosi tentang aktifitas ilegal yang berbahaya, konten yang mendukung phising dan akun hacking serta konten yang meniru identitas orang lain.Blogger menghargai setiap kontent yang bersifat personal. Fungsi Blogger hanya sebagai penyedia layanan untuk membuat blog anda bukan mediator dari konten anda. Blogger juga memberikan anda kesempatan untuk berekspresi walaupun konten anda kurang menarik atau mengandung pandangan tertentu. Namun konten tersebut dapat dihapus apabila anda mendapat surat gugatan dari pengadilan. Konten tersebut dapat berkaitan dengan: penyerangan terhadap individu tertentu, menggunakan gambar dan bahasa yang tidak menyenangkan dan membuat komentar politik dan sosial yang tidak bijak.
Ketika konten blog anda dihapus, penulis atau admin akan diperingatkan lewat surat email atau pesan pada Dashboard blogger. Pengunjung yang mengunjungi konten tersebut akan memperoleh pesan yang menyatakan konten tersebut telah dihapus. Jika anda telah membaca Ketentuan Layanan Blogger dan menemukan konten yang telah meyalahi atau melanggar ketentuan tersebut silahkan hubungi blogger atau klik disini untuk melapor pelanggaran atau penyalahgunaan.
Tips dan Triks
Pernahkan anda pernah membuat posting lalu muncul verifikasi kata (word verification) pada posting form? Hal tersebut secara umum merupakan mekanisme dari Blogger Blogspot untuk mengurangi spam pada blog. Ada 2 hal utama yang menyebabkan muculnya verifikasi kata tersebut yaitu:1. Kecenderungan terjadinya Spam, 2. Jumlah Posting yang Terlalu Banyak.Pada kasus spam, verifikasi kata diterapkan untuk mencegah kecenderungan terjadinya spam pada blog melalui sistem yang otomatis. Sistem yang otomatis ini terkadang menimbulkan kesalahan, sehingga pengembang blogger secara berkelanjutan mencoba untuk memperbaiki algoritma untuk menghindari kejadian seperti ini. Biasanya kata tersebut bisa saja muncul pada blog anda bukan karena blog anda akan dihapus melainkan ada mungkin telah menyalahi aturan yang diterapkan oleh blogger. Untuk mengatasi verifikasi kata anda dapat menklik simbol tanya tanya seperti ini "?" diatas kata verifikasi. Anda akan diarahkan ke halaman dimana blog anda akan ditinjau seseorang untuk memastikan itu bukan spam.
Kasus kedua terjadi biasanya karena anda membuat posting yang sangat banyak dalam sehari, sehingga untuk setiap posting selanjutnya yang anda terbitkan harus memasukan kata verifikasi. Jika hal tersebut terjadi pada anda maka anda harus mengisi verifikasi kata untuk setiap posting yang anda buat atau anda harus menunggu setelah 24 jam agar verifikasi kata tidak lagi muncul.
Tips dan Triks
Moderasi komentar pada blog anda akan memberikan anda kontrol terhadap pesan yang ditinggalkan orang pada blog anda. Untuk mencari moderasi komentar pada blogger masuk pada Setelan --> klik Komentar, dan moderasi komentar terletak dibagian bawah halaman. Pada pengaturan moderasi komentar anda dapat menentukan apakah anda ingin moderasi komentar anda selalu, hanya pada entri, atau tidak pernah. Jika anda memilih selalu atau hanya pada entri maka anda akan diberikan pilihan untuk memasukan alamat email dimana anda akan menerima notifikasi berupa email tentang komentar masuk yang membutuhkan persetujuan anda untuk ditampilkan di blog. Jika anda memilih hanya pada entri maka anda akan diberikan pilihan untuk menentukan berapa berapa hari posting terbaru yang membutuhkan moderasi.
Jika sobat memilih moderasi komentar maka komentar yang masuk dapat dilihat pada tab Komentar --> Menunggu Moderasi. Pada halaman ini anda akan melihat komentar yang masuk tetapi belum disetujui untuk ditayangkan pada posting blog anda. Sedangkan untuk komentar admin tidak perlu untuk menunggu moderasi karena secara otomatis langsung ditayangkan.
Pada komentar yang Menunggu Moderasi anda dapat melihat pesan komentar, nama penulis, serta tanggal komentar tersebut dibuat. Anda dapat menghapus komentar tersebut atau memilihnya sebagai spam. Anda juga dapat langsung menseleksi beberapa komentar untuk diterbitkan atau ditolak. Jika sebelumnya anda memasukan email pada moderasi komentar maka anda dapat mengatur komentar langsung dari email untuk disetujui atau ditolak. Untuk komentar yang telah dihapus tidak dapat direcover sedangkan untuk komentar yang telah anda publish masih bisa dihilangkan.
Jika sobat memilih moderasi komentar maka komentar yang masuk dapat dilihat pada tab Komentar --> Menunggu Moderasi. Pada halaman ini anda akan melihat komentar yang masuk tetapi belum disetujui untuk ditayangkan pada posting blog anda. Sedangkan untuk komentar admin tidak perlu untuk menunggu moderasi karena secara otomatis langsung ditayangkan.
Pada komentar yang Menunggu Moderasi anda dapat melihat pesan komentar, nama penulis, serta tanggal komentar tersebut dibuat. Anda dapat menghapus komentar tersebut atau memilihnya sebagai spam. Anda juga dapat langsung menseleksi beberapa komentar untuk diterbitkan atau ditolak. Jika sebelumnya anda memasukan email pada moderasi komentar maka anda dapat mengatur komentar langsung dari email untuk disetujui atau ditolak. Untuk komentar yang telah dihapus tidak dapat direcover sedangkan untuk komentar yang telah anda publish masih bisa dihilangkan.
Tips dan Triks
Anda tau tidak apa fungsi dari word verification atau verifikasi kata pada blogger? Kata verifikasi dapat ditemukan pada halaman atau bagian Setelan --> Komentar pada blog anda. Jika anda memilih kata yes untuk settingan word verification, maka setiap orang yang meninggalkan komentar pada blog anda harus mengisi langkah-langkah untuk verifikasi kata seperti sama halnya ketika anda pertama kali membuat blog.Word verification berfungsi untuk mencegah sistem komentar otomatis saat mengomentari komentar anda pada blog, dimana kata verifikasi ini membutuhkan seseorang untuk membaca kata-kata yang ditampilkan untuk menlanjutkan ke langkah selanjutnya. Jika anda pernah melihat komentar yang bentuknya seperti iklan atau link yang acak untuk mengajak anda kesebuah situs, maka itu adalah komentar berupa spam.
Biasanya komentar spam ini dibuat oleh software secara otomatis, namun komentar spam tersebut tidak dapat memasuki komentar yang mengharuskan verifikasi kata. Jadi jika sobat ingin mencegah komentar spam yang masuk ke blog anda maka anda harus mengaktifkan kata verifikasi pada blog. Semoga bermanfaat...
Tips dan Triks
Popular post atau posting populer adalah artikel yang paling sering atau banyak mendapat komentar dari pengunjung. Sebelumnya saya pernah menulis artikel mengenai cara membuat populer post dengan thumbnail. Populer post dengan thumbnail atau gambar dapat anda buat dengan menggunakan gadjet blogger yang telah tersedia. Namun kali ini saya akan membuat posting populer tanpa thumbnail, posting populer ini akan menampilkan daftar post atau list posting berdasarkan judul artikel. Selain judul populer post yang ditampilkan, juga akan memuat jumlah komentar dari pengunjung. Caranya membuatnya mudah saja, langsung kita praktekan:
1. Login ke blogger
2. Masuk ke Rancangan --> Edit Halaman
3. Tambahkaan Gadjet
4. Pilih HTML/Javascript
5. Masukan kode dibawah ini:
- Kode berwarna biru adalah jumlah artikel yang ingin ditayangkan
- Kode berwarna merah adalah url blog
6. Ganti kode berwarna merah dengan url blog anda
7. Simpan gadjet anda
Sekian dulu tutorial singkat dari saya. Semoga dengan tampilan populer post di blog anda akan memberikan nuasa yang lebih baru lagi. Terima kasih telah menyimak artikel diatas. Selamat mencoba!
1. Login ke blogger2. Masuk ke Rancangan --> Edit Halaman
3. Tambahkaan Gadjet
4. Pilih HTML/Javascript
5. Masukan kode dibawah ini:
<!-- Popular posts by www.blogtrikdantips.blogspot.com -->Keterangan:
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://blogtrikdantips.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Popular posts by www.blogtrikdantips.blogspot.com -->
- Kode berwarna biru adalah jumlah artikel yang ingin ditayangkan
- Kode berwarna merah adalah url blog
6. Ganti kode berwarna merah dengan url blog anda
7. Simpan gadjet anda
Sekian dulu tutorial singkat dari saya. Semoga dengan tampilan populer post di blog anda akan memberikan nuasa yang lebih baru lagi. Terima kasih telah menyimak artikel diatas. Selamat mencoba!
Tips dan Triks
Anda berbagai modifikasi form email subscriber yang anda bisa lihat contohnya pada berbagai blog atau situs. Form email subcriber ini fungsinya untuk memberikan ruang kepada pengunjung untuk mengsubscribe artikel. Biasanya bentuk atau ukuran form email subscriber disesuaikan dengan ukuran tempat penempatannya di blog anda.
Jika anda ingin membuat form email subscriber coba daftarkan diri anda dulu di www.feedburner.com terlebih dahulu. Karena untuk memodifikasi tampilan form email subscriber seperti pada Blog Trik dan Tips anda harus memiliki url email subscribe (id feedburner) dari feedburner. Jika anda sudah membuat url feedburner maka kita langsung saja memodifikasi tampilan subscribe formnya.
1. Login ke blogger
2. Masuk ke Rancangan --> Edit HML
3. Tambahkan Gadjet
4. Pilih HTML/Javascript
5. Masukan script di bawah ini pada gadjet anda
Keterangan: kode warna biru adalah ukuran form atau kotak email subscriber, sedangkan kode berwarna hijau adalah url gambar.
6. Ganti kode berwarna merah dengan id feedburner anda.
7. Simpan gadjet anda lalu lihat hasilnya.
Mudah sajakan untuk membuatnya yang penting anda telah mendaftar di feedburner untuk mendapatkan id feedburner. Jika anda merasa sulit untuk membuatnya, anda bisa memasang email subsciber dari gadjet blogger. Semakin banyak yang mengsubscribe posting anda maka akan semakin banyak trafik pengunjung pada blog anda juga. Selamat mencobanya!
Jika anda ingin membuat form email subscriber coba daftarkan diri anda dulu di www.feedburner.com terlebih dahulu. Karena untuk memodifikasi tampilan form email subscriber seperti pada Blog Trik dan Tips anda harus memiliki url email subscribe (id feedburner) dari feedburner. Jika anda sudah membuat url feedburner maka kita langsung saja memodifikasi tampilan subscribe formnya.1. Login ke blogger
2. Masuk ke Rancangan --> Edit HML
3. Tambahkan Gadjet
4. Pilih HTML/Javascript
5. Masukan script di bawah ini pada gadjet anda
<!-- Subscribe Form by www.blogtrikdantips.blogspot.com -->
<style>
.form{border:0px solid #d8d8d8;background:#fff padding:3px;width:300px;height:180px;-moz-border-radius:6px;-webkit-border-radius: 6px;}.rss{background:url("http://2.bp.blogspot.com/-tpQOSrmZgSE/T3JkLuykXGI/AAAAAAAACtA/d5hp4h_T_M4/s320/Rss-Feed-Buttons-47-20-.png") no-repeat center right;padding:1px;}.button{background:#9b9b9b;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:1px solid #fff;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:5px;-webkit-border-radius: 5px;}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips"><img src="http://feedburner.google.com/fb/lib/images/icons/feed-icon-16x16-gray.gif" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips">Dapatkan Update Artikel Terbaru Blog Trik dan Tips</a></div>
<div style="padding-left:10px">Jika anda suka dengan artikel yang ada di blog ini, silahkan untuk berlangganan artikel blog ini via email <b>gratis</b>. </div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == "") {this.value = "Ketikkan email anda disini";}" onfocus="if (this.value == "Ketikkan email anda disini") {this.value = ""}" type="text" value="Ketikkan email anda disini" /> <input type="hidden" value="blogtrikdantips" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Daftar" /></div></form>
</div></div>
<!-- Subscribe Form by www.blogtrikdantips.blogspot.com -->
6. Ganti kode berwarna merah dengan id feedburner anda.
7. Simpan gadjet anda lalu lihat hasilnya.
Mudah sajakan untuk membuatnya yang penting anda telah mendaftar di feedburner untuk mendapatkan id feedburner. Jika anda merasa sulit untuk membuatnya, anda bisa memasang email subsciber dari gadjet blogger. Semakin banyak yang mengsubscribe posting anda maka akan semakin banyak trafik pengunjung pada blog anda juga. Selamat mencobanya!
Tips dan Triks
Hai bloggers bagaimana kabarnya? Kebetulan saya memposting artikel ini berawal dari pertanyaan sobat bloggers tentang bagaimana mengatur jumlah posting pada home page atau beranda. Ya mungkin bagi sobat bloggers yang sudah mahir pasti sudah tau trik dan tipsnya. Tapi saya akan membahas ini karena blog trik dan tips ingin berbagi dan membantu teman-teman bloggers yang mengalami kesulitan dalam membuat blog. Oke kita langsung saja ikuti langkah-langkahnya.1. Sobat login ke blogger
2. Setelah masuk dashboard sobat klik tombol Setelan
3. Klik link format di bawahnya
4. Dibawahnya link format terdapat teks "tampilkan sebanyak mungkin" ini artinya berapa banyak posting yang sobat ingin tampilkan pada home page. Misalnya 7 posting, maka masukan angka 7.5. Selanjutnya dibagian paling bawah halaman klik tombol Simpan Setelan
Coba sobat lihat dihalaman blog, akan muncul 7 posting terbaru yang telah diterbitkan sobat sebelumnya. Nah bagaimana mudah saja kan. oh ya pada gambar diatas saya masih menggunakan antarbuka blogger yang lama karena lebih cepat loading pagenya....he3. Semoga dengan posting ini dapat membantu sobat bloggers yang masih newbie. Terima kasih atas kunjungan dan komentarnya....salam saya
Internet × Tips dan Triks
Mozilla Firefox 11.0 kini sudah dilengkapi dengan fitur terbaru untuk memudahkan para bloggers dalam mengidentifikasi elemen-eleman dari tampilan blog. Saya pun sudah mencobanya dan hasilnya sangat membantu saya dalam mengedit template dan mengenal script atau kode-kode tertentu pada template blog. Fitur ini disebut “Inspect Elemen”.
Jika sobat ingin tau tentang fitur ini langsung saja download Mozilla Firefox 11.0 dari situs resminya, gratis. Inspect Elemen dapat digunakan untuk keperluan mengispeksi atau mengetahui bagian-bagian dari template anda. Misalnya header, content wrapper, sidebar, footer dan lain sebagainya. Anda juga dapat memanfaatkan fitur ini untuk menginspeksi eleman-eleman yang anda belum ketahui dari blog lain. Untuk mengaktifkan fitur ini sobat tinggal arahkan elemen mana yang ingin diinspeksi, lalu klik kanan mouse, kemudian pilih “Inspect Elemen (Q)”.
Ada 2 sub fitur pada Inspect Elemen yaitu HTML dan Style. Kedua sub fitur ini memiliki tombol yang letaknya berdampingan dan masing-masing menampilkan fungsi yang berbeda. Ketika anda menginspeksi elemen header, lalu menekan tombol Style maka yang ditampilkan adalah style header tersebut, contohnya seperti font style, font size, padding, dan lain-lain. Sedangkan tombol HTML akan menampilkan susunan kode html yang anda inspeksi.
Sekian dulu sedikit tutorial dari saya untuk menambah pengetahuan dan wawasan anda. Semoga posting ini dapat bermanfaat bagi anda dalam membantu mengedit template atau mengenal elemen-elemen pada blog anda. Sampai jumpa di Blog Trik dan Tips selanjutnya……
Jika sobat ingin tau tentang fitur ini langsung saja download Mozilla Firefox 11.0 dari situs resminya, gratis. Inspect Elemen dapat digunakan untuk keperluan mengispeksi atau mengetahui bagian-bagian dari template anda. Misalnya header, content wrapper, sidebar, footer dan lain sebagainya. Anda juga dapat memanfaatkan fitur ini untuk menginspeksi eleman-eleman yang anda belum ketahui dari blog lain. Untuk mengaktifkan fitur ini sobat tinggal arahkan elemen mana yang ingin diinspeksi, lalu klik kanan mouse, kemudian pilih “Inspect Elemen (Q)”.
Ada 2 sub fitur pada Inspect Elemen yaitu HTML dan Style. Kedua sub fitur ini memiliki tombol yang letaknya berdampingan dan masing-masing menampilkan fungsi yang berbeda. Ketika anda menginspeksi elemen header, lalu menekan tombol Style maka yang ditampilkan adalah style header tersebut, contohnya seperti font style, font size, padding, dan lain-lain. Sedangkan tombol HTML akan menampilkan susunan kode html yang anda inspeksi.Sekian dulu sedikit tutorial dari saya untuk menambah pengetahuan dan wawasan anda. Semoga posting ini dapat bermanfaat bagi anda dalam membantu mengedit template atau mengenal elemen-elemen pada blog anda. Sampai jumpa di Blog Trik dan Tips selanjutnya……