Tampilkan postingan dengan label desain blog. Tampilkan semua postingan
Angka pada label blog terkadang membuat tampilan blog jadi bagus, tapi juga tidak sedikit para blogger yang tidak menyukainya, dan untuk melakukan ini anda tidak harus mengeluarkan keringat yang banyak karena hanya dengan menghapus sedikit kode di dalam kode template, maka keinginan anda akan segera tercapai.
Caranya adalah seperti ini :
1. Sign in ke blogger dengan ID anda.
2. Klik Layout.
3. Klik menu Elemen Halaman.
4. Klik tab Edit HTML.
5. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting untuk di lakukan).
6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.
7. Tunggu beberapa saat ketika proses sedang berlangsung.
8. Silahkan anda cari kode berikut pada kode template milik anda :
9. Jika anda sudah menemukan kode yang seperti di atas, silahkan hapus/delete.
10. Klik tombol Simpan Template.
11. Selesai. Silahkan lihat hasilnya !
Apabila anda sudah melakukan langkah di atas, maka dapat di pastikan angka yang menyertai Label akan menghilang entah kemana.
Selamat mencoba !
Caranya adalah seperti ini :
1. Sign in ke blogger dengan ID anda.
2. Klik Layout.
3. Klik menu Elemen Halaman.
4. Klik tab Edit HTML.
5. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting untuk di lakukan).
6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.
7. Tunggu beberapa saat ketika proses sedang berlangsung.
8. Silahkan anda cari kode berikut pada kode template milik anda :
( <data:label.count/> )
9. Jika anda sudah menemukan kode yang seperti di atas, silahkan hapus/delete.
10. Klik tombol Simpan Template.
11. Selesai. Silahkan lihat hasilnya !
Apabila anda sudah melakukan langkah di atas, maka dapat di pastikan angka yang menyertai Label akan menghilang entah kemana.
Selamat mencoba !
Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.
Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :
Simpan kode di atas antara <head> .... </head>
sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.
Fungsi Redirect ini bisa di buat dengan kode :
Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.
Selamat mencoba.
Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :
<meta http-equiv="refresh" content="10"/>
Simpan kode di atas antara <head> .... </head>
sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.
Fungsi Redirect ini bisa di buat dengan kode :
<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>
Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.
Selamat mencoba.
Jika anda melakukan pencarian di blog, baik itu melalui mesin pencari yang di pasang pada blog tersebut atau melalui label ataupun arsip blog, maka biasanya di atas halaman pencarian akan muncul pesan seperti ini :
Berikut langkah-langkah untuk menghilangkan pesan pencarian label di blogger :
1. Sign in ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. silahkan di backup dulu biar aman.
5. Cari kode seperti ini ]]></b:skin>.
6. simpan kode berikut di atas kode yang tadi :
7. Klik tombol Simpan Template.
8. Selesai.
Sekarang Anda cek pada pencarian label di blog Anda, jika sudah tak ada pesan pencariannya berati Anda berhasil, dan semoga sukses !
Berikut langkah-langkah untuk menghilangkan pesan pencarian label di blogger :
1. Sign in ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. silahkan di backup dulu biar aman.
5. Cari kode seperti ini ]]></b:skin>.
6. simpan kode berikut di atas kode yang tadi :
.status-msg-wrap{
display:none;
}
7. Klik tombol Simpan Template.
8. Selesai.
Sekarang Anda cek pada pencarian label di blog Anda, jika sudah tak ada pesan pencariannya berati Anda berhasil, dan semoga sukses !
Untuk mempercantik atau memper indah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blog terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Cara Mengaktifkan Threaded Comments Pada Blogspot"
Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya sebagai berikut :
1. Login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan).
2. Cari kode seperti berikut :
3. Silahkan anda ganti semua kode tersebut dengan kode di bawah ini :
4. Langkah terahir yaitu simpan template dan lihat hasilnya.
Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin> :
Selamat mencoba, dan semoga berhasil !
Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya sebagai berikut :
1. Login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan).
2. Cari kode seperti berikut :
<b:includable id="threaded_comment_css">
<style>
.comments {
.......
.......
.......
.......
</style>
</b:includable>
3. Silahkan anda ganti semua kode tersebut dengan kode di bawah ini :
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
marfin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE; border: 1px dotted #DDD;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnsQWpzx5lNbkvs1J7-P5B2gL7D7K8mag9iH466B9jYxANk8Lr0PAFpMxdhbLbV896sw22zFsvWYefEqm_r3uuMC9GPwhBIvULt_qzV4jOfesv_U7SmG0eY3JcgOYkJ5637dBkSH6KVAJ/h80/icon_clock.gif) no-repeat;
margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .commdnt-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
4. Langkah terahir yaitu simpan template dan lihat hasilnya.
Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin> :
.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;}
.comments .comments-content {font-size: 12px;margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:left;line-height: 1.4em;}
.comments .comment .comment-actions a {background:#1F9EE5;cursor:pointer;color:#ffffff;padding:2px 3px; margin-right:10px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:9px sans-serif; border:1px solid#1F9EE5;}
.comments .comment .comment-actions a:hover {text-decoration: none;background:#5AB1E2;border:1px solid #5AB1E2;}
.comments .comments-content .comment-thread ol {list-style-type: none;padding: 0;text-align:none;}
.comments .comments-content .inline-thread {padding: 0.5em 1em;}
.comments .comments-content .comment-thread {margin: 8px 0px;}
.comments .comments-content .comment-thread:empty {display: none;}
.comments .comments-bontent .comment-replies {margin-top: 1em;margin-left: 40px;font-size:12px;background:#EBF5FE; border: 1px dotted #DDD;}
.comments .comments-content .comment {margin-bottom:16px;padding-bottom:8px;}
.comments .comments-content .comment:first-child {padding-top:16px;}
.comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;}
.comments .comments-content .comment-body {position:relative;}
.comments .comments-content .user {font-style:normal;font-weight:bold;}
.comments .comments-content .icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 -4px 6px;}
.comments .comments-content .datetime {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnsQWpzx5lNbkvs1J7-P5B2gL7D7K8mag9iH466B9jYxANk8Lr0PAFpMxdhbLbV896sw22zFsvWYefEqm_r3uuMC9GPwhBIvULt_qzV4jOfesv_U7SmG0eY3JcgOYkJ5637dBkSH6KVAJ/h80/icon_clock.gif) no-repeat;margin-left:6px; padding-left:20px; font-size:10px; float:right;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px;}
.comments .comments-content .comment-content {text-align:none;}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0;}
.comments .comments-replybox {border: none;height: 250px;width: 100%;}
.comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;}
.comments .commdnt-replybox-thread {margin-top: 5px;}
.comments .comments-content .loadmore a {display: block;padding: 10px 16px;text-align: center;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
.comments .continue {cursor: pointer;}
.comments .continue a {display: block;padding: 0.5em;font-weight: bold;}
.comments .comments-content .loadmore {cursor: pointer;max-height: 3em;margin-top: 3em;}
.comments .comments-content .loadmore.loaded {max-height: 0px;opacity: 0;overflow: hidden;}
.comments .thread-chrome.thread-collapsed {display: none;}
.comments .thread-toggle {display: inline-block;}
.comments .thread-toggle .thread-arrow {display: inline-block;height: 6px;width: 7px;overflow:visible;margin: 0.3em;padding-right: 4px;}
.comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
.comments .avatar-image-container {float: left;width: 36px;max-height: 36px;overflow: hidden;}
.comments .avatar-image-container img {width: 36px;}
.comments .comment-block {margin-left: 48px;position: relative;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {.comments .comments-content .comment-replies {margin-left: 0;}}
Selamat mencoba, dan semoga berhasil !
Threaded comments adalah fitur terbaru dari blogger/blogspot. Fungsingya adalah membuat komentar pada postingan berulir dan lebih menarik di bandingkan fitur komentar sebelumnya. Fitur komentar ini sudah bisa di temukan pada blog baru dengan template standard dari blogger. Untuk blog yang menggunakan template yang sudah di modifikasi, threaded comments ini kebanyakan belum aktif, alias masih menggunakan format komentar yang lama.
Cara Mengaktifkan Threaded Comments Pada Blogspot sebagai berikut :
1. Aktifkan pengaturan komentar anda, ke halaman setting > Comments. Pilih show dan Embedded below post untuk Comment Form Placement.
2. Jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
3. Buka halaman design > Edit HTML > centang expand widgets templates.
4. Cari kode dibawah ini :
Kira kira kodenya seperti ini :
5. Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini :
6. Langkah terahir yaitu simpan template dan lihat hasilnya.
Cara Mengaktifkan Threaded Comments Pada Blogspot sebagai berikut :
1. Aktifkan pengaturan komentar anda, ke halaman setting > Comments. Pilih show dan Embedded below post untuk Comment Form Placement.
2. Jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
3. Buka halaman design > Edit HTML > centang expand widgets templates.
4. Cari kode dibawah ini :
<b:include data='post' name='comments'/>
Kira kira kodenya seperti ini :
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
5. Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini :
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
6. Langkah terahir yaitu simpan template dan lihat hasilnya.
Cara Meletakkan Artikel Terkait Di Widget Blog adalah salah satu trik lama namun tidak ada salahnya bukan jika sesama newbie ini saling share. salah satu tips menaikkan pageviews blog adalah dengan memasang widget artikel terkait di blog. bukan cuma untuk menaikkan pageviews blog, namun juga untuk mempercantik tampilan blog.
Berikut langkah demi langkah tutorialnya :
1. Login ke blog anda > Edit HTML > centang expand widget templates.
2. Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian ).
3. Copy kode dibawah ini dan paste di atas kode </head>.
4. Selanjutnya cari kode
atau
atau
5. Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya :
6. Kalau sudah silahkan simpan template.
7. Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut :
8. Save.
9. Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'.
10. Biasanya kodenya seperti dibawah ini
11. Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini :
Simpan template dan lihat hasilnya
Berikut langkah demi langkah tutorialnya :
1. Login ke blog anda > Edit HTML > centang expand widget templates.
2. Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian ).
3. Copy kode dibawah ini dan paste di atas kode </head>.
<!-- Related Post -->
<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. Selanjutnya cari kode
<div class='post-footer-line post-footer-line-1'>
atau
<div class='post-footer-line post-footer-line-2'>
atau
<div class='post-footer-line post-footer-line-3'>
5. Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya :
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
6. Kalau sudah silahkan simpan template.
7. Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
8. Save.
9. Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'.
10. Biasanya kodenya seperti dibawah ini
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
11. Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini :
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/></b:if>
</b:includable>
</b:widget>
Simpan template dan lihat hasilnya
Pada kesempatan yang lalu kami telah membahas tentang Cara Membuat Show-Hidden Comment Blog Nan Cantik, untuk kali ini Kami berbagi tips yang tak kalah menarik. Supaya pengunjung blog kita mau menyempatkan waktunya untuk berkomentar pada artikel yang kita berikan. tak heran jika kotak komentar kita menarik perhatian pengunjung maka otomatis mereka akan berkomentar pada blog kita. Suatu contoh pada gambar berikut :
Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung.
Berikut langkah demi langkah Cara Modifikasi Kotak Komentar Blog :
1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya(penting!).
5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.
6. Cari kode pada bagian CSS yang seperti ini :
7. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
8. Scroll Ke bagian bawah, dan cari kode yang seperti ini :
Note :
Prioritaskan yang berwarna merah.
9. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
10. Klik tombol Simpan Template.
11. Selesai. Silahkan lihat hasilnya.
Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.
Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung.
Berikut langkah demi langkah Cara Modifikasi Kotak Komentar Blog :
1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya(penting!).
5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.
6. Cari kode pada bagian CSS yang seperti ini :
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
7. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}
#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}
#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}
.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}
.commentinfo{
clear: both;
}
.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BgfFAPTgH58yMrm5crQi7n59fRU5sesi2TdGD3XSfM_vB6d0ojWXr2Dq0Cy8W27IVBRzqlhHp0KMTwMiuck6ZU319evkyMwxZ4Tq-uAni0a94nfYx9HL6KLyCDmmvZR0jJEnCOiLaTKL/s1600/commentgray.gif.png) no-repeat top left;
}
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BgfFAPTgH58yMrm5crQi7n59fRU5sesi2TdGD3XSfM_vB6d0ojWXr2Dq0Cy8W27IVBRzqlhHp0KMTwMiuck6ZU319evkyMwxZ4Tq-uAni0a94nfYx9HL6KLyCDmmvZR0jJEnCOiLaTKL/s1600/commentgray.gif.png) no-repeat top left;
}
8. Scroll Ke bagian bawah, dan cari kode yang seperti ini :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<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' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</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>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<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>
</b:if>
Note :
Prioritaskan yang berwarna merah.
9. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
Komentar :
</h4>
<div id='commentblock'><!--commentblock-->
<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> ke “<data:post.title/>”</strong>
</b:if>
<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>pada hari <dd class='comment-footer' style='display:inline; margin:0px'>
<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></span>
<dd class='commenttext'>
<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:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<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>
</div><!--end commentblock-->
</div>
</b:if>
10. Klik tombol Simpan Template.
11. Selesai. Silahkan lihat hasilnya.
Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.
Terkadang disetiap template pada blogger yang kita download belum tentu Menampilkan Foto Profil/Avatar Pada Komentar Blognya, nah kali ini Kami akan sedikit memberi tutorial tentang cara menampilkan foto profil pada komentar blog Anda.
Langsung saja,cara menampilkan foto profil pada komentar blogger caranya sebagai berikut:
1. Login ke blogger, setelah masuk klik pengaturan, lalu pilih pengaturan komentar.
2. Pada pilihan Tampilkan gambar profil dalam komentar? sobat pilih "ya".
3. Lalu klik simpan setelan. Sampai ada keterangan Setting Telah Berhasil Disimpan.
Dan lihat hasilnya, Silakan dicoba dengan menulis komentar dengan ID blogger sobat pada salah satu posting. apakah gambar/foto profilnya sudah muncul alias terlihat? Jika terlihat, berarti cara menampilkan foto profil/avatar komentar di blogger cukup sampai disini. Sebaliknya, jika gambar profilnya masih belum muncul juga, Sobat perlu melakukan langkah tambahan sebagai berikut:
4. Masih dalam keadaan login. Klik rancangan, lanjut dengan mengklik Edit html.
5. Untuk mengantisipasi jika nanti terjadi kesalahan. Backup template dengan cara: klik link download template lengkap.
6. Setelah selesai, beri centang pada kombo disamping expand template widget.
7. Selanjutnya cari kode:
8. Setelah ketemu, taruh kode berikut tepat diatasnya :
Pada teks berwarna merah adalah URL gambar avatar yang disimpan pada file hosting. Sobat bisa menggantinya dengan avatar pilihan sobat,kode merah itu adalah tampilan avatar untuk anonimous pada blog Anda.
9. Lanjut dengan mecari kode :
10. Hapus kode tersebut lalu ganti dengan kode berikut :
11. Masih belum selesai, terakhir cari:
12. Lalu hapus dan ganti kode tersebut dengan
kode seperti dibawah ini:
13. Selesai, Langkah terakhir Klik simpan template.
Untuk melihat hasilnya. lakukanlah ujicoba dengan memberi/mengetik komentar pada salah satu postingan blog sobat dengan ID blogger (dalam keadaan login). Otomatis foto profil akun blogger sobat akan terlihat. Coba juga dengan ID anonim atau NAME/URL. Maka yang muncul adalah gambar avatar yang sudah ditentukan oleh sobat.
Langsung saja,cara menampilkan foto profil pada komentar blogger caranya sebagai berikut:
1. Login ke blogger, setelah masuk klik pengaturan, lalu pilih pengaturan komentar.
2. Pada pilihan Tampilkan gambar profil dalam komentar? sobat pilih "ya".
3. Lalu klik simpan setelan. Sampai ada keterangan Setting Telah Berhasil Disimpan.
Dan lihat hasilnya, Silakan dicoba dengan menulis komentar dengan ID blogger sobat pada salah satu posting. apakah gambar/foto profilnya sudah muncul alias terlihat? Jika terlihat, berarti cara menampilkan foto profil/avatar komentar di blogger cukup sampai disini. Sebaliknya, jika gambar profilnya masih belum muncul juga, Sobat perlu melakukan langkah tambahan sebagai berikut:
4. Masih dalam keadaan login. Klik rancangan, lanjut dengan mengklik Edit html.
5. Untuk mengantisipasi jika nanti terjadi kesalahan. Backup template dengan cara: klik link download template lengkap.
6. Setelah selesai, beri centang pada kombo disamping expand template widget.
7. Selanjutnya cari kode:
]]></b:skin>
8. Setelah ketemu, taruh kode berikut tepat diatasnya :
#comments-block .avatar-image-container img {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkfFHEQOWu0JTtmpdytLTgT1CRjoMbYLBv0sM6L5WKBp3K8OoyP52-bxzuwcI6QcT8Li_qF54eu2V1WthlQuT_0gRHXGwIS8igtmX5OvY5-y4vMIHZsN-28YioPDKbHCW47qcvELKjYAL/) no-repeat left top; width:35px;height:35px}
Pada teks berwarna merah adalah URL gambar avatar yang disimpan pada file hosting. Sobat bisa menggantinya dengan avatar pilihan sobat,kode merah itu adalah tampilan avatar untuk anonimous pada blog Anda.
9. Lanjut dengan mecari kode :
<dl id='comments-block'>
10. Hapus kode tersebut lalu ganti dengan kode berikut :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
11. Masih belum selesai, terakhir cari:
<a expr:name='data:comment.anchorName'/>
12. Lalu hapus dan ganti kode tersebut dengan
kode seperti dibawah ini:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
13. Selesai, Langkah terakhir Klik simpan template.
Untuk melihat hasilnya. lakukanlah ujicoba dengan memberi/mengetik komentar pada salah satu postingan blog sobat dengan ID blogger (dalam keadaan login). Otomatis foto profil akun blogger sobat akan terlihat. Coba juga dengan ID anonim atau NAME/URL. Maka yang muncul adalah gambar avatar yang sudah ditentukan oleh sobat.
Untuk Menampilkan Adsense di Tengah Postingan membutuhkan sedikit trik, karena kalo cuma asal pasang script adsense didalam potingan maka iklan adsense tidak akan muncul. Nah kali ini akan kita bahas tips untuk menampilkan adsense didalam postingan.
Silahkan ikuti tips berikut :
1. Login ke blogger kemudian pilih "Layout -> Edit HTML".
2. Beri tanda centang pada kotak "Expand widget template".
3. Cari Kode berikut :
4. Hati-hati, di dalam kode HTML yang sudah dipasang "Readmore" biasanaya ada 2 kode seperti itu. Jadi pilih kode yg pertama.
5. Setelah itu letakan kode Google adsense kamu dibawah kode tersebut. Tp sebelumnya perhatikan yg berikut ini.
kode adsense biasanya seperti ini :
Note :
perhatikan kode yang berwarna merah ( <!-- dan //-->). Hapus kedua kode tersebut. Kemudian copy kode adsense dan letakkan dibawah kode <p><data:post.body/></p>. Lalu simpan Template Anda.
6. Selesai, dan selamat mencoba !
Silahkan ikuti tips berikut :
1. Login ke blogger kemudian pilih "Layout -> Edit HTML".
2. Beri tanda centang pada kotak "Expand widget template".
3. Cari Kode berikut :
<p><data:post.body/></p>
4. Hati-hati, di dalam kode HTML yang sudah dipasang "Readmore" biasanaya ada 2 kode seperti itu. Jadi pilih kode yg pertama.
5. Setelah itu letakan kode Google adsense kamu dibawah kode tersebut. Tp sebelumnya perhatikan yg berikut ini.
kode adsense biasanya seperti ini :
<script type="text/javascript"><!--
google_ad_client = "pub-5569888573993887";
/* 468x60, created 4/9/08 */
google_ad_slot = "0716000951";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
Note :
perhatikan kode yang berwarna merah ( <!-- dan //-->). Hapus kedua kode tersebut. Kemudian copy kode adsense dan letakkan dibawah kode <p><data:post.body/></p>. Lalu simpan Template Anda.
6. Selesai, dan selamat mencoba !
Widget 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika Anda pengen meletakkan widget anda yang pasti footer ini akan sangat berguna, contohnya pada Widget 3 Kolom Di Footer Blog ini.
Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :
1. login ke blog anda.
2. Klik Tata Letak.
3. Edit Html.
4. Cari code yang mirip dengan code berikut :
5. Kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini :
6. Kemudian cari kode yang mirip dengan kode diwah ini :
7. Setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini :
8. Simpan template, dan lihat hasilnya.
Update :
Karena banyak temen yang menanyakan gimana kalau buat 4-5 kolom, kita tinggal menambahkan kode :
code css style :
code css :
code html :
ganti tulisan NOMOR URUT dengan urutan nomornya, dan rubah width/lebar kolom tersebut agar cocok dengan template Anda.
Note :
Agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan.
Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :
1. login ke blog anda.
2. Klik Tata Letak.
3. Edit Html.
4. Cari code yang mirip dengan code berikut :
#footer-wrapper {
....
....
.... }
5. Kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini :
/* FOOTER */
#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #0000FF;
border: 1px solid $bordercolor;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
/* Fotter 4-5 kolom tambahkan code css style disini */
#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}
/* Fotter 4-5 kolom tambahkan code css disini */
#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}
6. Kemudian cari kode yang mirip dengan kode diwah ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
7. Setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini :
<div id='footer-wrapper'>
<div id='footer'>
<b:section class='footer' id='footer1' preferred='yes'>
</b:section>
<b:section class='footer' id='footer2' preferred='yes'>
</b:section>
<b:section class='footer' id='footer3' preferred='yes'>
</b:section>
/* Fotter 4-5 kolom tambahkan code html disini */
</div>
<div style='clear:both;'/>
</div>
<!-- end footer-wrapper -->
8. Simpan template, dan lihat hasilnya.
Update :
Karena banyak temen yang menanyakan gimana kalau buat 4-5 kolom, kita tinggal menambahkan kode :
code css style :
#footerNOMOR URUT {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
code css :
#footerNOMOR URUT .widget-content {margin:0 .5em 0 ;}
code html :
<b:section class='footer' id='footerNOMOR URUT' preferred='yes'>
</b:section>
ganti tulisan NOMOR URUT dengan urutan nomornya, dan rubah width/lebar kolom tersebut agar cocok dengan template Anda.
Note :
Agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan.
Membuat Efek Gelembung Pada Blog Mungkin artikel ini sudah di bahas di blog para blogger yaitu kalo ngga salah yaitu Tentang cara membuat efek hujan di blog,efek hujan salju atau daun yang jatuh berguguran, tapi kali ini saya berbagi sebuah tips tentang cara membuat efek gelembung yang bertaburan di blog,wuihhh...! keren kaya acara pesta atau konser hi..hi...hi....,oke langsung saja saya tidak akan banyak bicara lagi, jika kamu ingin mencobanya silakan ikuti langkah berikut ini :
1. Pertama masuk dulu ke akun blogger Anda.
2. Masuk rancangan.
3. Edit HTML.
4. Cari kode berikut :
5. Lalu copy script di bawah ini lalu pastekan di bawah kode <body> :
6. Setelah itu simpan template.
7. Dan sekarang lihat blog Anda ada gelembung yg betaburan.
1. Pertama masuk dulu ke akun blogger Anda.
2. Masuk rancangan.
3. Edit HTML.
4. Cari kode berikut :
<body>
5. Lalu copy script di bawah ini lalu pastekan di bawah kode <body> :
<script src='http://sagita-com.googlecode.com/files/whitebubble.js'></script>
6. Setelah itu simpan template.
7. Dan sekarang lihat blog Anda ada gelembung yg betaburan.
PopUp Window merupakan suatu halaman yang muncul di belakang maupun di depan halaman utama yang muncul begitu saja dengan tiba-tiba walau tanpa kita klik sekalipun,bisa berjumlah 1 pop up, 2 pop up, 3 pop up bahkan bisa sebanyak mungkin yang di kehendaki.
Halaman PopUp Window Biasanya di gunakan untuk beriklan dari suatu produk maupun jasa yang di tawarkan. Contoh konkrit iklan pop-up yang sering di pakai adalah situs ziddu, dimana setiap kali kita mendownload file yang ada di situs tersebut pasti akan keluar halaman window pop-up.
Berikut Tutorial Cara Pasang Script PopUp Window Pada Blog :
1. Login ke akun blogger kamu.
2. Pilih Rancangan »» edit HTML.
3. Beri tanda checklist pada Expand widget template.
4. Cari kode <body>
5. letakkan kode berikut dibawah kode <body> :
6. Simpan template.
Keterangan:
Jika Anda memasang script pop up diatas,maka akan muncul halaman-halaman lagi sesuai yang Anda targetkan,ganti yang berwarnamerah dengan halaman pop up Anda sendiri.
Jika ingin menambahkan jumlah halaman pop up maka tinggal tambahkan kode berikut ke dalam script di atas :
atau jika ingin mengurangi tinggal buang salah satunya.
Halaman PopUp Window Biasanya di gunakan untuk beriklan dari suatu produk maupun jasa yang di tawarkan. Contoh konkrit iklan pop-up yang sering di pakai adalah situs ziddu, dimana setiap kali kita mendownload file yang ada di situs tersebut pasti akan keluar halaman window pop-up.
Berikut Tutorial Cara Pasang Script PopUp Window Pada Blog :
1. Login ke akun blogger kamu.
2. Pilih Rancangan »» edit HTML.
3. Beri tanda checklist pada Expand widget template.
4. Cari kode <body>
5. letakkan kode berikut dibawah kode <body> :
<script type='text/javascript'>
var popurls=new Array()
popurls[0]=unescape('%68%74%74%70%3A%2F%2F%77%77%77%2E%67%6F%67%65%6C%6C%2E%74%6B%2F')
popurls[1]='http://www.tutorial-sagita.tk/ '
popurls[2]='http://www.tutorial-sagita.tk/ '
function openpopup(popurl) { var winpops=window.open(popurl,'','width=,height=,toolbar,location,status,scrollbars,menubar,resizable') }
openpopup(popurls[Math.floor(Math.random()* (popurls.length))])
</script>
6. Simpan template.
Keterangan:
Jika Anda memasang script pop up diatas,maka akan muncul halaman-halaman lagi sesuai yang Anda targetkan,ganti yang berwarna
Jika ingin menambahkan jumlah halaman pop up maka tinggal tambahkan kode berikut ke dalam script di atas :
popurls[nomer]='http://link-url-tujuan.com'
atau jika ingin mengurangi tinggal buang salah satunya.
Untuk melengkapi Desain blog Anda, blogger menambahkan satu tombol, yaitu tombol "Jump Breaks" atau tombol "More" atau tombol "Read more" yang mempunyai fungsi untuk memotong tulisan di halaman depan (home page) atau lebih populer dengan sebutan "fungsi read more", dan blog akan tampak lebih rapi.
Fungsi read more untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read more" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun.
Berikut langkah-langkahnya :
1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget ".
5. Carilah kode yang mirip seperti Ini :
6. Copy kode berikut dan letakkan persis di bawahnya :
7. Klik tombol SIMPAN TEMPLATE.
8. Selanjutnya agar setiap memposting baru terdapat readmore copy code :
9. Langkah selanjutnya klik Setelan » Format » pada kotak Templat entri pastekan code pada langkah 8 di dalamnya, dan simpan setelan.
10. selesai.
Note : Setiap Memposting Anda harus meletakkan tulisan sebelum code <!-- more --> supaya tampil dalam halaman depan. Contoh seperti gambar di bawah ini :
Selamat Mencoba !
Fungsi read more untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read more" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun.
Berikut langkah-langkahnya :
1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget ".
5. Carilah kode yang mirip seperti Ini :
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
6. Copy kode berikut dan letakkan persis di bawahnya :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'><data:post.jumpText/></a>
</div>
</b:if>
7. Klik tombol SIMPAN TEMPLATE.
8. Selanjutnya agar setiap memposting baru terdapat readmore copy code :
<br/><br/><!-- more -->
9. Langkah selanjutnya klik Setelan » Format » pada kotak Templat entri pastekan code pada langkah 8 di dalamnya, dan simpan setelan.
10. selesai.
Selamat Mencoba !
Dari sekian banyak macam template blog ada beberapa yang paling banyak di pakai para blogger, ini sangat populer bahkan blog-blog ber PR tinggi memakai template ini, bagi yang pingin mempunyai berikut Kami berikan special untuk Anda, bagi yang sudah request silahkan di download !
1. Template Mirip Google.
2. Template Sport Magazine.
3. Template Kamera Album.
4. Template Tutorial Blog.
5. Template ShutterShot.
6. Template XBOX.
1. Template Mirip Google.
2. Template Sport Magazine.
3. Template Kamera Album.
4. Template Tutorial Blog.
5. Template ShutterShot.
6. Template XBOX.
Berikut sedikit tips mudah buat teman-teman yang masih belajar membuat blog. Tips berikut ini akan mempermudah sahabat blogger untuk memposting kode html pada blog. fungsinya mempharse kode html pada layanan convert supaya tampil dalam postingan kita, contohnya seperti :
Berikut tutorial Cara Pharse code HTML/Javascript supaya tampil Dalam Postingan :
1. Copy code yang akan di posting.
2. Klik Tombol Pharse HTML, letaknya di kanan bawah pada Blog ini.
3. Jika sudah muncul kotak Pharse html, paste-kan kode yang Anda copy tadi dalam kotak yang telah tersedia.
4. Kemudian klik Tombol Convet.
5. Copy code yang sudah di pharse/convert tadi dan paste dalam postingan Anda.
6. Selesai dan posting siap di luncurkan.
Semoga bisa membantu !
<input id="sgtvOpener" name="sgtvOpener" onclick="sgtvToggleDisplay('YOUR-CONTAINER-ID','10%','80%','10%','5%','90%','5%');" value="YOUR-NAME-BUTTON" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://sagita-com.googlecode.com/files/sGTviewer.js"></script>
Berikut tutorial Cara Pharse code HTML/Javascript supaya tampil Dalam Postingan :
1. Copy code yang akan di posting.
2. Klik Tombol Pharse HTML, letaknya di kanan bawah pada Blog ini.
3. Jika sudah muncul kotak Pharse html, paste-kan kode yang Anda copy tadi dalam kotak yang telah tersedia.
4. Kemudian klik Tombol Convet.
5. Copy code yang sudah di pharse/convert tadi dan paste dalam postingan Anda.
6. Selesai dan posting siap di luncurkan.
Semoga bisa membantu !
Postingan kali ini melanjutkan postingan Kami tentang View Button. Mudah-mudahan ini bermanfaat bagi kita para Blogger.
Demo :
Berikut Adalah Caranya :
1. Cari kode dibawah ini, untuk mempermudah pencarian tekan Ctrl + F :
Jika tidak ketemu, silahkan cari code berikut ini :
Bila Template sudah menggunakan Read More, cari code <p><data:post.body/></p> yang pertama.
2. Jika sudah ketemu letakkan kode berikut tepat di bawahnya :
* Left: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
* Width: Valid input: example: '700px' or '80%' or 'auto' (satuan px, % atau auto).
* Right: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
* Top: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
* Height: Valid input: example: '600px' or '90%' or 'auto' (satuan px, % atau auto).
* Bottom: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
Semua variabel tersebut berupa string (teks di dalam tanda kutip/bukan nomor).
3. Save tempalet Anda.
4. Selanjutnya bila Anda membuat posting baru, copy code berikut dan pastekan dalam form postingan yang paling bawah :
5. Ganti tulisan yang berwarna merah dengan apa saja terserah anda, contoh diatas menggunakan Like Facebook.
6. Ganti tulisan yang berwarna biru dengan link download anda.
7. Terakhir terbitkan entri, selesai dan lihat hasilnya.
Demo :
Berikut Adalah Caranya :
1. Cari kode dibawah ini, untuk mempermudah pencarian tekan Ctrl + F :
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<p><data:post.body/></p>
Jika tidak ketemu, silahkan cari code berikut ini :
<p><data:post.body/></p>
Bila Template sudah menggunakan Read More, cari code <p><data:post.body/></p> yang pertama.
2. Jika sudah ketemu letakkan kode berikut tepat di bawahnya :
<input id='dnlvOpener' name='dnlvOpener' onclick='dnlvToggleDisplay('Downloads','10%','80%','10%','5%','90%','5%');' style='display:block; float:center;' type='button' value='Download'/>
<script src='http://sagita-com.googlecode.com/svn/dNLdviewer.js' type='text/javascript'/>
* Width: Valid input: example: '700px' or '80%' or 'auto' (satuan px, % atau auto).
* Right: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
* Top: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
* Height: Valid input: example: '600px' or '90%' or 'auto' (satuan px, % atau auto).
* Bottom: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
Semua variabel tersebut berupa string (teks di dalam tanda kutip/bukan nomor).
3. Save tempalet Anda.
4. Selanjutnya bila Anda membuat posting baru, copy code berikut dan pastekan dalam form postingan yang paling bawah :
<div id='Downloads' style='text-align: center; line-height:0;display:none;'><b>Sebelum Download file, Tolong Bantu SAGITA COM "Like" Facebook di bawah ini ya.... !</b><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSAGITA-COM%2F121148511307543&width=775&height=450&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="background:#181907;border:none; overflow:hidden; width:775px; height:450px;" allowtransparency="true"></iframe> <br/>
<div style="float:right"><a href="Link Download "><button>Lewati</button></a></div></div>
5. Ganti tulisan yang berwarna merah dengan apa saja terserah anda, contoh diatas menggunakan Like Facebook.
6. Ganti tulisan yang berwarna biru dengan link download anda.
7. Terakhir terbitkan entri, selesai dan lihat hasilnya.
Template Blogger sangat bepengaruh untuk Optimasi SEO, Disamping kita bisa memilih template blog yang SEO friendly kita juga bisa membuat atau mengedit template kita agar lebih ramah SEO,Misalnya kita membuat meta title SEO friendly maupun memasang meta tag otomatis pada setiap postingan, kali ini ada tips lagi untuk membuat agar template blog kita lebih SEO friendly, yaitu dengan cara mengedit beberapa kode HTML pada yamg lebih valid XHTML.
Langkah Awal Modivikasi Template Blog Lebih Valid XHTML SEO Friendly.
Sebelum melakukan validasi sebaiknya gunakan blog untuk percobaan dan juga template baru, hapus widget follower dan archive blog atau ubah saja archive blog menjadi flat list, atau download dulu kita. Nah setelah itu baru menuju ke edit template, Login ke akun blogger > Rancangan > Edit HTML.
Cara Modivikasi Template Blog Valid XHTML SEO Friendly :
1. Merubah 'deklarasi DOCTYPE Strict' menjadi 'Transisi XHTML delcaration DOCTYPE" dan menambahkan meta tag default blogger. Cari kode dibawah :
Hapus semua kode diatas dan ganti dengan kode berikut :
2. Menghapus comment declaration yang ada pada CSS, Cari kode dash ( ----- ) dan hapus semuanya. contoh:
Hasilnya menjadi :
3. Menghapus Navigasi Bar bawaan blogger, cari kode </head> dan tambahkan kode berikut tempat dibawahnya
Nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.
4. Menghapus Icon Quickedit atau gambar obeng
cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua tanpa terkecuali, jangan lupa kalo besoknya menambahkan widget baru hapus lagi kode tersebut.
5. Menghapus Post icon, cari kode berikut :
Hapus dan ganti dengan kode berikut :
6. Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:
Ubahlah Menjadi :
7. Menyembunyikan page navigation di halaman utama, cari kode :
hapus dan ganti seperti kode berikut :
8. Menambahkan atribut Alt pada semua gambar termasuk saat posting artikel, contoh :
ganti menjadi seperti berikut :
9. Memperbaiki atribut title dan alt pada link bergambar sebagai contoh :
Rubah posisi atribut title dan alt :
Untuk kasus diatas jangan lupa untuk link atributnya title dan target, untuk gambar alt dan border jagan sampe terbalik-balik.
10. Menyembunyikan widget dihalaman utama
kalo widget itu dianggap penting dan tidak bisa di validasi sebaiknya sembunyikan dari halaman utama dengan cara menambahkan kode berikut :
Kira-kira nya itu saja, saya pun masih belajar untuk masalah validasi xhtml. dan ini kami kutib dari beberapa sumber, mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar.
Langkah Awal Modivikasi Template Blog Lebih Valid XHTML SEO Friendly.
Sebelum melakukan validasi sebaiknya gunakan blog untuk percobaan dan juga template baru, hapus widget follower dan archive blog atau ubah saja archive blog menjadi flat list, atau download dulu kita. Nah setelah itu baru menuju ke edit template, Login ke akun blogger > Rancangan > Edit HTML.
Cara Modivikasi Template Blog Valid XHTML SEO Friendly :
1. Merubah 'deklarasi DOCTYPE Strict' menjadi 'Transisi XHTML delcaration DOCTYPE" dan menambahkan meta tag default blogger. Cari kode dibawah :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Hapus semua kode diatas dan ganti dengan kode berikut :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='/atom.xml' rel='alternate' title='Judul Blog Kamu - Atom' type='application/atom+xml'/>
<link href='/rss.xml' rel='alternate' title='Judul Blog Kamu - RSS' type='application/rss+xml'/>
2. Menghapus comment declaration yang ada pada CSS, Cari kode dash ( ----- ) dan hapus semuanya. contoh:
/* -----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Hasilnya menjadi :
/* Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team */
3. Menghapus Navigasi Bar bawaan blogger, cari kode </head> dan tambahkan kode berikut tempat dibawahnya
<!-- <body><div></div> -->
Nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.
4. Menghapus Icon Quickedit atau gambar obeng
cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua tanpa terkecuali, jangan lupa kalo besoknya menambahkan widget baru hapus lagi kode tersebut.
5. Menghapus Post icon, cari kode berikut :
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
Hapus dan ganti dengan kode berikut :
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
6. Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:
<script src="http://sagita-com.googlecode.com/files/Daftar-isi.js"></script>
Ubahlah Menjadi :
<script type="text/javascript" src="http://sagita-com.googlecode.com/files/Daftar-isi.js"></script>
7. Menyembunyikan page navigation di halaman utama, cari kode :
<b:include name='nextprev'/>
hapus dan ganti seperti kode berikut :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
8. Menambahkan atribut Alt pada semua gambar termasuk saat posting artikel, contoh :
<img href="http://1.bp.blogspot.com/-n2OIL8Xv3ZI/TlvP2WEe4mI/AAAAAAAAAAU/gskf9ZSuiAc/s1600/dofollowlogo.jpg">
ganti menjadi seperti berikut :
<img alt="dofollow logo" href="http://1.bp.blogspot.com/-n2OIL8Xv3ZI/TlvP2WEe4mI/AAAAAAAAAAU/gskf9ZSuiAc/s1600/dofollowlogo.jpg">
9. Memperbaiki atribut title dan alt pada link bergambar sebagai contoh :
<a href="http://www.getfreebl.com" alt="free backlink generator powered by http://www.getfreebl.com" target="_blank"><img src="http://www.getfreebl.com/services/backlink/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C133214B6D89C17132344F7139C830162C23D81597BA7B4BBFE8" title="Free backlinks for your site powered by http://www.getfreebl.com" border="0" /></a>
Rubah posisi atribut title dan alt :
<a href="http://www.getfreebl.com" title="free backlink generator powered by http://www.getfreebl.com" target="_blank"><img src="http://www.getfreebl.com/services/backlink/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C133214B6D89C17132344F7139C830162C23D81597BA7B4BBFE8" alt="Free backlinks for your site powered by http://www.getfreebl.com" border="0" /></a>
Untuk kasus diatas jangan lupa untuk link atributnya title dan target, untuk gambar alt dan border jagan sampe terbalik-balik.
10. Menyembunyikan widget dihalaman utama
kalo widget itu dianggap penting dan tidak bisa di validasi sebaiknya sembunyikan dari halaman utama dengan cara menambahkan kode berikut :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang Mau DiSembunyikan
</b:if>
Kira-kira nya itu saja, saya pun masih belajar untuk masalah validasi xhtml. dan ini kami kutib dari beberapa sumber, mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar.
Energi Saving Mode (screensaver) Blog ini sudah banyak yang mempostingnya,dan banyak pula yang mengeluhkan loading blog jadi berat,tapi kami melakukan perubaha-perubahan agar tidak memberatkan loading blog,dari sisi kode javascript kami banyak memotong dan memodifikasi agar menjadi sangat ringan.
Langkah-langkahnya sebagai berikut :
1. Login ke account blogger Anda.
2. Klik tab Rancangan -> Edit HTML.
3. Download template dulu apabila terjadi kesalahan dapat di kembalikan seperti semula.
4. Tekan Ctrl + F untuk memudahkan pencarian.
5. Cari kode <head> dan pastekan kode berikut tepat di bawahnya :
6. Save dan tunggu beberapa detik untuk melihat hasilnya.
7. Selesai dan selamat mencoba....!
Langkah-langkahnya sebagai berikut :
1. Login ke account blogger Anda.
2. Klik tab Rancangan -> Edit HTML.
3. Download template dulu apabila terjadi kesalahan dapat di kembalikan seperti semula.
4. Tekan Ctrl + F untuk memudahkan pencarian.
5. Cari kode <head> dan pastekan kode berikut tepat di bawahnya :
<script language='javascript' src='http://sagita-com.googlecode.com/files/energi-saving-mode.js' type='text/javascript'/>
6. Save dan tunggu beberapa detik untuk melihat hasilnya.
7. Selesai dan selamat mencoba....!
