Memasang Related Post + Thumbnail dari Linkwithin

Jika sobat blogger bosan dengan related post yang saya tulis kemarin, kali ini saya memberi alternatif lain tentang related post yang dilengkapi dengan image thumbnail. Widget related post ini merupakan layanan dari Linkwithin.

read more “Memasang Related Post + Thumbnail dari Linkwithin”

Menambahkan Nomor Urut pada Komentar Blog

Nomor urut komentar pada wordpress sudah tidak asing lagi bukan ? Tapi bagaimana dengan blogger ? Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan nomor urut komentar. Seperti kita ketahui bahwa blogger/blogspot memiliki kelebihan dibanding wordpress pada web gratisannya.
Selain bisa mengubah desain template sesuka hati kita kita juga bisa mengubah-ubah widget (plugins). Salah satunya dengan menambahkan nomor pada komentar blog kita di blogspot/blogger. Sebelumnya jangan lupa mengcopy script widgetnya untuk backup jika terjadi apa-apa

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Tekan ctrl + F cari kode <dl id='comments-block'> . Kemudian tambahkan kode warna merah diantara kode-kode <dl id='comments-block'>, seperti yang terlihat dibawah ini:

<dl id='comments-block'>



<script type='text/javascript'>var
CommentsCounter=0;</script>



<b:loop values='data:post.comments' var='comment'>



<div class='' expr:id='data:comment.id'>



<dt expr:class='"comment-author " + data:comment.authorClass'
expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>



<span class='comment-number'>

<a expr:href='"#comment-" +
data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>



</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>



</div>



</b:loop>

</dl>

Untuk mempercantik nomor urut komentar, kita bisa menambahkan kode CSS sebelum kode

]]></b:skin>

.comment-number {

float: right;

background: url(http://img24.imageshack.us/img24/875/iconcomments3.png) no-repeat;

width:50px;

height:50px;

margin-right: 15px;

margin-top: -35px; /*posisi nomor urut*/

text-align: center;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 18px;

font-weight: bold;

}



/*warna nomor urut*/



.comment-number a:link, .comment-number a:visited {

color: #445566 !important;

text-decoration: none !important;

}

.comment-number a:hover, .comment-number a:active {

color: #FF9933 !important;

text-decoration: none !important;

}

Kode warna merah adalah background untuk nomor urut, jika sobat blogger tidak ingin memberi background tersebut kode warna merah bisa dihapus atau mungkin diganti dengan gambar background milik sobat blogger sendiri. Happy Blogging!!

Sumber: Fernandooo1

read more “Menambahkan Nomor Urut pada Komentar Blog”

Mempercantik Related Post dengan CSS

Berikut adalah langkah untuk mempercantik related post dengan CSS. Ada baiknya sobat blogger kunjungani artikel Memasang Related Post

1. Login --->>> Tata Letak --->>> Edit HTML.
2. Centang "Expand widgets template".

3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin>

<script type=”‘text/javascript’”>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == ‘alternate’) {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;

}

}

}

}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

}

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length – 1) * Math.random());

var i = 0;

document.write(’<ul>’);

while (i < relatedTitles.length &amp;&amp; i < 20) {

document.write(’<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] +
‘</a></li>’);

if (r < relatedTitles.length – 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write(’</ul>’);

}

//]]>

</script>

4. Letakkan kode CSS dibawah ini diatas kode javascript di atas

<style>

#related-posts {
background-color : #fff;
padding : 5px;
background-image : url(http://i33.tinypic.com/10moayf.jpg);
background-repeat : repeat-x;
width : 595px;
margin-bottom : 5px;
border : 1px solid #f3ddac;
overflow : hidden;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 0 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
padding : 5px;
text-align : left;
font : 12px/34px "Georgia";
text-transform : uppercase;
color : black;
background-color : white;
padding : 3px;
padding-left : 8px;
padding-right : 8px;
color : black;
font-size : 1.2em;
font-weight : bold;
}
#related-posts a {
background: #FFFFFF url('http://img23.imageshack.us/img23/5769/1556xrb.png') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
text-decoration : none;
}
#related-posts a:hover {
background: #cccccc url('http://img23.imageshack.us/img23/5769/1556xrb.png') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 3px;
padding : 0;
display : block;
}

