PiMiTemplate

Cara Membuat Menu Horizontal dengan Sub Menu Vertikal

2012-05-03T10:39:00.000-07:00

Hai sobat, ketemu lagi dengan saya di PiMiTemplate tempat tutorial blogger dan tempat tutorial template blogger. berdasarkan judul di atas pasti sobat merasa senang ketika menemukan tutorial blogger ini, kemarin melalui blog saya yang satunya lagi, saya sudah pernah menulis tentang cara cepat dan mudah membuat menu horizontal di blogger, dan kali ini kita akan membahas tentang bagaimana cara membuat menu horizontal dengan sub menu vertikal di blog. seperti di bawah ini.

Gimana tertarik bukan? kalau udah tidak sabar langsung saja kita menuju ke TKP, Cekidot.

Cara Membuat Menu Horizontal dengan Sub Menu Vertikal

#1. Masuklah terlebih dahulu ke akun blogger sobat;
#2. Pilih blog yang ingin di buat Menu-nya;
#3. Pilih tata letak dan cari Page >> Edit >> Hapus; Setelah itu simpan setelan;
#4. Kalau sudah pilih template >> edit HTML >> Centang Expand Template Widget;
#5. Carilah kode ]]></b:skin> dengan menekan Ctrl + f;
#6. Setelah ketemu, Salin kode di bawah ini dan letakan kode tersebut tepat di atas kode ]]></b:skin>;

/* ----- NAVBAR MENU ----- */ #NavbarMenu { width: 100%; height: 32px; background:#1C1C1C; color: #BDBDBD; margin: 0 auto 0; padding: auto auto; font: bold 12px Arial; } #NavbarMenuleft { width: 100%; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #BDBDBD; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: normal 12px Arial; } #nav li a:hover, #nav li a:active { background:#424242; color: #ffffff; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #2E2E2E; width: 150px; color: #A4A4A4; float: none; margin: 0; padding: 7px 10px; border-bottom: 0px solid #444444; border-left: 0px solid #444444; border-right: 0px solid #444444; font: normal 12px Arial; } #nav li li a:hover, #nav li li a:active { background: #444444; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { position: absolute; z-index: 9999; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } #nav li:hover > a { background: #444444; color: #ffffff; } .sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}

#7. Setelah itu cari kode </header> dan letakan kode di bawah ini tepat di bawah kode </header>;

<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li><a href='#'>About Us</a></li> <li><a href='#'>Kategori</a> <ul> <li><a href='#'>Kategori 1</a></li> <li><a href='#'>Kategori 2</a></li> <li><a href='#'>Kategori 3</a></li> <li><a href='#'>Kategori 4</a></li> </ul> </li> <li><a href='#'>Kategori</a> <ul> <li><a href='#'>Kategori 1</a></li> <li><a href='#'>Kategori 2</a></li> <li><a href='#'>Kategori 3</a></li> <li><a href='#'>Kategori 4</a></li> </ul> </li> <li><a href='#'>My Blog List</a> <ul> <li><a href='#' target='_blank'>Blog 1</a></li> <li><a href='#' target='_blank'>Blog 2</a></li> <li><a href='#' target='_blank'>Blog 3</a></li> </ul> </li> <li><a href='#'>Kategori</a></li> </ul> </div> </div>

Penjelasan :
Tanda "#" pada kode di atas ganti dengan URL yang sobat inginkan, dan jangan lupa mengganti Tulisan Kategori dan Blog di atas Sesuai URL yang di tuju Tentunya.

#8. Kalau sudah pratinjau terlebih dahulu template sobat dengan menekan pratinjau, jika sudah sesuai dengan selera sobat, simpan template tunggu proses penyimpanan selesai, tutup edit HTML, Selesai.

Muda-mudahan tutorial blogger kali ini bermanfaat ya, ikuti blog ini dan dapatkan tutorial terbaru setiap minggunya. ^_^

Cara Buat Header Blog Biasa Menjadi Keren

