Cara Bikin Daftar Isi Blog Otomatis Sesuai Label

Daftar Isi / Sitemap yang ada di blog akan memudahkan baik Sobat sendiri sebagai pemilik website / blog ataupun pengunjung blog untuk mencari artikel yang dibutuhkan. Daftar isi disini ane bagikan dengan 2 versi, yaitu daftar isi biasa dan daftar isi dengan fungsi scroll, anda nantinya dapat memilih salah satunya sesuai dengan selera.

 1. Cara Bikin Daftar Isi Blog Otomatis  Sesuai Label (Daftar Isi Biasa)

Buat postingan baru dan masukkan kode dibawah ini pada mode HTML (bukan compose) lalu publikasikan.

<script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://insan-ghorim.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

2. Cara Bikin Daftar Isi Blog Otomatis  Sesuai Label dengan fungsi scroll :

Sama dengan cara diatas yakni buatlah postingan baru dan masukkan kode dibawah ini pada mode HTML (bukan compose), lalu publikasikan.

<div style="border: 1px solid #000000; height: 500px; overflow: auto; padding: 5px; width: auto;">
<script src="http://cara-baru-andie.googlecode.com/files/daftar%20isi%20otomatis.js"></script><script src=" http://insan-ghorim.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Keterangan :
Ganti Teks yang berwarna Merah dengan url blog anda dan anda dapat Melihat hasilnya seperti Disini.

Selamat Mencoba Cara Bikin Daftar Isi Blog Otomatis  Sesuai Label.

*** Semoga Bermanfaat ***

Read More

Cara Membuat Live Traffic Feed Di Blog

Cara Membuat Live Traffic Feed Di Blog

Cara membuat live traffic feed di blog - live traffic feed berguna agar kita mengetahui pengunjung blog, maksudnya mengetahui dari mana, lewat mana, sudah berapa lama dan sebagainya. Menarik bukan, makanya segera pasang. Untuk cara pemasangan ikuti tutorial berikut:

1. Login ke blog anda
2. Kunjungi Feedjit

3. Klik choose your feedjit.
4. Untuk pecinta gratisan, klik sign up pada feedjit completely free

5. Nanti Sobat akan dibawa ke menu pengaturan, atur sepuasnya

 

6. Jika anda pengguna blogger ganti dengan blogger
    Jika anda pemakai wordpress ganti dengan wordpress.
7. Klik GO
8. Klik to Open a new window and install and on blogger.
9. Pilih sebuah blog: isi dengan nama blog anda
    Judul                    : Isi dengan judul sesuka anda
10. Klik menambah widget.
11. Klik edit konten
12. Copy paste kode HTML ke blog anda dengan cara
      1. log in ke blog anda
      2. Klik tata letak
      3. Klik tambah widget.
      4. Klik HTML/java script
      5. Paste kode yang tadi didapat
      6. Simpan
13. Lihat hasilnya

Disamping mempunyai kelebihan, feedjit juga memiliki kelemahan antara lain memperberat blog karena widget, mengganggu pengunjung, seharusnya pengunjung tidak di sebarkan tetapi feedjit menyebarkan.

So.....Pertimbangkan dulu sebelum sobat memasangnya Itulah sedikit ulasan dari saya tentang cara membuat live traffic feed di blog. Semoga Bermanfaat.

Read More

Cara Memasang Chatting Facebook Diblog

Cara Memasang Chatting Facebook Diblog

Cara Memasang Chatting Facebook Diblog, Bagi sobat yang berminat untuk memasang widget chatting Facebook, Silahkan Sobat menuju Kesini.
Silahkan Mendaftar, Nah setelah proses pendaftaran selesai login.
masukan alamat website anda, Kalau sobat pakai domain Blogspot.com untuk instruksinya pakai saja otdher.
Untuk pengaturannya silahkan Sobat pelajari sendiri.Kalau sudah selesai ambil javascript nya dan  simpan di atas </head>, Di simpam di gadget juga jadi.
Kalaupun sobat ga' mau ribet untuk mendaftarnya silahkan ambil saja kode Script nya di bawah dan simpan di html javascript sobat.


<!-- Envolve Chat -->
<script type="text/javascript">
var envoSn=90922;
var envProtoType = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + envProtoType + "d.envolve.com/env.nocache.js' type='text/javascript'%3E%3C/script%3E"));
</script>


Dan ini Contoh Screnshootnya:

Nah sobat blogger itulah Cara Memasang Chatting Facebook Diblog, Mudah mudahan ada yang membutuhkannya dan Semoga dapat bermanfaat.Terima kasih.

---

Read More

Cara Membuat Tanda Tangan di Bawah Postingan Blog

Cara Membuat Tanda Tangan di Bawah Postingan Blog

Kali ini saya akan membahas Cara Membuat Tanda Tangan di Bawah Postingan Blogspot. Bagi sobat yang ingin membuat tanda tangan di bawah postingan blog itu tidaklah begitu sulit. karena salah satu situs web ada yang menyediakan pembuatan tanda tangan, yaitu MyLiveSignature. Selain di blog, sobat dapat memasangnya di tempat lain seperti forum.

Bagaimana caranya langsung saja ikuti langkah-langkah di bawah :

# Cara Pertama :

1.      Kunjungi situs http://www.mylivesignature.com

2.      Lalu Pilih Menu "Start Now"

3.      Klik "Using the signature creaton wizard"

