CARA MENGGANTI TEMPLATE, HEADER, DROPDOWN, GAMBAR SLIDE BLOGSPOT

CARA MENGGANTI TEMPLATE, HEADER, DROPDOWN, GAMBAR SLIDE BLOGSPOT

DOWNLOAD FILE TEMPLATE

1. Download file template, cari di template mbah google, klik disini, atau disini
2. Contoh Screen shoot, klik sesuai keinginan, kita coba yang sevim, klik sevim

1. Setelah download biasanya file berextensi .zip atau .rar seperti ini ;

2. Buka filenya dengan winrar menjadi seperti berikut ;

3. Kemudian cari didalamnya, file yang berextensi .xml, Klik sevim.xml lalu klik extract to, dan tempatkan sesuai keinginan

1. Dalam contoh tadi kita letakkan di dekstop, hasilnya seperti tampilan berikut :

Alhamdulillah, kita sudah mempunyai file templatenya

MENGGANTI TEMPLATE BLOG

1. buka www.blogger.com, atau klik sini, kemudian masukkan alamat email dan paswordnya, 

2.  

1. Kemudian klik edit html

2. Setelah keluar script htmlnya, blok script dengan ctrl+a, kemudian ctrl +c

3. Kemudian buka notepad dan tekan ctrl+v, simpan (save), hal ini dimaksudkan untuk menjaga apabila nanti dalam pengeditan script ada yang error bisa dikembalikan seperti semula

4. Kemudian klik template dan kembali pada tampilan sebelumnya, klik edit html dan klik cadangkan pulihkan

5. Tampilan selanjutnya adalah sebagai berikut, klik browser dan cari file yang sudah kita extrak tadi

6. Akan tampil tulisan nama file yang berextensi xml disamping tulisan browser dan klik unggah

Alhamdulillah, kita sudah berhasil mengganti template blog kita

MENGGANTI GAMBAR HEADER BLOGSPOT

1. Sebelum mengganti gambar header, kita siapkan dulu gambar header yang akan kita gunakan, dalam hal ini kita coba edit gambarnya menggunakan photoshop, caranya :
• Klik kanan pada gambar header bawaan template yang telah kita pasang dan klik lihat gambar latar belakang

•  Setelah keluar gambarnya, klik kanan pada gambar dan klik simpan gambar dengan nama, dan simpan


• Kemudian buka file gambar yang akan kita jadikan header dengan photoshop

• Setelah terbuka, klik move tool, klik gambar kita dan geser ke gambar header

• Gambar yang tampil pasti tidak sesuai, sebagaimana tampilan berikut :

• Sesuaikan dengan edit-transform-scale (perhatian : untuk mengedit jangan menggunakan crop, image size, canvas size), kalau sudah diedit sesuai yang diinginkan, save as ke format jpeg

• Alhamdulillah, kita sudah mempunyai gambar untuk header blog kita, sekarang tinggal memasang gambar tersebut
2. Pada bagian menu blogspot, klik Tata Letak, berikutnya klik edit dibagian judul blog

Alhamdulillah, gambar header kita sudah terpasang, sehingga semakin kelihatan identitas blog kita

MENGEDIT MENU DROPDOWN

1. Pada menu blog, klik template dan klik edit html

1. Copy script dropdownnya dan pastekan di dreamweaver atau notepad dan diedit.

sebagai contoh, kita ulas script satu menu dropdown :

<li><a href='#'>Business</a>        <ul class='children'>            <li><a href='#'>Market</a></li>            <li><a href='#'>Stock</a></li>            <li><a href='#'>Internet</a>                   <ul class='children'>                        <li><a href='http://www.google.com' target='_blank'>SAPI</a></li>                        <li><a href='http://www.yahoo.com'>kerbau</a></li>                   </ul>             </li>            <li><a href='#'>Gorengan</a></li>            <li><a href='#'>bakaran</a></li>     </ul> </li>

Keterangan penulisan script dropdown :

NO	KODE SCRIPT	KETERANGAN	TAMPILAN
1	<li><a href='#'>Business</a>
	<li>	script pembuka menu
	<a href	pembuka script link
	'#'	tempat penulisan link, nantinya jika diklik akan menuju halaman link, penulisan bisa diganti, contoh : ‘http://www.google.com’ jika diklik akan menuju halaman google
	Business	Tulisan yang tampil dalam menu, Ket : bisa diganti
	</a>	Tulisan yang tampil dalam menu
	Keterangan : pada script ini tidak ada penutup <li> karena ada sub menu, jadi penutup <li> ada dibagian bawah