2012-05-02T09:47:00.000-07:00

Hai sobat, postingan blog kali ini hanya sedikit mau mengingatkan tentang bagaimana agar header blogspot kita yang biasa menjadi luar biasa. kemarin saya sudah membuat tiga postingan tentang mendesain header blog yakni cara desain header blog (bag 1), cara desain header blog (bag 2), serta cara desain header blog (bag 3), kalau sobat mengikuti ketiga tutorial blogger tersebut, sobat sudah bisa merubah header blogspot yang biasa menjadi header blog yang luar biasa, karena di dalam ketiga postingan tutorial blog tersebut, sobat akan mendapatkan cara untuk membuat header blog, karena tutorial blog yang saya berikan sangatlah mudah untuk di mengerti, itu menurut saya bagaimana menurut sobat?

Selain daripada itu di dalam ketiga tutorial blog di atas ada cara bagaimana membuat header dengan gambar, dan nantinya akan ada banyak lagi tutorial blog tentang header blog. mulailah dengan pelajaran desain header blog dari (bag 1), (bag 2) dan (bag 3), kalau ketiga tutorial blog tersebut sudah di ikuti untuk tutorial blog selanjutnya akan menjadi lebih muda, sehingga dengan mengikuti tutorial blog tersebut kita akan dengan mudah memperindah blog kita.

Kunjungi Ketiga Link di bawah ini :

Cara Desain Header Blog (Bag 1) >> tentang >> Pengenalan Widget Header

Cara Desain Header Blog (Bag 2) >> tentang >> Mengganti Background Header Blog Dengan Gambar

Cara Desain Header Blog (Bag 3) >> tentang >> Membagi Header Blog Menjadi 2 Kolom

Jangan lupa untuk berlangganan melalui email untuk mendapatkan tutorial blog terbaru tentang header blog, sekian dulu postingan kali ini, semoga bermanfaat.

Cara Desain Header Blog (Bag 3)

2012-05-01T21:19:00.000-07:00

Halo sobat, ketemu lagi masih di blog yang sama PiMiTemplate, berisi Tutorial Blogger dan Tutorial Template Blogger, kemarin kita telah mempelajari dua Cara Desain Header Blog yakni Cara Desain Header Blog (Bag 1) dan Cara Desain Header Blog (Bag 2) yang keduanya berisi tentang Dasar cara membuat header, cara mengganti header blog, serta cara edit header blog.

Dan masih dalam tutorial seputar header blog, kali ini kita akan belajar Cara Desain Header Blog (Bag 3) yakni tentang cara membagi header blog menjadi 2 kolom, jadi tidak usah berlama-lama lagi mari kita menuju ke TKP. Cekidot.

Cara Desain Header Blog (Bag 3)

Cara Membagi Header Blog Menjadi 2 Kolom

Sebelum kita lanjut ke pokok permasalahan kita saya ingin menjelaskan sedikit tentang header blog, dalam tampilan tata letak blog yang ada di dalam Opsi Lainnya Blogger seperti yang di katakan oleh Seorang Pakar header blog kalau posisi header blog yang berada pada tata letak blogger itu berada di bawah bawah favicon dan navbar blogger yang terlihat seperti satu kolom panjang yang terlihat seperti pada gambar di bawah ini.

Gambar di atas ini adalah tampilan dari header blog yang hanya memiliki 1 Kolom, nah bagaimana kita membuat header blog yang memiliki 2 kolom seperti terlihat pada gambar di bawah ini?

Nah itulah hasil jadinya dari cara desain header kali ini, yang jika selesai tampilan header blog-nya akan jadi seperti pada gambar di bawah ini.

Setelah melihat beberapa gambar di atas, saya rasa sobat sudah memahami apa itu namanya header blog bukan? kalau ada yang masih kurang jelas tentang header blog berikan komentar sobat.

Untuk membuat header blog seperti pada gambar di atas ikutilah langkah-langkah di bawah ini :

#1. Masuklah terlebih dahulu ke akun blog sobat;

