Cara Membuat Facebook Page dan Like Box di Blog/Website

Facebook Page/Fan Page - Like Box semakin lazim digunakan di blog/website mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Facebook Fan Page dan memasang Like Box di blog/website merupakan hal yang sangat dianjurkan untuk blog/website anda.

Cara Membuat Facebook Page/Fan Page Di Blog/Website

1. Ada beberapa langkah berbeda untuk membuat Facebook Page. Untuk langkah yang lebih mudah, sebaiknya anda telah login terlebih dahulu di account Facebook anda.

2. Kemudian buka halaman ini:  http://www.facebook.com/pages/create.php.

3. Pilih/klik opsi Brand or Product. 

 4. Pilih opsi "website" dan isikan nama Page sesuai dengan yang diinginkan. centang "agreement" dan klik "Get Started", seperti contoh gambar berikut:

5. Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Cara Membuat Dan Memasang Facebook Like Box Di Blog/Website

1. Jika anda masih berada di halaman Fcebook Fan Page tadi, pilih menu nomer 5, klik "add like box":

Atau bisa juga buka halaman berikut:http://developers.facebook.com/docs/reference/plugins/like-box/
Penting: Sebelumnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/Bukan-Rahasia-Lagi/196418780373882 
2. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:

- Facebook Page url: url Facebook Page anda

- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.

- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

- Show Faces: Centang untuk menampilkan foto profil likers.

- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

3. Jika settingan yang dibuat sudah beres, klik get code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, saya sarankan pilih HTML 5).

4. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.

5. Pilih opsi HTML/Javascript.
6. Masukkan kode yang telah dicopy ke dalam kotak kode.
7. Save.
8. Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website anda dapat dengan mudah meng-klik like pada like box yag telah disediakan.
------------------------------------------------------------------------------
 Update  bagi yg masih bingung dengan pemasangan kode dan like box tidak muncul:

Copy paste saja semua kode ke dalam HTML/Javascript. Misalnya ketika memilih HTML 5, kemudian ada dua kolom yang masing-masing berisi dua kode, jangan pisahkan pemasangan kode, pasang saja keduanya ke gadget HTML/Javascript secara berurutan, yaitu taruh kode kedua di bawah kode pertama. Kemudian save
.

Read More

Membuat dua element dibawah header

Menambah dua element dibawah header mungkin salah satu cara untuk menambah tempat untuk meletakkan gadget2 kamu,tapi terkadang template yang kita suka tidak ada 2 kolom ini,tapi kamu gak usah kawatir,ka,u bisa menambahkanya sendiri,sebelumya saya telah mempelajari tentang tuturial ini dan mempraktekkanya sendiri,hasilnya lumayan juga,tapi ada sebagian tidak memuaskan saya yakni judul elementnya tidak sesuai yang saya inginkan,makanya saya mencoba menambahkan sedikit css-nya,lihat gambar dibawah ini,ni gambar pinjaman he he..,

Itulah yang sayamaksud dengan kolomnya, pengen menambahkan pada blog kamu?ikuti langkah2 berikut!

1.Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

---

---

#box-main-container { 
clear:both; 
} 
.box-column { 
padding:0px 10px 10px 10px; 
border:1px dotted $bordercolor; 
}

---

---

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya :

---

---

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

---

---

3. Simpan template dan lihat hasilnya.

Read More

Membuat 3 kolom element dibawah header

Membuat 3 kolom element dibawah header

ok sob ni tutorial tentang bagaimana cara membuat 3 kolom element dibawah header.


1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

---

---

#box-main-container { 
clear:both; 
} 
.box-column { 
padding:0px 10px 10px 10px; 
border:1px dotted $bordercolor; 
}

---

---

2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya :

---

---

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

---

---

3. Simpan template dan lihat hasilnya, jika sukses maka akan ada 3element lagi dibawah header kamu seperti gambar dibawah ini:




selamat mencoba!

Read More

Menyembunyikan Judul Blog Pada Header

OK,buat temen2 yang ingin menyembunyikan judul blog pada headernya caranya mudah kok,ikuti langkah- langkah dibawah ini:

