Mengatur Jumlah Tampilan Posting di Home Page

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

Read more »

Membuat Link Sumber Muncul pada Artikel Kopi Paste

Sobat bloggers bagaimana kabarnya? Senang sekali bisa berjumpa pada tutorial Blog Trik dan Tips “tak ada blog kalau tak ada triks”. Sobat bloggers tau tidak jika anda mengkopi artikel saya di setiap posting maka akan muncul sumber artikel dari blog saya. Jika anda ingin tau triknya maka saya akan berikan langkahnya. Caranya sangat mudah sekali, cuma membutuhkan waktu sebentar saja. Oke langsung aja kita ke TKP sambil minum kopi…..he3

1. Kunjungi situs https://id.tynt.com/
2. Kemudian anda Daftar dulu atau Sign Up untuk membuat akun, Isi domain (url blog), email dan password. (jangan lupa untuk melakukan konfirmasi di email anda)
3. Klik next untuk masuk ke pengaturan script
4. Klik tombol Customize Attribution, lalu atur yang ingin ditampilkan jika seseorang mengkopi artikel anda, misalnya anda ingin menampilkan link blog maka pilih url saja, atau anda ingin menampilkan judul blog maka pilih page title.
5. Setelah selesai pengaturannya klik save dan anda akan diberikan script untuk diletakan di template blog anda. Kopilah script tersebut.
6. Kemudian masuk ke blogger, klik Rancangan --> Edit HTML
7. Lalu letakan script tersebut diatas kode </head>
8. Simpan template anda lalu lihat hasilnya.

Cobalah kopi artikel atau teks pada blog anda. Maka akan muncul sumber artikel berupa link atau judul posting dari blog anda (tergantung pengaturan anda tadi). Jika anda ingin informasi tentang jumlah artikel dan artikel apa saja yang dikopi paste, langsung saja login ke situs yang tadi kita kunjungi menggunakan akun yang telah anda daftar. Sekian dari saya, semoga bermanfaat dan selamat mencoba

Read more »

Cara Memodifikasi Form (Kotak) Email Subscriber

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

<!-- 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 == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}" onfocus="if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;}" 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 -->

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!

Read more »

Cara Membuat Google Plus Button

Mungkin nama Google Plus sudah tidak asing lagi di telinga anda. Ya Google Plus merupakan situs jejaring sosial yang saat ini sedang bersaing dengan facebook dan twitter. Jika anda memiliki Google Plus Page maka anda dapat membuat Google Plus Button di blog untuk mempromosikan blog anda serta berbagi informasi kepada teman-teman anda. Untuk itu saya langsung saja memberikan tutorial bagaimana memperoleh Google Plus Button. Ikuti langkah berikut ini:

1. Masuk ke Google Plusone Button
2. Pilihlah size (ukuran), anotasi dan bahasa yang anda inginkan
3. Setelah itu klik link Advance Option

4. Masukan URL to +1 dengan url blog anda, lalu klik enter
5. Lalu kopi kode dibawahnya
6. Sekarang anda hanya perlu meletakkan kode tersebut di sidebar atau diposting blog

Tutorial ini sangat mudah dan singkat saja. Dengan memasang tombol Google Plus One maka kemungkinan akan semakin banyak pengunjung yang mencircle page anda. Mudah2an informasi yang saya sampaikan dapat membantu anda. Terima kasih atas kesediaannya membaca artikel ini.

Read more »

Membuat News Sticker dengan Jquery

News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide. Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut. Kita akan menggunakan script jquery untuk membuatnya news sticker ini. Ingin tau caranya ikuti tutorial berikut ini:

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

/* News Sticker by www.blogtrikdantips.blogspot.com

---------------------------------------------*/

.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}

.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}

.news a:link, .news a:visited{color:#000;text-decoration:none;}

.news a:hover {color:#0099cc;text-decoration:underline;}

5. Selanjutnya letakkan kode berikut ini di atas kode </head>

<!-- News sticker by www.blogtrikdantips.blogspot.com -->

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>

<script type='text/javascript'>

//<![CDATA[

var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};

//]]>

</script>

<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/

text-decoration: none;}

