Cara Membuat Tampilan Blog Dalam Maintenance - Dengan adanya tampilan blog dalam perbaikan atau maintenance adalah pengunjung tidak akan melihat blog kita dalam keadaan berantakan karena dalam perbaikan. Sifat dari tampilan ini adalah sementara kodenya adalah sebagai berikuthtml {Silahkan sobat ganti tulisan berwarna merah dengan URL dari gambar sesuai dengan keinginan sobat.
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ch9H1B2lcYSxQhBJk_damVacM-3d-HSx0bpJe7uFkKHkxxmm68XtRz6vkBFCvZFv5Vqde57a20ieentVx0GFcu_8iWIPpsFuSEYBWGs3R2GmfgH_Y80mMDTKoTJModAYbEsvtKjyfDs/s320/Untitled-1.gif) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}
Source: savalia2001.blogspot.com
Source: www.berryhs.com
 |
.bawahpost {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
.bawahkiri {float:left;width:305px;margin-right:5px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}.bawahkanan {float:right;width:305px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}
Source: ngocop16.blogspot.com
Source: christiantatelu.blogspot.com
Source: www.bang-jefri.com
Source: cawigokille.blogspot.com
Source: blog.kangismet.net
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>Jika sudah ketemu silakan ganti semua kode tersebut dengan kode berikut
ATAU, jika kode di atas tidak ada silakan cari kode seperti ini<b:if cond='data:blog.pageType == "item"'><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<DIV class='blog-pager' id='blog-pager'>Jika sudah dapat silakan ganti semua kode tersebut dengan kode ini
<b:if cond='data:newerPageUrl'><SPAN id='blog-pager-newer-link'><A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A></SPAN></b:if>
<b:if cond='data:olderPageUrl'><SPAN id='blog-pager-older-link'><A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A></SPAN></b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'><A class='home-link' expr:href='data:blog.homepageUrl' expr:id='data:widget.instanceId + "_blog-pager-home-link"' expr:title='data:homePageTitle'>Home</A><b:else/><b:if cond='data:newerPageUrl'><A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A></b:if></b:if></DIV>
Langkah terakhir yaitu simpan pengaturan template kamu<b:if cond='data:blog.pageType == "item"'><b:else/><DIV class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<SPAN id='blog-pager-newer-link'>
<A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A>
</SPAN>
</b:if>
<b:if cond='data:olderPageUrl'>
<SPAN id='blog-pager-older-link'>
<A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A>
</SPAN>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<A class='home-link' expr:href='data:blog.homepageUrl' expr:id='data:widget.instanceId + "_blog-pager-home-link"' expr:title='data:homePageTitle'>Home</A>
<b:else/>
<b:if cond='data:newerPageUrl'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
</b:if>
</b:if>
</DIV>
</b:if>
Source: blog.ahmadrifai.net
Posting Multi Kolom Seperti Koran dan Majalah -moz-column-count: 3;Kode css tersebut diatas merupakan badan dari css yang membentuk perintah membuat 3 kolom dengan jarak 10 px per kolom, untuk menampilkan post artikel multi kolom dalam suatu postingan, kalian perlu menambahkan kode css tersebut dalam postingan (dalam mode Edit HTML) menjadi seperti ini :
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
<style type="text/css">
#posting3kolom {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;}
</style>
<div id="posting3kolom">ISI POSTINGAN</div>
Source: situseo.blogspot.com
| Kode HTML | Keterangan |
| <table>...</table> | Perintah untuk membuat tabel |
| <tr>...</tr> | Perintah untuk membuat baris |
| <td>...</td> | Perintah untuk membuat kolom |
| border, width, align, bgcolor | Kode tambahan untuk pengaturan tebal garis border, lebar tabel, perataan teks dan warna background |
<table border="1">Maka hasil tampilannya menjadi seperti ini :
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
<td>Konten 3</td>
</tr>
</table>
| Konten 1 | Konten 2 | Konten 3 |
<table border="1" width="450">Maka hasil tampilannya menjadi seperti ini :
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
</table>
| Konten 1 | Konten 2 | Konten 3 |
<table border="1" width="450">Maka hasil tampilannya menjadi seperti ini :
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
<tr>
<td align="left">Tuliskan teks disini</td>
<td align="left">Masukkan script gambar dengan format seperti ini <img border='0' src=' http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
<td align="center"> Maka hasilnya akan seperti ini
<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
</tr>
</table>
| Konten 1 | Konten 2 | Konten 3 |
| Tuliskan teks disini | Masukkan script gambar dengan format seperti ini <img border='0' src=' http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/> | Maka hasilnya akan seperti ini |
Source: www.rayhanzhampiet.com
#comment-form iframe{8. Simpan
background:#ffffff url(http://i1002.photobucket.com/albums/af149/Imtikhan/background.jpg) ;
border:7px solid #9999FF;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#comment-form iframe:hover{
background:#000000 url(http://i1002.photobucket.com/albums/af149/Imtikhan/background_hover.gif);
border:7px solid #999FFF;
}
#comment-form a{
color:#7EB2AC;
}
Source: asyariel.blogspot.com
Source: fauzi-madiun.blogspot.com
 |  |  |  |  |