Login ke blogger Pada Dasbor Klik Rancangan->>Edit Html->>expand template widget Kemudian cari code yang mirip seperti di kode bawah ini di template anda:

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

-Jika sudah ketemu yang harus anda lakukan hanya menambahkan codedisplay:none; selengkapnya seperti di bawah ini:

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
display:none;
}

-Jika sudah selesai jgn lupa klik simpan template dan lihat hasilnya...

Read More

Cara Membuat Berita Berjalan Di Blog

Cara Membuat Berita Berjalan Di Blog, kadang di sebuah blog menampilkan sebuah berita berjalan, baik di footer maupun diatas header, berita berjalan tersebut bernama NewsTicker. berita berjalan atau news ticker ini mirip dengan berita yang ada pada televisi swasta di Tanah air.

Berita berjalan atau newsticker ini berisi tentang cuplikan berita pendek yang mewakili berita secara keseluruhan sehingga bisa memberikan informasi terbaru kepada pengunjung blog arbakid tentang peristiwa yang sedang terjadi saat ini dan pada akhirnya pengunjung dari blog arbakid tidak akan ketinggalan informasi terbaru.

Nah, kali ini infonetmu akan memberi informasi tentang Cara membuat berita berjalan di blog atau newsticker. caranya sangat mudah, untukmembuat berita berjalan atau newsticker diblogspot tinggal ikuti saja langkah-langkah dibawah ini :

1. Login ke blogger
2. masuk ke edit HTML dan cari kode ]]></b:skin>
3. Letakkan kode berikut tepat diatas kode ]]></b:skin>
   

   #berita {
   position:fixed;_position:absolute;bottom:0px; center:0px;
   clip:inherit;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4. Lalu cari lagi kode </body>
5. Copy dan paste kode berikut dan letakkan diatas kode </body>
   

   <div id=' berita '>
   <iframe allowtransparency='true' frameborder='0' height='17' id='NewsWindow' marginheight='0' marginwidth='0' scrolling='no' src='http://www.elshinta.com/v2003a/scrolling.htm' style='background-color: transparent;' width='1200'/>
   </div>

6. Simpan Template kamu dan lihat hasilnya.

Nah, demikian cara membuat berita berjalan di blog, sangat mudah kan..semoga bermanfaat!

Read More

Cara Membuat Recent Post Berjalan

Banyak cara untuk menampilkan recent post pada blog kita, agar blog kita tampil cantik kita bisa juga membuat recent post kita dengan recent post bergambar. selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya,sama halnya dengan artikel terkait atau related post,recent post juga bisa dengan tampilan thumbnail,nah kali ini saya akan memberi tutorial tentang cara membuat recent post Berjalan lihat gambar dibawah ini:

Sebelumnya saya juga telah posting cara membuat recent post dengan gambar,lalu bagaimana agar gambar tersebut bisa tampil dengan slide show? ikuti tutorial dibawah ini:

1. Login ke akun Blogger sobat
2. Klik Rancangan >> Elemen haLaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode berikut :
   

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
   </script>
   <style media="screen" type="text/css">
   <!--
   #spylist {
   overflow:hidden;
   margin-top:5px;
   padding:0px 0px;
   height:350px;
   }
   #spylist ul{
   width:220px;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:208px;
   padding: 5px 5px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
   border:1px solid #ddd;
   }
   #spylist li a {
   text-decoration:none;
   color:#4B545B;
   font-size:11px;
   height:18px;
   overflow:hidden;
   margin:0px 0px;
   padding:0px 0px 2px 0px;
   }
   #spylist li img {
   float:left;
   margin-right:5px;
   background:#EFEFEF;
   border:0;
   }
   .spydate{
   overflow:hidden;
   font-size:10px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:15px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }
   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:10px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }
   -->
   </style>
   <script language="JavaScript">
   imgr = new Array();
   imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
   showRandomImg = true;
   boxwidth = 255;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 70;
   thumbheight = 70;
   fntsize = 12;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 20;
   home_page = "http://infonetmu.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>
   <div id="spylist">
   <script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
   </script></div>

6. Simpan

Note :

• Url yang berwarna merah ganti dengan Url sobat
• Angka yang berwarna biru jumlah post yang ingin di tampilkan

Nah demikain cara membuat recent post berjalan pada blog, semoga bermanfaat!

Read More

Cara Membuat NewsTicker/Berita Berjalan Keren

 Cara Membuat NewsTicker/Berita Berjalan Keren. newsticker atau berita berjalan bisa kita buat agar blog kita tampil lebih keren, disamping itu berita berjalan atau newsticker bisa ditampilkan dari recent post blog kita,dan akhirnya pembacapun bisa melihat apa saja berita terbaru dari blog kita. lihat gambar dibawah ini!

Nah, sudah jelas kan yang di maksud,kalo belum jelas lihat demonya

Dari gambar diatas mungkin sudah banyak yang tahu kalo itu mirip dengan newsticker dari gaya template sporty magazine 2 dari borneo template. karena memang banyak yang suka dengan gaya tersebut maka saya akan share pada teman-teman blogger yang lain bagaimana cara membuatnya.

Untuk Membuat Newsticker/berita berjalan keren seperti mirip sporty magazine 2 ikuti langkah-langkah dibawah ini:

1. Login ke blogger/blogspot kamu.
2. Klik Rancangan atau design.
3. Klik edit HTML.
4. Beri ceck / centang pada kotak yang berada pada pojok template kamu.
   Dan jangan lupa download template kamu untuk berjaga-jaga agar jika terjadi kesalahan bisa dibackup.
5. Cari kode ]]></b:skin> dan copy paste kode berikut dan letakkan tepat diatas kode ]]></b:skin>
   

   /* News Ticker Wrapper */
   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1beuhAZdzo84Dp8fj6HQPQPmIuMerj1xz_d_HOFci3LVBMrxFqhL9qivV2nCZiedfPVa9iI4JOEJBukvUcn4Aq10qKboV3K1XFZf3kk0dnXW3EWzni4EgRHFNhLsmBMzWKCIkIjSryLc/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;}
   .news {width: 940px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
   .news a:link{color:#ff0000;font-weight: bold;text-decoration:none}
   .news a:visited{color:#ddd;font-weight: bold;text-decoration:none}
   .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}

6. Lalu Cari Lago kode </head> dan letakkan kode berikut tepat diatas kode </head>
   

   <script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/>
   <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+'" /> INFONETGUE';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>

7. Dan langkah terakhir Peletakkan kode HTML untuk newstickernya, kamu bisa meletakkan ditempat yang kamu inginkan. dan disini sebagai contoh saya akan meletakkanya dibawah menu navigasi horisontal. silahkan cari kode <div id='navigation'> dan setelah kode<div id='navigation'> ditutup dengan kode </div> letakkan kode berikut tepat dibawah kode </div> 
   

   <div class='newspic'>
   <div class='news'>
   <div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>
   Berita Terbaru :
   </div><div style='float:left;width:680px;padding:4px 0; 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;Sabar Muanas&quot;, &quot;http://infonetgue.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><div style='clear:both;'/>
   </div>

   
   Ganti URL berwarna merah dengan URL blog kamu.
8. Nah, Sekarang simpan template kamu.

Keterangan:
Kode menu navigasi berbeda-beda, jika tidak menemukan kode pada nomor 7 coba kamu cari kode <div id='content-wrapper'> dan letakkan kode HTML newsticker (yang ada pada nomor 7 ) letakkan tepat diatas kode <div id='content-wrapper'>

Demikian cara membuat newsticker / berita berjalan keren, jika kamu berhasil maka akan ada berita terbaru dari recent post blog kamu yang bergerak atau berubah-ubah layaknya yang ada pada template gaya sporty magazine 2.

Read More

Memasang Tombol share Facebook di pojok blog

Bagi Blogger pemula seperti ini salah satu cara untuk mendapatkan trafict atau pengunjung yaitu dengan cara adalah mempromosikan blog atau posting blog kita ke sosial network sepertifacebook, Kali ini kita akan pasang tombol share facebook dengan cara yang sedikit unik, dan juga menarik perhatian pengunjung untuk membagi nya ke facebook.yaitu memasang tombol share facebook pada pojok blog, Lihat gambar dibawah ini!

Tombol share tersebut tetap di pojok blog,jadi walau kita geser ke atas ke bawah tetep aja di situ aja,tidak akan berpindah - pindah. Di tombol share facebook ini juga ada penghitung berapa kali halaman blog itu di bagikan ke facebook lewat tombol itu.
Tertarik menggunakannya ? langsung aja ikuti langkah-langkah berikut :

• Login ke Blogger
• Lalu klik Rancangan > Edit HTML
• Copy Paste kode berikut di atas kode ]]></b:skin>
  

  #pageshare {position:fixed; bottom:1%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; height:auto; padding:0 0 2px 0;z-index:10;}
  #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
  .fb_share_count_top {width:48px !important;}
  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
  .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:55px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
  .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px;}

