Panduan Installasi Premium Blogger Template Sevida Responsive

Sebelum menuju ke petunjuk installasi dan pemakaian template ini, ada baiknya sobat 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 sampai terbentuk blog yang menarik.

Panduan Installasi Premium Blogger Template Sevida Responsive

Installasi

Masuk ke akun blogger. Menuju ke hidangan 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 hidangan atas, caranya menuju ke HTML pada hidangan Template, kemudian cari instruksi 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 hidangan tengah, cari instruksi 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 instruksi 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 umum milik sahabat.

Pengaturan Waktu

Cari kode
datetime(); 

Lalu rubah dengan pengaturan sesuai kebutuhan pada instruksi berikut.

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

});

Ganti bulan diubahsuaikan bahasanya.

Auto Featured Posts

Menuju ke hidangan layout, kemudian Add a Gadget, pilih HTML/Javascript. Pastekan instruksi berikut ini.

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

</script>

MaxPost yaitu 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 yaitu Image Widget.

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

Akhiri dengan Save.

Jika sobat ingin menciptakan 5 slide, maka ulangi cara tadi sebanyak 5 kali pula.

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

manualfeaturedPost();

Lalu ganti dengan instruksi ini.

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

});

SlideSpeed yaitu kecepatan slide animasi dalam milisecond.

Klik Save template.

Post by Label Slider

Add a gadget, pilih HTML/Javascript, kemudian pastekan instruksi 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, kemudian paste instruksi 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, kemudian pilih HTML/Javascript, paste instruksi 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 instruksi ini.

404 Not Found

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

Membuat Halaman Arsip

Caranya yaitu Creat a new page. Lalu paste instruksi 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 hidangan Template. Cari 2 instruksi 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 instruksi ini.

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

});

Lalu keduanya diganti dengan instruksi berikut.

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

});

Recent Comment

Menuju ke layout, kemudian Add a Gadget dan pilih HTML/Javascript. Paste instruksi berikut.

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

</script>

Klik Save.

Merubah Tema

Mengatur tema desain template sanggup dirubah dengan cara customisasi. Masuk ke hidangan Template, kemudian pilih Customize. Rubah sesuai kebutuhan. Namun ingat, Customize ini hanya akan muncul bila template dalam keadaan enable untuk versi mobile. Jika tidak, maka layanan ini tidak muncul. Kaprikornus 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.

Tweet

Subscribe to receive free email updates: