Blog Urang Kuningan: Tutorial Ngeblog

Membuat Menu Dropdown

Menu Dropdown adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal. nah klo sobat ingin pasang menu Dropdown ini silahkan ikuti langkah2 di bawah ini gampang ko....

Nih contohnya

Ok langsung z ke TKP

1. Login ke Blogger. Klik menu Layout -> Page Elements
2. Klik Add a Gadget -> HTML/ Javascript
3. Masukkan kode dibawah ini

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Blogroll</option> <option value="http://alamatLink.com/">Nama Link</option> <option value="http://alamatLink.com/">Nama Link</option> <option value="http://alamatLink.com/">Nama Link</option> </select>

Jika sobat ingin menambah link baru lagi tambahkan kode di bawah ini di atas code </select>

<option value="http://alamatLink.com/">Nama Link</option>

Ganti alamatblog dengan dengan alamat blog sobat.
Ganti teks berwarna hijau dengan alamat link yang ingin dipasang.
Ganti teks berwarna kuning dengan nama link yang ingin ditampilkan.

4. Klik Save. Selesai

Semoga bermanfaat...

Baca Selengkapnya... - Membuat Menu Dropdown

Cara Membuat Related Post Blogspot

Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.

Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :

1. Sobat Login dulu ke Bloger
2. Klick Tata Letak/Layout
3. Klick Edit HTML
4. Centang dibagaian atas kanan Expand widget
5. Cari Code <data:post.body/> untuk lebih memudahkan anda silahkan menggunakan ctrl +f untuk mencari kode trsebut.
6. copy paste kode dibawah ini tepat dibawah kode <data:post.body/>

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</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>

7. Klick Save

Cukup Mudah kan...Semoga Bermanfaat

Baca Selengkapnya... - Cara Membuat Related Post Blogspot

Cara Pasang Tombol Back to Top (Kembali Ke atas)

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 atau 3 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih ( designed by syilpid )

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a>

Baca Selengkapnya... - Cara Pasang Tombol Back to Top (Kembali Ke atas)

Pasang Widget Translator

Memasang widget translator atau "Penerjemah" pada blog banyak sekali gunanya. Translator ini berguna apabila ada pengunjung dari negara lain yang secara sengaja maupun tidak yang melihat blog kita dan tidak tahu bahasa kita maka mereka bisa menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini sudah support untuk bahasa Indonesia. Dan kalo sobat mau, translator ini bisa juga untuk menterjemahkan tugas dari sekolah/kampus secara mudah. Dan hasilnya bisa lebih bagus daripada software transtool lho. Gimana? mau membuatnya? caranya mudah lho. Gini nih...

1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

5. Kemudian simpan.

Coba sekarang lihat blogmu maka ada tampilan seperti ini :

Coba dites apakah translator tersebut bekerja dengan baik atau tidak.
Gimana? gampang kan...

Baca Selengkapnya... - Pasang Widget Translator

Pasang Menu Tab View

Pastinya udah pada kenal kan sama widget Tab View menu? Penggunaan dan pemasangan menu Tab View bisa bermanfaat sekali dan sangat cocok digunakan pada ruang yang terbatas. Cara pasang menu Tab View tersebut juga cukup simpel.

Biasanya menu Tab View ini dipasang pada menu sidebar ato footer, widget tersebut bisa dipasang di mana saja yang sobat mau...

Ok langsung aja ke TKP..

1. Masuk Ke BLogger tentunya login dengan account sobat sendiri..
2. Klik Layout/Tata Letak ->> Klik Menu Edit HTML
3. Download full template buat jaga2 kalo ada kesalahan dalam pengeditan
4. Cari kode ini ]]></b:skin> dan Copy paste kode dibawah ini diatas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: â��Times New Romanâ��, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}

Kode kode diatas yang sebelahnya ada keteranya itu bisa dirubah jika warnanya anda kurang suka atau tidak coocok dengan template anda, kode warna html anda bisa cari disini

