Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara paling mudah bikin komentar Facebook di Blogger-Blogspot kamu

Cara Membuat/Memasang Kotak Komentar Facebook di Blogger/Blogspot -Cara Mudah Membuat Kotak Komentar Facebook di Blogger. Cara Membuat Komentar Facebook Untuk Setiap Postingan Blog. Tutorial Lengkap Buat dan Pasang Facebook Comments di Atas kotak komentar blog. Tutorial ini sudah saya uji coba dan berhasil.

Untuk sobat semuanya, pada postingan kali ini saya hadir untuk memberikan tutorial/tips trik tentang blogging. Tentunya sobat sudah punya Facebook semuanya kan, dan tentunya juda sudah pada sering kan komen-komenan ama temen2 FBnya.

Tau gak, kalo kita juga bisa memasang fasilitas komentar facebook di blog kita, kita semuanya tau, bahwa hampir seluruh dunia telah menggunakan facebook sebagai situs jejaring sosial paling populer. Nah dengan memanfaatkan fasilitas Facebook Comments di blog kita, akan dapat memudahkan para pengunjung yang datang untuk meluangkan kritik dan saran kepada blog kita, sehingga kita melalui komentar tersebut kita bisa lebih memperbaiki dar apa yang kurang dari blog kita, yaitu dengan melalui Facebook Comments ini.

Sebenarnya Tutorial Cara memasang komentar facebook di blogspot ini sudah banyak sekali diposting oleh kebanyakan para blogger, namun banyak yang aku coba ternyata banyak yang gak berhasil. dan kini saya menghadirkan tutorial ini sesuai dengan apa yang telah saya uji coba, dan berhasil. yuk ikuti langkah2nya,

Berikut Demo kometar Facebook yang akan kita buat.
Cara Membuat Komentar Facebook di Blog - Tutorial Lengkap
Atau silahkan langsung kunjungi halaman ini untuk melihat demonya :
   ---> Free Download GOM Media Player Terbaru 2012/2013

Cara Buat kotak komentar Facebook di Blogger :
Untuk memasang fasilitas Komentar Facebook di blog ini, saya menyarankan kepada para sobat blogger semuanya, untuk membackup/mendownload dulu templatenya, hal itu dilakukan untuk menjaga terjadinya error kode/hal-hal yang tidak kita inginkan, sehingga bila ada masalah, kita bisa kembalikan lagi.

Sebelum kita membuat kotak komentar Facebooknya, kita buat dulu Facebook Apps, yang nanti kita akan mendapat App ID, yang mana App ID itu yang kita perlukan untuk membuat facbook koemntarnya.

1. Cara Buat ID Aplikasi Facebook untuk Blogger :
1. Kita mulai dengan masuk ke Akun Facebook.com kita.
2. Setelah masuk, Kunjungi url ini: https://developers.facebook.com/apps
3. Isi kotak yang tersedia, lihat gambar dibawah ini :
Isikan App Display Name sesuai ke ingginan, kosongkan saja App Namespacenya,  lalu klik Continue.
4. Etelah Klik Continue/Lanjutkan. maka akan muncul window verifikasi kata dan isikan kata yang telah diberikan. lalu klik Continue/lanjutkan.

5. Setelah itu, akan muncul window baru berupa App ID, Lihat gambar dibawah ini:
"App ID/API Key" adalah nomor aplikasi id facebook Anda. Catat dan simpan nomor App id tersebut di notepad. ini akan diperlukan nantinya.
6. Alamat blog sobat harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". 
Berikut cara menambah alamat blog:
  • Klik Edit Settings (kanan atas) pada aplikasi anda. lihat gambar dibawah ini :
  • Pada "Select how your app integrates with Facebook" Masukkan alamat url blog anda. Contoh, http://vqrtdo.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
  • Klik Save Changes

    Lihat gambar dibawah ini :
Nah, sejauh ini kita sudah selesai membuat ID Aplikasi Facebook untuk blog kita. langkah selanjutnya adalah kita membuat dan memasang kotak koemntar facebook di blog kita.

