Apabila sobat menyukai tampilan label cloud yang datar-datar sajah. Seperti yang ada dihalaman muka archive69 bawah pojok kiri.
Tampilan yang saya sebut datar-datar sajah ini, terilhami dari tutorial para master Blogger yang membuat label cloud warna warni dan bentuk kotak-kotak. Saya coba utak-atik kembali kode-kodenya, hingga sesuai dengan tampilan yang diinginkan. (hehehe.. siga nu eunya wae jago utak atik. Nongtorogan ituh namanyah)
Singkat kata, setelah widget label cloud ditambahkan.
Langsung masuk ke edit HTML, kemudian letakkan kode dibawah ini, tepat di atas ]]></b:skin>
.label-size{font-size:12px}
.label-size a:hover{text-decoration:none}
Catatan: ukuran font bisa kita diatur sendiri
Begitulah cara Modifikasi Sederhana Label Cloud Blogspot.
salam
Tampilkan postingan dengan label arsip tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label arsip tutorial. Tampilkan semua postingan
Minggu, 05 Agustus 2012
Senin, 25 Juni 2012
Percobaan Membuat 2 Kolom Keterangan di Bawah Foto/Gambar
Kali ini, simkuring mencoba membuat 2 kolom keterangan di bawah gambar. Gambar diambil dari postingan terdahulu “Rumah Adat Sunda (gambar/sketsa)”, yang sebelumnya menggunakan model spoiler.
Supados teu nyangkolong kana waktos. Langsung kita olah tampilan yang dimaksud seperti berikut:
Kodenya:
Kodenya:
Kodenya:
Catatan penting: Kalo sobat-sobat mau mencobanya (membuat 2 kolom keterangan di bawah foto/gambar) silahkan utak atik lagi kode-kodenya supaya lebih sempurna. Harap maklum, ini hanya tututorialan.
Tak lupa, terima kasih juga buat sobat-sobat yang telah berkenan memposting ulang “Rumah Adat Sunda (gambar/sketsa)”. hayu urang babarengan ngamumule banda budaya sunda.
salam
Supados teu nyangkolong kana waktos. Langsung kita olah tampilan yang dimaksud seperti berikut:
![]() | |
|---|---|
| Suhunan Julang Ngapak | Bentuk bangunan rumah yang suhunan bagian sisi kiri kanan agak melebar ke samping. Ada juga yang menyebutnya memakai sorondoy. Apabila di lihat dari arah depan seperti burung yang sedang terbang. |
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="line-height: 1em; margin-left: auto; margin-right: auto; width: 450px;">
<tr><th colspan="2"><img alt="Suhunan Julang Ngapak" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg93pcZkZ_BAMivLUdi7-63fIzJvLhOz-zjpd2sZ9ehq3OZbdsaCkCSYi0XCQUh1ZYiY2BBWLmHqM1Rd0Eu-JJAweB1-pXnJufydxi-t9NMvM4I27dzDtjHhVwn8MFarhp7SDAMel6aVbI/s400/julangngapak.jpg" width="450" /></th></tr>
<tr><td class="tr-caption" style="background: #FF0000; border-right: 1px solid #DCDCDC; color: blue; font-size: 18px; text-align: center; padding: 5px; width: 30%;">Suhunan Julang Ngapak</td><td class="tr-caption" style="background: #000000; color: white; font-size: 12px; text-align: left; padding: 5px;">Bentuk bangunan rumah yang suhunan bagian sisi kiri kanan agak melebar ke samping. Ada juga yang menyebutnya memakai sorondoy. Apabila di lihat dari arah depan seperti burung yang sedang terbang.</td></tr>
</table>
![]() | |
|---|---|
| Suhunan Parahu kumureb | Bentuk bangunan rumah yang atapnya (suhunan) membentuk perahu terbalik (telungkup). |
<table cellpadding="5" cellspacing="0" class="tr-caption-container" style="line-height: 1em; margin-left: auto; margin-right: auto; width: 450px;">
<tr><th colspan="2" style="background: #CECEF6;"><img alt="Suhunan Parahu kumureb" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwU8gtjiA2tXMiS0AOmLb6P8GKThZOIo2GrL7synoiaLmzCsmkOZp9bJuS8B-0dipHcIJVUSQPnQeNKiwQbUnwJpu-ASy8v9REilVC1MmUlPYR3iJRYi5j9s1csrdmVw39XBIpRE0N470/s400/paruhukumereb.jpg" width="450" /></th></tr>
<tr><td class="tr-caption" style="background: #5858FA; border-right: 1px solid #CECEF6; color: white; font-size: 18px; text-align: center; width: 30%;">Suhunan Parahu kumureb</td><td class="tr-caption" style="background: #008080; color: greenyellow; font-size: 16px; text-align: left;"> Bentuk bangunan rumah yang atapnya (<i>suhunan</i>) membentuk perahu terbalik (telungkup).</td></tr>
</table>
![]() | |
|---|---|
| Suhunan jolopong | Bentuk bangunan yang atapnya (suhunan) memanjang sering disebut suhunan panjang atau gagajahan. |
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="border: 1px solid rgb(0, 0, 0); line-height: 1em; margin-left: auto; margin-right: auto; width: 450px;">
<tr><th colspan="2"><img alt="Suhunan jolopong" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAVo2_pp4obKbvVUtGBk6gw_Rs9GwNFL6GfwS-c2uXjGT1Hjf0aF9XDu5FSMoNUlmFO_Ad6PfFvH3V2E5EMhH_uayHU0unKyPLa3Kxe1v1IDQxTfKnv4LWJn9BUa1VUEUCt5UhJRNVS8/s400/jolopong%20atau%20gagajahan.jpg" width="450" /></th></tr>
<tr><td class="tr-caption" style="background: #E6E6E6; border-right: 1px solid #0000FF; color: red; font-size: 18px; text-align: center; padding: 5px; width: 30%;">Suhunan jolopong </td><td class="tr-caption" style="background: #D0F5A9; font-size: 14px; text-align: left; padding: 5px;">Bentuk bangunan yang atapnya (suhunan) memanjang sering disebut suhunan panjang atau gagajahan.</td></tr>
</table>
Catatan penting: Kalo sobat-sobat mau mencobanya (membuat 2 kolom keterangan di bawah foto/gambar) silahkan utak atik lagi kode-kodenya supaya lebih sempurna. Harap maklum, ini hanya tututorialan.
Tak lupa, terima kasih juga buat sobat-sobat yang telah berkenan memposting ulang “Rumah Adat Sunda (gambar/sketsa)”. hayu urang babarengan ngamumule banda budaya sunda.
salam
Senin, 15 November 2010
Pasang Komentar Terbaru atau Recent Comment di Blog
Widget Recent Comment fungsinya untuk menampilkan komentar-komentar terbaru dari para pengunjung blog kita. Berikut cara menempatkannya:
- Buka Akun Blog
- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<script style="text/javascript" src="http://archive69.googlecode.com/files/recent-comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src="http://namablogkita.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> <style type="text/css"> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 0.1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>
Keterangan:
• Angka 10 pada a_rc menunjukkan jumlah komentar yang muncul. Ganti nilainya bila perlu.
• false pada m_rc menunjukkan tanggal komentar tidak ditampilkan. Ganti dengan "true" jika ingin menampilkannya.
• true pada n_rc menunjukkan judul posting ditampilkan. Ganti dengan "false" jika tidak ingin menampilkannya.
• namablogkita.blogspot.com adalah alamat blog kita, silahkan ganti
- Terakhir simpan
Selamat mencoba..
- Buka Akun Blog
- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<script style="text/javascript" src="http://archive69.googlecode.com/files/recent-comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src="http://namablogkita.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> <style type="text/css"> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 0.1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>
Keterangan:
• Angka 10 pada a_rc menunjukkan jumlah komentar yang muncul. Ganti nilainya bila perlu.
• false pada m_rc menunjukkan tanggal komentar tidak ditampilkan. Ganti dengan "true" jika ingin menampilkannya.
• true pada n_rc menunjukkan judul posting ditampilkan. Ganti dengan "false" jika tidak ingin menampilkannya.
• namablogkita.blogspot.com adalah alamat blog kita, silahkan ganti
Ada satu lagi cara yang paling mudah, sebab blogger.com juga menyediakan widget resent comments ini.Caranya kita pilih tampilan Dasbor > Rancangan > Elemen Laman > Tambah Gadget > Gadget lainnya, kemudian pilih Resent Comments.
- Terakhir simpan
Selamat mencoba..
Minggu, 14 November 2010
Membuat Widget Tab View di Blogspot
Tab View adalah sebuah tampilan widget yang didalamnya berisi beberapa menu yang berbeda. Memasang widget ini dimaksudkan supaya tidak menghabiskan tempat pada template Blog.
Berikuta cara Menempatkannya
• Pertama
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Lalu copy Script berikut dan letakkan diatas kode: ]]></b:skin>
/* Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* lebar menu */
text-align: center;
height: 24px; /* tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antar menu */
vertical-align: middle;
border: 1px solid #2E2E2E; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #D8D8D8; /* warna latar menu */
color: #000000; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a.Active {
background-color: #A4A4A4; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #FFFFFF; /* warna background menu hover */
color: #151515;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #2E2E2E; /* warna border kotak utama */
overflow: hidden;
background-color: #D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}
• Kedua
- Letakkan kode berikut dibawah kode ]]></b:skin>
<script src="http://archive69.googlecode.com/files/tabview.js" type="text/javascript"/>
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Tab 1">Tab 1</a>
<a title="Keterangan Tab 2">Tab 2</a>
<a title="Keterangan Tab 3">Tab 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Tab 1-->
<div class="Page"><div class="Pad">
Isi TAb 1.1<br/>
Isi Tab 1.2<br/>
Isi TAb 1.dst<br/>
</div></div>
<!--Akhir Tab 1-->
<!--Awal Tab 2-->
<div class="Page"><div class="Pad">
Isi Tab 2.1<br/>
Isi Tab 2.2<br/>
Isi Tab 2.dst<br/>
</div></div>
<!--Akhir Tab 2-->
<!--Awal Tab 3-->
<div class="Page"><div class="Pad">
Isi Tab 3.1<br/>
Isi Tab 3.2<br/>
Isi TAb 3.dst<br/>
</div></div>
<!--Akhir Tab 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
- Terakhir simpan
Selesai
Catatan
Untuk ukuran dan warna bisa disesuaikan dengan template kita
Ganti dan isi tulisan yang warna orange
Berikuta cara Menempatkannya
• Pertama
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Lalu copy Script berikut dan letakkan diatas kode: ]]></b:skin>
/* Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* lebar menu */
text-align: center;
height: 24px; /* tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antar menu */
vertical-align: middle;
border: 1px solid #2E2E2E; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #D8D8D8; /* warna latar menu */
color: #000000; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a.Active {
background-color: #A4A4A4; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #FFFFFF; /* warna background menu hover */
color: #151515;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #2E2E2E; /* warna border kotak utama */
overflow: hidden;
background-color: #D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}
• Kedua
- Letakkan kode berikut dibawah kode ]]></b:skin>
<script src="http://archive69.googlecode.com/files/tabview.js" type="text/javascript"/>
- Lalu Simpan Template.
• Ketiga
- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Tab 1">Tab 1</a>
<a title="Keterangan Tab 2">Tab 2</a>
<a title="Keterangan Tab 3">Tab 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Tab 1-->
<div class="Page"><div class="Pad">
Isi TAb 1.1<br/>
Isi Tab 1.2<br/>
Isi TAb 1.dst<br/>
</div></div>
<!--Akhir Tab 1-->
<!--Awal Tab 2-->
<div class="Page"><div class="Pad">
Isi Tab 2.1<br/>
Isi Tab 2.2<br/>
Isi Tab 2.dst<br/>
</div></div>
<!--Akhir Tab 2-->
<!--Awal Tab 3-->
<div class="Page"><div class="Pad">
Isi Tab 3.1<br/>
Isi Tab 3.2<br/>
Isi TAb 3.dst<br/>
</div></div>
<!--Akhir Tab 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
- Terakhir simpan
Selesai
Catatan
Untuk ukuran dan warna bisa disesuaikan dengan template kita
Ganti dan isi tulisan yang warna orange
Jumat, 12 November 2010
Membuat Postingan Terbaru atau Recent Post di Blog
Memasang recent post di sidebar, gunanya untuk memudahkan pengunjung blog melihat/mengetahui posting kita terbaru.
Caranya:
- Buka Akun Blog
- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<script src="http://archive69.googlecode.com/files/recent-post.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 200; </script>
<script src="http://namablogkita.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
Keterangan:
• Angka 15 yang warna merah, adalah jumlah posting yang akan ditampilkan
• Tulisan namablogkita.blogspot.com adalah alamat blog kita, silahkan ganti.
- Terakhir simpan/save
Selamat mencoba
Caranya:
- Buka Akun Blog
- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
<script src="http://archive69.googlecode.com/files/recent-post.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 200; </script>
<script src="http://namablogkita.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
Keterangan:
• Angka 15 yang warna merah, adalah jumlah posting yang akan ditampilkan
• Tulisan namablogkita.blogspot.com adalah alamat blog kita, silahkan ganti.
Ada satu lagi cara yang paling mudah, sebab blogger.com juga menyediakan widget resent posts ini.Caranya kita pilih tampilan Dasbor > Rancangan > Elemen Laman > Tambah Gadget > Gadget lainnya, kemudian pilih Resent Posts.
- Terakhir simpan/save
Selamat mencoba
Kamis, 11 November 2010
Membuat 3 Kolom di Bawah Posting (Footer) blog
Apabila merasa kekurangan sidebar di template blog kita. Karena banyak widget yang akan dipasang, dan penenpatannya ingin terilihat rapi. Mungkin kita perlu menambahkan kolom sidebar. Berikut cara menambahkan 3 kolom di bawah posting.
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Copy kode di bawah ini dan simpan di atas kode: ]]></b:skin>
/* bottom
---------------------------- */
#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
- Pada bagian </body>, cari kode yang mirip seperti ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
- Copy dan simpan kode berikut tepat di atas kode yang atas tadi:
<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
- Klik tombol Simpan Template.
Catatan: sesuaikan ukuran width dan warna dengan template kita
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Copy kode di bawah ini dan simpan di atas kode: ]]></b:skin>
/* bottom
---------------------------- */
#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
- Pada bagian </body>, cari kode yang mirip seperti ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
- Copy dan simpan kode berikut tepat di atas kode yang atas tadi:
<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
- Klik tombol Simpan Template.
Catatan: sesuaikan ukuran width dan warna dengan template kita
Rabu, 10 November 2010
Membuat Artikel Terkait atau Related Post di Blogspot
Related Post atau Postingan Terkait dibuat supaya memudahkan para pengunjung untuk membaca posting/artikel lain yang masih membahas materi yang sama atau masih ada unsur keterkaitan. Tentu kita terlebih dahulu membuat label/kategori untuk artikel-artikel tersebut. Contoh untuk Label/Kategori Seni, didalamnya harus berisikan artikel-artikel yang membahas tentang seni.
Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: </head>
- kemudian letakkan kode script di bawah ini, di atas kode: </head>
<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>
- Selanjutnya cari kode <data:post.body/>
- Kemudian copy kode dibawah ini,dan simpan di bawah <data:post.body/>
- Sekarang cari kode:
<div class='post-footer-line post-footer-line-3'>
- Kemudian masukan di bawahnya script ini
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Artikel Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
- Perhatikan ada tulisan warna merah "Artikel Terkait", bisa diganti sesuai keinginan kita!!
- Terakhir Simpan Perubahan ( save template ).
Selesai
Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: </head>
- kemudian letakkan kode script di bawah ini, di atas kode: </head>
<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>
- Selanjutnya cari kode <data:post.body/>
- Kemudian copy kode dibawah ini,dan simpan di bawah <data:post.body/>
<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=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
- Sekarang cari kode:
<div class='post-footer-line post-footer-line-3'>
- Kemudian masukan di bawahnya script ini
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Artikel Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
- Perhatikan ada tulisan warna merah "Artikel Terkait", bisa diganti sesuai keinginan kita!!
- Terakhir Simpan Perubahan ( save template ).
Selesai
Pasang Counter Visitor di Blog
Cara Pasang Counter Visitor dengan menampilkan lambang Bendera Negara pengunjung, memakai widget dari flagcounter.com
- Pertama-tama silahkan kunjungi situs ini www.flagcounter.com
- Jika sudah, silahkan edit tampilan, pada kolom "Instantly Create Your Free Flag Counter"
- Jika Sudah Selesai mengeditnya, lalu klik tombol "Get Your Flag Counter"
- Akan ada kotak register dengan memakai email, silahkan isi atau lewati saja.
- Dihalaman berikutnya "Here's the HTML code for your new Flag Counter", ada kotak
"Code for websites:", silahkan copy lalu masukkan ke blog, atau bisa memakai quick post dengan cara memilih dan klik tombol "Blogger"
Pasang dan Daftar Sitemeter di Blog
- Sign up disini www.sitemeter.com atau klik di sini
- Pilih sitemeter basic Free
- Isikan data blog/web, kemudian next sampai semua data terisi lengkap
- Setelah semua diisi lengkap akan muncul pesan Success! Thank You.
- Pilih menu Manager
- Pilih jenis sitemeter di meter style
- Untuk mendapatkan kode HTMLnya klik di HTML code pilih Site Meter JavaScript HTML untuk yang pakai new blogger/XML/Java Script
atau Site Meter Regular HTML untuk yg pakai blogger klasik
- Kemudian copy ke blog, di layout >> add gadget >> pilih edit HTML/Javasricp >> copy kode tersebut
- Save setting
Fungsi di menu Site meter
General
Sumary : Jumlah semua pengunjung dari awal kita pasang sitemeter.
Who's On : Jumlah pengunjung pada saat ini.
Traffic Prediction : prediksi Traffic untuk blog/website kita
Recent Visitor
By Details : detail pengunjung sepeti alamat domain/IP, jumlah halaman yang dilihat, waktu kunjungan, dan lama kunjungan.
By Referrals : asal pengunjung.
By World Map : menampilkan asal kota atau negara asal pengunjung dalam bentuk peta.
By Location : menampilkan data kota atau negara asal pengunjung.
By Out Clicks : link yang diklik pengunjung pada saat meninggalkan blog.
By Entry Pages : halaman yang dituju pada saat pengunjung datang.
By Exit Pages : halaman yang terakhir dilihat oleh pengunjung.
Visits : menampilkan data pengunjung dalam bentuk diagram
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Visits and page views : menampilkan data kunjungan dan jumlah halaman yang dilihat oleh pengunjung
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Page ranking : rangking halaman berdasarkan halaman pada saat masuk (Entry page),
atau keluar (Exit Pages)
Selamat mencoba
Selasa, 09 November 2010
Pasang Gambar/Image Berjejer ke Samping di Posting Blog
Untuk menghemat halaman posting, dan juga tidak terlalu berat loading saat membuka posting gambar/image. Kita bisa menggunakan cara menyimpan/memasukkannya dengan posisi berjejer ke samping. Selain itu posting gambar/image akan terlihat rapi.
Kode menampilkan gambar 3 kolom dan 2 baris. Seperti di bawah
<table border="0" cellspacing="5" height="337" style="width="550">
<tr> <td valign="top" width="169">
<a href="URL GAMBAR 1a" target="new"><img border="0" height="130" src="URL IMAGE 1a" width="169" />
</a>
judul gambar 1a
<a href="URL GAMBAR 1b " target="new"><img border="0" height="130" src="URL IMAGE 1b" width="169" />
</a>
judul gambar 1b
</td> <td valign="top" width="169">
<a href="URL GAMBAR 2a" target="new"><img border="0" height="130" src="URL IMAGE 2a" width="169" />
</a>
judul gambar 2a
<a href="URL GAMBAR 2b" target="new"><img border="0" height="130" src="URL IMAGE 2b" width="169" />
</a>
judul gambar 2b
</td> <td valign="top" width="169">
<a href="URL GAMBAR 3a" target="new"><img border="0" height="130" src="URL IMAGE 3a" width="169" />
</a>
judul gambar 3a
<a href="URL GAMBAR 3b" target="new"><img border="0" height="130" src="URL IMAGE 3b" width="169" />
</a>
judul gambar 3b
</td></tr>
</table>
Kerangan:
- Tulisan yang warna merah adalah lebar kolom postingan yang tiap-tiap blog berbeda, dan tulisan yang warna biru adalah kode widht /lebar gambar/image.
- Untuk menentukan besar gambar adalah lebar kolom posting dibagi jumlah gambar ke samping.
Contoh lebar kolom postingan 550.
550:3 = 183. . .
Supaya ada jarak antar gambar. Width-nya harus kurang dari 183. contoh yang dipakai 169.
Apabila ingin memasang gambar/image lebih dari 3 berjejer ke samping. Tinggal ganti angka pembaginya. Dan sesusaikan juga ukuran height-nya.
- Kode target="new", saat gambar diklik akan membuka tab baru
Contoh: klik di sini
selesai
Kode menampilkan gambar 3 kolom dan 2 baris. Seperti di bawah
<table border="0" cellspacing="5" height="337" style="width="550">
<tr> <td valign="top" width="169">
<a href="URL GAMBAR 1a" target="new"><img border="0" height="130" src="URL IMAGE 1a" width="169" />
</a>
judul gambar 1a
<a href="URL GAMBAR 1b " target="new"><img border="0" height="130" src="URL IMAGE 1b" width="169" />
</a>
judul gambar 1b
</td> <td valign="top" width="169">
<a href="URL GAMBAR 2a" target="new"><img border="0" height="130" src="URL IMAGE 2a" width="169" />
</a>
judul gambar 2a
<a href="URL GAMBAR 2b" target="new"><img border="0" height="130" src="URL IMAGE 2b" width="169" />
</a>
judul gambar 2b
</td> <td valign="top" width="169">
<a href="URL GAMBAR 3a" target="new"><img border="0" height="130" src="URL IMAGE 3a" width="169" />
</a>
judul gambar 3a
<a href="URL GAMBAR 3b" target="new"><img border="0" height="130" src="URL IMAGE 3b" width="169" />
</a>
judul gambar 3b
</td></tr>
</table>
Kerangan:
- Tulisan yang warna merah adalah lebar kolom postingan yang tiap-tiap blog berbeda, dan tulisan yang warna biru adalah kode widht /lebar gambar/image.
- Untuk menentukan besar gambar adalah lebar kolom posting dibagi jumlah gambar ke samping.
Contoh lebar kolom postingan 550.
550:3 = 183. . .
Supaya ada jarak antar gambar. Width-nya harus kurang dari 183. contoh yang dipakai 169.
Apabila ingin memasang gambar/image lebih dari 3 berjejer ke samping. Tinggal ganti angka pembaginya. Dan sesusaikan juga ukuran height-nya.
- Kode target="new", saat gambar diklik akan membuka tab baru
Contoh: klik di sini
selesai
Minggu, 07 November 2010
Posisi Widget Berbeda di Home Page dan Post Page Blogspot
Supaya blog kita tidak terkesan kaku. Salah satu caranya yaitu dengan menampilkan atau menyembunyikan widget di halaman tertentu. Untuk lebih memudahkan dalam proses pembuatannya, sebaiknya widget yang akan disembunyikan/ditampilkan diberi nama/judul. Berikut cara pembuatannya:
Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Cari Judul Widget dengan mempergunakan tombol F3, supaya lebih mudah menemukannya.
- Membuat widget hanya tampil di Home Page (dan hilang di halaman posting):
Kita perlu menambahkan kode: <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> di Css Widget.
contoh penempatannya:
<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
- Membuat Widget tampil di halaman posting (dan hilang di home):
Kita perlu menambahkan kode: <b:if cond='data:blog.pageType == "item"'> dan </b:if> di kode Css Widget.
Contoh penempatannya:
<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
- Jika sudah Klik Simpan Template
Selesai tinggal lihat hasilnya!!!!!
Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Cari Judul Widget dengan mempergunakan tombol F3, supaya lebih mudah menemukannya.
- Membuat widget hanya tampil di Home Page (dan hilang di halaman posting):
Kita perlu menambahkan kode: <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> di Css Widget.
contoh penempatannya:
<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 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:if>
<b:include name='quickedit'/></b:includable>
</b:widget>
- Membuat Widget tampil di halaman posting (dan hilang di home):
Kita perlu menambahkan kode: <b:if cond='data:blog.pageType == "item"'> dan </b:if> di kode Css Widget.
Contoh penempatannya:
<b:widget id='HTML1' locked='false' title='Judul Widget' 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:if>
<b:include name='quickedit'/></b:includable>
</b:widget>
- Jika sudah Klik Simpan Template
Selesai tinggal lihat hasilnya!!!!!
Sabtu, 06 November 2010
Membuat Daftar Isi Otomatis di Blog
Salah satu bagian yang cukup penting dalam tampilan blog adalah memuat daftar isi. Dengan daftar isi secara otomatis, jika kita melakukan postingan baru maka secara otomatis judul blog yang baru akan langsung masuk ke dalam daftar isi tanpa harus melakukan edit pada layout blog kita.
Di bawah ini langkah-langkah pembuatannya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode di bawah ini
- Ganti Kode di atas dengan kode dibawah ini.
<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#D8D8D8;color:#000000;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>
- Setelah diganti terus simpan template.
Langkah berikutnya:
- Klick Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
- Selanjutnya copy dan simpan, kode di bawah ini :
<a href="http://blogkita.blogspot.com/search?max-results=500" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>»</a>
-Tulisan,Blogkita.blogspot.com.Ganti dengan alamat blog milik kita.
Selamat Mencoba..
Di bawah ini langkah-langkah pembuatannya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode di bawah ini
<b:include data='post' name='post'/>
- Ganti Kode di atas dengan kode dibawah ini.
<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#D8D8D8;color:#000000;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>
- Setelah diganti terus simpan template.
Langkah berikutnya:
- Klick Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:
- Selanjutnya copy dan simpan, kode di bawah ini :
<a href="http://blogkita.blogspot.com/search?max-results=500" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>»</a>
-Tulisan,Blogkita.blogspot.com.Ganti dengan alamat blog milik kita.
Selamat Mencoba..
Kamis, 04 November 2010
Menulis/Memasukan Kode HTML di Posting Blog
Ada hal yang menarik sekaligus membingungkan ditambah sedikit malu. Saat pertama kali mencoba membuat arsip tutorial yang isinya kode HTML. Begitu diterbitkan Kode HTML-nya tidak muncul, saudara-saudara…(he..he..he..he).
Saya mencari info ke sumber-sumber yang lebih berpengalaman.
Ternyata kode HTML harus dirubah dulu (ada istilah kerennya, Cuma saya lupa lagi cara tulisnya).
Untuk merubahnya kita harus membuka/masuk ke situs:
Setelah itu, tinggal masukkan kode HTML di kotak yang tersedia, lalu klik tombol "Encode". Copy hasil dari Encode, dan letakkan diposting blog kita.
Sekian, selamat mencoba, mudah-mudahan pernah merasakan bingun seperti saya…(hi..hi..hi..hi)
Saya mencari info ke sumber-sumber yang lebih berpengalaman.
Ternyata kode HTML harus dirubah dulu (ada istilah kerennya, Cuma saya lupa lagi cara tulisnya).
Untuk merubahnya kita harus membuka/masuk ke situs:
Setelah itu, tinggal masukkan kode HTML di kotak yang tersedia, lalu klik tombol "Encode". Copy hasil dari Encode, dan letakkan diposting blog kita.
Sekian, selamat mencoba, mudah-mudahan pernah merasakan bingun seperti saya…(hi..hi..hi..hi)
Rabu, 03 November 2010
Membuat Daftar Isi Manual di Blog
Membuat daftar isi secara manual, tujuannya untuk memperlihatkan sebagian posting yang mungkin dianggap penting untuk dilihat/dibaca pengunjung blog kita.Memang sedikit ribet, karena kita sendiri yang memasukannya ke daftar isi. Contoh seperti di bawah ini:
DAFTAR ISI
Membuat Akun Google (Gmail)
Merubah Warna dan Huruf di Template Minima
Membuat Postingan Rata Kiri Kanan
Mengganti URL Alamat Blog Sub Domain Blogger.com
Daftar URL Blog ke Mesin Pencari (Search Engine)
Membuat Read More Otomatis di posting Blog
Arsip Blog Model Scroll
Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar
Dan ini proses pembuatannya:
DAFTAR ISI
Silahkan ganti link-nya dengan link milik kita dan ganti juga judul posting (tulisan warna merah).
Daftar isi yang jumlahnya sedikit, tak menjadi masalah. Apabila jumlanya banyak tentu akan menghabiskan tempat dan kurang bagus dilihatnya. Maka kita perlu membuat Daftar Isi Manual dengan model scroll.
Kita tinggal menambahkan kode script di awal dan di akhir daftar isi. Seperti di bawah:
<div style="border: 1px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 5px; width: 250px;">DAFTAR ISI</div>
Misalnya
Hasilnya seperti di bawah:
Sesuaikan height: dan width: dengan ukuran sidebar kita.
Terakhir simpan.
Selesai
DAFTAR ISI
Membuat Akun Google (Gmail)
Merubah Warna dan Huruf di Template Minima
Membuat Postingan Rata Kiri Kanan
Mengganti URL Alamat Blog Sub Domain Blogger.com
Daftar URL Blog ke Mesin Pencari (Search Engine)
Membuat Read More Otomatis di posting Blog
Arsip Blog Model Scroll
Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar
Dan ini proses pembuatannya:
DAFTAR ISI
<a href="http://info-terkumpul.blogspot.com/2010/08/membuat-akun-google-gmail.html">Membuat Akun Google (Gmail)</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/merubah-warna-dan-huruf-di-template.html">Merubah Warna dan Huruf di Template Minima</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/membuat-postingan-rata-kiri-kanan.html">Membuat Postingan Rata Kiri Kanan</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/mengganti-url-alamat-blog-sub-domain.html">Mengganti URL Alamat Blog Sub Domain Blogger.com</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/daftar-url-blog-ke-mesin-pencari-search.html">Daftar URL Blog ke Mesin Pencari (Search Engine)</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/membuat-read-more-otomatis-di-posting.html">Membuat Read More Otomatis di posting Blog</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/arsip-blog-model-scroll.html">Arsip Blog Model Scroll</a>
<a href="http://info-terkumpul.blogspot.com/2010/10/mengganti-tulisan-newer-post-home-older.html">Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar</a>
Silahkan ganti link-nya dengan link milik kita dan ganti juga judul posting (tulisan warna merah).
Daftar isi yang jumlahnya sedikit, tak menjadi masalah. Apabila jumlanya banyak tentu akan menghabiskan tempat dan kurang bagus dilihatnya. Maka kita perlu membuat Daftar Isi Manual dengan model scroll.
Kita tinggal menambahkan kode script di awal dan di akhir daftar isi. Seperti di bawah:
<div style="border: 1px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 5px; width: 250px;">DAFTAR ISI</div>
Misalnya
<div style="border: 1px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 5px; width: 250px;">
<a href="http://info-terkumpul.blogspot.com/2010/08/membuat-akun-google-gmail.html">Membuat Akun Google (Gmail)</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/merubah-warna-dan-huruf-di-template.html">Merubah Warna dan Huruf di Template Minima</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/membuat-postingan-rata-kiri-kanan.html">Membuat Postingan Rata Kiri Kanan</a>
<a href="http://info-terkumpul.blogspot.com/2010/08/mengganti-url-alamat-blog-sub-domain.html">Mengganti URL Alamat Blog Sub Domain Blogger.com</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/daftar-url-blog-ke-mesin-pencari-search.html">Daftar URL Blog ke Mesin Pencari (Search Engine)</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/membuat-read-more-otomatis-di-posting.html">Membuat Read More Otomatis di posting Blog</a>
<a href="http://info-terkumpul.blogspot.com/2010/09/arsip-blog-model-scroll.html">Arsip Blog Model Scroll</a>
<a href="http://info-terkumpul.blogspot.com/2010/10/mengganti-tulisan-newer-post-home-older.html">Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar</a>
</div>Hasilnya seperti di bawah:
Membuat Akun Google (Gmail)
Merubah Warna dan Huruf di Template Minima
Membuat Postingan Rata Kiri Kanan
Mengganti URL Alamat Blog Sub Domain Blogger.com
Daftar URL Blog ke Mesin Pencari (Search Engine)
Membuat Read More Otomatis di posting Blog
Arsip Blog Model Scroll
Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar
Merubah Warna dan Huruf di Template Minima
Membuat Postingan Rata Kiri Kanan
Mengganti URL Alamat Blog Sub Domain Blogger.com
Daftar URL Blog ke Mesin Pencari (Search Engine)
Membuat Read More Otomatis di posting Blog
Arsip Blog Model Scroll
Mengganti Tulisan Newer Post, Home, Older Post dengan Icon/Gambar
Sesuaikan height: dan width: dengan ukuran sidebar kita.
Terakhir simpan.
Selesai
Membuat Navigasi Breadcrumbs
Navigasi yang satu ini memuat label/kategori dari judul posting. Sehingga memudahkan bagi pengunjung mencari artikel/posting lain yang satu label/kategori dengan posting yang sedang dibaca. Navigasi ini terletak tepat di atas judul posting.
Berikut cara pembuatannya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Copy lalu simpan kode di bawah ini, tepat di atas kode: ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
- Kemudian cari kode berikut:
- Copy lalu simpan kode di bawah ini persis di bawah kode: <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
- Terakhir klik tombol Save Template.
Selesai
Berikut cara pembuatannya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Copy lalu simpan kode di bawah ini, tepat di atas kode: ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
- Kemudian cari kode berikut:
<div class='post hentry uncustomized-post-template'>
- Copy lalu simpan kode di bawah ini persis di bawah kode: <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
- Terakhir klik tombol Save Template.
Selesai
Selasa, 02 November 2010
Membuat Spoiler di Blog
Untuk menghemat halaman posting, kita bisa menggunakan model Spoiler. Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading,
Kodenya seperti di bawah ini:
Contoh lainnya:
Perhatikan tulisan warna merah, itu yang kita harus ganti.
Selamat mencoba.
Kodenya seperti di bawah ini:
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Keterangan/Judul Spoiler.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...
</div></div></div>
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Keterangan/Judul Spoiler.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...
</div></div></div>
Contoh Spoiler..
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Keterangan/Judul Spoiler.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...
</div></div></div>
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Keterangan/Judul Spoiler.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...
</div></div></div>
Contoh lainnya:
Perhatikan tulisan warna merah, itu yang kita harus ganti.
Selamat mencoba.
Mengganti Favicon Blog
Satu lagi yang perlu saya arsipkan, yaitu cara mengganti favicon. Walaupun sekarang saya memakai logo standar blogger, tapi saya pernah mencoba menggantinya. Tentunya saya lihat-lihat sumber lain untuk mencobanya (da kumaha atuh, sayah butuh bantuan anu parinter nge-blog.
Nah ini caranya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: </head>
- Copy-paste kode berikut di atas kode tadi.
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Ganti tulisan warna biru dengan url gambar yang akan dijadikan favicon.
- Simpan template.
Salam Blogger
Nah ini caranya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: </head>
- Copy-paste kode berikut di atas kode tadi.
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Ganti tulisan warna biru dengan url gambar yang akan dijadikan favicon.
- Simpan template.
Salam Blogger
Senin, 01 November 2010
Tanggal di Header Blog
Asesoris blog yang satu ini sangat praktis dan tidak memakan banyak tempat di halaman blog.
Mau coba? ikuti caranya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode berikut ini: <body>
- Setelah ketemu, tambahkan kode dibawah ini tepat di bawah kode tadi.
Sebelum di simpan, pratinjau dulu.
Mau coba? ikuti caranya:
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode berikut ini: <body>
- Setelah ketemu, tambahkan kode dibawah ini tepat di bawah kode tadi.
<div id='date.header'>
<p><script src='http://archive69.googlecode.com/files/date.header.js' type='text/javascript'/></p>
</div>
<p><script src='http://archive69.googlecode.com/files/date.header.js' type='text/javascript'/></p>
</div>
Sebelum di simpan, pratinjau dulu.
Minggu, 31 Oktober 2010
Membuat Teks Bergerak ke Samping di Navbar Atas
Kalau ingin blog terlihat aktraktif. Saya lihat di tutorial-tutorial rekan blogger. Salah satunya dengan cara membuat teks berjalan di navbar atas. Setelah saya coba ternyata sangat mudah. sok ikuti caranya (mudah-mudahan sama caranya seperti di tutorial yang saya lihat)
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: <b:skin><