2	<ul class='children'>
	<ul	script pembuka penanda mulai sub menu (dropdown)
	class='children'>	script lanjutan pembuka penanda mulai sub menu (dropdown)
3	<li><a href='#'>Market</a></li>
	<li>	script pembuka penanda mulai sub menu (dropdown)
	<a href='#'>	script pembuka link dan # diganti dengan alamat link, contoh http://www.google.com
	Market	Tampilan tulisan sub menu, Ket : bisa diganti
	</a>	script penutup link
	</li>	script penutup sub menu (dropdown)
	Keterangan : pada script ini ada penutup <li> karena tidak ada sub menu, dan merupakan sub menu pertama
4	<li><a href='#'>Stock</a></li>
	Script sama dengan atas (<li><a href='#'>Market</a></li>), script ini merupakan sub menu kedua
5	<li><a href='#'>Internet</a>
	Script sama dengan atas, cuma disini tidak ada penutup <li> karena mempunyai sub sub menu, script ini merupakan sub menu ketiga
6	<ul class='children'>
	<ul	script pembuka penanda mulai sub sub menu (dropdown)
	class='children'>	script lanjutan pembuka penanda mulai sub sub menu (dropdown)
7	<li><a href='http://www.google.com' target='_blank'>SAPI</a></li>
	<li>	sama dengan atas
	<a href=	script pembuka link sama atas
	http://www.google.com'	link tujuan , Ket : bisa diganti
	target='_blank'>	jika link di klik, maka terbuka dihalaman baru
	SAPI	tampilan tampilan sub sub menu, Ket : bisa diganti
	</a></li>	script penutup link dan penutup sub sub menu (dropdown)
	Keterangan : merupakan sub sub menu pertama dari sub menu internet
8	<li><a href='http://www.yahoo.com'>kerbau</a></li>
	Script sama dengan atas, cuma disini jika link di klik, akan terbuka dihalaman yang sama, script ini merupakan sub sub menu kedua dari sub menu internet
9	</ul>
	Script penutup <ul> atasnya (dibawah <li><a href='#'>Internet</a>)
10	</li>
	Script penutup <li> yaitu <li><a href='#'>Internet</a>
11	<li><a href='#'>Gorengan</a></li>
	Script sama dengan atas dan sub lanjutan dari sub menunya Bussiness, jadi script ini merupakan sub menu keempat
12	<li><a href='#'>bakaran</a></li>
	Script sama dengan atas dan sub lanjutan dari sub menunya Bussiness, jadi script ini merupakan sub menu kelima
13	</ul>
	Script penutup <ul> atasnya (dibawah <li><a href='#'>Bussiness</a>)
14	</li>
	Script penutup <li> yaitu <li><a href='#'>Bussiness</a>
Keterangan : Seluruh script diatas hanyalah contoh script satu menu dropdown, kita bisa menambahi atau mengurangi menu, sub menu, sub sub menu, memberi link dll, caranya perhatikan, setiap menu, sub menu, sub sub menu dimulai dengan pembuka <li> dan ditutup dengan </li>

Alhamdulillah, kita sudah mengganti menu dropdown kita, sehingga link-link menu sesuai dengan yang kita butuhkan

MENGGANTI GAMBAR SLIDE

1. Sebelum mengganti gambar slide, kita harus mempersiapkan gambar yang akan tampil dalam slide, caranya :
• Pada menu blog, klik template, dan klik Edit HTML


• Dalam script, kita blok script yang dimulai dengan http:// sampai dengan .jpg 
sebagai contoh dalam script gambar slide 4 adalah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZmCUOLAZdn9bzFfwKn6ym9hRsx4uxXU2Z6YjDvtTOjUzZUHSC7EqtLR2zzjg5c2_YqlNR5BseXD1mKla8HkskTFGcVnyD2Kokm7I5y-TxcrNc3krbKWmR3SCx90HVzOYAEUxH_czWFTX/s0/4.jpg

• buka halaman baru dalam browser dan pastekan script tersebut, kemudian tekan enter 

• Setelah gambarnya tampil, klik kanan pada gambar tersebut dan klik simpan gambar dengan nama, kita simpan gambar tersebut ditempat dan nama sesuai keinginan kita

• Sekarang buka gambar yang tadi telah kita simpan dengan photoshop

• Selanjutnya dalam photoshop kita buka gambar yang kita inginkan jadi gambar slide, kemudian geser ke gambar asli template

• Setelah masuk, edit gambar tersebut sesuai yang kita inginkan (gambar pasti tidak sesuai, gunakan edit-transform-scale)
  perhatikan: jangan menggunakan crop, image size dan canvas size,
  kalau sudah selesai save as dengan format .jpeg seperti gambar atas (gambar header)

