AnimeMagz v1.1.2 Blogger Themes



Codepelajar.com - Halo Sob, setelah kemarin codepelajar membagikan template Megumi Novel, kali ini admin akan share themes gratis dari Yuukithemes. Template ini dirancang khusus untuk tema Magazine/ berita tentang anime & jejepangan (otaku).


Template Blogger AnimeMagz di buat dengan fitur-fitur yang sangat modern mengikuti perkembangan kode blogger yang semakin lama semakin canggih, tujuannya gak lain dan gak bukan ya, untuk mengikuti kode blogger terbaru.


Berikut beberapa fitur template ini, yaitu navigasi menggunakan widget, posting populer dengan tanggal dan label, posting terbaru dengan beberapa kategori, berlangganan widget email dengan widget media sosial, dukungan Mode RTL (Read To Left), dan template ini juga sangat responsif.


2 Cara Pemasangan Template

  • Bisa Langsung Install seperti biasa.
  • Buka file XML di dalam Notepad atau text editor yang biasa kamu guanakan > CTRL+A > CTRL+C > Buka editor template blogger > CTRL+A > CTRL+V > Save Template

Cara Setting Template AnimeMagz v1.1.2

Panduan ini sangat membantu Sobat untuk meningkatkan kinerja template ini./p>

Meta Tag Head

Ganti xxxxx dengan nama (admin/owner) atau nama blog sobat.

<meta content='xxxxx' name='Author'/>

Mengubah Warna Tema

Template Ini dibuatkan dua opsi, pertama sobat bisa mengedit warna melalui tombol Customzie atau langsung mengeditnya di editor html. jika sobat ingin mencarinya di editor html temukan kode berikut

<!-- Variable definitions -->
<Group description="Body">
  <Variable name="body.font" description="Font" type="font"
         default="normal 400 14px/1.7 'Open Sans', Arial,sans-serif" value="normal 400 14px/1.7 &#39;Open Sans&#39;, Arial,sans-serif"/>
  <Variable name="body.background.color" description="Body background color" type="color" default="#d72323" value="#d72323"/>
  <Variable name="body.background.hover" description="Body background hover" type="color" default="#c31f1f" value="#c31f1f"/>
  <Variable name="body.background.second" description="Second Theme Color" type="color" default="#222" value="#222222"/>
</Group>

Sobat hanya perlu mengubah kode warna hex di kolom value = ”XXXXX“.


Mengatur Iklan di Header dan Sidebar

Untuk pengaturan Iklan, sobat dapat mengeditnya langsung melalui tata letak.


  1. Dashboard Blogger> Pilih Blog
  2. Buka Tata Letak
  3. Edit Leader Ad 728×90 (dalam header), atau Ads 336×280 (dalam sidebar)
  4. Tempelkan iklan kode Sobat, lalu klik Simpan

Mengatur Menu Navigasi

Perhatikan, Path ini berarti url yang ada di blog sobat (url-internal) jika sobat ingin menambahkan tautan khusus (url-eksternal), silahkan ganti path menjadi URL .


[{
      name: "Home",
      path: "/"
  }, {
      name: "News",
      path: "/search/label/News" <!-- tautan Internal -->
  }, {
      name: "Download Themes",
      path: "https://codepelajar.com/" <!-- tautan Eksternal -->
  }]

Cara Membuat Dropdown(SubMenu)




Beberapa waktu lalu setelah template ini dirilis di Code Pelajar ada yang bertanya bagaimana cara membuat Sub-Menu (Dropdown) dengan method ini? Berikut penjelasannya


children: [{
        name: "Sub Menu 1",
        path: "#"
    },{
        name: "Sub Menu 2",
        path: "#"
    },{
        name: "Sub Menu 3",
        path: "#"
    }, {
        name: "Sub Menu 4",
        path: "#"
    }]

Caranya cukup mudah dengan menambahkan atribut children di sesudah path, atau name ingat akhiri dengan tanda koma ( , ) jika tidak ingin terjadi Error. Kurang lebih hasil jadinya seperti ini

[{
      name: "Home",
      path: "/"
  }, {
      name: "News",
      path: "/search/label/News"
  }, {
      name: "Japan",
       path: "#",
<!--Sub Menu Di Mulai-->
      children: [{
        name: "Sub Menu 1",
        path: "#"
    },{
        name: "Sub Menu 2",
        path: "#"
    },{
        name: "Sub Menu 3",
        path: "#"
    }, {
        name: "Sub Menu 4",
        path: "#"
    }],
<!--END Sub Menu--&gt;
},{
      name: "Games",
      path: "#",
      children: [{
        name: "Sub Menu 1",
        path: "#"
    }, {
        name: "Sub Menu 2",
        path: "#"
    }],
  }, {
      name: "Animanga",
      path: "/search/label/Animanga"
  }]

Berikut sudah saya beri tanda dimana sub menu di mulai dan di akhiri, oiya 1 lagi yang sangat penting, jangan lupa tambahkan CSS berikut di dalam </b:skin> atau </style>


#nav-wrapper li ul li:last-child {
    display: none;
}

Mengatur Widget Other Pick

Widget ini dibuat agak unik dan prosesnya sangat panjang karena memerlukan beberapa inspirasi dalam pembuatannya. Keuninkan dari widget ini adalah sobat dapat memunculkan lebih dari satu label, custom rasio gambar (bisa mengatur height atau width untuk gambar), dan menambahkan kode berikut di pengaturan widget.


{
  label: "Japan",
  numposts: 8, <!-- Mengatur Jumlah Post yang tampil -->
  width: 267, <!-- Mengatur Lebar Gambar -->
  heigh: 180 <!-- Mengatur Tinggi Gambar -->
}

Mengatur Widget Media Sosial

Di Template ini media sosial hanya menyediakan 4 ikon saja, yaitu Facebook, Twitter, YouTube dan Instagram, jika ingin menambahkan lagi silahkan tambahkan sendiri. Catatan, sobat harus mengganti # di url ke dalam tautan media sosial Anda. atau hapus media sosial tertentu.

{
icon: "fa-facebook",
url: "#"
}, {
icon: "fa-twitter",
url: "#"
}, {
icon: "fa-youtube",
url: "#"
}, {
icon: "fa-instagram",
url: "#"
}

Change Log

– Release Template

v1.1 [18/09/18]
– Delete CSS font-smoothing
– Add Conditional 404 found
– Re-Code Layout
– Add JS Year Copyright
– Navigation
– Add Social Media in Sidebar
– Add Anti Adblock
– Add Effect Hover Shadow in Thumbnail
– Mobile Responsive
– Support RTL
– Replace Js RelatedPost to Popular Post
– Lazyload Image

v1.1.1 [10/10/18]
– Fix Multiple Label (Not Work) to Single Label

v1.1.2 [10/18/18]
– Replace Rawgit to Staticaly

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel