free template

Template Blog Dinamis Full SEO

Download Template Blog Dinamis Full SEO. Dinamis adalah template blog yang saya dapatkan dari googling. Template ini sangat cocok buat kamu para pemula, karena template Dinamis ini sudah saya edit full SEO dan saya bagikan secara gratis, temlate ini bisa untuk untuk kamu yang suka dengan PCC. banyak kelebihan dalam temlplate ini, Desainnya sederhana, jadi terlihatseperti blog yang resmi. berikut fasilitas yangbisa kamu dapatkan dalam penggunaan Template Dinamis ini:

Full SEO
3 Column Blogger Templates.
Simple Style Design.
Ads Ready Support Google Adsense.
Footer Coloumns in Bottom.
Exclusive design for Blogger Template.
Social Bookmarking Icons in Article Post.
Related Posts
Threaded Comments Admin Ready.
Menu Navigation in Article.
Readmore otomatis Blogger Template.
Subscribe Box Simple with Twitter, Facebook, Gmail etc.

Temlate Dinamis ini juga sudah suport H1 H2 H3 sesuai dengan panduan dari google.

Readmore → Template Blog Dinamis Full SEO

Cara Memasang Formulir Kontak Halaman Blog

Cara Memasang Formulir Kontak di Halaman Blog dan tentunya sudah tidak berada didalam kolom widget

Jika pada penjelasan sebelumnya, kolom widget formulir Kontak atau Contact Form berada didalam widget sehingga akan membuat tampilan Contact Form tersebut selalu berada didalam halaman depan atau di halaman artikel. Padahal untuk Contact Form atau Formulir Kontak berada pada halaman khusus yang hanya menampilkan halaman kontak tersebut. Sebagai contoh bisa anda lihat milik saya di halaman Kontak

Bagaimana, anda sudah melihat halaman Kontak milik saya? Tampilannya berbeda dengan yang dihasilkan widget Formulir Kontak itu sendiri kan?? Untuk membuat Formulir Kontak seperti milik saya tersebut, ada beberapa ketentuan yang perlu anda perhatikan yaitu;

Letak widget yang ditempatkan
Jika saat memasang widget Contact Form anda meletakkannya di bagian kolom widget sidebar maka tampilan yang dihasilkan akan menyesuaikan dengan lebar kolom widget sidebar tersebut. Sehinga, jika anda menggunakan kolom sidebar ini dan memasangkannya atau menampilkannya di halaman blog maka hasilnya akan memiliki lebar sesuai dengan lebar sidebar
Berbeda jika anda memasangkan widget Contact Form atau Formulir Kontak tersebut di bagian atas atau bawah kolom widget postingan maka tampilan yang dihasilkan akan menyesuaikan dengan lebar kolom widget atas atau bawah postingan tersebut. Sehingga, saat menampilkan Formulir Kontak di halaman blog maka lebarnya akan menyesuaikan dengan lebar halaman
Menyembunyikan widget Formulir Kontak
Dengan menyembunyikan Formulir Kontak ini maka ia tidak akan tampil di kolom widget yang ada di halaman blog atau halaman artikel
Kode CSS dan HTML
Untuk mengedit tampilan sebuah widget, yang pertama harus diketahui adalah kode-kode dari widget tersebut yaitu kode CSS dan HTML. Begitu juga untuk merubah tampilan Formulir Kontak yang ada di Blogspot, hatus mengetahui kode CSS dan HTML Contact Form atau Formulir Kontak tersebut

Baiklah, untuk memasang formulir kontak di halaman blog, terlebih dahulu anda harus memasang widget Formulir Kontak tersebut seperti yang telah saya jelaskan sebelumnya. Dan berikut langkah-langkahnya;

Pasang widget Formulir Kontak di halaman Tata Letak,
Menyembunyikan widget Formulir Kontak. Setelah memasang widgetnya, sembunyikan widget tersebut dengan menambahkan kode berikut ini sebelum ]]></b:skin>
```
.widget.ContactForm {
 display: none;
 }
```