2. Cara Pasang kotak komentar Facebook di Blogger :
1. Login ke blogger,
2. Masuk ke Template -> Edit HTML -> Centang "Expand Template widget"
3. Cari kode seperti dibawah ini, [biasanya berada sebelum <head>]
<html expr:dir='data:blog.languageDirection' 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' xmlns:fb='http://www.facebook.com/2008/fbml'>
masukkan kode seperti ini, lihat kode diatas, ada kode yang saya warnai, itu adalah kode yang ditambahkan.
xmlns:fb='http://www.facebook.com/2008/fbml'
4. Lalu cari kode </head>, lalu letakkan kode berikut tepat diatasnya.
<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 BLOG ANDA' property='og:site_name'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='ID Profil Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>
KETERANGAN: Lihat tulisan yang berwana.
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda yang telah anda buat tadi.
c. Ganti ID PROFIL FB dg yang sesuai.

5. Cari kode </head> seperti no 3 tadi dan letakkan kode berikut ini tepat dibawah kode </head>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Anda',
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(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
Ganti App ID Anda diatas dengan App ID tadi.

6. Lalu cari kode berikut, <data:post.body/> lalu letakkan kode berikut tepat dibawah kode tersebut :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
450 bisa diganti dengan panjang kotak komentarnya yang sesuai keinginan anda.

7. Setelah langkah diatas sudah selesai, silahkan Klik pratinjau, jika tidak ada error kode, Klik Save Tempaltes/Simpan Template.

Selesai. Enjoy! Sobat telah berhasil membuat kotak koemntar facebook diblognya. Selamat mencoba.




16.49 | 0 komentar | Read More

Cara Membuat Related Post Thumbnails Blogger

Jika sebelumnya infonetku sudah berbagi Tips Cara Menambahkan Google Translator Widget di Blog 
kali Infonetku akan berbagi tips Membuat Widget Artikel Terkait / Related post pada blog. 

Tips Menghias blog ini akan membuat seperti gambar diatas, untuk contoh nyatanya lihat dibawah postingan ini..
Oke langsung saja yah..
1.Langkah pertama masuk dulu ke blogger dasbor sobat, lalu back up atau download terlebih dahulu template sobat, untuk jaga jaga jika sobat mengalami kesalahan, kemuidian edit HTML dan centang "Expand Widget Templates"
2.Kemudian cari code dibwah ini, gunakanlah Ctrl + F untuk memudahkan sobat mencari
</head>

Setelah ketemu gantikan dengan kode dibawah ini..

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=" https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Jangan Lewatkan Artikel Lainnya";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Setelah itu cari lagi kode berikut..

<div class='post-footer-line post-footer-line-1'>

jika sobat tidak menemukan kode seperti diatas coba cari kode dibawah ini..

<p class='post-footer-line post-footer-line-1'>

Setelah itu letakkan kode dibawah ini setelah kode yang tadi atau tepat dibawah kode yang tadi.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Kemudian jangan lupa untuk save..lalu lihat hasilnya..

4.Kalau sobat ingin menambah atau mengurangi jumlah artikel terkait atau related post yang akan ditampilkan sobat tinggal menggantikan nomor seperti kode dibawah, gantikan nomor sesuai dengan yang sobat ingin tampilkan.

var maxresults=5;

Untuk mengubah jumlah label yang akan diperlihatkan sobat tinggal edit kode sperti dibawah ini

max-results=5

5.Untuk merubah judulnya sobat bisa edit kode seperti kode berikut.

var relatedpoststitle="Related Posts";

6.Untuk postingan yang tidak ada photo, supaya terlihat ada photonya gantilah url photo yang sobat ingin tampilakan supaya nanti jika secara otomatis untuk postingan yang tidak memiliki photo akan menampilkan photo yang sobat mau

var defaultnoimage="https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";

7.Editlah kode warna dibawah ini kalau sobat ingin mengganti warna framenya

var splittercolor="#d4eaf2";

jika belum juga berhasil, jangan panik yah, sobat bisa hubungi saya dengan cara berikan komentar sobat, dengan senang hati akan bantu.Selamat Mencoba yah...Salam Infonetku.
Source Blogger Plugins
21.14 | 0 komentar | Read More

Cara Membuat Tombol Sharing Melayang di Blog

Setelah setelah sebelumnya infonetku sudah berbagi tentang cara membuat tomol sharing sexy, kali infonetku akan berbagi tips cara membuat tombol sharing seperti twitter, facebook, G+, dan yang lainnya, tapi kali ini tampilan tombolnya akan melayang di sebelh kiri atau disebelah kanan blog sobat. Nah kali ini sobat tidak perlu susah payah untuk edit template sobat, karena untuk membuatnya kita hanya menambahkan widget ke blog sobat, dengan bantuan penyedia widgetnya yang bernama Add This.

Oke, langsung saja yah.

1. Daftar di Add This
2. Klik  Get AddThis
3. Kemuadian Lihat pilihan sebelah bawah, lalu klik Try the Vertical Bar , Lihat gambar dibawah
4. Pilihlah ukuran tomblo yang sobat mau pasang di blog sobat, jika menginginkan besar tomblo seperti yang    
    ada di blog ini, sobat bisa pilih yang ukurang medium. Lalu klik View Code


5. Setelah pemilihan ukuran tombol, sobat bisa langsung copy code script yang ada diatasnya, kemudian
    Pasangkan ke kedalam blog sobat, caranya masuk ke blog sobat, kemudian tambahkan widget, pilih 
    HTML/Java Script , lalu paste kode yang tadi didalamny, kemudian save.

Sekarang sobat coba bisa lihat hasilnya..Gampangkan, semoga bermanfaat yah. Salam Infonetku.
21.07 | 0 komentar | Read More

Cara Membuat Tombol Back To Top Blogger

Tombol Back to Top berguna untuk mempercepat pembaca artikel blog supaya tidak direpotkan dengan scroll keatas. Tapi sebelumnya udah baca kan artikel mengenai tentang info blogger yang selumnya tentang Musik Template Untuk Blogger Gratis kalau belum monggo..

Mungkin artikel tentang membuat tombol float back to top atau kembali keatas ini sudah banyak yah, tapi kali ini admin memutuskan untuk tetap membuat artikel ini, siapa tahu ada sahabat Media Infonetku yang belum tahu, dan mungkin juga suka dengan tombol yang admin sediakan disini.
Contoh demonya itu seperti blog ini nih, sebelah kiri bawah..


Langkah-Langkah Mengaplikasikan Tombol Back To Top Blogger.




  • Edit HTML Template


  • Centang Expand Template Widget


  • Kemudian carilah kode dibawa, gunakan Ctrl + F supaya lebih cepat.


  •  </body>





  • Untuk tombol warna biru copy paste code dibawah tepat diatas code yang tadi

  •  <a href='#' style='position: fixed;bottom:5px;right:0px;' title='Back to  Top'><img    src='https://sites.google.com/site/marudutsimarmata/backtotop_48x48x32.png?  attredirects=0' style='border: none;'/></a>




  • Untuk tombol warna oranges copy paste code dibawah tepat diatas code yang tadi

  •  <a href='#' style='position: fixed;bottom:5px;right:0px;' title='Back to  Top'><img    src='https://sites.google.com/site/marudutsimarmata/back-to-top1_48x48x32.png?attredirects=0' style='border: none;'/></a>




  • Untuk tombol warna hijau copy paste code dibawah tepat diatas code yang tadi

  •  <a href='#' style='position: fixed;bottom:5px;right:0px;' title='Back to  Top'><img    src='https://sites.google.com/site/marudutsimarmata/back-to-top2_48x48x32.png?attredirects=0' style='border: none;'/></a>




  • Untuk tombol warna Coklat copy paste code dibawah tepat diatas code yang tadi

  •  <a href='#' style='position: fixed;bottom:5px;right:0px;' title='Back to  Top'><img    src='https://sites.google.com/site/marudutsimarmata/back-to-top4_48x48x32.png?attredirects=0' style='border: none;'/></a>

    Notes :

    jika ingin menampilkan tombol Back To Top disebelah kiri , sahabat tinggal ganti right menjadi left
    Selamat Mencoba yah, Salam...

    09.49 | 0 komentar | Read More

    Cara Membuat Random Post Blogger

    Setelah kemarin infonetku sudah share tentang membuat Related Post, nah sekarang infonetku akan share tentang Random Post. Random Post itu maksudnya adalah kita membuat link dengan artikel yang dipilih secara acak, sedangkan related post itu dimana link yang kita buat untuk menautkan artikel yang terkait dengan postingan yang sedang dibaca. oke langsung saja yah..

    1. Masuklah dasbor blog sobat.
    2. Kemuadian Add Gadget/ Widget dimana sobat mau letakkan.
    3. Setelah itu pilihlah widget HTML/Javascript.
    4. Kemudian copy paste code scrip dibawah ini.


    <script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=6;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

    5.Kemudian Buatlah judul widget & jangan lupa untuk di save.

    Selesai sudah kita membuat Random Post di Blog.
    Semoga Bermanfaat yah.Salam Infonetku
    09.47 | 0 komentar | Read More

    Bikin Widget Recent Post Maskolis.com


    Di kesempatan hari ini yang cukup panas, saya akan berbagi tutorial baru yang lumayan hot juga. Recent post Canggih, kenapa aku bilang canggih? karena recent post yang terlihat bukan seperti widget melainkan seperti recent post asli dari blog, ada nextdan Previous.

    Ini merupakan widget garapan dari Creating website mas kolis. Bagi anda yang ingin melihat recent post lainnya di sini juga ada seperti :

    Kali ini yang ingin membuat recent post canggih, bingung mau ngasih judul apa, langsung aja ikuti tutorialnya.

    1. Login blogger anda
    2. Masuk template >> edit html >> lanjutkan (oh iy saya sarankan lebih baik anda backup dulu template anda)
    3. Selanjutnya, centang expand widget templates dan cari kode ]]></b:skin>, letakkan kode di bawah ini tepat di atas kode yang anda cari sebelumnya
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8EV9u8ex42aDhJsAeQumCP-AXnnb-170ZcB7EjrjhKKK_seenKcb0nG1vGUj4dJwszN27-rFWP7RCJDBhaA_riUkatBTGK4WzL-mZqIrWqNbMIqnJeuAdr3GhQRv3joCT9rmpRYDb3Co/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    Keterangan : warna biru merupakan ukuran tinggi dan lebar image

    4.  Selanjutnya letakkan kode di bawah ini tepat di atas kode  </head>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://wartabeta.com/";
    var charac = 100;
    var urlprevious, urlnext;
    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed = showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VYdDBENwTIBSHGlRu8xpMtj2jixWlSsihtpFFVBIOycWHFMiMDnRQGzzxU3TTBC3sPpg65h4LpVvrRhvK7PYuCEWKoAJn692osW-FvVpsMg9n1knY1Zan5Eb9YCjNg8NM6tZ6C-zZZzZ/d/noimagethumb.gif";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }
    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    Keterangan :
    var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
    var urlblog = "http://wartabeta.com/"; >> ganti dengan URL blog Anda
    var charac = 100; >> Jumlah karakter atau huruf pada setiap post.

    5. Save template, setelahsave anda masuk di Tata letak blog, Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>

    Simpan widget, Dan lihat hasilnya akan seperti di bawah iini, dengan tampilan yang begitu fresh
    Demo recent post canggih



    15.35 | 0 komentar | Read More

    Membuat Widget Mengikuti Layar Saat Kursor Digulung (Sticky Widget)

    Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.

    Pertama kali mengacak-acak kode sticky ini ketika saya diminta bantuan oleh 7O3 Blogger Tuts  dalam template Cemungudh Blogger Template. Karena terasa menarik, maka saya aplikasikan juga dalam blog saya ini.

    Untuk lebih memahami apa itu sticky widget sidebar, silahkan scroll kebawah dulu sampai habis, (nanti kembali lagi ke sini... ) Anda akan menemukan widget yang terus mengikuti seperti dibawah ini

    sticky widget blogger

    Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
    1. Menambakan kode CSS
    2. Menambah kode JavaScript
    3. Menambahkan kode HTML

    Menambah kode CSS

    1. Login ke Blogger
    2. Klik Template > Edit HTML > Lanjutkan
    3. Tambahkan kode CSS, contoh kode seperti ini :
    #catcher{
    height:780px;/* tinggi catcher */
    }
    
    #sticky{
    width:300px;/* lebar sticky */
    height:auto;
    }
    Catcher adalah tinggi keseluruhan widget sebelum sticky, misalkan ada 3 widget sebelumnya pada blog anda. Recent PostFollower dan Facebook Like Box. Tinggi widget Recent Post 250px, tinggi widget Follower 250px, dan Like Box 250px, jarak masing2 widget 10px, maka tinggi catcher 250+10+250+10+250+10 = 780px, supaya lebih jelas saya gambarkan seperti ini :

    sticky widget blogger

    Kalau masih bingung dengan ketinggian widget anda, silahkan uji coba saja. Apabila menumpuk silahkan tambah ketinggian, apabila terlalu jauh, silahkan kurang ketinggian catcher.

    Menambah Kode JavaScript

    Tambahkan kode ini sebelum </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
            function isScrolledTo(elem) {
                var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
                var docViewBottom = docViewTop + $(window).height();
                var elemTop = $(elem).offset().top; //num of pixels above the elem
                var elemBottom = elemTop + $(elem).height();
                return ((elemTop &lt;= docViewTop));
            }
            var catcher = $(&#39;#catcher&#39;);
            var sticky = $(&#39;#sticky&#39;);
            $(window).scroll(function() {
                if(isScrolledTo(sticky)) {
                    sticky.css(&#39;position&#39;,&#39;fixed&#39;);
                    sticky.css(&#39;top&#39;,&#39;0px&#39;);
                }
                var stopHeight = catcher.offset().top + catcher.height();
                if ( stopHeight &gt; sticky.offset().top) {
                    sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                    sticky.css(&#39;top&#39;,stopHeight);
                }
            });
        });
    </script>


    Menambahkan kode HTML

    Kode HTML nantinya seperti ini:
    <div id='catcher'>
    widget yang telah ada
    </div>
    <div id='sticky'>
    isi sticky widget, baik FB Like Box, Banner, atau apa pun
    </div>

    Contoh Pengaplikasian

    Contoh pengaplikasian pada template anda
    <div id='sidebar'>
    <div id='catcher'>
    <b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
    <b:widget id='HTML3' locked='false' title='' type='HTML'/>
    <b:widget id='HTML2' locked='false' title='' type='HTML'/>
    <b:widget id='HTML7' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
    <div id='sticky'>
    <a href="http://blog.kangismet.net" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY_WcG7cvmKTohM0bzyFZrxt_jfNMgkYgc_XkLhIZHeTkKzT3BjFXAyMh4zrVxU7k6hlGi1fWzQI8j34XLX4FHTJR5Ofx2hFUTuIgASKYZwsIA52OmYLj7JYRrbIChYjSxutteQYWowII/s1600/kilogo.png" /></a>
    </div>
    <div>

    Selamat berkreasi dengan Sticky widget.....


    16.01 | 0 komentar | Read More

    Tutorial Cara Pasang Tombol Like Facebook Dibawah Judul Posting Blog

    Kali ini saya akan membahas bagaimana cara membuat tombol like facebook dibawah judul posting blog, bagi kamu yang ingin membuat tombol like ini, kesempatan bagus apalagi diletakannya dibawah judul posting. Disni tombol like facebooknya ada tiga model, jadi pilih salah satu saja



    Dengan memasang tombol like facebook kamu akan mengetahui seberapa bagus artikel anda disukai oleh pengunjung blog anda.

    Berikut cara membuat nya :

    1. Login ke blog kamu.
    2. Pilih Rancangan.
    3. Pilih EDIT HTML.
    4. Cari kode <data:post.body/>
    5. Setelah ketemu pilih salah satu kode dari tiga kode yang akan saya berikan, dan letakan diatas kode nomor 4.

    1. Kode Pertama, Tombol Like Vertikal Dengan Count (Hitungan)

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>
    2. Kode Kedua, Tombol Like Horizontal Dengan Count (Hitungan)

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>
    3. Kode Ketiga, Tombol Like Tanpa Count (Hitungan)

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>
    Letakan salah satu kode diatas, tepat diatas kode nomor 4 tadi.
    Ingatpilih salah satu saja, jangan semuanya, nanti gagal.

    Simpan Template, dan lihat hasilnya.

    08.26 | 0 komentar | Read More

    Cara pasang tombol like/suka di bawah judul post

    Tips berikut untuk bagaimana cara memasang Send Button dan Like Button facebook sekaligus hanya dengan menggunakan sedikit kode. tentunya cara ini bukan buatan saya ya!, hehe. saya hanya sedikit mempermudah buat blogger yang baru seperti saya. contohnya bisa sobat lihat bagian kanan atas dari blok ini.

    Seperti biasa tentunya sobat harus loging ke akun blogger anda. menuju kemenu Desing >> edit html dan jangan lupa centang (Expand Widget Templates). (lihat gambar)


    untuk memasang dibawah judul posting

    temukan kode ini 

    1. <div class='post-header-line-1'/>  

    dan tempatkan kode berikut tepat di bawah kode yang sobat temukan diatas

    1. <div id="fb-root"></div>  
    2. <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
    3. <fb:like expr:href='data:post.url' show_faces="true"   
    4. width="450" send="true">  
    5. </fb:like>  
    ok anda telah selesai PREVIEW atau SAVE TEMPLATE anda dan lihat hasilnya.


    03.22 | 0 komentar | Read More

    Bikin label/kategori jadi 2 kolom atau lebih

    Saya disini tidak akan banyak basa-basi bahkan tidak ada, jadi langsung ke pembahasan Cara Membuat Label Blogger Menjadi 2 Kolom :
    1. Login ke akun Blogger
    2. Klik Rancangan
    3. Pada menu Elemen Halaman, klik tambah gadget di sidebar blog.
    4. Pilih Widget Label dan pastikan tampilannya pada bentuk Daftar.
    5. Kemudian klik Simpan.

    Sampai disini, blog Anda sudah memiliki label. Namun tampilannya masih dalam bentuk default (list/ daftar dalam 1 kolom). Sekarang cara membuat label tersebut menjadi 2 kolom kita hanya menggunakan sebuah css, tidak ada script lain.
    Pembagian label menjadi 2 kolom dengan menggunakan css adalah sebagai berikut :
    1. Login ke akun Blogger, jika sudah login tidak perlu login lagi (karena link sign in tidak ada, yang ada hanya link sign out)
    2. Pilih dan klik Rancangan
    3. Selanjutnya Klik Edit HTML
    4. Backup seluruh kode template ke dalam notepad.
    5. Cari kode ]]>, lalu letakan kode berikut di atas kode tersebut

    #Label1 li { float:left; width:45%; }

    6. Klik Pratinjau dan lihat apakah terjadi perubahan pada widget label blog Anda (menjadi 2 kolom). Jika belum, coba perkecil
    nilai width pada kode diatas sampai Anda menemukan nilai yang tepat, sehingga widget label dalam blog Anda menjadi 2 kolom.
    7. Jika sudah selesai dan tidak terjadi kesalahan, klik Simpan.

    Sekian dan terimakasih.........


    06.17 | 0 komentar | Read More