Selanjutnya Cari kode </head> dan copy paste script di bawah ini di atas </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

Setelah itu save template
Masuk ke ->> tata letak ->> tambah gadget (pilih HTML/JavaScript)

Copy paste kode dibawah ke dalam gadget yang telah ditambahkan tadi

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

kalo sobat tidak pas dengan ukurannya, sobat bisa mengedit sendiri pada widh dan height nya
dan jika ingin membuat menu tab nya lebih dari 3 anda tinggal Copy-Paste kode diatas yang bagian tab viewna saja..

Semoga bermanfaat

Baca Selengkapnya... - Pasang Menu Tab View

Kode Warna Dalam HTML

Dalam melakukan perubahan pada template blog atau kode-kode HTML, kita sering ingin mengganti warna pada blog kita sesuai dengan nuansa yang di inginkan.Kode warna HTML biasanya di ikuti dengan tanda #, seperti contoh # ffffff (arti kode ini adalah warna putih).Sebagai referensi warna, berikut kode warna yang bisa anda gunakan untuk mempercantik blog anda.

Baca Selengkapnya... - Kode Warna Dalam HTML

Text Berjalan (Marquee)

Membuat blog lebih atraktif tentunya dambaan setiap blogger, karna demi memanjakan pengunjung yang dateng dan agar mereka ngga bosen buat balik lagi ke blog kita. buat bikin blog kita lebih atraktif untuk diliat, salah satu cara yang bisa kita gunakan adalah dengan membuat text berjalan ini atau biasanya sering disebut marquee..

Marquee ini sering banget kita liat apalagi di situs2 bisnis..biasanya klo di sits bisnis marquee dipake dengan kalimat “selamat datang…” yang bergerak dari kiri ke kanan atau sebaliknya. Misalnya kalimat ini :

"Selamat Datang..."

Untuk membuatnya, kalian cukup menyisipkan kode di bawah ini pada kalimat yang akan kalian buat bergerak :

<marquee align="center" direction="left" scrollamount="3" width="60%" height="100">

"Selamat Datang..."

</marquee>

Kata yang berwarna merah "Selamat Darang" bisa kamu ganti pake TEXT, LINK, atau GAMBAR yang pengen kalian buat bergerak...

Keterangan :

1. Direction "Left" ---> text akan bergerak ke kiri, kamu bisa ganti "right(klo pengen gerak ke kanan)", "up(Gerak ke Atas)" atau "Down(Gerak ke bawah)"
2. scrollamount="3" ---> Kecepatan geraknya, bisa km ganti juga..
3. width ---> Batas horizontal marquee
4. Height ----> Batas vertikal marqueenya...

Buat cara pasangnya y seperti biasa :

Masuk "Layout"---->"Add Gadget"---->"HTML / JavaScript"----> Simpan..

nah, dah bisa kan sekarang buat kalimat bergerak

Selamat Mencoba

Baca Selengkapnya... - Text Berjalan (Marquee)

Pasang Read More Auto Terbaru

Sebenarnya sudah lama saya mengetahui tentang masalah readmore ini(versi lawas). Pada awalnya saya tertarik untuk menggunakan readmore, tetapi entah mengapa saya kurang suka dengan cara menggunakannya yang kurang praktis. Menggunakan readmore juga membuat loading blog berat karena harus loading dari awal lagi setelah pengunjung mengklik readmore untuk membaca selengkapnya.

Sampai suatu hari, gak tahu dapat ilham dari mana saya menemukan cara menggunakan readmore otomatis ini di blognya o-om.com. Readmore otomatis ini lebih canggih karena fungsi pemenggalan kalimat bekerja secara otomatis tanpa harus menyisipkan kode tertentu di postingan seperti yang digunakan di readmore versi lama.

Hebatnya di Readmore ini terdapat fasilitas image thumbnail yaitu bisa menampilkan gambar pertama dalam postingan dan mem-fload gambar tersebut di awal paragraf, meskipun gambar diletakkan ditengah atau akhir postingan. Selain itu, kita dapat juga dapat mengatur berapa jumlah karakter yang akan ditampilkan, baik saat menggunakan gambar atau saat tidak menggunakan gambar.

Untuk memasang Readmore Otomatis ini silahkan ikuti langkah-langkah berikut ini:

1. Jika anda sudah menggunakan readmore versi lama hapus dulu kodenya
2. Masuk ke halaman Edit HTML, cari kode berikut
</head> lalu letakkan script di bawah ini diatas kode </head>
Silahkan copy paste script kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Jangan lupa simpan terlebih dahulu. Masih di halaman EDIT HTML, beri tanda centang pada "Expand widget template" lalu cari kode berikut

<data:post.body/>

Jika sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Simpan dan lihat hasilnya...

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga Bermanfaat

Baca Selengkapnya... - Pasang Read More Auto Terbaru

Gambar Membesar saat Cursor Mouse diatas Gambar

hai sob.. Mungkin sobat pernah melihat gambar di blog lain dan ketika cursor mouse di arahkan ke gambar, secara otomatis gambar itu membesar gimana si caranya...?

Ok langsung aja ke TKP :

1. Masuk ke bagian EDIT HTML
4. Lalu tambahkan script berikut di atas kode </head>

<style type='text/css'>
border: none;
vertical-align: top;
}
</style>
<script src='http://sites.google.com/site/masdoyoksite/javascript/masdoyokexpando.js' type='text/javascript'>

/* http://www.MasDoyok.co.cc (c) Script 2009*/

</script>

3. Lalu SAVE

Berikutnya, ini contoh script yang diletakkan di postingan atau sidebar blog sobat

<img class="expando" border="0" src="URL GAmbar kamu" width="100" height="100">

Selesai...selamat mencoba

Semoga Bermanfaat
Sumber.MasDoyok

Baca Selengkapnya... - Gambar Membesar saat Cursor Mouse diatas Gambar

Pasang Code HTML/JavaScript di SideBar

Hai sob...mungkin cara ini husus buat pemula yang baru bikin blog dan pengen tau cara pasang code HTML/JavaScript di SideBar, kalau buat master-master si Pasti sudah pada tau...hehehe.!!

Ok langsung aja ke TKP :

1. sobat harus login dulu di Bloger yang tentunya dengan memasukan ID dan Pasword sobat
2. Klik Tata Letak (layout).
3. Klik tab Element Halaman.
4. Klik Tambah Gadget.

5. Klik tanda Tambah (+) pada HTML/JavaScript.

6. Masukkan judul dikolom pertama, masukkan Code HTML dikolom kedua.

7. Klik Simpan(Save).

dan lihat hasilnya...

Semoga Bermanfaat

Baca Selengkapnya... - Pasang Code HTML/JavaScript di SideBar

Pasang Code HTML di Posting

Cara pasang Code HTML terlalu sulit kalau di tulis secara manual, agar lebih mudah sobat bisa ikuti tips berikut ini :

1. klik http://centricle.com atau http://www.eblogtemplates.com

2. Masukan kode HTML / Java Script yang ingin anda tampilkan dipostingan..