Membuat halaman Kontak. Silakan anda buat halaman baru di menu Laman dengan judul Kontak atau Contact.
Saat membuat Laman baru untuk Formulir Kontak, masukkan kode berikut ini kedalamnya;


<style type="text/css">
 .widget.ContactForm {display: block; }
 .post-footer {display: none;}
 #blog-pager {display: none;}
 .blog-feeds {display: none;}
 .widget.ContactForm .title {display: none;}
 .widget.ContactForm * {max-width: 100%;}
 </style>

Perhatikan :
Jika anda memasang widget Formulir Kontak di sidebar sebelumnya, maka hasil yang ditampilkan pada halaman Kontak akan memiliki lebar sesuai lebar kolom widget sidebar
Jika anda memasang widget Formulir Kontak di satu kolom widget atas/bawah Postingan sebelumnya, maka hasil yang ditampilkan pada halaman Kontak akan memiliki lebar sesuai lebar postingan

Tampilan yang dihasilkan pada halaman Kontak masih terlihat sederhana, lalu bagaimana cara merubah tampilan formulir Kontak ini? Silahkan baca panduannya di Mengganti Tampilan Formulir Kontak dg CSS
Itulah cara memasang Formulir Kontak di halaman blog. Jika mengalami kesulitan dalam melakukan pemasang, silahkan tinggalkan komentar anda untuk artikel ini, Cara Memasang Formulir Kontak di Halaman Blog

Readmore → Cara Memasang Formulir Kontak Halaman Blog

Mengganti Tampilan Formulir Kontak dg CSS

Mengganti Tampilan Formulir Kontak dg CSS - Sudah ada 2 artikel yang saya bahas tentang widget baru Blogspot ini yaitu Contact Form atau Formulir Kontak. Jika pada 2 artikel sebelumnya saya telah membahas tentan pemberitahuan widget Formulir Kontak di Widget Formulir Kontak dan pembahasan memasang Contact Form di halaman blog. Maka pada artikel kali ini saya akan menjelaskan bagaimana Mengganti Tampilan Formulir Kontak dg CSS

Untuk mengganti tampilan formulir Kontak dg CSS, sebelumnya anda harus sudah memasang widget Contact Form ini jika tidak akan bisa menerapkan artikel yang saya bahas ini.

Sebelum melanjut pembahasan ini perlu saya beritahukan bahwa dengan mengganti tampilan Contact Form tidak akan mempengaruhi proses pengiriman email yang dilakukan alias dengan melakukan perubahan ini, Contact Form atau Formulir Kontak tetap bekerja alias WORK! Namun saya tidak menjamin dengan perubahan yang anda lakukan pada formulir kontak blog anda karena (saya yakin) artikel yang saya buat ini merupakan artikel pertama yang membahas perubahan pada tampilan Formulir Kontak dan perubahan-perubahan yang saya lakukan ini awalnya hanyalah coba-coba saja, berhubung perubahan yang saya lakukan berhasil dan bekerja di template blog saya, maka saya membaginya untuk anda

Berikut cara mengganti tampilan formulir Kontak dg CSS. Salin kode berikut ini sebelum ]]></b:skin> atau jika di template blog anda menggunkan kode konversi, salin sebelum </style>


#ContactForm1 {width:550px;background:#2C678A;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;}
#ContactForm1 .contact-form-widget{margin:0;padding:10px;background:#2C678A;color:#fff;border: 2px solid #2C678A;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;}
#ContactForm1 form {margin:0;}
#ContactForm1 .contact-form {}
#ContactForm1 span {color:#FF0000;}
#ContactForm1 .contact-form-name, #ContactForm1 .contact-form-email, #ContactForm1 .contact-form-email-message {width:100%;border: 1px solid #2C678A;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#ContactForm1 .textform {color:#fff;font-size:11px;font-style:italic;margin-bottom:10px;}
#ContactForm1 .contact-form-button {width:100px;border: 1px solid #2C678A;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.widget.ContactForm {display: none;}