</style>

Untuk yang sudah mengikuti artikel Memasang Related Post, ga perlu mengikuti langkah dibawah ini

5. Cari Kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>

6. Setelah itu letakkan kode dibawah ini dibawah kode tersebut (langkah no 5)

<!--RELATED-POSTS-STARTS-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font face='Arial' size='3'><b>Related Posts: </b></font><font
color='#FFFFFF'><b:loop values='data:post.labels'
var='label'><data:label.name/><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&amp;max-results=5&quot;'
type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script></div></b:if>

<!--RELATED-POSTS-STOPS-->

Kode warna hijau merupakan kode untuk mengatur jumlah postingan yang ada di related post. Silahkan ganti dengan selera sobat Blogger

7. Setelah selesai kemudian Simpan. Hasilnya seperti ini :

Coba bandingkan dengan related post pada artikel sebelumnya... Lebih keren kan... :P

Happy Blogging...!!

read more “Mempercantik Related Post dengan CSS”

Menampilkan Emoticon Sendiri di Atas Kotak Komentar

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui emoticon. Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di kotak komentar. Cara mengakalinya sebagai berkut:

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Tekan ctrl + F cari kode </body> dan letakkan kode dibawah ini diatas kode </body>

<script type='text/javascript'>

//<![CDATA[



a = document.getElementsByTagName('LABEL');