.labelfield{ /*CSS for label field in general*/

color:#0099cc;font-size: 100%;}

.datefield{ /*CSS for date field in general*/

color:#aaa;font:normal 12px courier;text-transform:none;}

#example1{ /*Demo 1 main container*/

width: 960px;

height: 13px;

border: 0px solid #cdcdcd;

padding: 0px;

font:bold 13px courier;

text-transform:none;

text-align:left;

background-color:transparent;}

code{ /*CSS for insructions*/

color: #0099CC;}

#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}

#example1 a:hover {color:#111;text-decoration:none;}

</style>

6. Kemudian kita akan meletakkan news sticker tersebut diatas posting dan sidebar seperti posisi news sticker milik saya, caranya yaitu cari kode <div id='outer-wrapper'>

7. Setelah itu paste kode berikut diatas kode <div id='outer-wrapper'>

<div style='clear:both;'/>

<div class='newspic'>

<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://blogtrikdantips.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed

cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields

cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag

cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

<div style='clear:both;'/>

</div>

8. Ganti kode berwarna merah dengan url blog anda

9. Simpan template anda dan lihat hasilnya

Demikian cara membuat news sticker di blogger. Semoga dengan tampilan news sticker halaman anda semakin senang dibaca oleh pengunjung. Selamat mencobanya....!

Read more »

Membuat Recent Post Berdasarkan Label dengan Menggunakan Feeds

Sobat bloggers, feeds memang punya banyak kegunaan dalam hal blogging misalnya kita bisa membuat recent post, random post dan popular post hanya dengan menggunakan feeds. Feeds juga digunakan untuk berbagi posting atau artikel kita ke situs lain. Tapi apakah sobat tau kalau feeds bisa kita gunakan untuk membuat recent post berdasarkan label. Yang saya maksud disini adalah setiap posting sobat yang terbaru akan dimunculkan berdasarkan kategori atau label. Untuk membuat recent post atau posting terbaru dengan label kita akan menggunakan widget (gadjet) feeds pada blogger. Trik ini sangat mudah saja, untuk itu langsung saja kita praktekkan.

1. Login ke Blogger
2. Masuk ke Rancangan --> Elemen Halaman
3. Tambahkan Gadjet pada blog anda
4. Pilih Feeds pada daftar gadjet


5. Masukan feeds anda seperti di bawah ini:

http://blogtrikdantips.blogspot.com/feeds/posts/default/-/facebook

Keterangan: Apabila kata dalam kategori anda terdapat spasi, misalnya blog trik maka gunakan kode %20, hasilnya bisa seperti dibawah ini:

http://blogtrikdantips.blogspot.com/feeds/posts/default/-/blog%20trik

6. Gantilah url blog saya dengan url blog anda (kode berwarna hijau)

7. Kemudian klik Lanjutkan, maka akan muncul posting terbaru anda berdasarkan label

8. Atur jumlah posting yang ingin ditampilkan lalu klik simpan

Mudah saja kan caranya? Anda dapat memanfaatkan fasilitas (gadjet) pada blogger untuk membuat posting terbaru berdasarkan label. Sekian tutorial dari saya, semoga bermanfaat ya...

Read more »

Ada cara untuk mengganti gambar default anonymous komentar pengunjung ke gambar lain yang lebih menarik. Gambar atau avatar pada komentar dapat kita ganti dengan emoticon, gambar kaskus, dan lain-lain. Kita akan menggunakan script jquery sehingga mudah saja untuk memasangnya. Gambar tersebut akan muncul ketika sesorang tanpa id (anonymous) memberikan komentar pada blog anda. Penasaran bagaimana cara membuatnya, ikuti tutorial yang berikut ini:

1. Log in ke blogger.
2. Pilih Rancangan --> Edit HTML
3. Carilah kode </body>
4. Kemudian tambahkan kode dibawah ini diatas kode </body>

<!-- Avatar Komentar by www.blogtrikdantips.blogspot.com start --><script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$("img[src='http://img1.blogblog.com/img/anon36.png']")

.attr('src', 'http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png')

.ssyby('blank')

</script><!-- Avatar Komentar by www.blogtrikdantips.blogspot.com end -->

Keterangan:

- Anda tidak perlu memasang script jquery seperti diatas apabila telah terpasang pada template anda.

- Anda dapat mengganti kode warna merah dengan url gambar yang anda inginkan

5. Simpan template anda lalu lihat hasilnya

Sekian trik dan tips dari saya. Semoga dengan penampilan avatar yang baru pada blog anda akan semakin menarik pengunjung untuk berkomentar. Semoga tutorial singkat ini bermanfaat, selamat mencoba.

Read more »

Cara Mengganti dan Menambah Style Font di Template Blogger

Hai sobat bloggers, kembali kita ketemu lagi di Blog Trik dan Tips "tak ada blog jika tak ada trik"....he3. Mungkin anda sudah tau apa itu font, font adalah jenis atau gaya tulisan. Pada blogspot (blogger), anda bisa mengganti font pada template anda, namun jumlah jenis font sangat terbatas. Beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Jenis font ini kadang tidak sesuai dengan keinginan anda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

1. Buka situs Google Web Font http://www.google.com/webfonts/#ChoosePlace:select
2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.
3. Klik tombol Use disebelah kanan bawah browser

4. Kemudian kopi kode dari Google Font (kodenya seperti ini, kode ini hanya contoh saja tidak perlu anda kopi):

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>

5. Pada template anda carilah kode seperti ini <![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*

7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'/>

8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:

9. Carilah kode #header h1 atau h2.postTitle {

10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:

Kode awal pada template yang belum dirubah

#header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Kode setelah dirubah saya

#header h1{color:#00008B;font-size:26px;font-family:'Condiment', cursive;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Begitulah caranya kita menambahkan font baru ke template, bagaimana tertarik untuk membuatnya. Silahkan dicoba aja, tapi jangan lupa ikuti langkah di atas dengan baik dan ingat untuk back up template anda. Sekian dan selamat mencoba!

Read more »

Membuat Avatar pada Komentar Anonymous di Blog

Ada cara untuk mengganti gambar default anonymous komentar pengunjung ke gambar lain yang lebih menarik. Gambar atau avatar pada komentar dapat kita ganti dengan emoticon, gambar kaskus, dan lain-lain. Kita akan menggunakan script jquery sehingga mudah saja untuk memasangnya. Gambar tersebut akan muncul ketika sesorang tanpa id (anonymous) memberikan komentar pada blog anda. Penasaran bagaimana cara membuatnya, ikuti tutorial yang berikut ini:

1. Log in ke blogger.
2. Pilih Rancangan --> Edit HTML
3. Carilah kode </body>
4. Kemudian tambahkan kode dibawah ini diatas kode </body>

<!-- Avatar Komentar by www.blogtrikdantips.blogspot.com start --><script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$("img[src='http://img1.blogblog.com/img/anon36.png']")

.attr('src', 'http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png')

.ssyby('blank')

</script><!-- Avatar Komentar by www.blogtrikdantips.blogspot.com end -->

Keterangan:

- Anda tidak perlu memasang script jquery seperti diatas apabila telah terpasang pada template anda.

- Anda dapat mengganti kode warna merah dengan url gambar yang anda inginkan

5. Simpan template anda lalu lihat hasilnya

Sekian trik dan tips dari saya. Semoga dengan penampilan avatar yang baru pada blog anda akan semakin menarik pengunjung untuk berkomentar. Semoga tutorial singkat ini bermanfaat, selamat mencoba.

Read more »

Membuat Kotak Facebook Like Melayang dengan Tombol Close

Sobat blog trik dan tips, sebelumnya saya telah mengajarkan bagaimana untuk membuat efek slide facebook page fan like di blog. Pada kesempatan ini kita akan membuat hal yang sama namun bukan dengan efek slide tetapi menggunakan efek melayang. Kotak facebook page fan like akan muncul dan melayang pada blog di posisi yang tetap. Kotak Facebook Like akan mengikuti ke bawah atau ke atas apabila halaman di scroll. Kotak ini dilengkapi dengan tombol close untuk menonaktifkan gadjet tersebut. Nah penasaran gimana tampilannya pada blog anda ikuti langkah berikut ini:

1. Log in ke Blogger
2. Masuk ke Design --> Elemen Halaman
3. Tambahkan Gadjet
4. Pilih HTML JavaScript
5. Masukan kode berikut ini dalam gadjet tersebut:

<style type="text/css">

#topbar{

position:absolute;

padding-left:-100px;

background-color: transparancy;

width: 300px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<br />

<div class="clear">

</div>

<div id="topbar">

<div style="text-align: right;">

<a href="" onclick="closebar(); return false"><img src="http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png" /></a></div>

<center>

<div style="background: #fff;">

PASTE KODE LIKE BOX DISINI

<span >Widget by: <a style=" font-weight:bold" href="http://blogtrikdantips.blogspot.com/">Indra</a></span>

</div>

</center>

</div>

6. Ganti kode yang berwarna merah dengan kode like box facebook fan milik anda, untuk membuatnya sobat dapat lihat DISINI

7. Simpan template anda lalu lihat hasilnya

Gimana mudah saja kan untuk membuatnya. Cobalah buat di blog anda, yang pasti fan page ada pada facebook akan semakin bertambah penggemarnya. Selain itu trafik blog anda akan semakin meningkat. Oke sekian dulu trik dan tips kali ini. Selamat mencoba..

Read more »

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.

Read more »

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.

Read more »

Membuat Efek Slide Facebook Fan Page Like di Blog

Sobat blog trik dan tips, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:

1. Pada blog anda masuk ke Design --> Edit HTML
2. Carilah kode </head>
3. Letakan script jquery dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4. Simpan template anda

5. Masuk ke Elemen Halaman lalu klik Tambah Gadjet

6. Pilih HTML/Javascript

7. Masukkan kode berikut ini:

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogtrikdantips&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://www.blogtrikdantips.blogspot.com">Indra</a></span></div></div>

8. Ganti tulisan berwarna merah dan nama fan page anda

9. Simpan gadjetnya

Sobat bagaimana dengan hasilnya...semoga dengan kode ini akan membuat blog anda menjadi lebih menarik dan bertambah pengunjung dan fannya...semoga bermanfaat.

Read more »

Pasang Toolbar Wibiya Untuk Mempercantik Blog Anda

Ada beragam cara untuk mempercantik atau membuat blog kita tambah keren. Misalya dengan memasang gadjet toolbar wibiya yang satu ini. Jika anda masih newbie dan ingin membuat blog anda tampil lebih indah tanpa mengotak atik script template anda, maka coba pasang toolbar wibiya. Anda bermacam-macam fitur yang ditawarkan toolbar ini seperti: chating pada blog, melihat statistik pengunjung, integrasi dengan akun facebook dan twitter, menampilkan tulisan terkini blog anda, dan lain-lain. Toolbar ini juga dilengkapi dengan tampilan personal yang anda bisa pilih sesuai dengan warna blog anda. Toolbar ini juga akan meningkatkan trafik pada blog anda. Jadi tunggu apa lagi coba pasang toolbar ini dan lihat hasilnya. Oke cara masangnya gini:

1. Buka situs http://wibiya.conduit.com/
2. Klik tombol “Get It Now”
3. Isi formulir sesuai dengan data Anda lalu kik tombol “Next”
4. Lalu pilih tema toolbar Anda pada bagian “Select A Theme”. Kemudian klik tombol “Next”
5. Pada bagian “Application Setting”, konfigurasi akun Anda kedalam toolbar tersebut, setelah itu klik tombol “Next”

6. Pada bagian “Add it”, klik logo “Blogger” atau install on blogger (pastikan anda sudah login pada blogger)
7. Lalu klik tombol “Add Widget”

Wibiya toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda. Blog anda yang pasti akan tambah keren dan meriah dengan tambahan aplikasi yang unik ini. Oke sekian tutorial dari Blog Trik dan Tips semoga bermanfaat.

Read more »

Cara Mengetahui URL Feed Twitter Anda

Selain mengupdate posting blog di twitter anda juga bisa mengupdate status twitter diblog. Biasanya twitter menyediakan widget untuk update status twitter ke blog. Anda bisa mengatur tampilan widget ini sesuai dengan keinginan. Tapi anda juga bisa membuat update status twitter muncul di blog menggunakan feed. Anda hanya perlu mengetahui url feed twitter anda untuk dimasukan ke gadjet feed pada blog anda (namun apa url feed twitter anda bisa dimasukan ke gadjet feed pada blogger) Ingin tau caranya ikuti tutorialnya di bawah ini:

Cara mengetahui ID twitter anda
1. Pertama anda perlu mengetahui ID twitter, caranya klik url ini: http://www.idfromuser.com/
2. Klik tombol Get ID untuk mengetahui ID twitter anda, akan muncul id twitter anda lalu simpan id tersebut.

Cara mengetahui Feed Twitter Anda
1. Time Line RSS Feed
Untuk time line RSS feed urlnya seperti dibawah ini. Anda hanya perlu mengganti Twitter username dengan user name twitter anda.

http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=Twitter username

misalnya punya user name punya saya jika dimasukan akan terlihat seperti ini:

http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=blogtrikdantips

2. List RSS feed

Untuk list rss feed, urlnya seperti dibawah ini. Ganti Twitter username dengan username milik anda.

http://api.twitter.com/1//lists/Twitter username/statuses.atom

3. ID RSS feed

Untuk ID rss feed anda akan memerlukan id anda seperti langkah diatas. Untuk url feednya akan terlihat seperti dibawah ini. Anda hanya perlu mengganti feed_id dengan id milik anda. (untuk feednya anda bisa mengubah rss menjadi atom atau json)

http://twitter.com/statuses/user_timeline/feed_id.rss

Anda bisa membuka url feed twitter saya pada address bar seperti punya saya http://twitter.com/statuses/user_timeline/528376417.rss. Namun sayang setelah saya coba memasukan feed dari twitter pada gadjet blogger, tak ada yang berhasil, malah yang muncul tulisan "url tidak valid". Semoga artikel ini bermanfaat....

Read more »

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

Read more »

Cara Mengganti Tulisan "Poskan Komentar" di atas Kotak Komentar

Jika anda melihat halaman posting artikel pasti anda akan mendapati tulisan "POSKAN KOMENTAR". Tulisan ini biasanya terletak diatas form komentar atau kotak komentar. Tulisan ini dapat anda ganti sesuai dengan selera anda hanya dalam hitungan detik. Jadi kalo anda baca artikel ini pasti kode yang saya kasih ini tidak akan meleset....he3 just kidding. Oke kalo begitu langsung ikuti trik di bawah ini:

1. Login pada blog
2. Masuk ke Rancangan - Edit HTML
4. Centang Expand Template Widget
5. Cari kode seperti pada gambar dibawah ini, biasanya ada tiga kode yang sama seperti ini, jadi anda hanya perlu mengganti kode yang kedua.

6. Hapus kode tersebut lalu gantikan dengan pesan yang anda ingin sampaikan. 
7. Simpan Template

Cobalah anda lihat hasilnya....Dijamin pasti berhasil....oke sekian trik dari saya. Jangan lupa berkomentar ya.....Bagaimana mudah kan? Selamat Mencoba!!!

Read more »