#2. Pilih blog yang ingin di edit header blog-nya;

#3. Pilih template cadangkan terlebih dahulu template blog sobat untuk menjaga terjadinya kesalahan sehingga template blog sobat dapat di pulihkan kembali, setelah itu klik >> edit / HTML >> Centang Expand Template Widget;

#4. Carilah kode ini .header-outer dengan cara tekan Ctrl + F pada keyboard dan masukan kode tersebut sehingga akan muncul kode seperti di bawah ini.

"Kalau sobat pernah mengikuti tutorial blogger tentang cara desain header blog (Bag 2) yang ada di dalam blog ini, maka tampilan kode milik sobat akan menjadi seperti di bawah ini"

.header-outer { height:Ukuran Tinggi Gambar Sobat; background-image: url(URL Gambar Milik Sobat); }

"Tapi kalau tidak maka tampilan kodenya akan terlihat seperti di bawah ini"

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; }

#5. Untuk kode yang sama seperti kode yang pertama, cukup tambahkan kode yang berwarna ungu di bawah ini.

.header-outer { height:Ukuran Tinggi Gambar Sobat background-image: url(URL Gambar Milik Sobat); } #header { width: 49%; /* untuk mengatur lebar header kiri - title, description, image */ float: left; } #bgsGR_headerkanan { float: right; width: 51%; /* mengatur lebar header kanan */padding: 2px; } #bgsGR_headerkanan .widget {padding-top: 17px;}

Penjelasan :
*Untuk yang sudah mengikuti tutorial saya sebelumnya kode .header-outer dan lainnya tidak perlu di ganti cukup tambahkan kode di bawahnya seperti terlihat di atas "Kode Berwarna Ungu".
*Tulisan yang berwarna biru digunakan untuk mengatur lebar masing-masing kolom.

"Tapi untuk kode yang sama dengan kode kedua, ganti keseluruhan kode tersebut sehingga akan menjadi seperti di bawah ini"

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */ } #header { width: 45%; /* untuk mengatur lebar header kiri - title, description, image */ margin-right: 10px;float: left; } #bgsGR_headerkanan { float: right; width: 49%; /* mengatur lebar header kanan */ margin: 20px 10px 5px 10px; padding: 2px; } #bgsGR_headerkanan .widget {margin: 3px;}

#6. Langkah selanjutnya cari kode <div class='region-inner header-inner'> kemudia tambahkan kode di bawah ini.

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Sehingga kode-nya akan menjadi seperti di bawah ini.

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

#7. Lakukan pratinjau terhadap template sobat terlebih dahulu kalau sudah pas tinggal klik Simpan template, Selesai.

Penjelasan :
Tulisan yang berwarna merah di atas adalah untuk menentukan berapa widget yang ingin di tambahkan, itu tergantung dari selera sobat sekalian dan tergantung dari besar / tingginya header sobat.

Nah demikianlah tutorial blogger tentang template blogger khususnya cara desain header blog, semoga dapat bermanfaat bagi sobat. ^_^ jangan lupa beri komentarnya.

Cara Desain Header Blog (Bag 2)

2012-04-30T12:44:00.000-07:00

Halo sobat PiMiTemplate ketemu lagi dengan saya si penulis blog yang tulus memberikan tutorial tanpa bayaran sepeser pun "Gratis", sama dengan para blogger lainnya, cuman bedanya tidak setengah-setengah,,, pokoknya apa yang ada pada saya akan saya bagikan kepada sobat.

Kemarin, kita telah mempelajari Cara Desain Header Blog (Bag 1), dan kali ini kita akan belajar Cara Desain Header Blog (Bag 2) yakni tentang Cara Membuat Atau Mendesain Gambar Background Header Blog serta Cara Mengganti Background Header Blog Dengan Gambar, untuk itu teruslah membaca, ini adalah tutorial yang jarang di temukan ini saya dapat sendiri loh tidak di kopi dari blog orang lain. tapi kalau ada yang sama dari isi blog ini, jangan tersinggung ya. he..he..he..he..!!!

