Si Edit v2 Fast Responsive Blogger Template

- Februari 12, 2017


Salah satu template hasil modifikasi saya dari template mas Sugeng yang diberi nama Blogku Blogger Template, dan saya buat dengan kemampuan saya sendiri, saya modifikasi hingga sejauh ini dengan penambahan beberapa fitur keren dan yang paling penting template ini sudah saya optimasi hingga memiliki loading yang lebih baik. Dan pada versi 1 dahulu Tata Letak tampilannya berantakan, pada update kali ini sudah saya perbaiki.

Saya juga mengganti beberapa kode pada template ini, template ini akan sangat cocok digunakan untuk blog personal namun bisa juga kok untuk blog niche yang lainnya, tergantung tujuan dari blog itu untuk apa. Template ini sudah saya sesuaikan agar bisa tampil mirip dengan tampilan yang digunakan Sugeng.id (makasih mas Sugeng sudah menginspirasi)

Blogger Template Style
Name : Si Edit v2 Responsive Blogger Template
Version : 2.0
Publish Date : 12 Februari 2017
Intructions : Cara Memasang Template Blogger
Designer : Mas Sugeng Modified by Iwan Efendi
URL : http://iwanberbagi.com - http://sugeng.id
Published : http://situstemplate.com

Fitur Template
- Responsive Design
- Valid Structured Data
- Personal Style Template
- Page Numbered
- Fast Loading
- Share Button Count
- On Scroll Disqus Comments
- Related Post Simple
- Author Box Keren
- Subscribe Box
- Font Roboto Async
- Responsive Vidio Youtube
- Disqus Comments
- Custom Error Page
- Kotak Note

Template ini dibagikan gratis oleh Mas Sugeng dan saya juga membagikannya secara gratis, jika kamu bisa menghargai karya orang lain kamu seharusnya tidak menghapus credit link. Untuk konfigurasi template sebagai berikut :

1. Mengganti ID Disqus
Ganti ID Disqus template ini dengan cara mencari kode berikut, dan ganti iwanberbagicom dengan ID Disqus milik kamu sendiri :
var disqus_shortname = "iwanberbagicom";
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
2. Mengaktifkan Kotak Note
Template ini sudah ada kotak note yang berfungsi sama dengan blockquot namun dengan tampilan yang lebih menarik, kotak note ini memiliki style css sebagai berikut :
/* Kotak Note */
.note-green{margin:0.6em 0;padding:16px;background-color:#D3F5D3;color:#159415}
.note-yellow{margin:0.6em 0;padding:12px;background-color:#fcf8e3;color:#b58d47}
.note-red{margin:0.6em 0;padding:16px;background-color:#FCAFAF;color:#C92121}
.mark-green{background-color:#A4DDA4}
.mark-blue{background-color:#A1DAFF}
.mark-red{background-color:#FF9999}
.mark-black{background-color:#333333}
.mark-gray{background-color:#EEEEEE}
.mark-yellow{background-color:#E4E437}
Dari css tersebut bisa kamu lihat tag yang harus kamu gunakan pada postingan nantinya.

Sebagai contoh kamu bisa menuliskan kotak note sebagai berikut :
<div class="note-green"> Teks Yang kamu Inginkan Disini </div>
Sesuaikan note-green dengan warna kotak note yang kamu inginkan sesuai dengan css kotak note tersebut. Kamu bisa mengganti warnanya dengan mengganti background-color:#D3F5D3;color:#159415 warna tersebut, begitu seterusnya.

3. Menyesuaikan Kotak Subscriber
Cari kode berikut, dan tugas kamu untuk menyesuaikan uri=Competitiv dengan id feedburner kamu sendiri. Jika kamu bingung mencari id feedburner kamu bisa mencari tutorialnya di google banyak.
<div class='berlangganan-box'>
   <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Competitiv&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
      <h4>Berlangganan Via Email</h4>
      <p>Suka dengan artikel di atas? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email.</p>
      <p><input class='email-address' name='email' placeholder='Your Email Address...' type='text'/></p>
      <input name='uri' type='hidden' value='Competitiv'/>
      <input name='loc' type='hidden' value='en_US'/>
      <p><input class='submit-email' type='submit' value='Subscribe'/></p>
   </form>
</div>
4. Menampilkan Author Box
Untuk author box sudah disetting otomatis menyesuaikan dengan profile Google+ kamu, namun yang perlu kamu lakukan untuk mengaktifkannya dengan cara ke Tata Letak dan perhatikan gambar berikut :
Si Edit v2 Fast Responsive Blogger Template
5. Menyesuaikan Error Page
Karena template ini menggunakan custom error page, maka kamu harus menyesuaikan sedikit pada error page tersebut :
<div class='large-heading1' style='text-align: center;'>OOPS!</div>
<div id='error-404'>404</div> 
<div class='large-heading2' style='text-align: center;'>LAMAN TIDAK DITEMUKAN</div><br/> 
<div class='light-heading1' style='text-align: center;'>Kami mohon maaf atas ketidaknyamanan ini</div><br/>
<div class='light-heading2' style='text-align: center;'>Silahkan kembali ke Halaman Utama <a href='/' title='Homepage'><b>Iwan Berbagi</b></a> dan gunakan <b>Search Box</b> untuk kembali mencari artikel yang Anda inginkan.<br/> atau laporkan jika ada kesalahan melalui <a href='http://www.iwanberbagi.com/p/contact-me.html' title='Contact'><b>Contact</b></a><div class='search-wrapper'>
<form action='/search/' id='searchform' method='get' name='search'>
  <meta content='/search/?q={q}' itemprop='target'/>
<input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='' type='text' value=''/>
<span class='search-button'/>
</form>
  </div>
Ganti http://www.iwanberbagi.com/p/contact-me.html dengan alamat contact pada blog kamu, biar gak nyasar ke blog saya nanti pengunjungnya. hehe

Setidaknya itu saja yang harus kamu sesuaikan, sisanya sama saja dengan template lainnya. Jika ada pertanyaan perihal template ini kamu bisa membahasnya di kolom komentar. Selamat Mencoba.

Advertisement

Berkomentarlah jika memang ada pertanyaan apapun itu, admin akan membalasnya jika tidak ada kesibukan lainnya. Terima kasih
EmoticonEmoticon

 

Start typing and press Enter to search