Mengenal Jenis-jenis Template Blogspot

Blogspot atau Blogger adalah layanan Web blog yang dimiliki oleh Google, pada awalnya Blogger dimiliki oleh Pira Labs yang secara resmi diakuisisi oleh Google pada tahun 2003. Blogger secara umum memiliki domain www.blogspot.com yang pada awalnya berdirinya memperbolehkan pemakainya untuk menyimpan FTP atau server blog ke server lain, namun sejak 2010 semua data server blgspot diwajibkan berada di server Google walaupun dengan domain pihak ketiga. 

Blogspot sama seperti Wordpress memperbolehkan penggunanya untuk memiliki domain dan hosting secara gratis, namun untuk Google kebijakan dalam menggunakan blog lebih ketat artinya blog dalam beberapa kasus dapat di hapus tanpa persetjuan dengan pengguna blog, kasus penghapusan blog ini marak sejak 2011 saat Google melakukan banyak perubahan. Blogspot besar dari Indonesia maupun dari luar negeri tidak luput dari penghapusan sepihak oleh Google, berbagai spekulasi muncul terakait dengan penghapusan blog namun secara resmi blogspot tidak memberikan penjelasan lebih detail.

Seperti umumnya sebuah Blog, Blogspot juga dilengkapi dengan Template bawaan maupun template custom atau hasil editan. Untuk Template blogspot bawaan memang tidak selengkap dan sebaik template bawaan Wordpress namun untuk Template custom dari Blogspot lebih mudah dalam hal editing HTML atau CSS bila dibandingkan dengan template bawaan dari Wordpress.

Template bawaan dari Blogspot pada intinya bisa di custom mulai dari bagian page, header, footer, dan lainnya, proses editing ini dapat dengan mudah di lakukan dengan masuk ke menu dasboard blogspot. Sementara untuk Template blogspot custom atau sudah diedit sebelummnya tidak akan bisa diedit secara manual artinya editing template harus dari edit HTML. 

Dari gamabar template blogspot diatas nomor 1 adalah contoh template custom yang sudah tidak bisa lagi diedit tampilannya secara manual dari menu Perancangan template blogger, artinya semua menu sudah terkunci. Sementara untuk gambar nomor 2 adalah menu edit perancangan template blogger dimana Anda dengan leluasa bisa mengedit template mulai dari warna, ukuran, jenis tulisan dan liannya.

Penjelasan dari Template Blogspot di atas semoga bisa menambah pengetahuan Anda para pengguna blogger pemula yang ingin belajar menggunakan template blogspot.

Read more

Cara Memindahkan Contact Form Dari Widget ke Menu Pages diBlogspot

Contact From atau formulir pengiriman pesan di Blogspot seperti diketahui dibuat dengan menggunakan pihak ketiga atau bisa juga dibuat dengan Google Drive, namun saat ini Blogspot yang merupakan situs blog milik Google ini menambahkan widget baru yaitu contact form untuk menjawab kebutuhan para pengguna Blogger. 

Biasanya menu Contact Form dibuat atau dipasang di menu statik atau menu Pages, namun untuk fitur Contact Form yang disediakan oleh Blospot ini hanya dapat dipasang di menu widget artinya tampilan dari widget Concat Form ini sedikit kurang tepat. Untuk Anda pengguna Widget Concat Form yang ingin memindahkan posisi dari Widget ke menu pages atau halaman simak penjelasan lengkapnya dalam tutorial kali ini.

Buka menu Blog pilih Tata letak atau Widget kemudian pilih menu Tambahkan Gadget (Add New Gadget). Cari Widget Formulir Kontak atau Contact Form, untuk lebih jelasnya lihat pada gambar dibawah ini.

Setelah ditambahkan pindah gadet tepat pada posisi dibawah postingan blog caranya drug atau tarik posisi dari sidebar ke tepat dibawah postingan blog.

Masih pada menu Blog cari gadget yang sudah dibuat tadi dengan melihat di menu Template, caranya klik menu Template kemudian pilih edit HTML, tekan pada keyboard menu Ctrl+F setelah muncul menu Search masukkan kode tulisan Contact atau ContactFrom1.

Pada sisi kiri HTML atau yang bertulisakn angka klik tombol yang berwarna hitam sehingga muncul kode HTML Contact From, Hapus beberapa kode HTML dibawah ini.

<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/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <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/>
        <div style='text-align: center; max-width: 222px; 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>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

Sehingga hanya tersisa kode HTML seperti ini

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
                        <b:includable id='main'>
    <b:include name='quickedit'/>
</b:includable>

Tahap pertama selesai, langkah selanjutnya masuk ke menu Laman atau Pages, selanjutnya Tambah laman, beri judul laman sesuai dengan serela Anda, untuk blog ini saya gunakan judul Contact Me. Selanjutnya tambahkan kode dibawah ini pada menu HTML

</div>
<form name="contact-form">
<div>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

lakukan setting sebelum dipublish pada beberapa menu; Komentar pembaca setting pada dengan pilihan Jangan bolehkan, sembunykan yang ada. Sementara untuk mode tulisan atur dengan memilih Tafsirkan HTML yang diketik baris baru.

Jika sudah selesai klik pratinjau, lihat hasilnya jika sudah sesuai klik publish atau terbitkan. Lihat hasilnya. Untuk menu Contact form di blogspot ini memang tidak disertai Capta seperti pada umunya Contact from dari pihak ketiga, namun jangan kawatir karena Google sudah mengantisispasi spam yang masuk dengan di kategorikan pesan masuk dari Contact form masuk ke kategori Sosial.

Selamat mencoba jika ada pertanyaan silahkan tinggalkan komentar. 

Read more