Showing posts with label Blog tutorial. Show all posts
Showing posts with label Blog tutorial. Show all posts

Menyembunyikan Shoutmix ChatBox (ChatBox Hidden) Di Kiri dan Di Kanan blog

Chat Shoutmix di blog adalah hal yang sangat menguntungkan karna para pengunjung bisa berbagi informasi dengan sang pemilik blog dan juga pengunjung lainnya..
Namun, terkadang ada beberapa teman terlalu banyak memasang gadget iklan hingga tak ada tempat lagi untuk memasang fasilitas chat.

Untuk mensiasatinya maka kita buat chat dalam bentuk hidden seperti yg ada di kanan atas blog ini..

Jika
sobat belum mempunyai chat shoutmix silahkan download dulu disini

Nah, buat sobat yg ingin memasang chatbox hidden berikut langkah-langkahnya:


1. Login ke blog sobat
2. Klik Rancangan
3. Tambah Gadget
4. Cari tempat yg ingin di pasang chatbox
5. Copy kode di bawah ini dan pastekan pada Gadget sobat

Untuk ChatBox hidden Kiri
<!-- left chatbox hidden from http://landakemas.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/chatbox.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

MASUKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://landakemas.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left chatbox hidden from http://landakemas.blogspot.com/ END -->


Untuk ChatBox Hidden Kanan
<!-- right chatbox hidden from http://landakemas.blogspot.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/Chatbox-1.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

TARUH KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://landakemas.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right chatbox hidden from http://landakemas.blogspot.com/ END -->

6. Klik Simpan dan Selesai..

Sekarang lihat blog sobat, chat box shoutmix sobat udah tidak terlihat lagi

Menyembunyikan Shoutmix ChatBox (ChatBox Hidden) Di Kiri dan Di Kanan blog

Chat Shoutmix di blog adalah hal yang sangat menguntungkan karna para pengunjung bisa berbagi informasi dengan sang pemilik blog dan juga pengunjung lainnya..
Namun, terkadang ada beberapa teman terlalu banyak memasang gadget iklan hingga tak ada tempat lagi untuk memasang fasilitas chat.

Untuk mensiasatinya maka kita buat chat dalam bentuk hidden seperti yg ada di kanan atas blog ini..

Jika
sobat belum mempunyai chat shoutmix silahkan download dulu disini

Nah, buat sobat yg ingin memasang chatbox hidden berikut langkah-langkahnya:


1. Login ke blog sobat
2. Klik Rancangan
3. Tambah Gadget
4. Cari tempat yg ingin di pasang chatbox
5. Copy kode di bawah ini dan pastekan pada Gadget sobat

Untuk ChatBox hidden Kiri
<!-- left chatbox hidden from http://landakemas.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/chatbox.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

MASUKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://landakemas.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left chatbox hidden from http://landakemas.blogspot.com/ END -->


Untuk ChatBox Hidden Kanan
<!-- right chatbox hidden from http://landakemas.blogspot.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/Chatbox-1.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

TARUH KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://landakemas.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right chatbox hidden from http://landakemas.blogspot.com/ END -->

6. Klik Simpan dan Selesai..

Sekarang lihat blog sobat, chat box shoutmix sobat udah tidak terlihat lagi

Cara Membuat Header Menjadi 2 Kolom

Pada template standar dari blogger biasanya header blog kita hanya berupa 1 buah kolom header, tapi ketika kita berkunjung ke blog teman - teman yang lain terdapat 2 sampai 3 kolom header
..
Bagaimana cara membuatnya..

Oleh karena itu kali ini kita akan membahas bagaimana Cara membuat header menjadi 2 kolom yang berada di kiri dan kanan, dimana kolom header yang ada di sebelah kanan bisa kita manfaatkan untuk menaruh banner iklan atau apa saja..

Tanpa harus saya jelaskan panjang lebar lagi berikut cara membuat header menjadi 2 kolom


Berikut langkah-langkahnya:

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Jangan lupa centang Expand Template Widget

5. Cari kode css yang mirip kode di bawah ini