Tampilan hasil edit gambarnya seperti ini : 
Alhamdulillah, sekarang kita sudah mempunyai gambar yang kita siapkan untuk gambar slide

2. Selanjutnya kita mengunggah gambar tersebut untuk mendapatkan alamat webnya, pada menu blogger, klik entri baru

3. Tulis nama judul pos, lalu klik bagian entrian dan klik insert image

4. Setelah keluar menu pilih file klik pilih file dan cari filenya, jika selesai loadingnya klik gambarnya dan klik add selected

5. Gambar akan tampil dalam pos, kemudian klik simpan dan klik publikasikan (bila keluar permintaan share, klik batal)

6. Kemudian dalam tampilan pos, sesuai judul pos klik edit

7. Setelah keluar gambarnya, klik HTML

8. Setelah keluar scriptnya, copy alamat gambar yaitu mulai tulisan http:// sampai dengan .jpg
gambar diatas yang dicopy adalah : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k0yQISu9INNzG0doqNHYeRnpvcICBZPP1jwLsVyA7XJ6zO0PPGvnpwIMeq6wnwOpN7woyqSmsohzjN3tot7HEOdfCCvA0QKc4bo4t5UbBHNLZcFx05Wnt2_6ML396pgHVcbfw-k4VRYq/s1600/slide2.jpg (ini adalah alamat web gambar kita)

9.  Buka Notepad dan pastekan kemudian simpan
10. Kemudian undurkan tampilan sampai menu pos

11. Pada menu pos, centang sebelah judul pos dan klik kembali ke draf sampai keluar tulisan draf berwarna merah disamping kanan

12. Langkah selanjutnya, kita memasukkan alamat web gambar pada script, pada menu template klik edit HTML

13.  

1.  
Scriptnya adalah :

<div class='imageElement'> <h3>This is featured post 1 title</h3> <p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p> <a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/> <img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL79xnH-MdtwhcJG948UiksMFaevLRTuswBhhz7IixytKS6xTyMoAhqqCE7MO2EchYfNan0evwumtmvNFfHNsy3ur9vx7DmWVi5hcpV3TJeYwt7Ku6DwyHBalo7jdgcDDn71cxf0tyeGx6/s0/2.jpg'/> </div>


Keterangan penulisan script slider :

NO	KODE SCRIPT	KETERANGAN
1	<div class='imageElement'>
	<div class=	script pembuka gambar slider
	imageElement'>	penanda bahwa yang akan tampil adalah image
2	<h3>This is featured post 1 title</h3>
	<h3>	script pembuka judul gambar slide, angka 3 menunjukkan besar tulisan (heading3)
	This is featured post 1 title	Tulisan judul yang akan tampil dibagian bawah gambar slide (tulisan bisa diganti)
	</h3>	script penutup judul gambar slide
3	<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>
	<p>	script pembuka keterangan judul gambar slide, p menandakan mulai paragraf
	Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.	Tulisan keterangan judul yang akan tampil dibagian bawah judul (tulisan bisa diganti)
	</p>	script penutup keterangan judul gambar slide
4	<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/> <img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL79xnH-MdtwhcJG948UiksMFaevLRTuswBhhz7IixytKS6xTyMoAhqqCE7MO2EchYfNan0evwumtmvNFfHNsy3ur9vx7DmWVi5hcpV3TJeYwt7Ku6DwyHBalo7jdgcDDn71cxf0tyeGx6/s0/2.jpg'/>
	<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/>	script pembuka featur gambar slide 1
	<img alt='' class='full' src='	Pembuka untuk featur pengarah gambar
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL79xnH-MdtwhcJG948UiksMFaevLRTuswBhhz7IixytKS6xTyMoAhqqCE7MO2EchYfNan0evwumtmvNFfHNsy3ur9vx7DmWVi5hcpV3TJeYwt7Ku6DwyHBalo7jdgcDDn71cxf0tyeGx6/s0/2.jpg'/>	alamat web gambar bawaan slide template (mulai http:// sampai dengan  .jpg inilah yang kita ganti dengan alamat web gambar kita)
5	</div>
	</div>	script penutup gambar slider
Keterangan : Seluruh script diatas hanyalah contoh script satu gambar slide,  kita bisa mengganti judul dan ketarangan gambar. menambahi atau mengurangi  gambar slide scrip dimulai dengan pembuka <div> dan ditutup dengan </div>

Alhamdulillah, kita sudah bisa mengganti gambar slider, sehingga blog semakin asyik dengan tampilan gambar-gambar slide kita.

selamat mencoba semoga berhasil, terima kasih

Read More