Oke tidak usah panjang lebar lagi, mari kita langsung menuju ke tutorial blog kita kali ini.

Cara Desain Header (Bag 2)
Cara Membuat Atau Mendesain Gambar Background Header

#1. Buka blog sobat yang ingin di desain header-nya, "tampilan blog sobat secara keseluruhan" seperti punya saya di bawah ini.

Kalu sudah tekan tombol Prt Scr Sys Rq pada keyboar komputer / laptop sobat untuk mengcaptur gambar tersebut, hal ini bermaksud agar dapat mengetahui ukuran header blog sobat.

#2. Setelah itu klik Start >> All Programs >> Accessories >> Paint jika sudah terbuka halaman Paint kemudian tekan Ctrl + V pada Paint, maka hasilnya akan seperti di bawah ini.

Setelah tampilan menjadi seperti di atas ini, Select Keseluruhan bagian header blog sobat seperti di bawah ini.

Setelah di select langkah selanjutnya adalah klik crop, sehingga hasilnya akan jadi seperti di bawah ini.

Kalau sudah simpan gambar dengan tipe file .png.

#3. Setelah file tersimpan, cari file tersebut, kemudian Klik Kanan >> Open With >> Adobe Photoshop seperti pada gambar di bawah ini.

Kalau sudah di mengikuti langkah di atas hasilnya akan seperti di bawah ini.

Setelah sudah seperti ini, sekarang giliran sobat untuk mengedit gambar tersebut, kalau untuk cara mengedit gambar dengan adobe photoshop mungkin akan saya buat blog-nya sendiri, karena ini adalah blog khusus Tutorial Blogger dan Tutorial Template Blogger.

Sedikit Penjelasan :

"Gambar yang telah di crop dan di simpan tadi, seperti yang sudah saya katakan di atas adalah untuk memprediksi ukuran header blog sobat, jadi gambar tersebut tidak perlu di rubah ukurannya, cukup di ganti secara keseluruhan isi gambarnya menurut selera sobat".

Untuk Lebih memperjelas lagi, dari hasil editing di atas saya mengubah isi gambar tersebut menjadi seperti ini, tanpa merubah ukuran gambar tersebut.

Setelah Selesai mengedit isi gambar, jangan lupa untuk menyimpan gambar tersebut.

#4. Setelah gambar selesai di simpan, Langkah selanjutnya adalah upload gambar hasil editan tersebut ke Album Web Picasa sobat, dengan cara, Buka Album Web Picasa Sobat pilih >> "Album Blog Sobat" >> Tambahkan Foto >> Pilih Foto Dari Komputer Anda >> Pilih Gambar Yang Telah Di Edit. selanjutnya, Klik Fotoku >> Pilih Album Tempat Sobat Mengupload Gambar >> Klik Gambar Yang Telah Di Upload >> Klik Layar Penuh >> Klik Kanan Pada Gambar >> Salin URL Gambar.

Nah dari ke-4 langkah di atas apa ada masalah, saya rasa tidak. tapi jika ada masalah berikan komentar sobat di bawah postingan ini.

Cara Desain Header (Bag 2)

Cara Mengganti Background Header Blog Dengan Gambar

#1. Masuk ke akun blogger sobat;

#2. Pilih blog yang ingin di edit Background Header-nya;

#3. Setelah itu pilih Template;

#4. Klik Cadangkan / Pulihkan >> Unduh Template Lengkap Sobat >> Tutup, ini untuk menjaga terjadinya kesalahan pengeditan HTML;

#5. Selanjutnya Klik Edit HTML, Centang Expand Template Widget;

#6. Cari kode .header-outer dengan Cara menekan Ctrl + F, Maka Sobat akan menemukan kode seperti di bawah ini.

.header-outer {padding:auto;background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;}

#7. Gantilah kode tersebut dengan kode di bawah ini.