/* Header ===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Hapus kode tersebut dan ganti kode dibawah ini

/* Header
===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#head-inner {
width:480px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#FFFFFF;
}

#r_head {
width:480px;
float:left;
padding-top:10px;
}


6. Kemudian cari kode seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Blog (Header)' type='Header'/>
</b:section>
</div>



Hapus kode teesebut, kemudian ganti dengan kode di bawah ini :



<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik Simpan, Selesai..

Cara Membuat Header Menjadi 2 Kolom

Pada template standar dari blogger biasanya header blog kita hanya berupa 1 buah kolom header, tapi ketika kita berkunjung ke blog teman - teman yang lain terdapat 2 sampai 3 kolom header
..
Bagaimana cara membuatnya..

Oleh karena itu kali ini kita akan membahas bagaimana Cara membuat header menjadi 2 kolom yang berada di kiri dan kanan, dimana kolom header yang ada di sebelah kanan bisa kita manfaatkan untuk menaruh banner iklan atau apa saja..

Tanpa harus saya jelaskan panjang lebar lagi berikut cara membuat header menjadi 2 kolom


Berikut langkah-langkahnya:

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Jangan lupa centang Expand Template Widget

5. Cari kode css yang mirip kode di bawah ini

/* Header ===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Hapus kode tersebut dan ganti kode dibawah ini

/* Header
===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#head-inner {
width:480px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#FFFFFF;
}

#r_head {
width:480px;
float:left;
padding-top:10px;
}


6. Kemudian cari kode seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Blog (Header)' type='Header'/>
</b:section>
</div>



Hapus kode teesebut, kemudian ganti dengan kode di bawah ini :



<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik Simpan, Selesai..

Membuat Readmore Otomatis

Pada kesempatan yang lalu kita juga pernah membahas Cara Membuat Readmore atau Baca Selengkapnya dan juga Cara membuat readmore beserta judul postingan, maka kali ini kita akan membahas bagaimana Cara membuat readmore otomatis tanpa harus membagi artikel menjadi 2 bagian secara manual..

Berikut cara² nya:

1. Klik Rancangan

2. Klik Edit HTML

3. Jangan lupa centang Expand Template Widget

4. Copy kode di bawah ini dan pastekan diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150;

</script>
<script type='text/javascript'>
//<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/

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

summary_noimg = 450; adalah panjang artikel tanpa gambar,

summary_img = 360; adalah panjang artikel dengan gambar,

img_thumb_height = 120; adalah tinggi gambar,

img_thumb_width = 150; adalah lebar gambar
.


Sobat bisa menggantinya sesuai keinginan sobat

5. Jika sobat pernah membuat Readmore versi lama kembalikan kode tersebut, kemungkinan setiap template memiliki kode yg berbeda, sebagai contoh seperti ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Kode yg berwarna merah adalah kode yang harus anda hapus

6. Kemudian cari kode <data:post.body/>
ganti kode tsb dengan kode di bawah ini, jika terdapat 2 kode, taruh pada kode ke 2

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb ("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Selengkapnya…<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan Selengkapnya... bisa sobat ganti sesuai keinginan sobat seperti Readmore..., Baca selengkapnya..., atau Baca selanjutnya...

Atau sobat bisa menggantinya dengan sebuah gambar seperti ini Selengkapnya

Caranya: pada tulisan Selengkapnya.. sobat ganti dengan
kode di bawah ini

<img src='http://i737.photobucket.com/albums/xx17/arisyudha/th_selengkapnya.png' alt='Selengkapnya' />

tulisan yg berwarna merah adalah alamat url gambar di atas, jika sobat memiliki gambar sendiri, ganti alamat tersebut dengan alamat gambar milik sobat..

7. Simpan dan selesai



Selamat mencoba...!!!!!

Membuat Readmore Otomatis

Pada kesempatan yang lalu kita juga pernah membahas Cara Membuat Readmore atau Baca Selengkapnya dan juga Cara membuat readmore beserta judul postingan, maka kali ini kita akan membahas bagaimana Cara membuat readmore otomatis tanpa harus membagi artikel menjadi 2 bagian secara manual..

Berikut cara² nya:

1. Klik Rancangan

2. Klik Edit HTML

3. Jangan lupa centang Expand Template Widget

4. Copy kode di bawah ini dan pastekan diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150;

</script>
<script type='text/javascript'>
//<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/

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

summary_noimg = 450; adalah panjang artikel tanpa gambar,

summary_img = 360; adalah panjang artikel dengan gambar,

img_thumb_height = 120; adalah tinggi gambar,

img_thumb_width = 150; adalah lebar gambar
.


Sobat bisa menggantinya sesuai keinginan sobat

5. Jika sobat pernah membuat Readmore versi lama kembalikan kode tersebut, kemungkinan setiap template memiliki kode yg berbeda, sebagai contoh seperti ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Kode yg berwarna merah adalah kode yang harus anda hapus

6. Kemudian cari kode <data:post.body/>
ganti kode tsb dengan kode di bawah ini, jika terdapat 2 kode, taruh pada kode ke 2

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb ("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Selengkapnya…<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan Selengkapnya... bisa sobat ganti sesuai keinginan sobat seperti Readmore..., Baca selengkapnya..., atau Baca selanjutnya...

Atau sobat bisa menggantinya dengan sebuah gambar seperti ini Selengkapnya

Caranya: pada tulisan Selengkapnya.. sobat ganti dengan
kode di bawah ini

<img src='http://i737.photobucket.com/albums/xx17/arisyudha/th_selengkapnya.png' alt='Selengkapnya' />

tulisan yg berwarna merah adalah alamat url gambar di atas, jika sobat memiliki gambar sendiri, ganti alamat tersebut dengan alamat gambar milik sobat..

7. Simpan dan selesai



Selamat mencoba...!!!!!

Membuat Readmore Otomatis

Pada kesempatan yang lalu kita juga pernah membahas Cara Membuat Readmore atau Baca Selengkapnya dan juga Cara membuat readmore beserta judul postingan, maka kali ini kita akan membahas bagaimana Cara membuat readmore otomatis tanpa harus membagi artikel menjadi 2 bagian secara manual..

Berikut cara² nya:

1. Klik Rancangan

2. Klik Edit HTML

3. Jangan lupa centang Expand Template Widget

4. Copy kode di bawah ini dan pastekan diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150;

</script>
<script type='text/javascript'>
//<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/

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

summary_noimg = 450; adalah panjang artikel tanpa gambar,

summary_img = 360; adalah panjang artikel dengan gambar,

img_thumb_height = 120; adalah tinggi gambar,

img_thumb_width = 150; adalah lebar gambar
.


Sobat bisa menggantinya sesuai keinginan sobat

5. Jika sobat pernah membuat Readmore versi lama kembalikan kode tersebut, kemungkinan setiap template memiliki kode yg berbeda, sebagai contoh seperti ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Kode yg berwarna merah adalah kode yang harus anda hapus

6. Kemudian cari kode <data:post.body/>
ganti kode tsb dengan kode di bawah ini, jika terdapat 2 kode, taruh pada kode ke 2

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb ("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Selengkapnya…<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan Selengkapnya... bisa sobat ganti sesuai keinginan sobat seperti Readmore..., Baca selengkapnya..., atau Baca selanjutnya...

Atau sobat bisa menggantinya dengan sebuah gambar seperti ini Selengkapnya

Caranya: pada tulisan Selengkapnya.. sobat ganti dengan
kode di bawah ini

<img src='http://i737.photobucket.com/albums/xx17/arisyudha/th_selengkapnya.png' alt='Selengkapnya' />

tulisan yg berwarna merah adalah alamat url gambar di atas, jika sobat memiliki gambar sendiri, ganti alamat tersebut dengan alamat gambar milik sobat..

7. Simpan dan selesai



Selamat mencoba...!!!!!

Membuat Artikel Terkait dengan Gambar

Pada artikel sebelumnya kita membahas soal membuat artikel terkait maka kali ini kita akan membahas Cara membuat artikel terkait dalam bentuk gambar..

Baiklah, tanpa harus panjang lebar lagi berikut cara-caranya:

1. Pada RANCANGAN kemudian Edit HTML

2. Centang Expand Tempate Widget dan tunggu beberapa saat

3. Cari kode <head>

Copy kode dibawah dan paste kan diatas kode tadi

&lt;em&gt;Ampersands &amp; angle brackets need to be encoded.&lt;/em&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type=&quot;text/css&quot;&gt;
#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, &amp;#8220;Times New Roman&amp;#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;
}
&lt;/style&gt; &lt;script src='http://blogergadgets.googlecode.com/ files/relatedthumbs21.js' type='text/javascript'/&gt;
&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;



4. Kemudian
cari kode
<div class='post-footer-line post-footer-line-1'>

copy kode di bawah ini dan pastekan dibawah kode 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts- thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http:// www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


var maxresults=5;

adalah jumlah artikel yg ingin di tampilkan dalam blog sobat, dan sobat bisa menggantinya sesuai keinginan sobat

6: Selesai





Sumber: http://info-bagikita.blogspot.com

Membuat Artikel Terkait dengan Gambar

Pada artikel sebelumnya kita membahas soal membuat artikel terkait maka kali ini kita akan membahas Cara membuat artikel terkait dalam bentuk gambar..

Baiklah, tanpa harus panjang lebar lagi berikut cara-caranya:

1. Pada RANCANGAN kemudian Edit HTML

2. Centang Expand Tempate Widget dan tunggu beberapa saat

3. Cari kode <head>

Copy kode dibawah dan paste kan diatas kode tadi

&lt;em&gt;Ampersands &amp; angle brackets need to be encoded.&lt;/em&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type=&quot;text/css&quot;&gt;
#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, &amp;#8220;Times New Roman&amp;#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;
}
&lt;/style&gt; &lt;script src='http://blogergadgets.googlecode.com/ files/relatedthumbs21.js' type='text/javascript'/&gt;
&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;



4. Kemudian
cari kode
<div class='post-footer-line post-footer-line-1'>

copy kode di bawah ini dan pastekan dibawah kode 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts- thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http:// www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


var maxresults=5;

adalah jumlah artikel yg ingin di tampilkan dalam blog sobat, dan sobat bisa menggantinya sesuai keinginan sobat

6: Selesai





Sumber: http://info-bagikita.blogspot.com

Membuat Artikel Terkait dengan Gambar

Pada artikel sebelumnya kita membahas soal membuat artikel terkait maka kali ini kita akan membahas Cara membuat artikel terkait dalam bentuk gambar..

Baiklah, tanpa harus panjang lebar lagi berikut cara-caranya:

1. Pada RANCANGAN kemudian Edit HTML

2. Centang Expand Tempate Widget dan tunggu beberapa saat

3. Cari kode <head>

Copy kode dibawah dan paste kan diatas kode tadi

&lt;em&gt;Ampersands &amp; angle brackets need to be encoded.&lt;/em&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type=&quot;text/css&quot;&gt;
#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, &amp;#8220;Times New Roman&amp;#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;
}
&lt;/style&gt; &lt;script src='http://blogergadgets.googlecode.com/ files/relatedthumbs21.js' type='text/javascript'/&gt;
&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;



4. Kemudian
cari kode
<div class='post-footer-line post-footer-line-1'>

copy kode di bawah ini dan pastekan dibawah kode 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts- thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http:// www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


var maxresults=5;

adalah jumlah artikel yg ingin di tampilkan dalam blog sobat, dan sobat bisa menggantinya sesuai keinginan sobat

6: Selesai





Sumber: http://info-bagikita.blogspot.com

Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll

Artikel terkait model scroll ini berfungsi agar tampilan blog kita jadi lebih menarik dan tidak mengganggu pemandangan blog kita, Karena jika artikel terkait kita yg di tampilkan berjumlah banyak maka artikel terkait kita akan menjulur kebawah dan itu akan sangat mengganggu pemandangan blog kita..

Sebagai contoh lihat artikel terkait yang dibawah postingan ini

Untuk membuat artikel terkait model scroll seperti ini, ikuti caranya berikut ini:

1. Klik RANCANGAN kemudian Edit HTML

2. Jangan lupa centang Expand Template Widget
dan tunggu beberapa saat sampai proses selesai...

3. Cari tulisan ]]></b:skin>

copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

.rbbox { border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: #222222;-moz-border-radius:5px; margin:5px;}
.rbbox:hover { background-color: rgb(255, 255, 255);}


background-color:#22222; adalah warna background atau latar belakang artikel terkait, sobat bisa menggantinya dengan warna yg sobat inginkan, jika sobat ingin mengetahui jenis jenis kode warna silahkan Klik Disini

4. Kemudian cari <data:post.body/>
Copy kode dibawah ini dan pastekan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Baca Terkait Lainnya..</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px; height:200px; 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 = 10;
maxNumberOfPostsPerLabel = 10;
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. Simpan

height:200px; adalah tinggi kotak scroll yg ingin di tampilkan dalam blog, sobat bisa menggantinya sesuai keinginan sobat...

Selesai.. Semoga bermanfaat...

Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll

Artikel terkait model scroll ini berfungsi agar tampilan blog kita jadi lebih menarik dan tidak mengganggu pemandangan blog kita, Karena jika artikel terkait kita yg di tampilkan berjumlah banyak maka artikel terkait kita akan menjulur kebawah dan itu akan sangat mengganggu pemandangan blog kita..

Sebagai contoh lihat artikel terkait yang dibawah postingan ini

Untuk membuat artikel terkait model scroll seperti ini, ikuti caranya berikut ini:

1. Klik RANCANGAN kemudian Edit HTML

2. Jangan lupa centang Expand Template Widget
dan tunggu beberapa saat sampai proses selesai...

3. Cari tulisan ]]></b:skin>

copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

.rbbox { border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: #222222;-moz-border-radius:5px; margin:5px;}
.rbbox:hover { background-color: rgb(255, 255, 255);}


background-color:#22222; adalah warna background atau latar belakang artikel terkait, sobat bisa menggantinya dengan warna yg sobat inginkan, jika sobat ingin mengetahui jenis jenis kode warna silahkan Klik Disini

4. Kemudian cari <data:post.body/>
Copy kode dibawah ini dan pastekan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Baca Terkait Lainnya..</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px; height:200px; 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 = 10;
maxNumberOfPostsPerLabel = 10;
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. Simpan

height:200px; adalah tinggi kotak scroll yg ingin di tampilkan dalam blog, sobat bisa menggantinya sesuai keinginan sobat...

Selesai.. Semoga bermanfaat...

Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll

Artikel terkait model scroll ini berfungsi agar tampilan blog kita jadi lebih menarik dan tidak mengganggu pemandangan blog kita, Karena jika artikel terkait kita yg di tampilkan berjumlah banyak maka artikel terkait kita akan menjulur kebawah dan itu akan sangat mengganggu pemandangan blog kita..

Sebagai contoh lihat artikel terkait yang dibawah postingan ini

Untuk membuat artikel terkait model scroll seperti ini, ikuti caranya berikut ini:

1. Klik RANCANGAN kemudian Edit HTML

2. Jangan lupa centang Expand Template Widget
dan tunggu beberapa saat sampai proses selesai...

3. Cari tulisan ]]></b:skin>

copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

.rbbox { border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: #222222;-moz-border-radius:5px; margin:5px;}
.rbbox:hover { background-color: rgb(255, 255, 255);}


background-color:#22222; adalah warna background atau latar belakang artikel terkait, sobat bisa menggantinya dengan warna yg sobat inginkan, jika sobat ingin mengetahui jenis jenis kode warna silahkan Klik Disini

4. Kemudian cari <data:post.body/>
Copy kode dibawah ini dan pastekan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Baca Terkait Lainnya..</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px; height:200px; 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 = 10;
maxNumberOfPostsPerLabel = 10;
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. Simpan

height:200px; adalah tinggi kotak scroll yg ingin di tampilkan dalam blog, sobat bisa menggantinya sesuai keinginan sobat...

Selesai.. Semoga bermanfaat...

Postingan Blog Otomatis Ke Twitter dan Facebook


Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini Lovelizzers akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...


Semoga bermanfaat ya..

Postingan Blog Otomatis Ke Twitter dan Facebook


Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini Lovelizzers akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...


Semoga bermanfaat ya..

Postingan Blog Otomatis Ke Twitter dan Facebook


Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini Lovelizzers akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...


Semoga bermanfaat ya..

Postingan Blog Otomatis Ke Twitter dan Facebook


Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini Lovelizzers akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...


Semoga bermanfaat ya..