Cara Membuat Form Di Halaman Statis Blog

Cara Membuat Form Di Halaman Blog, pada kesempatan kali ini saya akan membagikan tutorial tentang membuat form kontak di halaman statis blog. Mungkin ini sudah tidak asing lagi bagi teman - teman blogger semua. Saya akan mengulas lagi mengenai itu. Dibawah ini adalah tampilan yang akan kita buat

Ikuti Langkah berikut :
1. Login ke akun blogger
2. Pilih Pages, lalu pilih New Pages. Seperti gambar di bawah :

3. Setelah halaman terbuka, seperti gambar di bawah ini :

4. Pilih mode edit HTML, seperti gambar di atas no 3.

5. Masukkan Judul "Kontak"

6. Copy kode di bawah ini dan salin di area text HTML

<form name="contact-form">
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Email Address <span style="color:#f56954;font-weight:bold;font-size:x-small;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Content <span style="color:#f56954;font-weight:bold;font-size:x-small;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width:222px;text-align:center; width:100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

7. Setelah anda salin lalu tekan tombol Publish, Dan View halaman Kontak anda.
Selesai sudah tutorial kali ini semoga bermanfaat bagi teman - teman semua.

Read More

Cara Membuat Sitemap Di Blog ( Simple Sitemap )

Simple Sitemap, cara membuat sitemap di halaman statis blog sangat mudah. Mengapa sitemap? sitemap merupakan suatu kebutuhan untuk mempermudah pengunjung blog menelusuri setiap halaman  postingan  yang kita publikasikan. Sitemap bisa disebut juga daftar isi, yaitu daftar isi blog kita. Jadi jika diblog kita sediakan sitemap atau daftar isi pengunjung blog dapat mengetahui semua artikel yang sudah kita publikasikan. Baiklah, sekarang kita mulai dengan langkah berikut ini:

1. Login ke akun blogger
2. Pilih Page
3. Pilih New Page
4. Langkah ke empat perhatikan gambar di atas, pertama kita buat judul masukkan sitemap atau daftar isi bahkan boleh yang lainnya, yang penting menjelaskan tentang isi blog.
5. Klik mode edit di HTML
6. Copykan script di bawah ini di area text

<div id="bp_toc">
Loading ke daftar isi blog. mohon menunggu....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script>
<script src="https://phpchanel.blogspot.co.id/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>

7. Ganti url blog, text yang berwarna biru diatas dengan url blog anda.
8. Tekan  tombol Publish

9. View halaman anda, jadinya seperti sitemap dibawah

Loading my sitemap. Please wait....

Semoga bermanfaat bagi rekan - rekan semua. Ikuti setiap artikel saya

Read More

Cara Membuat Tabel Di Postingan Blog

Tutorial membuat tabel di postingan blog, membuat tabel di blog sebenarnya mudah seperti halnya kita membuat tabel di php menggunakan dreamweaver, dan mungkin bagi para blooger sudah sangat mengerti dan memahaminya, namun pada kesempatan kali ini saya akan memberikan tutorial cara membuat tabel di postingan blog bagi yang masih kesulitan untuk membuat nya, contoh dan format tabelnya seperti di bawah ini :

Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5
Division 1	Division 2	Division 3	Division 4	Division 5
Division 1	Division 2	Division 3	Division 4	Division 5
Division 1	Division 2	Division 3	Division 4	Division 5

Untuk pembutan tabelnya ikuti langkah - langka ini :
1. Login ke akun blogger
2. Pilih Post, seperti gambar di bawah :

3. Pilih New Post, seperti no 2 pada gambar di atas.
4. Masukkan Judul Postingan anda.
5. Pilih mode edit HTML, seperti gambar di bawah no yang saya lingkari no 4.

5. Copy dan paste kan script di bawah ini di postingan anda.

<table border="0" cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
            <th>Table Header 4</th>
            <th>Table Header 5</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
            <td>Division 4</td>
            <td>Division 5</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
            <td>Division 4</td>
            <td>Division 5</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
            <td>Division 4</td>
            <td>Division 5</td>
        </tr>
    </tbody>
</table>

6. Silahkan atur border, cellpadding, cellspacing, dan letak tabel sesuai yang anda inginkan.
7. Tekan Posting dan View postingan anda.

Sekian tutorial ini semoga bermanfaat.

Read More