Recent post
Showing posts with label Tutorial Blog. Show all posts
Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee> ... </marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLAMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Contoh:
Kode:
Hasil
Kode:
Kode:
Kode:
Gunakan kreatifitas kalian sendiri agar lebih menarik.
Thanks to Kang Rohman
Marquee ini bisa di buat dengan menggunakan tag <marquee> ... </marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLAMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Contoh:
Kode:
<marquee align="centre" direction="right" scrollmount="2" height="100" width="100%">Teks dari Kiri ke Kanan</marque>
Hasil
Kode:
<marquee align="centre" direction="right" scrollmount="2" height="100" width="100%" behavior="alternate">Teks Bergerak Bolak Balik dari Kiri Ke Kanan lalu Balik lagi</marque>Hasil:
Kode:
<div align="left"><font face="georgia" color="White"><b><Marque bgcolor="blue" width="100%" scrollamount="3" behavior="alternate">Marque dengan Efek Font dan BackgroundHasil:
</marquee></b></font></div>
Kode:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">Hasil:
silahkan tunjuk ke sini
</marquee>
Gunakan kreatifitas kalian sendiri agar lebih menarik.
Thanks to Kang Rohman
Untuk membuat link pada blog kita saat di klik tanpa meninggalkan blog atau artikel sebelumnya yaitu dengan cara menambahkan kode script target="blank"
Contoh:
Kata/Kalimat :
Target Link menutup blog atau artikel awal : lihat pada edit HTML di Entri Baru
Targel Link Open New Tab atau New Window: lihat pada edit HTML di Entri Baru
Coba klik link dibawah ini
Menutup Window Awal : Cara Membuat Link Open New Tab atau New Window
: Cara Membuat Link Open New Tab atau New Window
Contoh:
Kata/Kalimat :
Cara Membuat Link Open New Tab atau New Window
Target Link menutup blog atau artikel awal : lihat pada edit HTML di Entri Baru
<a href="http://kangalwi.blogspot.com/2011/03/cara-membuat-link-open-new-tab-atau-new.html">Cara Membuat Link Open New Tab atau New Window</a>
Targel Link Open New Tab atau New Window: lihat pada edit HTML di Entri Baru
<a href="http://kangalwi.blogspot.com/2011/03/cara-membuat-link-open-new-tab-atau-new.html" target="blank">Cara Membuat Link Open New Tab atau New Window</a>
Coba klik link dibawah ini
Menutup Window Awal : Cara Membuat Link Open New Tab atau New Window
: Cara Membuat Link Open New Tab atau New Window
Yuk gabung ke Promote unlimited number of banners for FREE (No upgrade required)
Apa sih yang kita dapatkan dari EasyHits4U?
1. Traffic Rank Blog
2. Money
Sistem ini dirancang untuk membantu Anda mempromosikan situs Anda dengan meningkatkan jumlah pengunjung yang benar-benar melihat situs Anda.
Cara Kerja:
Untuk setiap situs yang Anda kunjungi (kita sebut ini "surfing"), Anda akan menerima satu pengunjung kembali ke situs Anda. Kami menyediakan 1:1 Bursa Rasio wajar. Tidak ada batasan untuk jumlah hits bebas Anda dapat menerima per hari, 10 100, atau 1000 bahkan!
Kami membalas Anda dengan uang tunai dan lalu lintas tambahan untuk aktif dalam pertukaran lalu lintas kami.
Tapi itu tidak semua! Orang di EasyHits4U menggunakan bahan promosi kami dan Anda akan mendapatkan 10% dari lalu lintas yang mereka menghasilkan. Dan tidak hanya dari referensi langsung - Anda juga akan menerima kunjungan dari anggota mereka lihat. sistem rujukan kami tumbuh sampai 6 tingkat.
Program:
Apa sih yang kita dapatkan dari EasyHits4U?
1. Traffic Rank Blog
2. Money
Sistem ini dirancang untuk membantu Anda mempromosikan situs Anda dengan meningkatkan jumlah pengunjung yang benar-benar melihat situs Anda.
Cara Kerja:
Untuk setiap situs yang Anda kunjungi (kita sebut ini "surfing"), Anda akan menerima satu pengunjung kembali ke situs Anda. Kami menyediakan 1:1 Bursa Rasio wajar. Tidak ada batasan untuk jumlah hits bebas Anda dapat menerima per hari, 10 100, atau 1000 bahkan!
Kami membalas Anda dengan uang tunai dan lalu lintas tambahan untuk aktif dalam pertukaran lalu lintas kami.
Tapi itu tidak semua! Orang di EasyHits4U menggunakan bahan promosi kami dan Anda akan mendapatkan 10% dari lalu lintas yang mereka menghasilkan. Dan tidak hanya dari referensi langsung - Anda juga akan menerima kunjungan dari anggota mereka lihat. sistem rujukan kami tumbuh sampai 6 tingkat.
Program:
1:1 Lalu Lintas
Manual Surfing
20 detik atau lebih per kunjungan
Dijamin unik hits 24 jam sehari
5 level referral program (10% -5% -3% -2% -1%)
Menerima uang tunai untuk berselancar aktif ($ 0.30 untuk 1000 situs dilihat)
Geo Penargetan iklan Anda
Anda dapat mempromosikan hingga 15 situs
Surfing dan rujukan kontes
50 kredit bebas & tayangan iklan teks 500 pada sign-up (setelah Anda surfing 50 situs)
Promosikan situs Anda dengan banner dan iklan teks tak terbatas
Situs Link listing di direktori kami
Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak terlalu memakan tempat. Sebenarnya anda juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.
Spoiler ini bisa anda letakkan di postingan, mungkin anda gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.
Kode Spoiler :
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b> Lihat Kode Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan kode script, HTML dan teks anda disini
<br>
</div>
</div>
</div>
Keterangan :
Spoiler ini bisa anda letakkan di postingan, mungkin anda gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.
Kode Spoiler :
Lihat Kode Spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b> Lihat Kode Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan kode script, HTML dan teks anda disini
<br>
</div>
</div>
</div>
Keterangan :
1. Tulisan Lihat Kode Spoiler adalah judul, silahkan ganti sesuai keinginan anda.
2. Untuk tulisan Open dan Close bisa anda ganti sesuai keinginan.
3. Width : 55px untuk lebar Spoiler.
4. Font-size: 11px untuk besar tulisan pada kotak Spoiler.
Untuk membuat animasi efek secara berkedip adalah dengan meletakan kode script <blink> .... </blink>
sebagai contoh perhatikan kode berikut
hasilnya adalah
Selamat mencoba
sebagai contoh perhatikan kode berikut
<blink>
Ini adalah efek teks atau link yang bisa berkedip</blink>
hasilnya adalah
Selamat mencoba
Untuk membuat efek warna pelangi pada link/URL terkait ketika disorot oleh mouse ikuti langkah-langkah berikut:
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari kode <head> (Tekan Ctrl + F untuk mencari kode agar lebih mudah)
5. letakan kode dibawah ini dibawah kode <head>
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari kode <head> (Tekan Ctrl + F untuk mencari kode agar lebih mudah)
5. letakan kode dibawah ini dibawah kode <head>
<script src='http://imtikhan.googlecode.com/files/rainbow.js' type='text/javascript'/>6. Simpan template
Lihat dulu kode-kode script
Pada kode script yang kedua yaitu script menu, disini kita akan menyisipkan kode <ul> ... </ul> kembali diantara kode <li> ... </li> untuk membuat submenu dari menu utama.
1. Silahkan login ke blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Sebelumnya Copy paste kode berikut diatas ]]></b:skin> (jika belum ada) untuk optimalisasi :
Pada kode script yang kedua yaitu script menu, disini kita akan menyisipkan kode <ul> ... </ul> kembali diantara kode <li> ... </li> untuk membuat submenu dari menu utama.
1. Silahkan login ke blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Sebelumnya Copy paste kode berikut diatas ]]></b:skin> (jika belum ada) untuk optimalisasi :
#nav li li {float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
sebagai contoh perhatikan kode script berikut:<ul>
<li><a href='URL Sub 1'>Sub Menu 1</a></li>
<li><a href='URL Sub 2'>Sub Menu 2</a></li>
<li><a href='URL Sub 3'>Sub Menu 3</a></li>
</ul>
Setelah membuat kode-kode sub menu, silahkan Simpan Template.<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://AlamatBlogAnda.blogspot.com/'>Home</a></li>
<li><a href='URL Menu 2'>Menu Utama 2</a></li>
<li><a href='URL Menu 3'>Menu Utama 3</a>
<ul><li><a href='URL Sub menu 3-1'>Sub Menu 3-1</a></li>
<li><a href='URL Sub menu 3-2'>Sub Menu 3-2</a></li>
<li><a href='URL Sub menu 3-3'>Sub Menu 3-3</a></li>
</ul></li><li><a href='URL Menu 4'>Menu Utama 4</a></li>
<li><a href='URL Menu 5'>Menu Utama 5</a></li>
</ul>
</div>
</div>
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari Kode kode ]]></b:skin> (Tekan Ctrl + F biar mudah dicari)
5. Copy Paste kode berikut diatas kode ]]></b:skin> :
Note:
Ganti ukuran menu sesuai dengan yang anda inginkan (teks warna biru)
Ganti warna background/teks/warna saat pointer diarahkan (teks warna hijau)
6. Cari kode </b:section>
7. Copy paste kode berikut diantara </b:section> dan </div>
Note: Teks warna biru = link yang dituju --- Teks warna hijau = nama tampilan pada menu
8. Simpan template
Jika ingin menambahkan elemen pencarian disamping menu tambahkan kode berikut sebelum kode </div> pada kode diatas :
<div id='navright'>
<form action='http://AlamatBlogKamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
Simpan template kembali
Sumber: Kang Rohman
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari Kode kode ]]></b:skin> (Tekan Ctrl + F biar mudah dicari)
5. Copy Paste kode berikut diatas kode ]]></b:skin> :
/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px soli #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Note:
Ganti ukuran menu sesuai dengan yang anda inginkan (teks warna biru)
Ganti warna background/teks/warna saat pointer diarahkan (teks warna hijau)
6. Cari kode </b:section>
7. Copy paste kode berikut diantara </b:section> dan </div>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://AlamatBlogKamu.blogspot.com/'>Home</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
</ul>
</div>
</div>
</div>
Note: Teks warna biru = link yang dituju --- Teks warna hijau = nama tampilan pada menu
8. Simpan template
Jika ingin menambahkan elemen pencarian disamping menu tambahkan kode berikut sebelum kode </div> pada kode diatas :
<div id='navright'>
<form action='http://AlamatBlogKamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
Simpan template kembali
Sumber: Kang Rohman
Artikel ini saya share dari Blog Kang Rohman. Artikel ini juga yang dulu-dulu saya cari dan biar tidak lupa maka saya posting ulang
Langkah #1
Langkah #2
Langkah #1
- Sign in di blogger dengan ID anda
- Bilsa sudah berada di halaman dashboard, klik Layout.
- Klik tab Edit HTML
- Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).
- Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.
- Lihat ke bagian body template, lalu cari kode seperti ini :
- Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :
- Klik tombol Simpan Template.
- Selesai. Langkah pertama sudah selesai.
<b:include data='post' name='post'/>
Langkah #2
- Klik tab Elemen Halaman.
- Klik tulisan Tambahkan sebuah Elemen Halaman.
- Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.
- Copy lalu paste kode berikut :
- Ganti NamaBlogAnda nama blog anda sendiri. Contoh : nama blog saya adalah kolom-tutorial. ganti angka 200 dengan nomor yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.
- Klik tombol Simpan Perubahan.
- Selesai.
<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi»</a>
Cara membuat related post dan membuat menu scroll sudah saya bahasa sebelumnya. Biar lebih instan ikuti langkah-langklah berikut:
1. Login Ke Blog
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari kode berikut
1. Login Ke Blog
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari kode berikut
5. Copy Paste kode berikut dibawh kode diatas<data:post.body/>
<div style='overflow:auto;width:525px;height:200px;padding:10px;border:1px solid #a5a4a4'> <br/>6. Simpan Template
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</div>
Maksud dari judul diatas adalah membuat isi dari sebuah kode html menjadi tampil scroll, misalnya pada related post atau posting terkait atau kode-kode lain agar tampak ringkas.
Copy paste kode berikut:
Width : 200 px adalah lebar scroll (dapat dirubah sesuai dengan keinginan anda)
Height : 100px adalah panjang scroll (dapat dirubah juga)
#FF000 adalah warna border, jika ingin dirubah bisa dilihat kode-kode warna pada photoshop.
Copy paste kode berikut:
<div style="overflow:auto;width200px;height:100px;padding:10px;border:1px solid #FF0000"><br/>
Sisipkan Kode HTML Anda
</div>
Width : 200 px adalah lebar scroll (dapat dirubah sesuai dengan keinginan anda)
Height : 100px adalah panjang scroll (dapat dirubah juga)
#FF000 adalah warna border, jika ingin dirubah bisa dilihat kode-kode warna pada photoshop.
Membuat posting terkait adalah penting agar pengunjung lebih betah di blog anda karena artikel-artikel tersebut yang mungkin mereka cari.
Langkah-langkahnya sebagai berikut:
1. Login ke Blog
2. Pilih Rancangan > Edit HTML
3. Centang Expand Widget Template
4. Cari kode berikut (tekan Ctrcl + F)
6. Simpan Template
Langkah-langkahnya sebagai berikut:
1. Login ke Blog
2. Pilih Rancangan > Edit HTML
3. Centang Expand Widget Template
4. Cari kode berikut (tekan Ctrcl + F)
<data:post.body/>5. Copy paste kode berikut dibawah kode diatas:
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
6. Simpan Template
Agar blog kita cepat terindeks di serach engine adalah dengan memasukan url blog kita ke dalam website serach engine. Ini adalah salah satu cara agar Blog kita cepat terindeks di pencarian search engine yaitu dengan add url. Dibawah ini adalah add url secara cuma-cuma atau GRATIS.
Google: http://www.google.com/addurl.html
Yahoo: http://siteexplorer.search.yahoo.com/submit
Bing: http://www.bing.com/webmaster/SubmitSitePage.aspx
Altavista: http://www.altavista.com/addurl/
DMOZ / ODP: http://www.dmoz.org/add.html
Alexa: http://www.alexa.com/support/get_archive.html
MSN: http://search.msn.com/docs/submit.aspx
Mengganti judul blog dengan judul posting merupakan salah satu trik SEO (Search Engine Optimalization) agar blog kita cepat terindeks oleh search engine.
Langkah-langkahnya:
1. Login ke Blogger
2. Pilih Rancangan kemudian Edit HTML
3. Conteng Expand Template Widget (pojok kanan atas pada tempat kode-kode html)
4. Cari kode berikut <title><data:blog.title/></title> atau title><data:blog.pagetitle/></title>
(biasanya terletak dibawah <head>)
5. Ganti kode tersebut dengan kode berikut:
atau Kode berikut:
6. Simpan Template
Langkah-langkahnya:
1. Login ke Blogger
2. Pilih Rancangan kemudian Edit HTML
3. Conteng Expand Template Widget (pojok kanan atas pada tempat kode-kode html)
4. Cari kode berikut <title><data:blog.title/></title> atau title><data:blog.pagetitle/></title>
(biasanya terletak dibawah <head>)
5. Ganti kode tersebut dengan kode berikut:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
atau Kode berikut:
<b:if cond='data:blog.pageType == "index"'>Cara ini mengikutkan judul blog anda di belakang judul posting, silahkan ganti tulisan Judul Blog dengan Judul Blog anda
<title><data:blog.title/> | Judul Blog </title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
6. Simpan Template
Ketika ketika membuat blog di blogger, maka akan terdapat icon addressbar bawaan dari blogger. Icon tersebut bisa kita ganti dengan Custom atau buatan sendiri. Langkah-langkahnya adalah sebagai berikut:
1. Membuat gambar iconnya dengan progam grafis, seperti CorelDraw, Paint, Photoshop, dll
2. Upload gambar yang telah dibuat, Misalnya yang saya gunakan adalah Photobucket
3. Login ke Blogger
4. Pilih Rancangan kemudian Edit HTML
5. Conteng Expand Template Widget
6. Cari kode </head> (biar cepat gunakan Ctrl+F)
7. Copy paste kode berikut:
<link href='http://i850.photobucket.com/albums/ab64/alfuzartzone/icon3.png' rel='shortcut icon'/>
8. Ganti tulisan yang berwarna merah dengan Direct Link gambar anda.
9. Untuk melihat hasilnya sebelum di simpan, klik pratinjau
10. Jika sudah sesuai dengan keinginan anda, Simpan Template
1. Membuat gambar iconnya dengan progam grafis, seperti CorelDraw, Paint, Photoshop, dll
2. Upload gambar yang telah dibuat, Misalnya yang saya gunakan adalah Photobucket
3. Login ke Blogger
4. Pilih Rancangan kemudian Edit HTML
5. Conteng Expand Template Widget
6. Cari kode </head> (biar cepat gunakan Ctrl+F)
7. Copy paste kode berikut:
<link href='http://i850.photobucket.com/albums/ab64/alfuzartzone/icon3.png' rel='shortcut icon'/>
8. Ganti tulisan yang berwarna merah dengan Direct Link gambar anda.
9. Untuk melihat hasilnya sebelum di simpan, klik pratinjau
10. Jika sudah sesuai dengan keinginan anda, Simpan Template
Ada dua pilihan menampilkan kembali navbar yaitu jika auto hiden atau hilang.
1. Jika Auto Hide:
Cari Kode #navbar-iframe kemudian hapus kode berikut:
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
2. Jika Hilang:
Langkahnya sama seperti di atas, cari Kode #navbar-iframe kemudian hapus kode tersebut sampai important.
3. Simpan Template
1. Jika Auto Hide:
Cari Kode #navbar-iframe kemudian hapus kode berikut:
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
2. Jika Hilang:
Langkahnya sama seperti di atas, cari Kode #navbar-iframe kemudian hapus kode tersebut sampai important.
3. Simpan Template
Menghilangkan navbar pada blogger merupakan salah satu tindakan pelanggaran Terms Of Service (TOS) pihak Blogger. Tindakan ini dapat mengakibatkan blog kita dihapus, namun ada cara lain untuk mengatasinya yaitu dengan Auto Hide Navbar. Sekilas navbar pada blog hilang, tetapi jika kita arahkan mouse pada navbar yang hilang maka navbar tersebut akan muncul kembali.
1. Silahkan login Ke Blogger
2. Pada Dasboard pilih rancangan kemudian edit html
3. Conteng "expand template widget"
4. Cari kode berikut ]]></b:skin> (untuk mempermudah tekan ctrl+F)
5. Copy paste kode di atas kode ]]></b:skin> berikut:
1. Silahkan login Ke Blogger
2. Pada Dasboard pilih rancangan kemudian edit html
3. Conteng "expand template widget"
4. Cari kode berikut ]]></b:skin> (untuk mempermudah tekan ctrl+F)
5. Copy paste kode di atas kode ]]></b:skin> berikut:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}6. Simpan Template
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Navigation