if(a) {

for(i=0; i < a.length; i++) {

_str = a.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://img198.imageshack.us/img198/2177/ngakakn.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img
src='http://img691.imageshack.us/img691/2395/teriak.gif' alt=''
class='smiley'/>");

_str = _str.replace(/~\x\(/gi, "<img
src='http://img691.imageshack.us/img691/3571/stres.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\D/gi, "<img
src='http://img688.imageshack.us/img688/2440/sebel.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\@/gi, "<img
src='http://img198.imageshack.us/img198/2442/puyeng.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://img514.imageshack.us/img514/959/baguus.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:x/gi, "<img
src='http://img695.imageshack.us/img695/8913/marah.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\|/gi, "<img
src='http://img517.imageshack.us/img517/2529/maluku.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\$/gi, "<img
src='http://img8.imageshack.us/img8/4081/lovewb.gif' alt='' class='smiley'/>");

_str = _str.replace(/:f/gi, "<img
src='http://img8.imageshack.us/img8/765/kringet.gif' alt='' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img
src='http://img23.imageshack.us/img23/8230/yesxp.gif' alt='' class='smiley'/>");

_str = _str.replace(/:\*/gi, "<img
src='http://img8.imageshack.us/img8/2043/kagum.gif' alt='' class='smiley'/>");

_str = _str.replace(/=\(/gi, "<img
src='http://img196.imageshack.us/img196/8930/jongkok.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:D/gi, "<img
src='http://img196.imageshack.us/img196/3552/hihihiu.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://img517.imageshack.us/img517/4159/mangu.gif' alt=''
class='smiley'/>")

a.item(i).innerHTML = _str;

}

}



a = document.getElementById('comments');

if(a) {

b = a.getElementsByTagName("DD");

for(i=0; i < b.length; i++) {

if (b.item(i).getAttribute('CLASS') == 'comment-body')
{

_str = b.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://img198.imageshack.us/img198/2177/ngakakn.gif'
alt='' class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img src='http://img691.imageshack.us/img691/2395/teriak.gif'
alt='' class='smiley'/>");

_str = _str.replace(/~\x\(/gi, "<img
src='http://img691.imageshack.us/img691/3571/stres.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\D/gi, "<img
src='http://img688.imageshack.us/img688/2440/sebel.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\@/gi, "<img
src='http://img198.imageshack.us/img198/2442/puyeng.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://img514.imageshack.us/img514/959/baguus.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:x/gi, "<img
src='http://img695.imageshack.us/img695/8913/marah.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\|/gi, "<img
src='http://img517.imageshack.us/img517/2529/maluku.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\$/gi, "<img
src='http://img8.imageshack.us/img8/4081/lovewb.gif' alt='' class='smiley'/>");

_str = _str.replace(/:f/gi, "<img
src='http://img8.imageshack.us/img8/765/kringet.gif' alt='' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img
src='http://img23.imageshack.us/img23/8230/yesxp.gif' alt='' class='smiley'/>");

_str = _str.replace(/:\*/gi, "<img
src='http://img8.imageshack.us/img8/2043/kagum.gif' alt='' class='smiley'/>");

_str = _str.replace(/=\(/gi, "<img
src='http://img196.imageshack.us/img196/8930/jongkok.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:D/gi, "<img
src='http://img196.imageshack.us/img196/3552/hihihiu.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://img517.imageshack.us/img517/4159/mangu.gif' alt=''
class='smiley'/>")

b.item(i).innerHTML = _str;

}

}

}



a = document.getElementById('comments');

if(a) {

c = a.getElementsByTagName("DD");

for(i=0; i < c.length; i++) {

if (c.item(i).getAttribute('CLASS') == 'komentarku-Body')
{

_str = c.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'
alt='' class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'
alt='' class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:p/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt=''
class='smiley'/>");

_str = _str.replace(/\;\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\(/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:d/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt=''
class='smiley'/>")

c.item(i).innerHTML = _str;

}

}

}



//]]>

</script>

Kode yang berwarna merah adalah kode id CSS untuk menampilkan komentar di template saya. Karena di settingan template ku, saya pasang Author Comment Highlight (lihat artikel ini) maka ada dua tampilan komentar, yaitu komentar pengunjung blog dan pemilik blog. Untuk pengunjung blog saya pasang head onion emoticon (class comments-body), sedangkan untuk pemilik blog saya pasang yahoo emoticon (class komentarku-Body).

Kode yang berwarna hijau adalah kode alamat url hosting image saya. Untuk mencegah kelebihan bandwith di hostingan saya, silahkan ganti kode warna hijau dengan alamat url hostingan sobat blogger. O ya.. sobat blogger bisa memasang emoticon apa saja, tidak harus pasang head onion emoticon dan yahoo emoticon seperti punya saya. Silahkan ekspresikan emoticon kalian sendiri.

Kode yang berwarna biru adalah kode pemanggilan emoticonnya. Silahkan ganti dan expresikan pemanggilan emoticon kalian sendiri.

Jika Sudah Sekarang Cari kode yang mirip di bawah ini

<p
class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

Nah Kalau Sudah Ketemu masukkan kode berikut di bawah kode <p class='comment-footer'>

<p
class='comment-footer'>

<div style='-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial; width: 200; text-align: center; border: 0px solid #90be35;
padding: 5px; background: #ffffff; height:350'>

<b>

<img src="mem-poskan-komentar-di-blog_files/ngakakn.gif" border="0">

:))

<img src="mem-poskan-komentar-di-blog_files/teriak.gif" border="0">

x(

<img src="mem-poskan-komentar-di-blog_files/stres.gif" border="0">

~x(

<img src="mem-poskan-komentar-di-blog_files/sebel.gif" border="0">

x((

<img src="mem-poskan-komentar-di-blog_files/puyeng.gif" border="0">

:@

<img src="mem-poskan-komentar-di-blog_files/baguus.gif" border="0">

:)

<img src="mem-poskan-komentar-di-blog_files/marah.gif" border="0">

:x

<img src="mem-poskan-komentar-di-blog_files/maluku.gif" border="0">

:|

</b>

<br>

<b>

<img
src="mem-poskan-komentar-di-blog_files/lovewb.gif" border="0">

:$

<img src="mem-poskan-komentar-di-blog_files/kringet.gif" border="0">

:f

<img src="mem-poskan-komentar-di-blog_files/kagum.gif" border="0">

:*

<img src="mem-poskan-komentar-di-blog_files/jongkok.gif" border="0">

=(

<img src="mem-poskan-komentar-di-blog_files/hihihiu.gif" border="0">

:D

<img src="mem-poskan-komentar-di-blog_files/mangu.gif" border="0">

:?

<img src="mem-poskan-komentar-di-blog_files/yesxp.gif" border="0">

;;)

</b>

</div>

<b:if
cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

Langkah terakhir tinggal SIMPAN

read more “Menampilkan Emoticon Sendiri di Atas Kotak Komentar”

Memasang Related Post di Blogger

Fungsi dari artikel berhubungan atau related post adalah memberi rujukan kepada pengunjung untuk membuka artikel yang lain di blog kita. Related post akan memunculkan judul postingan dengan label yang sama. Untuk membuat related post ini, silahkan sobat blogger ikuti langkah-langkah berikut:

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin>

<script type=”‘text/javascript’”>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == ‘alternate’) {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;

}

}

}

}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

}

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length – 1) * Math.random());

var i = 0;

document.write(’<ul>’);

while (i < relatedTitles.length &amp;&amp; i < 20) {

document.write(’<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] +
‘</a></li>’);

if (r < relatedTitles.length – 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write(’</ul>’);

}

//]]>

</script>

4. Cari Kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>

5. Setelah itu letakkan kode dibawah ini dibawah kode tersebut (langkah no 4)

<!--RELATED-POSTS-STARTS-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font face='Arial' size='3'><b>Related Posts: </b></font><font
color='#FFFFFF'><b:loop values='data:post.labels'
var='label'><data:label.name/><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&amp;max-results=5&quot;'
type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script></div></b:if>

<!--RELATED-POSTS-STOPS-->

Kode warna hijau merupakan kode untuk mengatur jumlah postingan yang ada di related post. Silahkan ganti dengan selera sobat Blogger

6. Setelah selesai kemudian Simpan. Hasil nya seperti ini:

Happy Blogging!!

read more “Memasang Related Post di Blogger”

Memasang Album Foto Slide Show

Apabila sobat blogger ingin memasang album photo sobat blogger dengan tampilan slide di dalam blog pribadi agar lebih menarik dan interaktif dapat login di http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :

1. Silahkan daftar di situs www.slide.com. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)

2. Masukan alamat email sobat pada kolom yang disediakan dan isi juga password yang diinginkan

3. Jika sudah, silahkan klik tombol Sign Up, dan otomatis sobat sudah masuk ke halaman account sobat blogger

4. Langkah selanjutnya adalah melakukan pembuatan animasi

5. Klik style, untuk memilih gaya dari animasi

6. Klik skin, untuk memilih bingkai animasi

7. Klik Size untuk memilih ukuran

8. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan

9. Klik tombol Upload untuk melakukan proses upload foto

10. Jika proses upload selesai, klik tombol Save

11. Copy kode HTML yang di berikan, lalu paste pada program notepad

12. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser

13. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat blogger, nah untuk cara memasukan kode HTML sudah sering saya bahas pada postingan terdahulu.

Contoh Slide Photo nya:

read more “Memasang Album Foto Slide Show”

Memasang Widget Buku Tamu atau Shoutbox

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting, karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara pemilik blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang sobat blogger buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog sobat blogger.

Situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com.

Untuk caranya silahkan sobat blogger ikuti langkah-langkah berikut ini :


1. Masuk ke situs http://www.shoutmix.com. Seperti biasa sobat blogger harus daftar terlebih dahulu dengan mengklik tulisan create shoutbox, silahkan sobat blogger tulis data-data sobat blogger pada form yang telah di sediakan.

2.Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan sobat blogger login dengan id sobat blogger

3.Pada kolom yang berjudul Display, klik menu Style & Colors untuk mengatur tampilan Shoutbox


4.Untuk mendapatkan kode HTML dari shoutbox sobat blogger, silahkan klik Get codes yang berada di bawah menu Quick Start

5. Pada Shoutbox size, isi lebar dan tinggi shoutbox yang di inginkan

6. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad sobat blogger

7. Sign in di blogger dengan id sobat --> Klik menu Tata Letak--> Klik menu Elemen Halaman -->Klik Tambah Gadget pilih widget HTML/JavaScript. Setelah itu paste kode HTML yang di copy tadi. Selesai deh.. :)



Happy Blogging :)

read more “Memasang Widget Buku Tamu atau Shoutbox”