Panduan Installasi Premium Blogger Template Sevida Responsive

Sebelum menuju ke petunjuk installasi dan pemakaian template ini, ada baiknya sahabat kembali mereview artikel template Sevida Responsive ini. Di sana akan ada link live demonya dan link download template-nya.

Bila sudah siap, mari kita uraikan satu persatu proses installasi dari awal hingga terbentuk blog yang menarik.

Panduan Installasi Premium Blogger Template Sevida Responsive

Installasi

Masuk ke akun blogger. Menuju ke menu template. Klik Backup and Restore. Lalu Upload file template yang telah diunduh.

Lengkapnya, silakan baca Cara Mengganti Template Blog.

Pengenalan Layout

1. Right Header Widget Area(Ads 468x60)
2. Auto Featured Post Area
3. Top Sidebar Area
4. Middle Sidebar Area
a. Popular Post
b. Recent Comment 
c. Archive Widget
5. Bottom Sidebar Area
6. Label Post Widget Area
7. Footer Widget Area
8. Manual Featured Post Area (work with Image Widget)

Pengaturan Menu

Untuk mengedit kedua menu atas, caranya menuju ke HTML pada menu Template, lalu cari kode ini.

<ul class='sf-menu' id='topmenunav'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>More</a>
    <ul>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a></li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu</a></li>

</ul>

Ganti # dengan URL blog.

Untuk menu tengah, cari kode berikut.

<ul class='sf-menu' id='menunav'>
  <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Comments</a></li>
  <li><a href='#'>With Sub Menu</a>
    <ul>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Sub Menu</a>
        <ul>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
        </ul>
      </li>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Menu</a></li>
    </ul>
  </li>
  <li><a href='#'>Error 404</a></li>

</ul>

Ganti # dengan URL blog.

Pengaturan Social Icon

Masih pada area HTML Template, silakan cari kode ini.

<ul class='sociico' id='icon-socialmn'>
  <li class='sotw'><a href='#' target='_blank'>twitter</a></li>
  <li class='sofb'><a href='#' target='_blank'>facebook</a></li>
  <li class='sogo'><a href='#' target='_blank'>google</a></li>
  <li class='sorss'><a href='#' target='_blank'>rss</a></li>
  <li class='solinkn'><a href='#' target='_blank'>linkedin</a></li>
  <li class='sodrib'><a href='#' target='_blank'>dribbble</a></li>
  <li class='sopint'><a href='#' target='_blank'>pinterest</a></li>

</ul>

Ganti # dengan URL media sosial milik sahabat.

Pengaturan Waktu

Cari kode
datetime(); 

Lalu rubah dengan pengaturan sesuai kebutuhan pada kode berikut.

datetime({
months:["January","February","March","April","May","June","July","August","September","October","November","December"]

});

Ganti bulan disesuaikan bahasanya.

Auto Featured Posts

Menuju ke menu layout, lalu Add a Gadget, pilih HTML/Javascript. Pastekan kode berikut ini.

<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});

</script>

MaxPost adalah jumlah postingan yang akan muncul di widget featured tersebut.

Manual Featured Slideshow

Membuat featured posts secara manual yakni dengan cara sama, namun widget yang dipilih adalah Image Widget.

Lalu isi kolom yang tersedia.
1. Judul postingan
2. Diskripsi gambar
3. Link tujuan saat gambar diklik.
4. Upload gambar.
5. Hilangkan centang Shrink to fit.

Akhiri dengan Save.

Jika sahabat ingin membuat 5 slide, maka ulangi cara tadi sebanyak 5 kali pula.

Kemudian untuk merubah kecepatan slideshow, silakan sahabat kembali ke Template di area HTML. Cari kode :

manualfeaturedPost();

Lalu ganti dengan kode ini.

manualfeaturedPost({
slideSpeed:5000,
animation:"slide"

});

SlideSpeed adalah kecepatan slide animasi dalam milisecond.

Klik Save template.

Post by Label Slider

Add a gadget, pilih HTML/Javascript, lalu pastekan kode ini.

<div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
MaxPost:9,
ImageSize:"s180-p",
postType:"s",
tagName:"Sports"
});

</script>

Klik Save. Ganti tagName sesuai label yang ingin ditampilkan.

Post by Label Vertical

Add a Gadget, pilih HTML/Javascript, lalu paste kode berikut.

<div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
MaxPost:6,
FirstImageSize:"s220-p",
ImageSize:"s80-p",
tagName:"Music",
postType: "v",
MoreText: "View All About",
AjaxLoad: true,
MoreNumPost: 6
});

</script>

Klik Save. Ganti tagName sesuai label yang ingin ditampilkan. Maxpost dan MoreNumPost harus sama.

Post by Label Horisontal

Add a Gadget, lalu pilih HTML/Javascript, paste kode berikut.

<div id="webpost"></div>
<script type='text/javascript'>
jQuery("#webpost").RecentPostbyTag({
MaxPost:6,
FirstImageSize:"s220-p",
ImageSize:"s80-p",
tagName:"Web Design",
postType: "h",
MoreText: "View All About",
AjaxLoad: true,
MoreNumPost: 6
});

</script>

Klik Save. Ganti tagName dengan label yang ingin ditampilkan.

Pengaturan Error Page

Menuju ke HTML Template. Cari kode ini.

404 Not Found

Lalu kata-kata yang seperti dalam gambar silakan diganti dengan bahasa kita.

Membuat Halaman Arsip

Caranya adalah Creat a new page. Lalu paste kode berikut ke area HTML.

<div id="table-outer"><table border="0"><tr><td><label>Sort List by:</label></td><td><select id="orderFeedBy"><option value="published" selected>Latest Published</option><option value="updated">Latest Update</option></select></td></tr><tr><td><label>Sort List by Category:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Search with Keyword:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>

<script src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js" type="text/javascript"></script>

Akhiri dengan Publish.

Halaman Navigasi

Menuju ke HTML area menu Template. Cari 2 kode ini.

viewMode({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1'
});
loadMorePost({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1',
  thumbnailSize:"s180-c",
  summaryLength:200,
  MoreText:"Load more posts"

});

dan kode ini.

viewMode();
loadMorePost({
  thumbnailSize:"s180-c",
  summaryLength:200,
  MoreText:"Load more posts"

});

Lalu keduanya diganti dengan kode berikut.

viewMode();
pageNavi({
postperpage:6,
numshowpage:3,
thumbnailSize:"s180-c",
summaryLength:200,

});

Recent Comment

Menuju ke layout, lalu Add a Gadget dan pilih HTML/Javascript. Paste kode berikut.

<div id="rcentcomnets"></div>
<script type='text/javascript'>
RecentComments();

</script>

Klik Save.

Merubah Tema

Mengatur tema desain template dapat dirubah dengan cara customisasi. Masuk ke menu Template, lalu pilih Customize. Rubah sesuai kebutuhan. Namun ingat, Customize ini hanya akan muncul jika template dalam keadaan enable untuk versi mobile. Jika tidak, maka layanan ini tidak muncul. Jadi pastikan kondisi template versi mobile harus enabled.

Demikian, panduan pemakaian template Sevida Responsive Blogger Template. Semoga bermanfaat.

Jika ada yang kurang paham dan masih ada kebingungan, silakan tulis di kolom komentar yang tersedia.