.header-outer {height:Ukuran tinggi gambar sobat;background-image: url(URL Gambar Milik Sobat);}

#8. Setelah itu klik simpan template, Selesai.

Hasil dari tutorial ini terhadap blog saya seperti pada gambar di bawah ini. dan tentunya seperti blog yang sedang sobat baca isi postingan-nya ini.

Kalau untuk blog Sobat Gimana? lihat blog sobat apakah ada perubahannya atau tidak. berikan komentar jika ada masalah. demikian tutorial kali ini mudah-mudahan dapat di jadikan acuan untuk Desain Header Blog selanjutnya. ^_^

Cara Menerjemahkan Bahasa Bantuan / Support Google

2012-04-29T19:11:00.000-07:00

Hai sobat, ketemu lagi dengan saya di PiMiTemplate,berdasarkan judul di atas, pasti sobat sangat senang ketika menemukan judul ini bukan, karena sobat adalah salah satu orang yang mencari cara menerjemahkan bahasa bantuan google adsense, menerjemahkan bahasa bantuan google adwords, menerjemahkan bahasa bantuan google webmaster tools, serta cara menerjemahkan bahasa website lainnya. karena saya merasa tidak begitu banyak orang di suatu negara yang memahami bahasa negara lain. dan tidak semua bahasa web memiliki bahasa dari negara orang-orang yang mengunjungi web tersebut tapi dengan cara ini, sobat dapat menerjemahkan lebih dari 60 bahasa yang ada di web, dan tidak usah berlama-lama lagi, langsung saja saya kasi tahu caranya.

Berkaitan dengan judul di atas, mengenai menerjemahkan bahasa web kita tidak perlu membuka kamus online dan mengkopi isi web yang ingin di terjemahkan dan meletakkannya di kamus online, itu sangatlah merepotkan, nah untuk mempermudah cara yang satu ini paling manjur dan paling mudah, yakni dengan cara :

Ikuti langka di bawah ini :

>>1# Unduh google chrome dan instal ke komputer sobat, tapi jika sobat sudah memiliki google chrome ikuti langkah selanjutnya;

>>2# Ikuti bantuan selanjutnya, Baca bantuannya di sini;

>>3# Coba buka halaman bantuan google klik di sini, maka akan muncul tampilan seperti ini;

>>4# Maka pada bagian atas akan ada proses penerjemahan secara sendirinya / otomatis, tapi kalau belum terjadi penerjemahan, lihat kembali pada bagian atas akan terlihat seperti ini :

Hal ini terjadi karena, koneksi internet sobat mungkin agak lambat, solusinya tinggal klik coba lagi, kalau belum berhasil, di ulang terus tapi hati-hati nanti akan muncul "Anda belum beruntung" he.he.he.he....!!!

Setelah berhasil akan muncul tampilan seperti pada gambar berikut ini :

>>5# Setelah sudah jadi seperti di atas, maka laman web yang di kunjungi tadi akan jadi seperti ini :

Bagaimana, mudah bukan, unduh google chrome sekarang dan jadilah sukses di google adsense dan sukses di google adwords. ^_^

Cara Desain Header Blog (Bag 1)

2012-04-28T20:23:00.001-07:00

Mengawali tutorial blog tentang desain template blog, kita akan memulai dari cara desain header blog, untuk itu tetaplah membaca, karena ini adalah tutorial template yang jarang di temukan, karena kali ini saya akan kasih tutorial template tentang header blog, jadi mulai dari cara mengganti judul blog dengan gambar, cara mengganti warna background header, serta cara membuat judul dan deskripsi blog yang ada di header blog berada di tengah. kalau sudah siap mari kita mulai.

Cara mengganti judul blog dengan gambar

Untuk yang satu ini mungkin merupakan tutorial blog yang sudah basi, tapi apa salahnya kita mengulang kembali tentang cara mengganti judul blog dengan gambar ini, karena saya melihat masih banyak yang bingung membuat judul blog dengan gambar, dan tidak usah berlama-lama lagi, langsung saja kita mulai.