• Setelah itu Copy Paste lagi kode berikut ini di atas </body>
  

  <div id='pageshare' title='Share @Facebook'>
  <div class='sbutton' id='fb'>
  <a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>ans!!</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
  </div>
  <div class='sbutton' id='gb'>
  <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
  <fb:like font='' layout='box_count' show_faces='false'/></div>
  </div>

• Kalau sudah selesai semua langsung aja klik Save Template' dan lihat hasilnya

Read More

Cara Memasang Tombol Like Facebook di Blog, 

Sama halnya dengan status pada facebook maka tombol like facebook diperlukan untuk mengukur tingkat antosiasme pembaca atas tulisanmu. nah jika kamu ingin membuat tombol facebook dipasang pada blog kamu ikuti tutorial singkat INFONETMU kali ini!


Tutorial cara memasang tombol like facebook di blog sebagai berikut:

1. Login ke blogger kamu, buka Dashboard - Design - Edit HTML
2. Download Full Template --> untuk berjaga-jaga jika ada kesalahan
3. Centang Expand Widget Templates
4. Copy code dibawah ini
   

   <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

5. Letakkan kode diatas ditempat yang kamu inginkan. misal dibawah postingan kamu cari kode <data:post.body/> dan letakkan kode no 4 tepat dibawah kode <data:post.body/>
6. Simpan template kamu.

keterangan: kode standard bisa kamu ubah dengan button_count
dan kode light dengan kode dark, sesuaikan dengan blog kamu. nah mudah kan? selain itu baca juga cara memasang tombol google plus pada blogya..selamat mencoba!

Read More

Cara Membuat Komentar Facebook di Blog

Cara Membuat Komentar Facebook di Blog,Cara Pasang Kotak Komentar Facebook di Blogger, Cara Memasang Komentar Facebook di Blogspot, Manfaat memasang kotak komentar facebook selain memudahkan pengunjung untuk bisa langsung berkomentar karena biasanya kebanyakan dari pengunjung blog sudah login pada akun facebooknya, kotak komentar facebook menjadi daya tarik untuk membuat pengunjung blog semakin betah untuk berkunjung kembali ke blog sobat,Buat yang tertarik untukmemasang kotak komentar facebook pada blog silakan ikuti tutorial dibawah ini!

Cara Membuat Komentar Facebook di Blog

• Agar tidak bentrok dengan komentar blogger silahkan sembunyikan dulu komentar blogger kamu. Caranya klik pengaturan,lalu klikkomentar dan beri centang sembunyikan komentar dan simpan.
• Buatlah Facebook App ID ( Aplikasi di Facebook ) Login dulu dengan Account Facebook Anda Lalu Silahkan buka web inihttp://www.facebook.com/developers/createapp.php
• Beri nama kotak komentarmu, centang setuju
  dan "Buat aplikasi baru"
  
  
  
• verifikasi kata, dan "Submit"
  
  
  
• Catai ID yang kamu dapat dan jangan lupa save url kamu disitu.
  
  
  