4.      Pada Step 1, Masukkan Nama tanda tangan yg nanti akan ditampilkan 
         Step 2, Pilih jenis font (huruf) yang sobat inginkan 
         Step 3, Pilih ukuran font yang sobat inginkan. 
         Step 4, Pilih warna background dan warna font. 
         Step 5, Atur kemiringannya.

5.      Dibawah, ada 3 pilihan yaitu : 
        
         - Want us to animate this signature? 

         - Want to download this signature?
         - Want to use this signature?

6.      Pilih ==> Want to use this signature?

7.      Kemudian muncul halaman baru, pilih ==> Generate HTML code. Lalu Copy kodenya.

# Cara Kedua :

==> Login akun blogger Anda 
==> Pilih Template ---> Edit HTML ---> klik Expand Template Widget 
==> Cari kode <data:post.body/> 
==> Pastekan kode yang sobat dapatkan tadi dibawah kode <data:post.body/>
==> Simpan template dan lihatlah hasilnya.

Nah, selesai sudah postingan kita tentang Cara Membuat Tanda Tangan di bawah Postingan blogspot. Semoga postingan ini bermanfaat bagi sobat blogger semua.

*** Selamat Mencoba ***

Read More

Cara Membuat Read More Otomatis Di Blogspot

Cara Membuat Read More Otomatis Di Blogspot

Sangatlah mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template anda, dengan begitu anda tidak perlu repot-repot lagi dalam hal pembuatan read more ini.

Oke langsung aja gak usah lama2 silahkan ikuti langkah-langkahnya seperti yang di bawah ini :

1.      Silahkan Login di akun blogger anda.

2.      Lalu klik Rancangan dan klik Edit HTML.

3.      Jangan lupa untuk mencentang Expand Template Widget.

4.      Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan.

5.      Kemudian Cari kode </head>.  Dan untuk mempermudah pencarian kodenya anda tekan aja ( CTRL + F )

6.      Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.

<script

 type='text/javascript'> var thumbnail_mode = "no-float" ;

summary_noimg = 430; summary_img = 340; img_thumb_height = 100;

img_thumb_width = 120; </script> <script

src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js'

type='text/javascript'/>

Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, sobat tinggal merubah di bagian-bagian kode yang berwarna merah di bawah ini, dan Ubahlah angkanya sesuai dengan keinginan.  

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar  
summary_img = 340; adalah tinggi potongan artikel dengan gambar  
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

7.      Langkah Selanjutnya cari kode <data:post.body/> lalu ganti kode <data:post.body/> tersebut dengan kode script di bawah ini :  

 <b:if cond='data:blog.pageType != &quot;item&quot;'> <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><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8.      Untuk tulisan " READ MORE " bisa diganti sesuai dengan selera Sobat.

9.      Setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Okelah sobat itulah artikel tentang Cara Membuat Read More Otomatis Di Blogspot . Mungkin bisa sedikit membantu anda. dan ingat, sebelum anda memasukan kode2 diatas sebaiknya anda backup terlebih dahulu template dengan cara download lengkap template, langkah ini untuk mengantisipasi bila anda salah memasukkan kode yang ada.

*** SEMOGA DAPAT MEMBANTU ***

Read More

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink pada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish.

Adapun cara-caranya silahkan ikuti langkah-langkah di bawah:

1.    Login ke Blogger.com --> Design --> Edit HTML 

2.    Lalu tandai kotak kecil Expand Widget 

3.    Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2

4.    Copy kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5.    Kemudian cari kode ]]></b:skin>

6.    Copy kode CSS di bawah ini tepat diatasnya kode ( ]]></b:skin> )

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

7.    Terakhir klik Save/Simpan

KETERANGAN:

* ARTIKEL TERKAIT,bisa Anda ganti sesuai keinginan...misal:Related Post,Baca Juga,dll
* maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan.

* maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
* background-color: #F2F2F2; adalah warna background kotak (bisa anda ganti sesuai keinginan)
* background-color: #EFFBEF; adalah warna background waktu disorot kursor (bisa diganti sesuai keinginan)
* http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png adalah icon didepan link (bisa diganti sesuai keinginan,usahaka size gambarnya kecil)

Sekarang silahkan coba buka blog sobat untuk memastikan apakah sudah jadi ataukah belum?

Ok... mungkin sampai disini untuk postingan tentang Cara Membuat Artikel Terkait (Related Post) Di BawahPostingan Semoga Dapat Bermanfaat.

Read More

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink pada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish.

Adapun cara-caranya silahkan ikuti langkah-langkah di bawah:

1.    Login ke Blogger.com --> Design --> Edit HTML 

2.    Lalu tandai kotak kecil Expand Widget 

3.    Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2

4.    Copy kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5.    Kemudian cari kode ]]></b:skin>

6.    Copy kode CSS di bawah ini tepat diatasnya kode ( ]]></b:skin> )

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

7.    Terakhir klik Save/Simpan

KETERANGAN:

* ARTIKEL TERKAIT,bisa Anda ganti sesuai keinginan...misal:Related Post,Baca Juga,dll
* maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan.

* maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
* background-color: #F2F2F2; adalah warna background kotak (bisa anda ganti sesuai keinginan)
* background-color: #EFFBEF; adalah warna background waktu disorot kursor (bisa diganti sesuai keinginan)
* http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png adalah icon didepan link (bisa diganti sesuai keinginan,usahaka size gambarnya kecil)

Sekarang silahkan coba buka blog sobat untuk memastikan apakah sudah jadi ataukah belum?

Ok... mungkin sampai disini untuk postingan tentang Cara Membuat Artikel Terkait (Related Post) Di BawahPostingan Semoga Dapat Bermanfaat.

Read More