1. Bagaimana Kita Membuat Judul Posting Bergambar Pada sebuah Blog
Jika anda jenuh dengan tampilan judul posting standar atau mungkin menginginkan tampilan yang inovatif dari judul posting blog anda, tidak ada salahnya mencoba tips yang satu ini. Terima kasih pada Annie, (penyaji bloggeruniversity) yang telah memberikan inspirasi ini posting ini pada saya.
Sebelum anda mencoba tips berikut, lakukan dulu 'backup' template anda agar jika terjadi kesalahan atau jika hasilnya kurang memuaskan bagi anda, kita bisa dengan mudah mengembalikan template pada kondisi semula.
Silakan simak penjelasan berikut ini, anda harus menempatkan bagian .post h3 pada CSS Style Sheet anda. Jika anda belum mengetahui tentang CSS style sheet, temukan kode ini pada editor HTML template anda.
# Classic Blogger : Diantara tag <style> dan </style>.
# Beta Blogger : Diantara <b:skin><![CDATA[/* dan ]]></b:skin>
Lalu, copy-kan kode berikut ini pada editor HTML template anda diantara CSS style sheet tersebut.
.post h3 {
background:url(GAMBAR POSTING ANDA) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}
Itu adalah kode yang harus anda tambahkan pada bagian .post h3
Hasil yang akan tampil pada tiap blog akan berbeda - beda, saya sarankan anda tetap membuat ukuran kecil dengan dimensi 20 - 30px persegi. Untuk itu, silakan anda atur sendiri ukuran yang ingin anda gunakan.
Jika anda ingin menampilkan alternatif tampilan untuk 'border' posting, silakan masukkan pilihan di bawah ini untuk menggantikan dashed.
1. dotted
2. solid
3. double
4. groove
5. ridge
6. inset
7. outset
2. Percantik Blog Dengan menyembunyikan Navgar
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Atau bisa juga menaruh kode berikut persis di bawah kode <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :
Untuk template klasik
Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
Copy kode berikut lalu paste di atas kode </style>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Klik tombol Simpan Perubahan Template
Selesai.
Untuk template baru
Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
Copy kode berikut lalu paste di atas kode ]]></b:skin>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Klik tombol Simpan Template
3. CARA UNTUK MENGATUR JARAK DAN PASCA HEADER
A. Setiap orang harus memiliki cara berpikir dan pandangan yang berbeda mengenai Tatak lokasi untuk mendapatkan keindahan. Hal ini juga berlaku dalam blog terutama mengenai sejarah UKURAN HEADER DAN BLOG POSTIN
Mulailah dengan mengikuti langkah-langkah, yaitu:
1. Masuk Blognya
2. Klick desain
3. Klik Edit Html
4. Download template lengkap untuk mengantisipasi kesalahan
5. Cari kode <nama Variabel = "date.space" description = "Tanggal Space" type = "panjang" default. Kode ini terletak di bagian atas template blog.
Kode template akan terlihat seperti di bawah ini.
<Variable Name="main.padding.top" description="Main Padding Top" type="length" default="200px" value="200px"/>
Description:
Silakan ganti nomor kuning yang sesuai dengan jarak yang diinginkan.
6. Simpan
7. Klik Pratinjau untuk melihat perubahan sementara di lokasi blog Anda.
Good luck dan semoga bermanfaat.
B. CARA MEMBERSIHKAN LAYAR PENUH UNTUK FORMULIR transparan
Sembunyikan Navbar Blogger, apa yang navbar?. Navbar adalah bagian yang terlihat di bagian atas blog Anda. Yang sebagian termasuk menulis posting baru, kustomisasi, dan keluar. Ada beberapa blogger yang ingin menghapus navbar ini, ini tentu saja melanggar peraturan yang telah diterapkan. Untuk menyadari bahwa Anda inginkan, kita bisa menutupinya dengan auto hide navbar navbar. Caranya adalah sebagai berikut
1.klik kustomisasi dan kemudian mengedit html
2.Cari kode body {
3.Masukkan kode di bawah kode di atas sebelum tubuh kode {
# Navbar-iframe {opacity: 0.0; filter: alpha (Opacity = 0)}
# Navbar-iframe: hover {opacity: 1.0; filter: alpha (Opacity = 100, FinishedOpacity = 100)}
Formatnya adalah seperti ini
# Navbar-iframe {opacity: 0.0; filter: alpha (Opacity = 0)}
# Navbar-iframe: hover {opacity: 1.0; filter: alpha (Opacity = 100, FinishedOpacity = 100)}
body {
4.klik menyimpan dan melihat blog Anda
titik mouse di bagian atas blog Anda, ia akan menampilkan navbar yang telah disembunyikan. Jika Anda mengarahkan mouse ke tempat lain, maka navbar akan kembali hilang atau tersembunyi.
Semoga berhasil ... salam blogger pemula Tips
C. bagaimana Sembunyikan Navbar di Blogger
Berikut kode untuk menyembunyikan salinan kode berikut silahkan navgar / bawah dengan cara yang sangat praktis menempatkan kode dibawah ini pada Tubuh dan kemudian menyimpan dan melihat hasil dari blog kita terlihat cantik. ok semonga ini berguna.
menambahkan kode:
# Navbar-iframe {
tinggi: 0px;
visibility: hidden;
display: none;
}
. kosong
{
jelas: keduanya;
}
sebelum tubuh template HTML untuk mengedit kami
D. Sembunyikan judul blog dan deskripsi
bekerja jika kita ingin mengubah judul blog kita dengan tulisan kita sendiri bahkan dengan gambar. Jika judul blog template masih ada kemudian judul blog bawaanya akan menumpuk dengan judul dari blog kita buat sendiri. Sekarang kita membahas bagaimana untuk menyembunyikan judul blog dan deskripsi
Menghilangkan Judul / Judul Blog
Login ke blogger
Masuk untuk desain dan pilih edit HTML
Cari kode yang mirip dalam kode di bawah:
# Header h1 {
margin: 50;
padding: 5px 0 0 10px;
font-size: 100%;
font-weight: bold;
line-height: 1.2em;
surat-spacing: .0 em;
font-style: italic;
color: # FFFFFF;}
Berikutnya tambahkan menampilkan kode: none;} sebelum kode, misalnya:
# Header h1 {
margin: 50;
padding: 5px 0 0 10px;
font-size: 100%;
font-weight: bold;
line-height: 1.2em;
surat-spacing: .0 em;
font-style: italic;
color: # FFFFFF;
display: none;}
Menghilangkan deskripsi blog
Login ke blogger
Masuk untuk desain dan pilih edit HTML
Cari kode yang mirip dalam kode di bawah:
# Header. {deskripsi
margin: 5px 5px 0;
padding: 0 20px 15px;
max-width: 700px;
text-transform: uppercase;
surat-spacing: .2 em;
line-height: 1.4em;
Font: normal normal, 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
color: # 999999;
}
Berikutnya tambahkan menampilkan kode: none;} sebelum kode, misalnya:
# Header. {deskripsi
margin: 5px 5px 0;
padding: 0 20px 15px;
max-width: 700px;
text-transform: uppercase;
surat-spacing: .2 em;
line-height: 1.4em;
Font: normal normal, 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
color: # 999999;
display: none;
}
Klik Simpan dan PREVEIEW, SEMOGA SUKSES ....
E. Berikut adalah kode link untuk menginstal ikon address bar:
Silahkan salin kode di bawah ini:
<link href='http:////xxxxxxxxxxxxx/isi dengan rel='icon' anda' Link photobucket type='image/gif'/>
Masukkan kode yang disimpan di bawah Judul atau posisi di atas tombol Bskin f3 / crtl F untuk melacak
F. CARA UNTUK MENGATUR DAN BESAR kapitalisasi BLOGGER / POST
Setiap orang harus memiliki cara berpikir dan pandangan yang berbeda mengenai Tatak lokasi untuk mendapatkan keindahan. Hal ini juga berlaku di blog terutama mengenai BLOG POSTIN PADA UKURAN BLOK
Mulailah dengan mengikuti langkah-langkah, yaitu:
1. Masuk Blog
2. Klick desain
3. Klik Edit Html
4. Download template lengkap untuk mengantisipasi kesalahan
5. Cari kode <nama Variabel = "date.space" description = "Tanggal Space" type = "panjang" default. Kode ini terletak di bagian atas template blog.
Kode template akan terlihat seperti di bawah ini.
<Variable Name="date.space" description="Date Space" type="length" default="30px" value="65px"/>
Description:
Silakan ganti nomor kuning yang sesuai dengan jarak yang diinginkan.
6. Simpan
7. Klik Pratinjau untuk melihat perubahan sementara di lokasi blog Anda.
Good luck dan semoga bermanfaat
G. Jika Anda membuat sebuah blog blogspot, akan muncul dengan batas default (perbatasan) antara pos. Contohnya bisa dilihat pada gambar di bawah: Sekarang beberapa blogger kadang tidak seperti tampilan baris. Dengan alasan kesan sekat dan rumit pada postingan. Karena pembatas antara posting telah didirikan dengan judul dan jarak antara tulisan. Tentu saja Anda mungkin setuju atau tidak setuju dengan alasan ini. Tapi yang jelas, jika Anda juga ingin menghapus baris ini maka Anda dapat melakukan langkah-langkah berikut.
1. Pergi ke halaman Dashboard blog Anda dan klik Rancangan2. Kemudian klik pada Edit HTML.3. Hanya dalam kasus jika terjadi kesalahan Anda harus terlebih dahulu backup template anda dengan mengklik Download Template Lengkap.
. Kemudian cari kode:. Posting
5. Dalam rangka untuk lebih mudah menemukan tekan (Ctrl + F) pada keyboard dan tekan Enter. Kemudian kotak Cari akan muncul. Ketik kode yang akan dicari pada kotak dan tekan Enter, maka secara otomatis akan mencari kode dalam keadaan dipilih oleh warna hijau.
Hilangkan Batas antar-Posting Baris
6. Sekarang mengubah angka pada perbatasan-bottom: 1px ke 0, sehingga menulis menjadi seperti ini: border-bottom: 0px. Jika klik pada TEMPLATE SAVE dan menunggu proses.
H. CARA UNTUK READ MORE DI BLOGSPOT OTOMATIS
1. Baca langkah lagi untuk membuat otomatis di blogspot
a. account login ke blog Anda
b. klik desain
c. lanjutkan dengan memilih Edit HTML
d. Centang kotak kecil di kanan atas (Expand Widget)
e. Cari baris kode </ head>
lalu copy kode di bawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</ Script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
f.Temukan baris kode <data: post.body />
g. Ganti kode dengan kode seperti di bawah ini:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</ Div>
<script type='text/javascript'>
createSummaryAndThumb ("<data:post.id/> ringkasan");
</ Script>
<span style='padding-top:5px;;float:right;text-align:right;'> <a expr:href='data:post.url' rel='bookmark'> <img align = 'benar' border = '0 '
</ B: if>
h. Klik tombol simpan template. selesai, semoga keberuntungan yang baik
Readmore otomatis Kelemahan: Pada Halaman tidak mendukung mendukung postingan hanya pada menu saja.
Mudah untuk menemukan TRIK
<p> <data:post.body/> </ p>
atau
<data:post.body/>
UNTUK MEMBUAT BLOG POST UNTUK READ MORE
KLIK F3/CRTL f: ketik DATA AKAN BUKA kata NAMUN SEBELUMNYA centang WIDGET PERTAMA.
Terletak ADA DIBAWAH KODE BERIKUT:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/> DESCRIPTION: TANDA-TANDA DI HAPUS MERAH DAN GANTI KODE DI ATAS FAKTA
<div style='clear: both;'/> <! - Yang jelas untuk mengapung foto ->
</ Div>
3. Alamat suport untuk ping sebuah Blog agar cepat teridek
1. Ping In
Ping.IN adalah layanan ping blog yang ping atau memberitahu Weblog Layanan seperti Blog Search Engine dan direktori blog bahwa blog Anda telah diperbarui.
2. Ping My Blog
PingMyBlog.com is a service which does the hard work for you.
3. Pingler
Gunakan Pingler.com untuk Ping Blog dan Website Anda dengan cara terbaik!
4. Ping O Matic
Ping-O-Matic adalah sebuah layanan untuk memperbarui mesin pencari yang berbeda bahwa blog Anda telah diperbarui.
5. My Pagerank
Submit Gratis memungkinkan Anda mengirimkan URL ke mesin pencari populer dari satu Mypagerank.net
6. Total Ping
Promosikan blog Anda dengan TotalPing!
7. Feed Shark
Ping blog anda, feed, atau podcast gratis!
8. Autopinger
Secara otomatis Ping Blog dan Podcast untuk Bebas.
9. Pingates
Pingates adalah layanan yang ping atau memberitahu sejumlah layanan yang melacak weblog dan mempublikasikannya....
10. Peed Ping
Feed RSS Website Ping Ping Layanan Blog Webmaster Tools.
4. Cara membuat Elemen Persis Di bawah Header
Seperti Saya tulis pada Toturial " Menyimpan widget persis di bawah header ", bahwa tidak hanya cara tersebut saja yang bisa anda lakukan namun masih ada trik yang lain untuk dapat meyimpan widget atau elemen persis di bawah header."Cara membuat Elemen Persis Di bawah Header"trik yang saya maksud adalah dengan membuat kolom baru langsung di bawah header, penasaran bagaimana caranya? yuk di lanjut mang!!!
Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Belum tahu caranya? silahkan ikuti langkah berikut :
1.Login ke blogger dengan ID anda.
2.Klik Tata Letak.
3.Klik tab Elemen Halaman. Perhatikan struktur layout template anda. Biasanya bagian header akan seperti ini
4.Sekarang kita akan membuatkan sebuah kolom baru persis di bawah header. Siap? yuk mulai.
5.Klik tab Edit HTML.
6.Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).
7.Copy kode berikut, lalu paste di atas kode ]]></b:skin>
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
8.Cari kode yang mirip dengan kode di bawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
9.Copy kode berikut lalu paste persis di bawah kode tadi :
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
10.Klik tombol SIMPAN TEMPLATE. Tunggu beberapa saat sampai template anda tersimpan.
11.Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
Yihaa! sekarang anda sudah mempunyai elemen yang langsung persis di bawah header, silahkan
tambahkan elemen yang inginkan. Mau pasang iklan google adsense, klik saya.com atau apa saja atau mungkin mau pasang photo anda yang ganteng serta cantik di sana? silahkan wong blog anda.