• Nah sekarang tinggal memasukkanya ke blog kamu.
• Masuk ke blogger
• pilih Design / Rancangan
• Pilih Edit HTML
• Download template full dan Expand Widget template, untuk menghindari kemungkinan gagal
• Cari kode yang mirip seperti kode dibawah ini,letakkanya paling atas.
  

  <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

• Tambahkan dengan kodexmlns:fb='http://www.facebook.com/2008/fbml' akhirya terlihat seperti kode dibawah ini:
  

  <html xmlns:fb='http://www.facebook.com/2008/fbml'xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >

• Letakkan kode berikut tepat dibawah kode <body>
  

  <div id="fb-root"></div>
  <script>
  window.fbAsyncInit = function() {
  FB.init({
  appId : 'APP ID FB KAMU',
  status : true, // check login status
  cookie : true, // enable cookies to allow the server to access the session
  xfbml : true // parse XFBML
  });
  };
  
  (function() {
  var e = document.createElement('script');
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
  }());
  <fb:comments/>
  </script>

• Ganti yang berwarna merah dengan ID aplikasi fb kamu.
• Cari kode <title><data:blog.title/></title> kode ini letakknya diatas juga,atau bagi yang memasang meta tag tambahkan dibawah kode meta tag blog kamu. letakkan kode berikut dibawah kode <title><data:blog.title/></title> atau dibawah meta tag.
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <meta expr:content='data:blog.url' property='og:url'/>
  <b:else/>
  <meta expr:content='data:blog.title' property='og:title'/>
  <meta expr:content='data:blog.homepageUrl' property='og:url'/>
  </b:if>
  <meta content='NAMA BLOGMU' property='og:site_name'/>
  <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
  <meta content='YOUR-APP-ID' property='fb:app_id'/>
  <meta content='PROFIL ID FB' property='fb:admins'/>
  <meta content='article' property='og:type'/>

• Ganti keterangan yang berwarna merah sesuai punya kamu.
• Cari lagi kode <data:post.body/> dan letakkan kode berikut dibawah kode <data:post.body/>
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p>
  
  <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
  <div><fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
  <div style='background-color: #000;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='' width='16'/> <b><a href='http://infonetmu.blogspot.com/' target='_blank' title='INFONETMU'>Comments for blogger!</a> brought to you by INFONETMU , Ingin Kotak Komentar seperti ini? <a href='http://infonetmu.blogspot.com/2012/01/cara-membuat-komentar-facebook-di-blog.html' target='_blank' title='komentar facebook'> KLIK DISINI!?</a></b></div>
  </b:if>

  Ganti dark dengan warna lain yang kamu suka.
  
• Dan simpan template kamu.

Nah,demikian tutorial Cara Membuat Komentar Facebook di Blog semoga bermanfaat.

Read More

Cara memasang profil facebook di blog

Cara memasang profil facebook di blog atau lencana Profile facebook di blog Atau Facebook badge di blog terbilang sangat mudah, facebook profil yang terpasang di blog akan memudahkan pembaca untuk mengetahui profil facebook kamu,Lihat gambar dibawah ini!

Widget profile Facebook seperti diatas bisa anda pasang diblog anda untuk mengajak pengunjung anda mengenal lebih jauh anda, untuk pasang widgetnya silahkan ikuti langkah-langkah berikut:

1. Login ke facebook kamu.
2. Klik profil atau nama atau nickname kamu.
3. Lihat bagian kiri bawah, akan ada link seperti gambar dibawah ini:
   
   
4. Lalu Akan menjadi halaman seperti dibawah ini:
   
   
5. Klik Blogger, dan tambahkan widget ke blog kamu. dan lihat hasilnya di blog kamu.

Demikian sedikit tips tentang cara memasang profil facebook di blog, semoga berguna.

Read More

Cara memasang rating di blog

Sebelum membahas tentang Cara memasang rating di blog,mungkin sobat blogger ada yang belum tahu apa itu rating blog? rating blog biasa di sebutgoogle rating stars atau bintang rating di pencarian google, dan disamping kanan bintang tersebut akan ada tulisan "Diulas oleh nama penulis blog", Untuk lebih jelasnya lihat gambar tampilan INFONETMUdaripada google rating dibawah ini!