Untuk mengganti judul blog dengan gambar ikutilah langkah-langkah di bawah ini :

Buatlah dulu gambar judul blog sobat dengan menggunakan photoshop atau lain sebagainya;

Masuk ke akun blogger sobat;

Pilih blog yang ingin di desain template-nya;

Pilih tata letak;

Cari Header dan klik Edit Maka Akan muncul gambar seperti di bawah ini :

Penjelasan :

Judul Blog - digunakan untuk menulis judul blog sobat;

Deskripsi Blog - digunakan untuk menulis deskripsi blog sobat, dan untuk mempertebal tulisan deskripsi blog sobat, sobat dapat menambahkan kode html <b>Isi Deskripsi Blog Sobat</b>;

Gambar - Inilah yang akan kita gunakan untuk mengganti judul blog dengan gambar.

Kalau sudah muncul tampilan seperti pada gambar di atas langkah selanjutnya adalah upload gambar judul yang telah sobat buat sebelumnya dengan cara centang "Dari Komputer Anda" kemudian klik "Pilih Berkas", cari gambar yang ingin sobat buat jadi judul blog kemudian klik Open, tunggu sampai proses upload selesai;

Kemudian atur-lah penempatan gambar tersebut, dengan cara centang "Selain Judul dan Keterangan" dan jangan lupa juga untuk mencentang Susut-kan agar sesuai;

Setelah itu klik "selesai", dan jangan lupa klik "Simpan Setelan", setelah itu lihat blog sobat untuk melihat perubahan-nya.

Tips :

Untuk Gambar - Sesuaikan-lah ukuran gambar yang sebelumnya tidak sesuai, dengan menggunakan cara yang sama;

Penempatan Gambar - Pilihan yang baik adalah Tempatkan Keterangan Setelah Gambar, karena untuk deskripsi sangat berpengaruh pada search engine google

Deskripsi - Jangan menggunakan kode html <p>dan</p> pada deskripsi, karena dapat mempengaruhi pengeditan judul blog serta desain header.

Berdasarkan tutorial di atas sudah cukup jelas bukan cara mengganti judul blog dengan gambar. jika ada pertanyaan silahkan berikan komentar sobat;

Cara mengganti warna background header

Cara desain header yang ke dua ini juga merupakan cara yang sangatlah mudah dan sudah basi untuk para blogger yang sudah senior di dunia blog, tapi bagaimana dengan yang masih pemula di blogger? nah untuk itu tutorial blog ini saya kasih untuk pengguna blogger pemula.

Untuk mengganti background header ikuti langkah-langkah berikut ini :

Masuk ke akun blogger sobat;

Pilih blog yang akan di desain;

Pilih template;

klik ubahsuaikan, maka akan kita akan masuk pada tempat perancangan template blogger, yang tampilan-nya seperti pada gambar berikut ini :

Setelah sudah terbuka tampilan seperti pada gambar di atas, pilih tingkat lanjut, maka akan muncul tampilan seperti seperti pada gambar di bawah ini :

Kalau sudah tampil seperti pada gambar di atas langkah selanjutnya klik pada menu Latar, maka akan muncul tampilan seperti pada gambar di bawah ini :

Setelah itu ganti-lah latar header sesuai selera sobat, mudah bukan; demikianlah cara mudah mengganti background header;

Info :

Untuk mengenal lebih dalam tentang perancangan template blogger sobat dapat mengunjungi blog saya yang satu ini "Cipta blogger".

Berdasarkan tutorial di atas, ada kesulitan atau tidak, jika masih kurang jelas atau ada yang kurang berikan komentar sobat, dan kita akan selesaikan bersama-sama permasalahan yang terjadi.

cara membuat judul dan deskripsi blog yang ada di header blog berada di tengah.

Setelah sobat melihat judul dan deskripsi blog saya pasti sobat akan bertanya bagaimana sih cara membuat judul dan deskripsi blog berada di tengah? Nah ini dia caranya.

