Tampilkan postingan dengan label tips dan trik. 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 !
SEO(Search Engine Optimization) blog tentunya tidak akan pernah habisnya, begitu banyak tips seo serta trik-trik yang saat ini masih tetap tersembunyi dan bisa dipastikan semuanya tidak ada mutlak benar namun bisa dikatakan mendekati kebenaran. Kami akan memberikan sedikit tips seo blogger yang berhubungan dengan judul atau bagian header blog tepatnya Setting Meta Tag Title khusus para pengguna platform BlogSpot agar SEO Friendly tentunya dimaksudkan agar supaya blog anda ramah terhadap search engine sehingga dampak SERPs blog menjadi lebih baik dari sebelumnya.
Berikut step by step Cara Pasang Meta Tag Judul Blog SEO Friendly :
1. Login account di blogger/ blogspot
2. Masuk ke menu tata letak/ kustomisasi
3. Pilih Edit HTML
4. Back up data (Download Template Lengkap) untuk mencegah apabila terjadi kesalahan.
5. Cari code berikut ini :
6.Hapus kemudian Ganti dengan kode di bawah ini !
Keterangan :
Perhatikan kode script yang warnamerah itu adalah judul blog utama, sehingga hasil title tag nya nama posting akan tampil terlebih dahulu setelah itu baru judul blog utama.
7. Simpan template Anda dan lihat hasilnya.
Berikut step by step Cara Pasang Meta Tag Judul Blog SEO Friendly :
1. Login account di blogger/ blogspot
2. Masuk ke menu tata letak/ kustomisasi
3. Pilih Edit HTML
4. Back up data (Download Template Lengkap) untuk mencegah apabila terjadi kesalahan.
5. Cari code berikut ini :
<title><data:blog.pageTitle/></title>
6.Hapus kemudian Ganti dengan kode di bawah ini !
<b:if cond='data:blog.pageType != "item"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> |<data:blog.title/> </title>
</b:if>
Keterangan :
Perhatikan kode script yang warna
7. Simpan template Anda dan lihat hasilnya.
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.
Hello Sobat SAGITA !
Berdasarkan komentar-komentar yang masuk SAGITA COM banyak yang menanyakan apakah domain dot tk aman, tak akan di banned seperti domain-domain gratis yang lain ! jawabannya mudah-mudahan tidak, karena sudah beberapa tahun ini alhamdulillah Kami menjadi member dot tk masih tetap berjalan lancar, karena kita setiap tahunnya di wajibkan me-RENEW (Memperpanjang) domain Kita, sehingga domain Kita tetap bisa di pakai.
Domain dot.tk selain fasilitas domain gratis, banner-banner sponsorpun telah dihilangkan, benar-benar bersih tanpa iklan.
Langkah-langkahnya adalah sebagai berikut :
Yang pertama adalah, silahkan klik banner di atas. Atau klik link ini, Mau Domain dot.TK GRATIS . Kemudian kita akan di bawa kehalaman untuk memilih sebuah nama domain seperti gambar di bawah ini. Silahkan pilih nama domain favorit kita kemudian klik next.
Bila nama domain tersebut tersedia, akan muncul halaman seperti gambar di bawah ini.
Pastikan centang bagian “Free domain” bukan “Paid domain” :lol: . Kemudian tekan tombol next. Pada tahap ke dua ini, silahkan pilih opsi “Use DNS for this domain” kemudian centang pilihan “Use my own DNS Services” . Pada kolom Name server, isikan dengan “ghs.google.com” ( anggap kita ngehosting di blogspot, nantipun bisa diedit mau diarahkan kemana servernya ). Isi alamat email kita di kolom “Your E-mail Address” dan jangan sampai salah. Isi Karakter huruf pada kolom “Type the characters you see in this picture”. Selanjutnya silahkan klik next. Lihat gambar dibawah.
Langkah selanjutnya adalah mengisi Nama dan Password (gambar dibawah). Password di sini adalah password untuk log in ke dot tk. Selanjutnya klik next.
Sampai di sini, kita telah melakukan registrasi baru domain gratis di .tk. Tinggal menunggu konfirmasi yaitu kode verifikasi yang dikirimkan kealamat email kita.
Silahkan cek inbox email kita. Jika tidak ada, cek pada spam email.Isi konfirmasi dari dot Tk.
Kalau sudah dapat konfirmasi email,, silahkan ikuti link yang di berikan dot.tk. Seharusnya kita akan di bawa kehalaman seperti di bawah ini. Silahkan masukkan kode konfirmasi kita dan klik “Confirm”.
Bila kode konfirmasi yang kita masukkan benar, maka domain baru di dot Tk yang kita registrasi ini langsung di aktifkan. Silahkan log ini dengan alamat email dan password kita untuk melakukan setting/merubah server name.
* Setting (DNS) domain .tk ke Blogspot
Kalau kita sebelumnya telah memiliki blog di blogspot, dan mau memakai domain dari dot tk. Tinggal setting dan arahkan name servernya ke blogspot (ghs.google.com). Caranya, pada panel sebelah kiri, silahkan pilih “My Domains” >> “List my domains”. Pada halaman “List my domains”, pilih domain yang mau di setting, kemudian klik “modify”.
Langkah selanjutnya, kita akan dihadapkan dengan halaman setting domain, dimana terdapat tiga pilihan pengaturan yaitu :
1. Domain forwarding
2. Use Dot TK Free DNS Service
3. Use Custom DNS Service
Silahkan pilih opsi no 2 “Use Dot TK Free DNS Service” kemudian klik “Configure” disebelah kanannya. Pada kolom “Type” terdapat 3 pilihan Record, yaitu : A, CNAME dan MX. Pilih :
* Type = CNAME
* Host Name = www.domainkita.tk ( contoh saya isi dengan www.elvaku.tk)
* IP Address = ghs.google.com
Sampai di sini, setting DNS untuk domain dot tk yang diarahkan ke blogspot telah selesai, tinggal menunggu prosesnya kurang lebih 24 jam. Oh iya, silahkan cek domain kita di http://network-tools.com/ untuk melihat apakah settingan DNS yang diarahkan ke blogspot sudah benar. Centang opsi “DNS Records (Advanced Tool)”, pada kolom IP isi dengan nama domain kita, misal isi dengan elvaku.tk. Selanjutnya klik GO. Lihat parameter-parameternya di “Answer records”. Seharusnya, IP yang tercantum disana sama dengan IP Record A yang kita masukkan pada pengaturan domain dot tk tadi.
Sampai di sini sebenarnya setting domain dot tk untuk blogspot sebenarnya sudah cukup. Tetapi, blog kita nanti tidak dapat diakses tanpa mengetikkan WWW di address bar browser (contoh http://elvaku.tk). Supaya blog kita tetap dapat diakses dengan atau tanpa WWW, kita tambahkan lagi Type record, Tetapi kali ini bukan CNAME Record, melainkan A Record. Lihat gambar diatas, klik “add another hostname”. Isi dengan :
* Type = A
* Host Name = domainkita.tk ( tanpa WWW, contoh saya isi dengan elvaku.tk )
* IP Address = 216.239.32.21
Tambahkan lagi “add another hostname” A Record dengan IP yang berbeda sebanyak 3 kali lagi. Masing-masing pada kolom IP, Isi dengan :
* 216.239.34.21
* 216.239.36.21
* 216.239.38.21
Sehingga ada 4 setting Untuk A Record dan satu setting untuk CNAME Record seperti gambar dibawah ini :
Jika gagal silahkan isi dengan Type record di bawah ini saja, tanpa harus menambahkan 3 Type record :
* Type = A
* Host Name = domainkita.tk ( tanpa WWW, contoh saya isi dengan elvaku.tk )
* IP Address = 216.239.32.21
sebagai alternatif untuk bisa diakses dengan atau tanpa WWW kita setting pada blogger, dan arahkan domain elvaku.tk ke www.elvaku.tk (baca setingan di bawah)
Langkah terakhir jika proses di atas sudah selesai, sambil menunggu domain dot.tk aktif kita bisa setting di blogger. Caranya :
1. Masuk ke account Blogger Anda.
2. Pilih tab Setelan -> Penerbitan -> Klik Domain Ubahsuaian -> Beralih Kesetelan Lebih lanjut -> dan masukkan nama domain yang telah di buat tadi pada kolom Domain Anda -> Isi Kolom Verifikasi Kata -> Dan Klik Simpan Setelan.
3. bila sudah berhasil, langkah selanjutnya beri tanda cheklist pada kotak kecil dibawah kolom domain anda, tepatnya di sebelah tulisan "Mengarahkan elvaku.tk ke www.elvaku.tk" -> Isi Kolom Verifikasi Kata -> Dan Klik Simpan Setelan.
4. Selesai......
Note :
- Selama 24jam sebaiknya kita jangan mengedit ataupun mengutak-utik blog, sampai domain kita benar-benar aktif, biasanya blog kita akan off selama 24jam. setelah 24jam kita bisa mengeceknya dengan mengetik alamat blog kita yang baru langsung di addres bar.
- Domain DOT.TK berlaku selama setahun, dan Setiap tahunnya Kita akan mendapatkan email dari DOT.TK 15 hari sebelum masa expire domain, yang isinya Kita harus me-RENEW (Memperpanjang) domain Kita, sehingga domain Kita tetap bisa di pakai.
Selamat mencoba, semoga sukses !
Berdasarkan komentar-komentar yang masuk SAGITA COM banyak yang menanyakan apakah domain dot tk aman, tak akan di banned seperti domain-domain gratis yang lain ! jawabannya mudah-mudahan tidak, karena sudah beberapa tahun ini alhamdulillah Kami menjadi member dot tk masih tetap berjalan lancar, karena kita setiap tahunnya di wajibkan me-RENEW (Memperpanjang) domain Kita, sehingga domain Kita tetap bisa di pakai.
Domain dot.tk selain fasilitas domain gratis, banner-banner sponsorpun telah dihilangkan, benar-benar bersih tanpa iklan.
Langkah-langkahnya adalah sebagai berikut :
Yang pertama adalah, silahkan klik banner di atas. Atau klik link ini, Mau Domain dot.TK GRATIS . Kemudian kita akan di bawa kehalaman untuk memilih sebuah nama domain seperti gambar di bawah ini. Silahkan pilih nama domain favorit kita kemudian klik next.
Bila nama domain tersebut tersedia, akan muncul halaman seperti gambar di bawah ini.
Pastikan centang bagian “Free domain” bukan “Paid domain” :lol: . Kemudian tekan tombol next. Pada tahap ke dua ini, silahkan pilih opsi “Use DNS for this domain” kemudian centang pilihan “Use my own DNS Services” . Pada kolom Name server, isikan dengan “ghs.google.com” ( anggap kita ngehosting di blogspot, nantipun bisa diedit mau diarahkan kemana servernya ). Isi alamat email kita di kolom “Your E-mail Address” dan jangan sampai salah. Isi Karakter huruf pada kolom “Type the characters you see in this picture”. Selanjutnya silahkan klik next. Lihat gambar dibawah.
Langkah selanjutnya adalah mengisi Nama dan Password (gambar dibawah). Password di sini adalah password untuk log in ke dot tk. Selanjutnya klik next.
Sampai di sini, kita telah melakukan registrasi baru domain gratis di .tk. Tinggal menunggu konfirmasi yaitu kode verifikasi yang dikirimkan kealamat email kita.
Silahkan cek inbox email kita. Jika tidak ada, cek pada spam email.Isi konfirmasi dari dot Tk.
Kalau sudah dapat konfirmasi email,, silahkan ikuti link yang di berikan dot.tk. Seharusnya kita akan di bawa kehalaman seperti di bawah ini. Silahkan masukkan kode konfirmasi kita dan klik “Confirm”.
Bila kode konfirmasi yang kita masukkan benar, maka domain baru di dot Tk yang kita registrasi ini langsung di aktifkan. Silahkan log ini dengan alamat email dan password kita untuk melakukan setting/merubah server name.
* Setting (DNS) domain .tk ke Blogspot
Kalau kita sebelumnya telah memiliki blog di blogspot, dan mau memakai domain dari dot tk. Tinggal setting dan arahkan name servernya ke blogspot (ghs.google.com). Caranya, pada panel sebelah kiri, silahkan pilih “My Domains” >> “List my domains”. Pada halaman “List my domains”, pilih domain yang mau di setting, kemudian klik “modify”.
Langkah selanjutnya, kita akan dihadapkan dengan halaman setting domain, dimana terdapat tiga pilihan pengaturan yaitu :
1. Domain forwarding
2. Use Dot TK Free DNS Service
3. Use Custom DNS Service
Silahkan pilih opsi no 2 “Use Dot TK Free DNS Service” kemudian klik “Configure” disebelah kanannya. Pada kolom “Type” terdapat 3 pilihan Record, yaitu : A, CNAME dan MX. Pilih :
* Type = CNAME
* Host Name = www.domainkita.tk ( contoh saya isi dengan www.elvaku.tk)
* IP Address = ghs.google.com
Sampai di sini, setting DNS untuk domain dot tk yang diarahkan ke blogspot telah selesai, tinggal menunggu prosesnya kurang lebih 24 jam. Oh iya, silahkan cek domain kita di http://network-tools.com/ untuk melihat apakah settingan DNS yang diarahkan ke blogspot sudah benar. Centang opsi “DNS Records (Advanced Tool)”, pada kolom IP isi dengan nama domain kita, misal isi dengan elvaku.tk. Selanjutnya klik GO. Lihat parameter-parameternya di “Answer records”. Seharusnya, IP yang tercantum disana sama dengan IP Record A yang kita masukkan pada pengaturan domain dot tk tadi.
Sampai di sini sebenarnya setting domain dot tk untuk blogspot sebenarnya sudah cukup. Tetapi, blog kita nanti tidak dapat diakses tanpa mengetikkan WWW di address bar browser (contoh http://elvaku.tk). Supaya blog kita tetap dapat diakses dengan atau tanpa WWW, kita tambahkan lagi Type record, Tetapi kali ini bukan CNAME Record, melainkan A Record. Lihat gambar diatas, klik “add another hostname”. Isi dengan :
* Type = A
* Host Name = domainkita.tk ( tanpa WWW, contoh saya isi dengan elvaku.tk )
* IP Address = 216.239.32.21
Tambahkan lagi “add another hostname” A Record dengan IP yang berbeda sebanyak 3 kali lagi. Masing-masing pada kolom IP, Isi dengan :
* 216.239.34.21
* 216.239.36.21
* 216.239.38.21
Sehingga ada 4 setting Untuk A Record dan satu setting untuk CNAME Record seperti gambar dibawah ini :
Jika gagal silahkan isi dengan Type record di bawah ini saja, tanpa harus menambahkan 3 Type record :
* Type = A
* Host Name = domainkita.tk ( tanpa WWW, contoh saya isi dengan elvaku.tk )
* IP Address = 216.239.32.21
sebagai alternatif untuk bisa diakses dengan atau tanpa WWW kita setting pada blogger, dan arahkan domain elvaku.tk ke www.elvaku.tk (baca setingan di bawah)
Langkah terakhir jika proses di atas sudah selesai, sambil menunggu domain dot.tk aktif kita bisa setting di blogger. Caranya :
1. Masuk ke account Blogger Anda.
2. Pilih tab Setelan -> Penerbitan -> Klik Domain Ubahsuaian -> Beralih Kesetelan Lebih lanjut -> dan masukkan nama domain yang telah di buat tadi pada kolom Domain Anda -> Isi Kolom Verifikasi Kata -> Dan Klik Simpan Setelan.
3. bila sudah berhasil, langkah selanjutnya beri tanda cheklist pada kotak kecil dibawah kolom domain anda, tepatnya di sebelah tulisan "Mengarahkan elvaku.tk ke www.elvaku.tk" -> Isi Kolom Verifikasi Kata -> Dan Klik Simpan Setelan.
4. Selesai......
- Selama 24jam sebaiknya kita jangan mengedit ataupun mengutak-utik blog, sampai domain kita benar-benar aktif, biasanya blog kita akan off selama 24jam. setelah 24jam kita bisa mengeceknya dengan mengetik alamat blog kita yang baru langsung di addres bar.
- Domain DOT.TK berlaku selama setahun, dan Setiap tahunnya Kita akan mendapatkan email dari DOT.TK 15 hari sebelum masa expire domain, yang isinya Kita harus me-RENEW (Memperpanjang) domain Kita, sehingga domain Kita tetap bisa di pakai.
Selamat mencoba, semoga sukses !
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 !
Pada postingan sebelumnya kami telah membahas tentang Cara Submit Blog Ke Search Engine Dengan Sitemap Generator, untuk kali ini untuk melengkapinya Kami uraikan Tips Supaya Semua Halaman Posting Blog Terindex Google. Semua Halaman Posting Blog Terindex Google adalah sesuatu yang sangat mengasikan saat kita memposting. Sudah kita pahami bahwa sebuah blog akan memiliki banyak pengunjung jika halaman-halamannya banyak yang terindex oleh search engine, sehingga pengunjung dari search engine tersebut akan dapat menemukan blog kita melalui search engine (seperti google).
Ngomong-gomong tentang SEO kali ini saya ingin sedikit membagi pengalaman ngeblog supaya Semua Halaman Posting Blog Terindex Google dengan sempurna. Cara lainya dengan Upload Sitemap XML Blog Ke Google Webmaster, namun menurut saya cara tersebut belumlah sempurna.
Silahkan ikuti cara berikut :
1. Silahkan Anda daftar dulu di Google Webmaster melalui google. Kalau sudah punya akun Google Webmaster silahkan Log In kesana, lalu menuju pengaturan Sitemap (Site Configuration – Sitemaps)
2. Kemudian, jika blog-mu baru didaftarkan Google webmaster tool, maka akan tampil seperti berikut :
3. Langkah selanjutnya, perhatikan gambar diatas, silahkan Anda klik tombol Submit a Sitemap pada Google webmaster Anda agar Semua Halaman Posting Terindex Google, lalu masukkan URL sitemap berikut ini:
4. Lalu Setelah sitemap itu disubmit, lanjutkan dengan mensubmit URL berikut :
5. Lakukan hal yang sama untuk URL berikut:
Note :
Jika jumlah posting blog Anda sudah banyak (lebih dari 500 postingan), maka masukkan juga sitemap berikut agar Semua Halaman Posting Terindex Google:
serta jika jumlah posting blog Anda lebih dari 1000, agar Semua Halaman Posting Terindex Google masukkan sitemap yang berikut ini:
dan seterusnya, format URL sitemap (seperti diatas) menyesuaikan jumlah posting blog Anda. Setelah semua URL tersebut masuk ke Sitemaps Google, tunggu beberapa lama, atau tutup saja Google Webmaster Toolnya dan lihat esok hari, maka biasanya semua Semua Halaman Posting Terindex Google dengan sempurna.
Selamat mencoba !
Ngomong-gomong tentang SEO kali ini saya ingin sedikit membagi pengalaman ngeblog supaya Semua Halaman Posting Blog Terindex Google dengan sempurna. Cara lainya dengan Upload Sitemap XML Blog Ke Google Webmaster, namun menurut saya cara tersebut belumlah sempurna.
Silahkan ikuti cara berikut :
1. Silahkan Anda daftar dulu di Google Webmaster melalui google. Kalau sudah punya akun Google Webmaster silahkan Log In kesana, lalu menuju pengaturan Sitemap (Site Configuration – Sitemaps)
2. Kemudian, jika blog-mu baru didaftarkan Google webmaster tool, maka akan tampil seperti berikut :
3. Langkah selanjutnya, perhatikan gambar diatas, silahkan Anda klik tombol Submit a Sitemap pada Google webmaster Anda agar Semua Halaman Posting Terindex Google, lalu masukkan URL sitemap berikut ini:
atom.xml?redirect=false
4. Lalu Setelah sitemap itu disubmit, lanjutkan dengan mensubmit URL berikut :
feeds/posts/default?orderby=updated
5. Lakukan hal yang sama untuk URL berikut:
atom.xml?redirect=false&start-index=1&max-results=500
Note :
Jika jumlah posting blog Anda sudah banyak (lebih dari 500 postingan), maka masukkan juga sitemap berikut agar Semua Halaman Posting Terindex Google:
atom.xml?redirect=false&start-index=501&max-results=500
serta jika jumlah posting blog Anda lebih dari 1000, agar Semua Halaman Posting Terindex Google masukkan sitemap yang berikut ini:
atom.xml?redirect=false&start-index=1001&max-results=500
dan seterusnya, format URL sitemap (seperti diatas) menyesuaikan jumlah posting blog Anda. Setelah semua URL tersebut masuk ke Sitemaps Google, tunggu beberapa lama, atau tutup saja Google Webmaster Toolnya dan lihat esok hari, maka biasanya semua Semua Halaman Posting Terindex Google dengan sempurna.
Selamat mencoba !
Translate bahasa sangat penting untuk blog kita,karena pengunjung blog kita bukan cuma dari bahasa local saja,maka dari itu mari kita bahas cara baru memasang widget translate bahasa di blog.
Berikut adalah screenshot saat loading tranlate :
Caranya adalah sebagai berikut :
Langkah 1: Silahkan anda masuk ke situs Google Translate Toll.
Langkah 2: Pilih Jenis elemen yang akan terjemahkan di blog Anda.
Pada langkah ini anda bisa memilih bagian mana saja yang akan di terjemahkan,di bagian postingan atau seluruh isi blog.
Langkah 3: Pilih bahasa yang anda gunakan di blog Anda:
Langkah 4: Salin dan tempel kode yang ada dalam kotak ke widget blog anda.
Langkah 5: selesai dan lihat hasilnya.
Berikut adalah screenshot saat loading tranlate :
Caranya adalah sebagai berikut :
Langkah 1: Silahkan anda masuk ke situs Google Translate Toll.
Langkah 2: Pilih Jenis elemen yang akan terjemahkan di blog Anda.
Pada langkah ini anda bisa memilih bagian mana saja yang akan di terjemahkan,di bagian postingan atau seluruh isi blog.
Langkah 3: Pilih bahasa yang anda gunakan di blog Anda:
Langkah 4: Salin dan tempel kode yang ada dalam kotak ke widget blog anda.
Langkah 5: selesai dan lihat hasilnya.
Ketika Kita mengganti template yaitu menghilangnya segala aksesori serta blog tools yang telah di pasang di blog, Kita juga akan kehilangan widget, maka pada postingan kali ini saya akan mencoba mengulas tentang bagaimana cara membackup data-data yang telah di masukan ke dalam elemen halaman atau di sebut juga dengan widget.
Ada banyak cara untuk membackup data yang ada dalam Widgets, untuk kali ini saya akan mencoba dua buah langkah saja yaitu membackup secara langsung dari elemen halaman serta membackup melalu source code template.
* Membackup widgets melalui Elemen Halaman.
Membackup widgets dengan cara ini sebenarnya sedikit merepotkan, akan tetapi daripada kita kehilangan berbagai aksesori serta tool yang telah terpasang, sepertinya lebih bijaksana untuk melakukannya.
Silahkan ikuti langkah-langkah berikut ini :
1. Sign in di blogger dengan ID sobat.
2. Klik Layout.
3. Klik menu Elemen halaman, sobat akan melihat halaman seperti ini (contoh saja) :
4. Pada contoh gambar di atas terlihat tulisan edit yang saya beri lingakaran merah, tugas sobat yaitu klik pada tulisan Edit pada setiap elemen halaman yang ada, maka akan muncul popup window yang menyertakan kode yang pernah di masukan kedalamnya. Perhatikan gambar berikut :
5. Copy kode yang tertanam di dalamnya, kemudian paste pada Notepad.
6. Ulangi langkah di atas pada seluruh elemen yang ada. Jika sobat mempunyai 20 elemen halaman,
maka buka ke 20 elemen halaman tersebut lalu copy paste kode yang ada di dalamnya
7. Selesai.
Seperti yang saya katakan di atas bahwa langkah ini sedikit membosankan dan memerlukan waktu yang cukup lumayan lama, akan tetapi untuk menyelamatkan data yang ada maka bolehlah untuk di lakukan.
* Backup widget melalui Source Code Template.
Cara ini menurut saya lebih cepat dan efisien, hanya perlu sedikit waktu untuk melakukannya. Akan tetapi walaupun demikian, cara ini memerlukan kejelian sobat dalam mencari kode widget di balik tumpukan kode template yang ada. Penasaran bagaimana langkahnya? silahkan ikuti langkah-langkah berikut ini :
1. Kunjungi alamat blog milik sobat sendiri.
2. Setelah sobat berada pada blog sobat sendiri, klik menu View yang berada pada bar menu sebelah atas pada browser masing-masing. Perhatikan gambar berikut :
3. setelah klik View, maka akan keluar sub menu dari view ini, lalu klik Source.
4. Apabila sobat memakai browser Internet Explorer, maka akan secara otomatis keluar program notepad yang memuat source code dari template milik sobat. Apabila sobat memakai browser Mozilla Firefox atau Opera, maka akan keluar halaman baru yang memuat source code dari template milik sobat. Perhatikan gambar berikut :
5. Simpanlah (Save) data source code tersebut untuk nanti di masukan ke dalam elemen halaman.
6. Selesai.
Seperti yang saya katakan di awal bahwa cara ini sangat mudah, akan tetapi source code tersebut memuat bukan hanya kode widget, akan tetapi seluruh kode yang termuat di dalam template milik sobat. Pertanyaan yang mungkin timbul yaitu di manakah letak kode-kode yang ada dalam elemen halaman/widget? Jawabannya yaitu setiap kode (baik aksesori blog, javascript, kode buku tamu, dll) yang tertanam di dalam elemen halaman akan selalu di awali dengan kode :
Dan di akhiri dengan kode :
Sebagai contoh, di dalam source code template milik saya terdapat kode seperti ini :
Maka dapat di pastikan kode yang ada dalam widget untuk keperluan nanti di masukan kembali saat baru mengganti template adalah kode yang ini :
Semoga dengan postingan ini, ketika sobat mengganti template dengan yang baru tidak lagi mengeluhkan kehilangan berbagai kode yang ada dalam elemen halaman karena sudah membuatkan backup elemen halaman. Jadi mulai sekarang, apabila sobat berniat untuk mengganti template, jangan lupa untuk membuatkan backup template serta Backup elemen halaman / Widget.
Selamat mencoba !
Ada banyak cara untuk membackup data yang ada dalam Widgets, untuk kali ini saya akan mencoba dua buah langkah saja yaitu membackup secara langsung dari elemen halaman serta membackup melalu source code template.
* Membackup widgets melalui Elemen Halaman.
Membackup widgets dengan cara ini sebenarnya sedikit merepotkan, akan tetapi daripada kita kehilangan berbagai aksesori serta tool yang telah terpasang, sepertinya lebih bijaksana untuk melakukannya.
Silahkan ikuti langkah-langkah berikut ini :
1. Sign in di blogger dengan ID sobat.
2. Klik Layout.
3. Klik menu Elemen halaman, sobat akan melihat halaman seperti ini (contoh saja) :
4. Pada contoh gambar di atas terlihat tulisan edit yang saya beri lingakaran merah, tugas sobat yaitu klik pada tulisan Edit pada setiap elemen halaman yang ada, maka akan muncul popup window yang menyertakan kode yang pernah di masukan kedalamnya. Perhatikan gambar berikut :
5. Copy kode yang tertanam di dalamnya, kemudian paste pada Notepad.
6. Ulangi langkah di atas pada seluruh elemen yang ada. Jika sobat mempunyai 20 elemen halaman,
maka buka ke 20 elemen halaman tersebut lalu copy paste kode yang ada di dalamnya
7. Selesai.
Seperti yang saya katakan di atas bahwa langkah ini sedikit membosankan dan memerlukan waktu yang cukup lumayan lama, akan tetapi untuk menyelamatkan data yang ada maka bolehlah untuk di lakukan.
* Backup widget melalui Source Code Template.
Cara ini menurut saya lebih cepat dan efisien, hanya perlu sedikit waktu untuk melakukannya. Akan tetapi walaupun demikian, cara ini memerlukan kejelian sobat dalam mencari kode widget di balik tumpukan kode template yang ada. Penasaran bagaimana langkahnya? silahkan ikuti langkah-langkah berikut ini :
1. Kunjungi alamat blog milik sobat sendiri.
2. Setelah sobat berada pada blog sobat sendiri, klik menu View yang berada pada bar menu sebelah atas pada browser masing-masing. Perhatikan gambar berikut :
3. setelah klik View, maka akan keluar sub menu dari view ini, lalu klik Source.
4. Apabila sobat memakai browser Internet Explorer, maka akan secara otomatis keluar program notepad yang memuat source code dari template milik sobat. Apabila sobat memakai browser Mozilla Firefox atau Opera, maka akan keluar halaman baru yang memuat source code dari template milik sobat. Perhatikan gambar berikut :
5. Simpanlah (Save) data source code tersebut untuk nanti di masukan ke dalam elemen halaman.
6. Selesai.
Seperti yang saya katakan di awal bahwa cara ini sangat mudah, akan tetapi source code tersebut memuat bukan hanya kode widget, akan tetapi seluruh kode yang termuat di dalam template milik sobat. Pertanyaan yang mungkin timbul yaitu di manakah letak kode-kode yang ada dalam elemen halaman/widget? Jawabannya yaitu setiap kode (baik aksesori blog, javascript, kode buku tamu, dll) yang tertanam di dalam elemen halaman akan selalu di awali dengan kode :
<div class='widget-content'>
Dan di akhiri dengan kode :
</div>
Sebagai contoh, di dalam source code template milik saya terdapat kode seperti ini :
<h2 class='title'>Buku Tamu</h2> <!-- yang ini kode judulnya -->
<div class='widget-content'> <!-- perhatikan kode yang ini -->
<!-- Begin Shoutbox - http://www.shoutmix.com -->
<iframe scrolling="auto" width="170" frameborder="0" src="http://www.shoutmix.com/?jaya" height="500" title="jaya">
<a href="http://www.shoutmix.com/?jaya">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!"></a><br/>
<!-- End Shoutbox -->
</div> <!-- perhatikan juga kode yang ini -->
Maka dapat di pastikan kode yang ada dalam widget untuk keperluan nanti di masukan kembali saat baru mengganti template adalah kode yang ini :
<!-- Begin Shoutbox - http://www.shoutmix.com -->
<iframe scrolling="auto" width="170" frameborder="0" src="http://www.shoutmix.com/?jaya" height="500" title="jaya">
<a href="http://www.shoutmix.com/?jaya">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!"></a><br/>
<!-- End Shoutbox -->
Semoga dengan postingan ini, ketika sobat mengganti template dengan yang baru tidak lagi mengeluhkan kehilangan berbagai kode yang ada dalam elemen halaman karena sudah membuatkan backup elemen halaman. Jadi mulai sekarang, apabila sobat berniat untuk mengganti template, jangan lupa untuk membuatkan backup template serta Backup elemen halaman / Widget.
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 !
Kali ini saya akan share tentang Cara Submit Search Engine Dengan Sitemap Generator, dengan tool ini blog yang belum terindex search engine maka akan segera terindek oleh search engine, terkadang para blogger tidak menyadari bahwa blog harus di daftarkan ke search engine agar segara muncul dalam pencarian google, tanpa itu semua blog akan lama muncul dari pencarian search engin.
Berikut Cara Submit Search Engine Dengan Sitemap Generator :
1. Silahkan buka link Sitemap generator Disini.
2. Masukkan alamat blog Anda di kolom yang telah tersedia dan klik create blogger sitemap hingga muncul halaman seperti ini :
3. Selanjutnya Anda copy code yang lingkari merah dan kirim peta situs ke webmaster tool.
4. Langkah selanjutnya kembali ke halaman sitemap generator lagi dan klik "Submit 1 - 500 posts" di bawah tulisan "For Bing".
5. Dan yang terakhir klik "Submit 1 - 500 posts" di bawah tulisan "For Yahoo".
6. Selesai.
Semoga berhasil.... !
Berikut Cara Submit Search Engine Dengan Sitemap Generator :
1. Silahkan buka link Sitemap generator Disini.
2. Masukkan alamat blog Anda di kolom yang telah tersedia dan klik create blogger sitemap hingga muncul halaman seperti ini :
3. Selanjutnya Anda copy code yang lingkari merah dan kirim peta situs ke webmaster tool.
4. Langkah selanjutnya kembali ke halaman sitemap generator lagi dan klik "Submit 1 - 500 posts" di bawah tulisan "For Bing".
5. Dan yang terakhir klik "Submit 1 - 500 posts" di bawah tulisan "For Yahoo".
6. Selesai.
Semoga berhasil.... !
Daftar isi sangat lah penting kita pasang pada blog kita , karena akan mempermudahkan visitor untuk melihat posting-posting kita yang telah kita publikasikan pada blog kita,baik itu posting yang sudah lama maupun yang baru saja kita terbitkan,untuk yang satu ini sangatlah berbeda , karena terdapat fasilitas New Posting,yang artinya setiap kita baru saja terbitkan posting di daftar ini terlihat tanda New (baru)dan tertata rapi berdasarkan Label blog.
* Cara Pertama dalam postingan.
1. login ke blogger
2. Anda buat new posting lalu copy code berikut :
3. Pastekan ke form new posting sobat.
4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Ubah tanggal penerbitan pada tanggal pertama kali anda mulai menulis artikel dengan mengeklik Opsi entri.
6. Kemudian Terbitkan dan lihat hasilnya.
* Cara Kedua di widget.
1. login ke blogger
2. Klik Rancangan -> Tambah Gadget -> lalu copy code berikut :
3. Pastekan ke kotak widget.
4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Simpan, dan lihat hasilnya.
* Cara Pertama dalam postingan.
1. login ke blogger
2. Anda buat new posting lalu copy code berikut :
<div ;="" margin="3px" style="border: 1px solid #32A50C;-moz-border-radius: 5px;height:500px;overflow: auto;">
<script src="http://sagita-com.googlecode.com/files/daftarisi.js"></script>
<script src="http://www.sagita-com.tk/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
3. Pastekan ke form new posting sobat.
4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Ubah tanggal penerbitan pada tanggal pertama kali anda mulai menulis artikel dengan mengeklik Opsi entri.
6. Kemudian Terbitkan dan lihat hasilnya.
* Cara Kedua di widget.
1. login ke blogger
2. Klik Rancangan -> Tambah Gadget -> lalu copy code berikut :
<div style="height:500px;overflow: auto;">
<script src="http://sagita-com.googlecode.com/files/daftarisi.js"></script>
<script src="http://www.sagita-com.tk/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
3. Pastekan ke kotak widget.
4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Simpan, dan lihat hasilnya.