Nah, itulah yang dinamakan google rating stars, lalu bagaimana cara membuat agar pada hasil pencarian blog kita bisa ada bintangnya seperti itu? ada beberapa tahapan yang harus kamu lakukan agar blogspot kamu bisa menampilkan rating bintang tersebut.Kamu harus teliti dalam hal ini agar semua berjalan dengan baik, langsung saja mari kita lakukan step demi stepnya.

Buat Akun Google plus
Langkah pertama kita dituntut harus mempunyai akun Google+ terlebih dahulu. Gunanya untuk mendapatkan kode ID google+ , untuk menghubungkan akun google + dengan blog. Untuk membuatnya klik disini, Bagi yangmemiliki akun google/ gmail pasti sangat mudah sekali utk mendaftar Google + [pasti sobat sudah paham cara membuatnya]. Bagi Y sudah punya ambil kode ID G+ nya. caranya buka akun G+'a dan copy ID'a seperti gambar di bawah ini:

Verifikasi Blog Di google Plus
Cara Verifikasi blog di google plus yaitu dengan cara saling menautkan blog dan google plus.
Cara menautkanya :

1. Klik profil google plus kamu
2. Klik edit Profil
3. Klik sebelah kanan KONTRIBUTOR
4. masukkan judul blog juga Url Yang akan kamu tautkan, misalnya url tentang about me
   
   
5. Lalu Simpan.
6. Buat postingan atau page about me dan beri salah satu text yang melink ke google plus kamu. dan jangan lupa beri atribut rel="me"pada link tersebut. contoh:
   

   <a href="https://plus.google.com/112689440050953053608"rel="me">Sabar Muanas</a>

   jangan lupa harus ada yang melink ke google plus kamu dan cukup satu saja rel="me"

Edit HTML Blog

• Login ke Blogger kamu
• Silahkan menuju di Html Blog kamu,jangan lupa backup template atau cadangkan.
• Cari kode <head> dan letakkan kode berikut dibawah kode <head>
  

  <link href='https://plus.google.com/114668577698864967405' rel='publisher'/>

• Ganti yang berwarna merah dengan Link Profile google plus kamu
• Cari lagi kode <body> dan letakkan kode berikut tepat dibawah kode <body>
  

  <div> <div itemscope='' itemtype='http://data-vocabulary.org/Review'>

• Cari lagi kode </body> dan letakkan kode berikut tepat diatas kode </body>
  

  </div></div>

• Selanjutnya carilah kode HTML judul postingan sobat, Mungkin cara ini sedikit sulit namun jika dicermati bisa kita lakukan dengan mudah. Setiap template blog memiliki kode judul postingan yang berbeda-beda seperti h1, h2, h3 . Untuk rata2 yang judul posting mempunyai tag heading h3 misalnya seperti kode pada gambar dibawah ini:
  
  Bagi yang sudah memasang breadcrumb biasanya kodenya ada dibawah kode breadcrumb navigasi blog kamu, dan tambah kode yang berwarna merah,hasilnya akan jika ditampilkan dengan kode akan seperti dibawah ini:
  

  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
  <span itemprop='itemreviewed'><span itemprop='description'>
  <h3 class='post-title entry-title'>
  <b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
  <b:if cond='data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/>
  <data:post.title/>
  </b:if>
  </b:if>
  </h3>
  </span></span> 
  </b:if>

• Cari kode <span class='fn'><data:post.author/></span> dan tambahkan dengan kode yang berwarna merah,jadinya seperti ini:
  

  <span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

• Langkah selanjutnya proses pemasangan Rating bintang Rich Snippetnya di Artikel blog sobat. Untuk jumlah bintangnya sesuai keinginan dan selera sobat hehe poko'a antara 1 - 5 . caranya kamu beri kode dibawah ini di setiap postinganmu.
  

  <span itemprop="rating">4.5</span>

• Cek hasil kerjamu di google rich snippets tools atau klik disini, kalau sudah ada bintangnya maka kamu telah berhasil.

Demikian Cara memasang rating di blog, semoga bermanfaat. 

Read More