|
|
|
|
Source: usella.blogspot.com
<a expr:href='data:post.link'><data:post.title/></a>Silahkan hapus dan ganti dengan kode ini
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>Lanjut dengan mencari kode dibawah ini
<a expr:href='data:post.url'><data:post.title/></a>Hapus dan ganti dengan kode ini
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>Simpan Template. (Contoh : Letakkan kursor mouse sobat di halaman judul di atas. Tunggu beberapa detik maka akan muncul keterangan sesuai judulnya)
Source: sejutatrik.blogspot.com
.Buat yang belum tutorial ini seperti apa ? Silahkan lihat gambar berikut !
Source: testingblog-alprablog.blogspot.com
<b:if cond='data:post.title'>Atau seperti ini
<h2 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2></b:if>
<b:if cond='data:post.title'>Atau juga seperti ini
<h1 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1></b:if>
<b:if cond='data:post.title'>Jika sahabat sudah menemukan kode seperti di atas. Silakan ganti semua kodenya dengan kode ini (jika menggunakan h2)
<h3 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></b:if>
<b:if cond='data:post.title'>Atau kode ini jika template anda menggunakan h1
<h2 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h2></b:if>
<b:if cond='data:post.title'>Atau kode ini jika template anda menggunakan h3
<h1 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h1></b:if>
<b:if cond='data:post.title'>Terakhir klik simpan pengaturan template.
<h3 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h3></b:if>
<b:if cond='data:blog.pageType != "static_page"'> <a expr:href='"https://www.blogger.com/comment.g?blogID=56554123993530*****&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onClick='javascript:window.open (this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450,"); return false;' style='padding:0px 5px; border:1px solid #ddd;'>;Reply Comment</a>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/></span> <b:if cond='data:blog.pageType != "static_page"'> <a expr:href='"https://www.blogger.com/comment.g?blogID=56554123993530*****&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onClick='javascript:window.open (this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450,"); return false;' style='padding:0px 5px; border:1px solid #ddd;'>Reply Comment</a></b:if>
Tulisan Reply Comment yang berwarna hijau tersebut dapat anda ganti dengan gambar dengan menggunakan kode ini <img src='http://alamat-gambar-kamu.jpg'/>Bagaimana tutorial yang Bowi Berbagi berikan, pastinya mudah dipahamikan dan jika anda ada yang kurang mengerti silahkan anda berkomentar di bawah postingan Membuat Tombol Reply Comment di Blogspot. Selalu kunjungi Bowi Berbagi jika ingin mendapat Tips dan Trick yang lainnya dan janga lupa untuk membaca postingan Bowi Berbagi yaitu Forum Bertanya Terbaik Menggunakan Bahasa Inggris.
Source: bowi-berbagi.blogspot.com
Source: begiloguide.blogspot.com
<iframe align="left" frameborder="1" src="URL" width="585" height="400" scrolling="auto"></iframe>Semoga berguna !
Source: activekita.blogspot.com
<a expr:href='data:comment.authorUrl' rel='nofollow'>7. Ganti kode diatas dengan kode dibawah ini :
<a expr:href='data:comment.authorUrl'>8. Lalu Simpan dan selesai.
Source: www.carabuatwebgratis.com
