Senin, 12 November 2012

Mengatasi Peringatan "Warning http://web.adress.here is unreachable"


Apakah sobat pernah menjumpai kata-kata "Warning: http://web.address.here is unreachable"  di bawah kotak komentar Facebook di blog sobat?
Nah, kita akan menghilangkan/mengatasi kalimat warning tersebut. Caranya:
1. Log in ke Facebook yang digunakan untuk membuat Facebook App ID
2. Masuk ke https://developers.facebook.com/  => menu App/Aplikasi => Klik Aplikasi kotak komentar FB
3. Edit Settings 
4. App Domain : ALAMAT BLOG ANDA (tanpa www / http:) ex : payungcyber.blogspot.com
5. Scroll ke bawah : (centang) Website with facebook login
    Site URL : ALAMAT BLOG ANDA (lengkap) ex : http://payungcyber.blogspot.com/
6. Save / Simpan Perubahan
7. Selesai
Biasanya tulisan tersebut tidak langsung hilang, tunggu beberapa menit hingga facebook selesai mengirim ke server-server yang dituju.

Sabtu, 10 November 2012

Membuat Thumbnail Recent Post Berkedip Bergantian

Untuk bisa melihat recent post (posting terbaru) ini tentunya blog sobat harus sudah berisi beberapa posting yang sudah dipublikasikan, soalnya recent post ini menampilkan posting-posting terbaru sobat. Dengan cara ini para pengunjung blog bisa jadi lebih betah menjelajah halaman-halaman blog sobat. Gambar di atas hanya sebagai contoh saja tidak bisa bergerak, tapi nanti kalau sobat sudah memasang di blog sobat, sobat akan melihat hasilnya akan bergerak secara bergantian.

Caranya:
  • Masuk Blogger terlebih dahulu
  • Pilih Tata Letak
  • Tambahkan Gadget => cari HTML/JavaScript
  • Copy script dibawah ini
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong></strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#AA; url() repeat-x;
border:1px solid #faa;
}

#spylist li a {
text-decoration:none;
color:#dd0000;
width:100%;
font-size:12px;
height:12px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:1px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#000000;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#000000;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://gennagasoft.blogspot.com/";
imgr[1] = "http://gennagasoft.blogspot.com/";
imgr[2] = "http://gennagasoft.blogspot.com/";
imgr[3] = "http://gennagasoft.blogspot.com/";
imgr[4] = "http://gennagasoft.blogspot.com/";
showRandomImg = true;
boxwidth = 200;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#990099";
thumbwidth = 60;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#000";
icon2 = " ";
numposts = 100;
home_page = "http://gennagasoft.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>
</div></center>

  • Tulisan berwarna merah silahkah sobat ganti dengan alamat blog sobat.
  • Selesai... Semoga bermanfaat!!!!

Rabu, 07 November 2012

Membuat Pop Up Like Box Facebook Auto Hide di Blogspot

Untuk membuat pop up like box facebook auto hide di blogspot seperti gambar di atas syaratnya sobat harus sudah punya Fans Page sendiri. Saya rasa sobat pasti sudah bisa membuat sebuah halaman di facebook, jadi pada sesi ini ga akan dijelaskan. Ok... langsung aja kita mulai

Cara membuatnya:
  • Login ke Blogger
  • Masuk Tab Rancangan => Edit HTML => Lanjutkan => centang Expand Template Lengkap
  • Cari tag </Head> Tambahkan script Jquey dibawah ini tepat di atasnya. Jika sebelumnya sobat sudah memasang script jquery ini maka abaikan aja.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>
  • Simpan Template
  • Masuk ke Tab Tata Letak
  • Tambahkan gadget HTML/JavaScript, kemudian masukan script di bawah ini
 <script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bdslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bdslikebox{background: url("http://i1336.photobucket.com/albums/o649/aghasgennaga/bdfacebookbadge.png") 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%;}
.bdslikebox div{border:none;position:relative;display:block;}
.bdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.bdslikebox span a{color: gray;text-decoration:none;}
.bdslikebox span a:hover{text-decoration:underline;}
</style>
<div class="bdslikebox" style="">
    <div>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FGennagasoft%3Fref%3Dtn_tnmn&amp;width=270&amp;height=290&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=red&amp;stream=false&amp;header=true&amp;appId=293184024127120" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:290px;" allowtransparency="false"></iframe><span><a href="http://gennagasoft.blogspot.com">Gennagasoft</a></span>
    </div>
</div>
  • Tulisan berwarna merah diganti dengan code fans page sobat yang didapat dari facebook developer.
Selesai dan semoga bermanfaat!!!  

Selasa, 06 November 2012

Cara Membuat Auto Read More + Thumbnail di Blogspot