Untuk membuat judul dan deskripsi blog berada di tengah, ikutilah langkah-langkah berikut ini, dengan baik dan cermat jangan sampai salah :

Masuk ke akun blog milik sobat;

Pilih blog yang ingin di desain;

Pilih template;

Klik edit/html >> Lanjutkan >> centang Expand Template Widget, kalau sudah terbuka kode html-nya;

Untuk membuat judul blog berada di tengah cari Kode di bawah ini dengan menekan Ctrl + F:

.header h1

Maka akan untuk tampilan kode lengkapnya akan seperti di bawah ini :

.header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

Sisipkan kode text-align:center; tepat di atas kode font: $ (header.font); Sehingga tampilan lengkapnya akan seperti di bawah ini :

.header h1 {

text-align:center;

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

Sedangkan untuk membuat tulisan deskripsi berada di tengah caranya cari kode .Header .description maka sobat akan menemukan kode seperti di bawah ini :

.Header .description {

font-size: $(description.text.size);

color: $(description.text.color);

}

Sisipkanlah text-align:center; Tepat di atas kode font-size:$(description.text.size); Sehingga hasilnya akan terlihat seperti di bawah ini :

.Header .description {

text-align:center;

font-size: $(description.text.size);

color: $(description.text.color);

}

Langkah terakhir, klik simpan template, tunggu sampai proses selesai >> tutup edit/html >> kemudian lihat blog sobat untuk melihat perubahan-nya;

Selesai.

Demikianlah tutorial blog tentang desain template blog khususnya desain header blog. mudah bukan? nantikan tutorial selanjutnya, jadilah sobat pimitemplate untuk mendapatkan tutorial desain template blog yang padat, mudah dan jelas.

Muda-mudahan tutorial ini dapat di mengerti dan dapat di praktek-kan dengan baik, tapi jika masih ada yang belum jelas, berikanlah komentar sobat. dan kita selesaikan bersama-sama masalah tersebut.

About Us

2012-04-27T20:35:00.000-07:00

Berawal dari rasa ingin tahu, dan rasa ingin berbagi seputar template blogger sehingga jadilah blog ini, ada begitu banyak pengguna blogger yang haus akan template blogger, yang ingin mempercantik blog-nya tapi terhalang dengan tidak adanya pengetahuan tentang template blogger, sama dengan saya sebagai penulis blog ini, saya merasa penasaran, bagaimana sih cara membuat template blog blogger? sehingga saya berjalan di dunia maya untuk mencari cara membuat template blog itu. pemikiran inilah yang membuat saya tertarik untuk membuat blog ini.

Jadilah teman di "PiMiTemplate", dan dapatkan Template Blog Yang Ringan, Template Blog Yang Menarik, dan Template SEO Blogger secara Gratis tanpa bayaran sedikitpun "Free".

Dan jangan kaget kalau setiap hari, setiap minggu atau setiap bulan template blog ini sering berubah-ubah tampilan-nya, karena blog ini sebenarnya adalah blog yang saya gunakan sebagai blog pembuat template blog, sehingga apa yang saya buat akan saya bagikan kepada sobat-sobat yang menemukan blog ini.

Saya rasa Tentang Blog ini sudah cukup jelas bukan? Jadi jangan ragu untuk join di blog ini, dengan cara klik Join This Site kemudian >> centang follow privately / ikut secara pribadi kemudian >> klik follow this blog / Ikut blog ini. sehingga jika sobat-sobat memiliki blog atau email, postingan terbaru dari blog ini akan masuk ke daftar bacaan blog sobat-sobat sekalian, tentunya postingan tentang Cara Membuat Template Blog, Cara Mendesain Blog, dan masih banyak lagi yang berkaitan dengan Template Blog Blogger dan itu di dapatkan secara Gratis tanpa pungutan biaya sedikitpun.

Demikian pengenalan "PiMiTemplate" jangan lupa untuk follow ya...!!! ^_^