- 1. Login ke Blogger.
- 2. Pilih menu LAYOUT lalu edit HTML.
- 3. Jangan kasih tanda checklist pada kolom EXPAND TEMPLATE WIDGET.
- 4. Cari kode css body, kurang lebih contohnya seperti di bawah ini :
body {
background:#fff;
margin: 0 5px 0;
}
Kalo sudah ketemu, tambahkan kode seperti di bawah ini di antara tanda { dan } :
background:#fff url(URL FILE GAMBAR ANDA);
Tapi kalo misalnya sudah ada kata background, tinggal ditambahkan kode yang berwarna biru saja, dan jangan lupa selalu ditutup dengan tanda “;”. Contoh kode keseluruhan kira – kira jadi seperti ini :
body {background:#fff url(http://www.rajavirtual.com/wp-content/themes/dailypress/images/jasaseomurah.jpg);Kalo sudah, klik preview dan lihat hasilnya lalu save.
}
2.cara membuat navigasi breadcrumb di blogger :
- Langsung saja ke langkah – langkahnya cara membuat navigasi breadcrumb di blogger :
- 1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Templateexpand
6. Cari kode ]]></b:skin>
7. Kopi paste kode
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
persis diatas kode ]]></b:skin>
8. Kemudian cari kode berikut
<div class=’post hentry uncustomized-post-template’>
9. Paste kode dibawah ini tepat dibawah kode <div class=’post hentry uncustomized-post-template’> <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>
<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>
Langkah – langkah cara membuat related post di blogger :
- Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
- Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
- Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
<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>- Kemudian cari kode widget seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>- Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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: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>- Save template
- kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>- Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :
<b:widget id='HTML13' locked='false' title='Related Post' 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>- Klik Save dan lihat hasilnya.
4. Panduan Cara Mengganti Cursor Blog Blogger
Langkah Pertama
Seperti biasa, silakan login ke dashboard blogger, kemudian klik Rancangan/Design => terus klik EDIT HTML.
Langkah Kedua
Temukan kode css, seperti ini
Kode yang terpenting di temukan adalah kode body { background: Jika kode tersebut sudah ditemukan silakan tambahkan kode berikut sebelum tandabody { background:#xxxxx; font-size: xxxxx; font-family: xxxxx; dst.... }
Sehingga nanti jadinya seperti inicursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvd30Zf6PwNwTB0h0F68yV2i9nTmWi4wEBnrjdN5zgYzC3yNk2TynqUtleaQIWCKd_fNU_eCadjJR5mwNywF2Uka-pIw7A1bRdUKmldtPf6hDTLj4CYDEYEw2Uio3Z6opEtnRB8NsfiKYU/s1600/jasablogsitus-web-id.gif'),text
Jika teman menggunakan semua kode ini maka cursor blog teman akan berubah menjadi gambar daun (seperti gambar di atas)body { background:#160500; cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvd30Zf6PwNwTB0h0F68yV2i9nTmWi4wEBnrjdN5zgYzC3yNk2TynqUtleaQIWCKd_fNU_eCadjJR5mwNywF2Uka-pIw7A1bRdUKmldtPf6hDTLj4CYDEYEw2Uio3Z6opEtnRB8NsfiKYU/s1600/jasablogsitus-web-id.gif'),text; font-size: xxxxx; font-family: xxxxx; dst.... }
Jika teman ingin mengganti gambar cursornya dengan gambar yang lain, silakan ganti kode yang saya beri warna purple dengan link gambar yang teman inginkan.lalu save.
Cara Mengganti Tema di Blogspot
- Akseslah blog blogspot anda
- Setelah masuk ke dashboard anda, lihatlah Layout di sebelah tulisan Settings dan klik
- Jika anda belum memiliki template blogspotnya masuklah ke tab Pick New Template dan didalamnya anda bisa memilih template blogspot yang anda inginkan.
- Kalau anda memiliki template blogspot dengan rancangan sendiri klik lah tab Edit HTML
- Setelah masuk anda akan melihat barisan coding untuk template halaman blogspot
- Hal penting yang perlu anda lakukan adalah menyimpan file .xml template sebelumnya agar jika terjadi suatu yang tidak diinginkan anda bisa melakukan restore kembali. Download Full Template untuk memback-upnya
- Jika sudah, klik lah browse untuk mencari template yang sudah anda siapkan kemudian upload
- Dan jika berhasil anda akan melihat tampilan coding baru dari template yang sudah anda upload. Lalu save template tersebut.
6. cara memasang jam dan kalender ke blog
Mungkin berguna dech buat kamu yang pingin mempercantik tampilan blog kamu dengan jam dan kalender yang mempunyai berbagai model ga cuma monoton gitu-gitu aja, mau tahu caranya……sumonggo disimak ya tips berikut ini:1. Silakan buka situs Widgia.com ato bisa langsung klik disini www.widgia.com
2. Setelah masuk anda akan disajikan pada berbagai macam bentuk jam dan kalender serta widget yang laen yang bentuknya unik-unik terserah mau pilih yang mana sesuai selera kamu
3. Setelah itu klik get this widgete
4. Maka akan muncul tampilan
5. setelah itu anda silakan pilih logo wordpress atau logo blog anda ->lalu isi sesuai dengan account anda di wordpress atau blog anda->setelah itu klik post-> maka souce kode nya akan dikirimkan ke postingan blog anda
6. sekarang langkah terakhir Login ke wordpress atau blog anda->sunting postingan yang tadi udah dikirim dari widgia.com->klik html->copy kode html nya->terus pilih menu tampilan->widget->tambahkan teks terus drag kesidebar->Paste kan-> selesai
7.
Setting Zona Waktu Blog
Tanya (T) : Sekarang jam berapa mas? Punya jam tangan nggak?Jawab (J) : Nggak tau, saya nggak punya jam tangan. Saya lagi sibuk facebookan & ngeblog nih...
T : Blognya ada jam nggak?
J : Ada, tapi nggak tepat, hehee...
T : Emang belum diatur sesuai lokasi tempat kita berada?
J : Belum, gimana caranya?
Nah... buat sahabat blogger yang belum pernah mengatur jam blog sesuai dengan lokasi tempat berada, yuk kita atur sama-sama....
Fakta yang sering saya temukan ketika berkunjung di blog sahabat kemudian berkomentar adalah tidak sesuainya jam blog dengan jam tangan / lokasi setempat. Kebanyakan para blogger tidak pernah mengatur jam blognya, jam blog standar adalah jam di posisi GMT+0 yang berada di negara Inggris dan sekitarnya. Kalau kita yang berada di Indonesia posisi kita dimana? Di Indonesia terbagi menjadi 3 zona waktu, Pertama: Waktu Indonesia Barat (WIB) adalah waktu untuk daerah pulau Sumatera, Jawa, Jakarta, Kalimantan Barat dan Kalimantan Tengah, zona ini berada di GMT+7. Ke-2: Waktu Indonesia Tengah (WITA) adalah waktu untuk Pulau Kalimantan (Selatan dan Timur), Nusa Tenggara, Bali dan Sulawesi, zona ini berada di GMT+8. Ke-3: Waktu Indonesia Timur (WIT) adalah waktu untuk Irian Jaya dan sekitarnya, zona ini berada di GMT+9.
Bagi sahabat blogger silahkan atur jam blog sesuai dengan kota dimana anda berada. Cara untuk mengatur jam blog sangat mudah, mulai dari login ke blogger.com
Berikut kode kodenya :
- Teks Bertuliskan Motif Tebal (Bold Style)
Letakkan teks yang ingin anda cetak tebal dengan [b] ... [/b]
example : smilenet4u
- Teks Style Miring (Italic Style)
Letakkan teks yang ingin anda cetak / tulis miring dengan [i] ... [/i]
example : smilenet4u
- Teks Bergaris Bawah (Underline Style)
Letakkan teks yang ingin digaris bawah dengan [u] ... [/u]
example : smilenet4u
- Teks Berukuran Besar (Big Style)
Letakkan teks yang ingin ditulis besar dengan [big] ... [/big]
example : smilenet4u
- Teks Berukuran Kecil (Small Style)
Letakkan teks yang ingin ditulis kecil dengan [small] ... [/small]
example : smilenet4u
- Teks Bergaris Tengah (Strike Style)
Letakkan teks yang ingin digaris tengah atau di coret-coret dengan [s] ... [/s]
example :smilenet4u
- Teks Yang Berjalan (Marquee Style)
Letakkan teks yang anda ingin buat bergerak dengan [scroll] ... [/scroll]
example : [scroll]smilenet4u[/scroll]
- Teks Ber-Link
Letakkan teks yang ingin diberi Link dengan [url=alamat URL yang dituju] ... [/url]
example : smilenet4u
- Teks Rata Ke Tengah (Center Style)
Letakkan teks yang ingin dibuat rata dan berposisi tengah dengan [center] ... [/center]
example :smilenet4u
- Teks Yang Berwarna (Color Style)
Letakkan teks yang ingin diberi warna dengan [color=kode warna] ... [/color]
example : smilenet4u
silakan di coba...
jika anda pingin merubah backgroun body blog anda
silahkan anda panteng di editor html blog anda masing masing dan carilah code CSS yang seperti ini :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
sekarang saya akan jelaskan dikit: ..
pada bagian background berisikan ( $bgcolor ) yang artinya anda bisa mengedit warna dari editor " font and colors " pada blog anda.. caranya anda cukup login ke blogger kemudian pilih pilihan menu " layout " dan pilih lagi menu " font and colors " ... nah di editor " font and colors " tersebut anda bisa mengubah warna background blog anda sesuai dengan kemauan anda. jika di blog anda tidak ada code ($bgcolor), seperti dalam kurung tersebut, maka anda harus mengubah warna dari background blog anda secara manual yaitu tinggal menambahkan kode warna yang anda ketahui,... misalkan
background: #000000; ( code warna #000000 berati berwarna hitam ),
jika anda ingin mengganti background anda dengan warna putih anda tinggal mengganti dengan
background: #ffffff ( code warna #ffffff berarti warna putih ),
begitupu juga untuk warna warna yang lainnya.. cara nya sama saja... tinggal tambahkan tanda (#)di sebelum angka atau huruf (contoh = #ffffff), tanpa tanda kurung!
selain mengganti background dengan warna warni, juga bisa di ganti dengan gambar... semisal anda ingin blog anda backgroundnya foto anda sendiri.... itu bisa bisa saja...
caranya pada code CSS yang bertuliskan ( background:#......; ) cukup anda ganti dengan
background: url('alamat url foto anda taruh sini');
contoh = background: url('http://photobucket.com/poto-anda.jpg');
sudah... gtu aja....... mudah kan...?
sekarang jika anda ingin mengganti background bagian sidebar blog anda..
yang harus anda cari adalah code CSS sbg berikut
#sidebar-wrapper {
width: 345px;
float: $endSide;
border:2px solid red;
background:#fff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
nah... seumpama backgroundnya seperti di atas, (background:#fff;) artinya background berwarna putih, jika anda ingin mengubah dengan warna lain silahkan ganti code css (#fff) dengan code warna lain... ( maaf saya tdk hafal code2 warna, jadi silahkan cari contoh code warna sendiri yah... hehehe ) ataupun bisa anda ubah dengan background gambar foto anda, caranya sama dengan yang di atas tadi...
begitupun untuk mengubah background bagian main, caranya sama dengan yang sudah saya jelaskan di atas.. anda tinggal mencari code css seperti di bawah ini
#main-wrapper {
width: 600px;
float: $startSide;
border:2px solid red;
background:#fff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
(caranya sama dengan yg sudah di jelaskan di tas)
