Minggu, 15 Juli 2012

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

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

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!

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.

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....!

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...


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.


Terimakasih sudah berkunjung, silahkah tinggalkan komentar anda, tapi sebelum berkomentar silahkan baca dulu peraturannya :

1. Berkomentarlah menggunakan bahasa yang sopan

2. Dilarang mencantumkan komentar yang berisi SARA atau bersifat provokatif

3. Dilarang mencantumkan LINK di dalam isi komentar kecuali di halaman "Tukar Link"

4. Jangan meninggalkan komentar SPAMM,

5. Berkomentarlah sesuai tema artikel

6. Akun anonymous hanya untuk anda yang belum punya
blog,

7.Jika anda melanggar peraturan diatas, maka dengan
terpaksa saya akan langsung menghapus komentar anda.

Terimakasih.

Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Web Hosting Bluehost