Memasang Related Post + Thumbnail dari Linkwithin
Selasa, 01 Desember 2009
Menambahkan Nomor Urut pada Komentar Blog
Senin, 30 November 2009
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>
.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
Mempercantik Related Post dengan CSS
Minggu, 29 November 2009
1. Login --->>> Tata Letak --->>> Edit HTML.
2. Centang "Expand widgets template".
<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 && 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 == "item"'>
<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 !=
"true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=5"'
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...!!
Menampilkan Emoticon Sendiri di Atas Kotak Komentar
Jumat, 27 November 2009
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".
<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
Memasang Related Post di Blogger
1. Login --->>> Tata Letak --->>> Edit HTML.
2. Centang "Expand widgets template".
<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 && 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>
5. Setelah itu letakkan kode dibawah ini dibawah kode tersebut (langkah no 4)
<!--RELATED-POSTS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<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 !=
"true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=5"'
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!!
Memasang Album Foto Slide Show
Minggu, 22 November 2009
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:
Memasang Widget Buku Tamu atau Shoutbox
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.
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 :)
Membuat Style Pengantar Komentar
Rabu, 18 November 2009
Semua pasti tahu bagaimana membuat pengantar komentar pada blogspot. Karena memang sudah disediakan dalam dashboard blogger.com dibagian pengaturan. Tinggal mengisinya dan tampillah pengantar komentar yang sudah dimasukkan. Tapi sayangnya fasilitas ini hanya memperbolehkan memasukkan text dan sedikit tag HTML saja sehingga tag style tidak akan bisa diterima.
Terlihat bahwa Pengantar kotak komentar nya dapat di sisipkan gambar, diberi marquee dan link, yang jika tidak diberi style CSS maka hal ini tidak bisa dibuat. Untuk lebih jelasnya silahkan buka ateonsoft.com.
gunakan style pada blog ini. Jadi kalau kurang sesuai dengan template sobat blogger silahkan saja diedit. Mari kita mulai..
Pada edit template blogger silahkan dicari kode ]]></b:skin> dan kalau sudah
ketemu letakkan kode dibawah ini diatasnya. O iya jangan lupa centang pilihan Expand Widget Templates
/*-- Form Comments style by ateonsoft.com--*/
#pra-comment{clear:both;padding:10px;font:normal 9px
sans-serif;text-align:justify;border:1px solid #EFF0F1;margin:0 10px 5px 0;
line-height: 1.1em;}
#pra-comment a{ font-weight:bold;}
#pra-comment a:hover{letter-spacing:1px; text-decoration:none;}
#pra-comment b{color: #000000;}
#pra-comment em b{Color:#ff0000;}
Kalau sudah silahkan cari barisan kode seperti dibawah ini:
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'
height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
Bisa jadi barisan kode pada template sobat blogger tidak sama persis dengan diatas, tapi yang perlu diperhatikan hanya kode berwarna merah saja. Kalau sudah ketemu silahkan kode berwarna merah diganti dengan kode dibawah ini:
<div id='pra-comment'><data:blogCommentMessage/></div>
Sekarang simpan template sobat blogger. Sampai disini Sebenarnya sudah selesai. Hanya tinggal memasukkan pesan komentar pada menu pengaturan-komentar (lihat gambar diatas). Agar maksimal pengaturan yang sudah dibuat coba sobat blogger masukkan text yang dilengkapi tag HTML dibawah ini pada pesan formulir komentar sobat blogger, edit belakangan saja yang penting tahu akibat efeknya dulu.
Sumber: ateonsoft.com
Mempercantik Kotak Komentar
Kode untuk mengatur kotak komentar di template minima ada di tag :
<div class="comment-form">
kotak komentar
</div>
Oleh karena itu, untuk mempercantik kotak komentar tersebut saya tambahkan kode CSS.
Cari kode]]></b:skin>. Copy kode dibawah ini diatas kode]]></b:skin>
.comment-form {
background:#DCC4DE;
border:5px solid #8C748F;
}
Jika tampilan di sobat blogger seperti ini
Kalau kita perhatikan tanda panah, maka yang terlihat:
.comment-form {
background:#DCC4DE;
border:5px solid #8C748F;
margin:0 10px 20px 10px;
padding:0 0 0 15px;
}
Caranya seperti ini:
.comment-form {
background:transparent url
(http://lh4.ggpht.com/jaloee/SJ3vZ2an3LI/
AAAAAAAACYY/pIG3okitsFY/kataku_form02.jpg)
no-repeat left top;
border:0px solid #8C748F;
margin:10px 10px 20px 10px;
padding:65px 0 0 20px;
}
Sumber: Jaloe
Membuat Komentar Pemilik Blog Beda (2)
Sebenarnya sangat banyak variasi kode pada template karena memang terserah pada pembuatnya mau menggunakan kode apa. Hanya saja pasti ada bagian yang sama pada tiap template blogspot sebab kode itu adalah kode pemanggilan data yang ada di database blogger. Oleh karena itu kode itulah yang harus dicari. Begitu juga dengan komentar. Nah bagian isi komentar pada kode XML blogger (template) selalu menggunakan kode dibawah ini, kode inilah yang harus dicari.
<data:comment.body/>
Silahkan cari dengan kode tadi. Jika belum disisipkan kode untuk tampilan beda komentar pemilik, biasanya kode tersebut muncul 2 kali.
Baik kita lanjutkan, setelah kode diatas ketemu perhatikan barisan kode disekitarnya (atas dan bawah kode tadi), karena bisa bervariasi. Saya tidak mungkin menuliskan disini semua variasi kode yang mungkin dipakai, tapi saya contohkan dari penggunaan variasi kode yang berbeda dengan template blogspot pada umumnya. Perhatikan barisan kode dibawah ini:<b:loop values='data:post.comments' var='comment'>
<a expr:name='"comment-" + data:comment.id'/>
<div class='comment-top'>
<div class='message-by'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='comment-bottom'>
<div class='message-entry'>
<b:if cond='data:comment.isDeleted'>
<em><data:comment.body/></em>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<div class='message-time'><span>
<data:comment.timestamp/>
</span></div>
</div>
</div>
</div>
</b:loop>
Saya tahu ini akan sulit dimengerti, tapi saya tidak punya cara lain menjelaskan jika anda tidak memiliki dasar pengetahuan HTML tentu akan sulit sekali memahami penjelasan saya ini. Hanya saja jika memang template anda memiliki barisan kode seperti diatas, maka tinggal disisipkan kode warna hijau termasuk merah yang ada didalamnya sehingga menjadi seperti dibawah ini:
<b:loop values='data:post.comments' var='comment'>
<a expr:name='"comment-" + data:comment.id'/>
<div class='comment-top'>
<div class='message-by'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='comment-bottom'>
<b:if cond='data:comment.author == data:post.author'>
<div class='komentarku-Body'>
<p><data:comment.body/></p>
<div class='message-time'><span>
<data:comment.timestamp/>
</span></div>
</div>
<b:else/>
<div class='message-entry'>
<b:if cond='data:comment.isDeleted'>
<em><data:comment.body/></em>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<div class='message-time'><span>
<data:comment.timestamp/>
</span></div>
</div>
</b:if>
</div>
</div>
</b:loop>
Sama seperti pada template biasa maka perlu juga ditambahkan diatas kode ]]></b:skin> kode stylenya. Masukkan kode dibawah ini diatas kode ]]></b:skin>
.komentarku-Body {background:
#000000; color:#ffffff; font-family:arial,
"verdana";text-align:justify; margin:0;padding:0 0 0 25px;}
Sumber: ateonsoft.com
Memasang Kalender di Blog
1. Copy kode yang ada pada kolom To get this Calendar dalam notepad
2. Sign in di blogger dengan id sobat
3. Klik menu Tata Letak
4. Klik menu Elemen Halaman
5. Klik Tambah Gadget pilih widget HTML/JavaScript. Setelah itu
paste kode HTML yang di copy tadi. Selesai deh.. :)
Happy Blogging!!
Membuat Komentar Pemilik Blog Beda
Selasa, 17 November 2009
Membedakan tampilan komentar pemilik dengan pengujung atau sering disebut Author Comment Highlight tentu akan mempermudah pengunjung lain untuk melihat mana komentar dari pengunjung blog dan mana komentar pemilik blog.
Pertama:
Template Widget
silahkan cari barisan kode seperti dibawah ini:
<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>
Jika sudah ketemu silahkan sisipkan kode warna merah seperti dibawah ini:
<b:if cond='data:comment.author ==
data:post.author'>
<dd class='komentarku-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
Kalau sudah disisipkan cari lagi kode dibagian atas yaitu kode ]]></b:skin> kalau sudah ketemu silahkan letakkan kode dibawah ini diatasnya.
.komentarku-Body {background: #000000;
color:#ffffff; font-family:arial,
"verdana";text-align:justify; margin:0;padding:0 0 0 25px;}
Pada kode diatas saya atur warna dasar hitam dan tulisan warna text putih. Silahkan disesuaikan warna pada kode yang saya tandai merah
Membuat Recent Comments pada Blogger
Beginilah cara membuat Recent Comments (Komentar Terbaru):
CARA PERTAMA (Dengan menggunakan feed komentar)
- Buka Dashboard blog sobat blogger
- Klik Tata Letak, lalu pilih Page Elements
- Klik Tambah Gadget, lalu pilih Feed
- Pada jendela Configure Feed, masukkan feed komentar blog sobat blogger.
Contoh: http://kupas-blogger.blogspot.com/feeds/comments/default
- Klik LANJUTKAN
- Silahkan isi Judul, jumlah komentar yang ditampilkan, tanggal, sumber pemberi komentar lalu klik SIMPAN
- Selesai
CARA KEDUA (Dengan menggunakan javascript)
1. Login ke blogger lalu pilih menu "Tata Letak"
2. Kemudian copy script berikut ini :
<script style="text/javascript"
src="http://h1.ripway.com/minosgrande/comments.js"></script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://kupas-blogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
- Angka 5 merupakan jumlah komentar yang mau ditampilkan.
- Ganti kupas-blogger.blogspot.com dengan nama blogmu.
3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript"
Lalu masukkan script diatas kedalam kotak yg disediakan. Selesai deh...
Membuat Recent Post di Blogger
Caranya pasang tinggal di copy saja script dibawah ini, paste code tersebut dan masukan pada halaman element blogger dan tambah gadget HTML/JavaScript.
<script style="text/javascript"
src="http://h1.ripway.com/minosgrande/recent-post.js"></script><script
style="text/javascript">var numposts = 5;var showpostdate = true;var
showpostsummary = true;var numchars = 100;var standardstyling =
true;</script><script
src="http://kupas-blogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Cara Praktis Membuat Menu dengan List-O-Matic
1. Masuk situs List-O-Matic
2. Selanjutnya, misalnya sobat blogger ingin membuat menu: home, article, download, galeri, dsb... Silahkan isi Link text dan Address/URL nya yang sobat blogger inginkan (Konsepnya sama dengan membuat link MS Office). Jika ingin menambah menu, dapat di klik Add top level navigation item.
3. Setelah selesai mengisi kemudian klik "I,m done...". Akan muncul tampilan:
4. Pilih tampilan menu yang disediakan List-O-Matic sesuai dengan selera sobat blogger
5. Setelah memilih akan tampil kode CSS dan HTML nya
6. Copy kode CSS tersebut diatas kode ]]></b:skin> pada template sobat blogger dan SIMPAN
7.Copy kode HTML tersebut di tambah gadget HTML/JavaScript pada Elemen Laman
Happy Blogging :)
Mem poskan Komentar di Blog
Minggu, 15 November 2009
1. Pertama-tama sobat blogger mengisi komentar sobat blogger di dalam teks box.
3. Silahkan menuliskan komentar sobat blogger pada opsi Google/Blogger untuk sobat blogger yang memiliki akun Google/Blogger. Bagi yang memiliki blog selain Blogger, bisa juga pilih akun yang sesuai dengan blog/website sobat blogger (LiveJournal, WordPress, TypePad, AIM, OpenID). Kemudian silahkan masukkan URL blog/website sobat blogger pada kotak yang tersedia.
Atau sobat blogger bisa memilih opsi Name/URL, lalu tulis Nama dan URL blog/website sobat blogger pada kotak yang tersedia. Jika sobat blogger tidak punya blog/website, kolom URL boleh dikosongi.
Gunakan opsi 'Anonymous' jika sobat blogger tidak ingin mempublikasikan diri sobat blogger.
Memasang photo profil
Apabila sobat blogger ingin menampilkan photo profil sobat blogger di setiap komentar, maka cara nya seperti ini (Khusus untuk yang memiliki akun Blogger):
1. Klik PRATINJAU pada kotak komentar, maka akan keluar tampilan sebagai berikut:
2. Jika sobat blogger sudah memasang photo profil di profil blog sobat blogger maka secara otomatis akan keluar..tetapi jika sobat blogger belum memasang photo profil maka cuma akan keluar logo blogger.. Hasil akhirnya seperti ini :
Untuk lebih jelasnya.. silahkan pos kan komentar sobat blogger di blog ini.... :)
Membuat Menu Horisontal pada Blog
1. Login ke akun Blogspot sobat blogger
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template sobat blogger dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, sobat blogger bisa mengembalikannya dengan menguploadnya kembali.
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode </b:skin> ,
6. Tambahkan kode CSS di bawah ini sebelum kode </b:skin> :
/* ----- LINKBAR ----- */
#NavbarMenu{ background:#000
url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800)
repeat-x; width:960px; height:40px; color:#cccccc;
margin:0 auto; padding:0; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuleft{ width:650px; float:left; margin:0; padding:0;}
#search{ width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{ margin:0; padding-top:3px;}
#nav ul{ float:left; list-style:none; margin:0; padding:0;}
#nav li{ list-style:none; margin:0; padding:0;}
#nav li a, #nav li a:link, #nav li a:visited{ color:#cccccc; display:block;
text-transform:uppercase; margin:0; padding:9px 15px 8px; font:bold 12px Arial,
Times New Roman;}
#nav li a:hover, #nav li a:active{ background:#6b6a6a; color:#FFF; margin:0;
padding:9px 15px 8px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{ background: #6b6a6a;
width:150px; color:#e5e3e3; text-transform:lowercase; float:none; margin:0;
padding:7px 10px; border-bottom:1px solid #151f23; border-left:1px solid
#151f23; border-right:1px solid #151f23; font:normal 14px Georgia, Times New
Roman;}
#nav li li a:hover, #nav li li a:active{ background:#4c4b4b; color:#fff;
padding:7px 10px;}
#nav li{ float:left; padding:0;}
#nav li ul{ z-index:9999; position:absolute; left:-999em; height:auto;
width:170px; margin:0; padding:0;}
#nav li ul a{ width:140px; }
#nav li ul ul{ margin:-32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{ position:static;}
#searchbox{ padding:0; margin:0;}
#search input{ background:#ffffff; color:#000000; float:left;margin:10px 0 0
10px; width:178px; padding:3px 7px; border:1px solid #484848; font:normal 11px
arial, verdana, Times New Roman; }
#search .btn{ margin:7px 0 0 3px; padding:0; width:auto; border:0; }
Sesuaikan lebar kode CSS yang berwarna merah dalam menu
horizontal tersebut dengan mengganti kode tersebut sesuai dengan lebar template
sobat blogger
7. Setelah itu, cari kode:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing templates (Header)'
type='Header'/>
</b:section>
</div>
8. Jika sudah ketemu, silahkan copy kode di bawah ini dan letakkan diatas kode dalam langkah 7
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20DIARY'>MY DIARY</a></li>
<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20PHOTO'>MY PHOTO</a></li>
<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20PROFILE'>MY PROFILE</a></li>
</ul>
</div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value ==
"") {this.value = "Search...";}' onfocus='if (this.value ==
"Search...") {this.value = ""}' type='text'
value='Search...'/>
<input class='btn' name=''
src='http://lh5.ggpht.com/_pt7i0nbIOCY/Sm5QQKgWjUI/AAAAAAAACJ0/XS493LrfKqs/search_thumb%5B1%5D.png?imgmax=800'
type='image' value='Go'/>
</form>
</div>
</div>
9. Klik tombol SIMPAN TEMPLATE.
Memasang Widget Jam
1. Jika sudah berada pada situs tersebut, silahkan klik tab Gallery
2. Silahkan sobat blogger melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
3. Jika di rasa sudah menemukan model jam yang sobat blogger sukai, klik tulisan View HTML tag yang berada di bawah jam yang sobat blogger sukai tadi (seperti yang ditunjukkan tanda panah merah) .Klik tombol yang bertuliskan Accept
4. Setelah itu, muncul tampilan seperti ini:
5. Pilih waktu yang sesuai dengan tempat sobat blogger di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
6. Set ukuran jam yang sobat blogger sukai di samping tulisan size
7. Copy kode HTML yang di berikan pada notepad
8. Silahkan Login ke blogger dengan id sobat blogger. Klik menu Tata Letak
kemudian klik Elemen Laman
9. Klik Tambah Gadget pilih widget HTML/JavaScript. Setelah itu paste kode HTML yang di copy tadi. Selesai deh.. :)
Selamat mencoba.
Mengelompokkan Artikel Blog dengan Label
1. Login ke situs blogger milik sobat blogger. Kemudian setelah login, dari menu Dashboard, sobat blogger dapat mengklik tab posting.
2. klik tulisan edit entri kemudian centang artikel sobat blogger yang ingin dikelompokkan, kemudian pada menu dropdown yang bertuliskan Aksi Label... klik tanda panah ke bawah dan klik Label baru kemudian akan keluar tampilan seperti ini:
3. Silahkan beri nama label sesuai sobat blogger inginkan dan klik OK. Jadi deh... :)
Mengedit Profil Blog
1. Klik menu Dasboard
2. Klik menu Edit Profile
3. Silahkan isi di dalam form - form isian profile
4. Untuk menguplod foto profil : Pada tulisan Photo URL, copy alamat link URL foto sobat blogger lalu paste di Profile Blogger.com pada kolom Photo URL
5. Klik Save Profile
6. Selesai
Membuat Embedded Comment Form
Untuk memasang Embedded Comment Form pertama login dulu ke http://draft.blogger.com/ kemudian pada halaman "Pengaturan" pilih tab "Komentar" setelah itu tuju ke "Penempatan Formulir Komentar" jangan lupa beri tanda centang pada "disematkan di bawah entry" jangan lupa disimpan dan lihat hasilnya.
Kalo cara diatas sudah berhasil artikel dibawah ini tidak perlu dilanjutkan.
Perlu diketahui sebelum mencoba fitur ini kadang tidak langsung berhasil pada template yang sudah di modifikasi, untuk blog yang belum di modifikasi saya rasa tidak ada masalah. Untuk mengatasi masalah ini blogger memberikan cara yang terbilang kurang baik, yaitu dengan cara menghapus coding <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> kemudian menempatkan kembali kodenya pada posisi semula. Cara ini sebenarnya tidak menghapus element halaman post, jika tetap dipaksakan kita akan kehilangan settingan sebelumnya.
Untuk solusinya coba masuk ke halaman Tata letak - Edit HML (jangan lupa beri tanda centang pada Expand Template Widget).
Cari kode dibawah ini: (Kadang setiap template agak berbeda jadi focus saja ke kode yang warna hijau)
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
Sudah? kemudian hapus semua kode diatas dan ganti dengan semua kode dibawah 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>
Jangan lupa disimpan, silahkan dicoba kembali, jika masih belum berhasil coba kembali ke ke halaman komentar dan beri tanda cetang kembali "disematkan di bawah entry"Semoga cara ini cara diatas bisa membantu.
Sumber: oom.com
Membuat Read More dengan Thumbnail
Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama. Bila versi terdahulu kita harus memenggal tulisan menggunakan cara manual dengan melakukan pemanggilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan. Yang menjadi masalah dalam Read More versi lama adalah kita sering dipusingkan dengan rusaknya kode HTML di kotak postingan karena kode penutup "span" atau "div" akan bertabrakan dengan penutup div div lain. Hal ini dapat menyebabkan postingan rusak. Karena itu, sebelum mempublikasikan tulisan, saya harus lebih dulu memeriksa baik-baik, apakah semua kode HTML di posting telah sesuai.
Sekian cuap-cuapnya, kita langsung take action key...
Bagi yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
<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;'/>
Pertama :
Buka tab Edit Html kemudian tandai/ cek di samping tulisan “ Expand Widget Templates “.
Kemudian cari kode </head> kemudian letakan script dibawah ini di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
Cari kode <data:post.body/>. Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini
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:right;padding-top:20px;'><a
expr:href='data:post.url'> read more “<data:post.title/>”</a></span>
</b:if> <b:if cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>
silahkan disimpan dan lihat hasilnya :)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)