Expandable post atau lebih dikenal dengan "Read More" adalah fitur yang membuat blog Anda menunjukkan hanya sebagian dari posting Anda pada halaman indeks yaitu rumah, label dan halaman arsip. Pada akhir pratinjau setiap akan ada sebuah link ke halaman posting, biasanya menempel pada frase "Read More".

Auto Read More Hack With Thumbnail For Blogger
Auto membaca lebih banyak fungsi otomatis mempersingkat posting Anda dan membuat thumbnail dari gambar yang ada di pos. Hal ini juga membantu untuk memuat halaman lebih cepat. Hal ini juga menunjukkan dan thumbnail gambar yang membantu untuk menarik pembaca. Saya juga menambahkan auto read more ke blog saya. Otomatis read more untuk blogger dengan posting thumbnail dapat dilakukan dengan memasukkan beberapa kode ke dalam template blog Anda.

Cara Tambah Auto Read More With Thumbnail Untuk Blogger?

  1. Buka akun Blogger Anda
  2. Pergi ke Blogger Dashboard> Template> Edit HTML.
  3. Periksa "Expand Template Widget".
  4. Cari (Ctrl + F) </ head> tag
  5. Copy dan paste kode di bawah ini sebelum/di atas </head>:

<!-- DC Auto Read More Script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- DC Auto Read More Script End -->

Keterangan :

  • Anda dapat menyesuaikan read more dengan mengubah nilai-nilai dari vriabel berikut:
  • thumbnail_mode – set ke "yes" jika Anda ingin menampilkan thumbnail dengan ringkasan teks
  • summary_img – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, dengan thumbnail.
  • summary_noimg – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, bila ada thumbnail ada.
  • img_thumb_height and img_thumb_width -specify adalah tinggi dan lebar thumbnail (dalam piksel).

Sekarang cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :

<!-- DC Auto Read More Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- DC Auto Read More End -->

Minggu, 04 November 2012

Cara Membuat Breadcrumbs Terindex/Di indeks Google


Breadcrumbs adalah menu navigasi yang ada diatas sebuah posting atau artikel. Contohnya bisa dilihat diblog ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging. Silahkan sobat cari di google dengan kata kunci “ cara membuat menu breadcrumbs”. Cara membuat / memasang navigasi breadcrumbs terindex Google di blog agar terlihat di dalam mesin pencari Google (Google search). Mumpung ada waktu senggang, sekarang saya akan menjelaskan tentang cara membuat breadcrumb SEO friendly yang tujuannya untuk memudahkan visitor menjelajahi halaman demi halaman pada blog kita sesuai dengan kategori yang ada

Cara membuat Breadcrumbs di Blogspot / Blogger:
  • Login di Blogger
  • Pilih Template
  • Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
  • Centang Expand Widget Templates
  • Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
  • Kemudian cari kode ]]></b:skin>
  • Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
  • Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
  • Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
  • Terakhir simpan template anda dan navigasi breadcrumbs akan siap di index Google
Semoga bermanfaat!!

Sabtu, 03 November 2012

Cara Membuat Blog di Blogspot


Sebenarnya ini adalah artikel yang tidak baru lagi tapi terkadang masih ada yang mencari - cari bagaimana cara membuat blog di blogspot. Cara membuat blogspot ini cukup mudah, asalkan kita sudah punya akun google email, maka kita akan terhubung dengan semua produk dari google seperti blogspot, google+, youtube, dan adsense (tapi kalo ini pengecualian karena kita harus melakukan serangkaian ritual supaya bisa diajak bergabung dalam keluarga besar iklan dari google. Lalu apakah kalau kita tidak punya email dari google itu tidak bisa membuat blog di blogspot? Ooo tentu saja bisa, kita bebas mndaftar pakai email apa saja tapi alangkah bagusnya jika memakai google email (gmail).
Baiklah kita mulai bagaimana cara membuat blog di blogspot
  1. Masuk dulu ke halaman blogspot di blogger.com
  2. Tentu saja klik daftar (jika kita ingin memakai email selain gmail) tapi jika kita sudah punya akun gmail, kita tinggal masukkan saja alamat email kita (xxx@gmail.com) dan passwordnya.
  3. Isi kolom nama blog kita xxxx.blogspot.com (xxxx itu di ganti dengan nama yang kita sukai, misalnya saya memilih nama payungcyber jadinya nanti alamatnya menjadi payungcyber.blogspot.com
  4. Pilih tema standar yang akan kita gunakan.
  5. Pilih Create blog
Selesai sudah cara membuat blog, sekarang tinggal mulai di isi dengan postingan menurut hobi anda dan kegemaran anda misalnya blog tentang tanaman, perjalanan, usaha online dan lain - lain. Selamat mencoba, semoga bermanfaat.

Postingan Lebih Baru Beranda