selanjutnya, cari dan ganti kode diantara kode berikut ini

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'> ... </b:widget>

Sehingga hasilnya seperti berikut


          <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='100' type='text' value='' placeholder='nama anda'/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='100' type='text' value='' placeholder='email anda'/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='150' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5' placeholder='tulis pesan anda disini...'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p class='textform'>Email spam (eg: penawaran produk, dll), email akan ditampilkan sebagai email spammer! Terimakasih</p>
        <div style='text-align: center; max-width: 100px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
        <p/>
      </form>
    </div>
  </div>
</b:includable>
          </b:widget>

Selesai. Dan lihat hasil perubahan dari tampilan contact form di blog anda. Sebagai catatan, setelah pemasangan mungkin ada tampilan yang kurang seperti kolom teks untuk nama dan email biasanya terlalu sempit, untuk mengatasinya silahkan tinggalkan komentar terlebih dahulu karena setiap permasalahan, ada yang beda dan tidak. Terimakasih, semoga setelah membaca ada manfaat dari artikel ini, Mengganti Tampilan Formulir Kontak dg CSS

Readmore → Mengganti Tampilan Formulir Kontak dg CSS

Membuat Tab View PopUp New Window Halaman Blog

Membuat Tab View PopUp New Window Halaman Blog - Agak lama saya melakukan update blog ini, lebih dari 1 minggu. Tapi tak apalah karena pada artikel kali ini saya akan memberikan sedikit sentuhan pada tampilan blog yaitu dengan menampilkan Tab View PopUp New Window Halaman Blog. Judul saya buat sesuai fungsinya sedangkan untuk nama aslinya saya tidak tahu, tapi yang pasti tab view ini akan menampilkan jendela baru atau New Window sebuah halaman blog atau secara umumnya hampir sama dengan tampilan PopUp sebuah halaman blog

Contoh tampilan tab view popup adalah yang ada didalam halaman Tata Letak Blogger, jika anda mengklik Tambahkan Widget maka ia akan memunculkan jendela baru yang berisi kumpulan beberapa widget Blogger. Nah, pada artikel ini saya akan memberikan caranya untuk anda semua. Sebelumnya, artikel ini merupakan artikel lanjutan dari beberapa artikel tentang Tab View yang telah saya bahas sebelumnya yaitu Tab View Slider Sidebar dan Tab View Postingan

Untuk membuat Tab View PopUp New Window halaman blog, cukup memasang kode script berikut ini kedalam artikel blog

DEMO

Masukkan kode script berikut kedalam area artikel postingan


<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, resizable=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script> <a href="javascript:void(0);" onclick="PopupCenter('http://panduantemplateblog.blogspot.com/', 'myPop1',400,400);"><b>Klik Untuk Membuka</b></a>

Keterangan :
http://panduantemplateblog.blogspot.com/ ganti dengan link yang anda inginkan
Klik Untuk Membuka ganti dengan kalimat yang anda inginkan

Semoga artikel tentang membuat Tab View PopUp New Window halaman blog ini memberikan manfaat dan mudah dimengerti. Jika masih ada yang bingung, silahkan tinggalkan komentar anda untuk artikel ini, membuat Tab View PopUp New Window halaman blog

Readmore → Membuat Tab View PopUp New Window Halaman Blog

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3

Berikut contoh text 3D (teks 3 Dimensi) menggunakan CSS3
contoh dengan gambar

contoh demo dengan teks
Panduan Template Blog

Dari contoh dan demo diatas, apa yang anda bayangkan? Menarik? Tentu saja dan untuk membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 sangatlah mudah, berikut caranya;

Buka akun Blogger anda
Buka menu Template >> Edit Html

Pasang kode CSS berikut sebelum ]]></b:skin>


text3D {font-size: 75px;font-family:verdana;color:#fff;
-webkit-transition: all .7s ease-out; 
-moz-transition: all .7s ease-out; 
-o-transition: all .7s ease-out; 
transition: all .7s ease-out;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);}