3. klik encode (untuk http://centricle.com/) atau convert ad code (untuk http://www.eblogtemplates.com)

Contoh : untuk code HTML

<div align="center"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" src="http://alimmahdi.googlepages.com/Jam_Analog.swf" height="150" wmode="transparent" type="application/x-shockwave-flash"></embed></div>

Setelah di klick Encode

4. copy paste Encodenya dan taruh diartikel anda,, taruh di edit HTMLnya..

Selesai

Cukup mudah kan....!!!

Semoga Bermanfaat....

Baca Selengkapnya... - Pasang Code HTML di Posting

Pasang Link dan Link gambar

Hi, kamu pasti sering melihat di setiap blog/twebsite dijumpai tulisan atau gambar yang bisa diklik untuk menuju suatu halaman. nah sekarang saya akan memberikan caranya.. ini khusus buat pemula loh... jadi bagi kamu yang sudah mengetahui caranya boleh ikut membantu saya buat teman-teman kita yang belum mengetahui bagaimana cara memasukan link atau link image didalam blog. kita mulai aja ya... heheh.. maaf rada buru-buru postingnya.

1. Buat Link Text

code-nya:
<a href="url tujuan" target="_blank">judul</a>

contoh:
<a href="http://veltic.blogspot.com/" target="_blank">Tips And Tutorial Bloging</a>

Hasilnya:
Tips And Tutorial Bloging

"http://veltic.blogspot.com" ganti dengan alamat url tujuan kamu, dan Kata Tips and Tuotrial Bloging kamu ganti dengan judul yang akan ditampilkan seperti contoh hasil diatas.

2. Buat Link Dengan menampilkan Image(gambar)

code-nya:
<a href="url-tujuan"><img border="0" src="url-image" alt="judul"/></a>

contoh:
<a href="http://veltic.blogspot.com/"><img border="0" src="http://gickr.com/results4/anim_35b35847-af4c-4264-e54f-f002268686d3.gif" alt="my link"/></a>

Hasilnya:

border adalah besar garis pinggir gambar, "url image" kamu ganti dengan alamat image online kamu. "Gambarku" ganti dengan judul link tujuan kamu (akan terlihat saat mouse berada di atas gambar).

Kamu juga bisa mengatur ukuran besar image/gambar sesuai dengan keinginan,

Code-nya:
<a href="url tujuan"><img border="0" width="angka-ukuran-lebar" src="url image" height="angka-ukuran-tinggi"/></a>

contoh:
<a href="http://www.nilman4u.co.cc/"><img border="0" width="200" src="http://gickr.com/results4/anim_35b35847-af4c-4264-e54f-f002268686d3.gif" alt="My Link" height="100"/></a>

Hasilnya:

width adalah lebar gambar dan height adalah tinggi gambar, ganti angka diantara " sesuai keinginan kamu.

NB: buat dapetin link gambar sobat bisa kunjungi http://imageshack.us/

Selamat Mencoba...

Baca Selengkapnya... - Pasang Link dan Link gambar

Cara memasang jam

Memasang widget yang satu ini ngga terlalu sulit kok. Tapi apa gunanya memasang jam ke blog? Lumayan donk, buat ngingatin kita jangan sampai lupa makan saking keasikan Ngeblog. Sekalian pajangan buat mempercantik tampilan blog kita.

Ok, kita langsung aja praktek ...
1. Meluncurlah ke www.clocklink.com maka kita akan di bawa ke tampilan seperti pada gambar di bawah ini :

2. Klik ant a clock on your website?, maka kita akan di bawa ke tampilan seperti pada gambar di bawah ini :

3. pada gambar di atas, sebagai contoh, klik Analog

4. Selanjutnya,Pilih model jam yang anda sukai dengan mengklik tombol View HTML Tag, maka akan muncul Cloklink user License pop up window seperti tampak pada gambar di bawah ini :

5. Klik tombol Accept, maka akan muncul tampilan sebagai berikut :

6. Atur warna jam dengan menconteng bulatan kecil di samping masing-masing warna.

7. Klik select by timezone

8. Pilih pilih [GMT+07.00] bila lokasi anda di WIB, pilih [GMT+08.00] atau [GMT+09.00] jika anda berada di area WITA atau WIT pada kotak Timezone.

9. Atur ukuran jam sesuai selera anda dengan memilih ukuran pada kotak Size

10. Kopi kode yang disediakan pada kotak pertama.

Nah, sekarang kita tinggal memasang kode yang kita kopi tadi ke sidebar blog, caranya sebagai berikut :

1. Login ke blogspot.

2. Klik Customize pada Navbar

3. Klik Layout
4. Klik add a gadget

5. pilih HTML/JavaScript

6. Beri nama (misalnya) My Time

7. Pastekan kode yang kita copy tadi ke ruang content

8. klik save.
9. Klik View Blog unuk melihat perubahan.

Selamat Bloggers, sekarang di blog anda sudah terpasang sebuah jam. Cantik bukan ????

Baca Selengkapnya... - Cara memasang jam

Cara Membuat Blog

Ok langsung ke TKP......

Untuk membuat blog di blogspot.com, kamu sebelumnya harus sudah punya alamat email di google.com, Bagi yang belum punya account di google.com, bisa membaca tutorialnya di sini. Bagi yang sudah, ikuti langkah-langkah di bawah ini.

1. Meluncurlah ke http://www.blogger.com/
Maka anda akan dibawa ke tampilan seperti gambar di bawah ini :

2. Kik tanda panah bertuliskan CIPTAKAN BLOG ANDA
Maka, anda akan di bawa ketampilan seprti di bawah ini :

3. Isi Kolom yang disediakan :

a. Alamat Email : Isi dengan alamat emailmu. Misalnya namaanda@gmail.com
b. Ketik Ulang Alamat Eail : Isi dengan alamat email yang sama.
c. Masukkan sebuah password : isi dengan passwordmu/kata sandi
d. Ketik ulang sandi : Isi dgn passwordmu/kata sandi yang sama
e. Nama tampilan : isi dengan namamu (misalnya)
f. Masukkan verifikasi kata ke kotak yang disediakan
g. Penerimaan persyaratan : conteng kotak kecil di samping kalimat Saya menerima Persyaratan dan layanan
h. Klik tanda panah bertuliskan LANJUTKAN

Maka anda akan di bawa ke tampilan berikut :

4. Isi kolom yang disediakan :
a. Judul blog : buat judul blogmu
b. Alamat blog (URL) : isi dengan namamu,
c. Klik Cek Ketersediaan untuk melihat apakah alamt url yang kamu buat diizinkan oleh blogspot.com, kalau belum, ganti dengan nama uyang lain
d. Klik tanda panah bertuliskan LANJUTKAN

Maka kamu akan di bawa ke ruang pemilihan template seperti gambar di bawah ini :

5. Pilih template yang kamu sukai dengan menconteng kolom kecil di samping nama template

6. Klik tanda panah bertuliskan LANJUTKAN

maka akan muncul tampilan seperti gambar di bawah ini :

7. Klik tanda panah bertuliskan MULAI BLOGGING.

Maka anda akan dibawa ke ruang postingan seperti tampak pada gambar di bawah ini :

a. Judul : isi dengan judul blogmu
b. Tulis beberapa kalimat di ruang pengetikan
c. isi kotak kategori dengan kata article (misalnya), boleh dengan nama lain
d. Kalau sudah selesai, tekan tombol TERBITKAN ENTRI

Kemudian anda akan di bawa ke tampilan berikut :

8. Klik Lihat blog untuk melihat hasilnya.

Semoga Bermanfaat....

Baca Selengkapnya... - Cara Membuat Blog

Text Widget

Report Abuse

Search This Blog

Blog Archive

Categories

Translate

Kategory

Pages

Popular Posts

tutorial

download

sundanis

Friend

Traffic Feed

Bahasa Sunda

Membuat Menu Dropdown

Cara Membuat Related Post Blogspot

Cara Pasang Tombol Back to Top (Kembali Ke atas)

Pasang Widget Translator

Pasang Menu Tab View

Kode Warna Dalam HTML

Text Berjalan (Marquee)

Pasang Read More Auto Terbaru

Gambar Membesar saat Cursor Mouse diatas Gambar

Pasang Code HTML/JavaScript di SideBar

Pasang Code HTML di Posting

Pasang Link dan Link gambar

Cara memasang jam

Cara Membuat Blog

Recent Posts

Recent comment

Kategory

Pesan Singkat

Link Exchange / Tukar Link

Statistik

Baca Juga

Entri Populer

Bloger

YANG TERBARU

Banner Friend