Pengaturan Angella Blogger Theme

 



baca detail tentang tema - lihat demo blog


Instalasi Tema

  1. Setelah membeli template, buka zip dan ekstrak file di dalamnya
  2. Buka dashboard Blogger dan pilih menu "Theme"
  3. Klik tanda panah kebawah pada tulisan "Customize" berwarna orange
  4. Klik "Restore" dan temukan file xml-nya.
  5. Klik "Upload"

Responsive

  1. Pilih menu "Theme" di Blogger
  2. Klik tanda panah kebawah pada tulisan "Customize" berwarna orange
  3. Klik "Mobile Settings"
  4. Pilih opsi "Desktop"
  5. Save!

Custom Warna dan Judul

Kamu dapat dengan mudah menyesuaikan warna di template
  1. Pilih menu "Theme" di Blogger dan klik tulisan "Customize" berwarna orange
  2. Klik "Advanced" di menu sebelah kiri
  3. Pilih warna yang diinginkan dan simpan dengan mengklik icon save di pojok kanan bawah

Kamu juga bisa mengubah judul (teks yang ditampilkan di atas setiap widget)
  1. Pilih menu "Layout" dan temukan widgetnya. Klik "Edit"
  2. Ubah teks di "Title"
  3. Save!

Pengaturan Blogger

Setelah menginstal tema, ada pengaturan minimum untuk membuat semua widget berfungsi dengan baik di template ini
  1. Di dasbor Blogger, klik pengaturan
  2. Di site feed > allow blog feed, pilih full
  3. Save!

Top Menu - Pages

  1. Pilih menu "Layout" dan temukan gadget "Menubar". Klik "Edit".
  2. Temukan kode berikut
    <ul class='topmenu1' id='masthead'>
    <li><a href='https://angella-demo.blogspot.com/'>Home</a></li>
    <li><a href='#'>Template</a><ul>
    <li class='dir'><a href='https://angella-demo.blogspot.com/p/about.html'>About</a></li>
    <li class='dir'><a href='https://angella-demo.blogspot.com/p/pengaturan-angella-blogger-theme.html'>Settings</a></li>
    <li class='dir'><a href='https://angella-demo.blogspot.com/p/contact.html'>Contact</a></li>
    </ul>
    </li>
    <li><a href='https://angella-demo.blogspot.com/p/typography.html'>Typography</a></li>
    <li><a href='#'>Categories</a>
    <ul>
    <li class='dir'><a href='https://angella-demo.blogspot.com/search/label/technology?max-results=6'>Technology</a></li>
    <li class='dir'><a href='https://angella-demo.blogspot.com/search/label/Beauty?max-results=6'>Beauty</a></li>
    <li class='dir'><a href='https://angella-demo.blogspot.com/search/label/Lifestyle?max-results=6'>Lifestyle</a>
    <ul>
    <li><a href='https://angella-demo.blogspot.com/search/label/thoughts?max-results=6'>Thoughts</a></li>
    <li><a href='https://angella-demo.blogspot.com/search/label/Travel?max-results=6'>Travel</a></li>
    </ul>
    </li></ul></li>
    <li><a href='https://yanikmatilah.blogspot.com/p/blog-website-design.html'>Buy Template</a></li>
    </ul>
  3. Ganti tulisan berwarna merah dengan link url mu, dan warna biru dengan tulisan menu yang kamu inginkan

Social Media


Kamu bisa lihat ke arah header kanan atas, ada icon social media Untuk menempatkan URL social media kamu di icon tersebut, kamu bisa mengikuti langkah-langkah berikut:
  1. Di dashbord Blogger, klik "Layout"
  2. Masuk di bagian Social Icons, klik "Edit"
  3. Akan ditemui kode ini:
    <ul class='social text-center'>
    <li class='updown-wrap'><a class='updown-inner collections-icon-twitter ' href='#' target='_blank'><i class='fa fa-twitter'/></i></a></li>
    <li class='updown-wrap'><a class='updown-inner collections-icon-facebook ' href='#' target='_blank'><i class='fa fa-facebook'/></i></a></li>
    <li class='updown-wrap'><a class='updown-inner collections-icon-pinterest ' href='#' target='_blank'><i class='fa fa-pinterest'/></i></a></li>
    <li class='updown-wrap'><a class='updown-inner collections-icon-instagram ' href='#' target='_blank'><i class='fa fa-instagram'/></i></a></li>
    <li class='updown-wrap'><a class='updown-inner collections-icon-youtube ' href='#' target='_blank'><i class='fa fa-youtube-play'/></i></a></li>
    </ul>
  4. Ganti "#" yang berwarna merah dengan url link social mediamu

Untuk mengeset ikon media sosial yang ada di bagian "Sidebar", ikuti tutorial yang sama

Upload Logo

  1. Buka "Layout" dan temukan bagian "Header"
  2. Ada tulisan "Website Logo (White)" dan "Mobile Logo (Black)" dan klik "Edit"
  3. Di jendela konfigurasi, masukkan Judul Blog dan Deskripsi Blog
  4. Jika kamu ingin mengupload logo gambar, pastikan kamu mencentang "Instead of title and description", lalu klik "Choose file" dan cari file logomu
  5. Klik tombol Save!

Banner

Widget banner menampilkan halaman apa yang ingin terlihat pertama kali untuk diklik. Umumnya bisa berupa halaman "About".
  1. Buka "Layout" dan temukan gadget "Sub-Header" dan klik "Edit"
  2. Kamu akan menemukan kode berikut:
    <div class="subheader">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PI6G4foCS0sgV7DrQ6OH45RwHzR7paiK4NfQD8x7SOit-xhV_hyKvePo9c_hAH7BOvzTnOr05gz7RbJUfrmhzYm1hJU98Oa-TeW7rJcdUvVoz3Sm5AQ1NHqod9JVat_CyOibpYWR4DZY/s1600/beach-1540807_1920.jpg"/>
    <div class="titleheader1">
    Welcome to My World</div>
    <div class="titleheader2">
    Blog by Angella</div>
    <div class="button">
    <a class="button" href="#">Follow My Journey</a> </div>
    </div>
  3. Ganti tulisan berwarna merah dengan link gambar yang ingin ditampilkan
  4. Ganti tulisan berwarna biru dengan tulisan yang ingin ditampilkan
  5. Ganti tulisan berwarna hijau dengan link yang ingin dituju ketika tombol di klik
  6. Save!

Category Boxes

Di sini kamu bisa memperlihatkan tiga kategori utama kamu
  1. Pilih menu "Layout" dan temukan gadget "Top-Categories" yaitu "Lifestyle", "Travel", dan "Beauty" kemudian klik "Edit"
  2. Temukan kode berikut
    <a href="https://angella-demo.blogspot.com/search/label/Lifestyle?max-results=6">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYm2H7-4aZHkMmlbApf_iOBAmaBOe75iLCcSVbMtXnJlgGHQo3veaf7pEUx27n5sUmzh5-A7ocqHscVkfdQzB_A3vKAlRzfckiztN7Dkc9FDKOqy1HhmmTquAk-ACgs6-Uhud2N9v6pupq/s1600/laptop_23-2148155464.jpg"/>
    <h2>Lifestyle</h2>
    </a>
  3. Ubah tulisan merah dengan link yang ingin dituju ketika diklik
  4. Ubah tulisan warna biru dengan link url gambar yang akan digunakan
  5. Ubah tulisan warna hijau dengan tulisan yang ingin ditampilkan
  6. Simpan dan ikuti tutorial yang sama untuk dua kotak lainnya

Subscribe Box

Di sini pembacamu dapat berlangganan blogmu dan mereka akan menerima pemberitahuan email setiap kali kamu menerbitkan posting baru.

Kamu bisa menemukan petunjuk visualnya disini.
  1. Buka "Layout" dan cari gadget "Subscribe to My Newsletter" di bagian "Newsletter-Top" dan klik "Edit"
  2. Kemudian klik "save" di widget

Untuk mengatur kotak langganan di sidebar, ikuti tutorial yang sama.


Blog Posts

Kamu dapat mengubah jumlah postingan per halaman serta style tanggal posting.
  1. Buka "Layout" dan cari gadget "Blog Posts" di bagian "Main" dan klik "Edit"
  2. Jika kamu ingin menampilkan lebih banyak atau lebih sedikit postingan di homepage, kamu dapat mengubah jumlahnya di "Number of posts on main page"
  3. Save!

Sidebar - Profile

Di sini kamu bisa memperkenalkan diri dan blogmu kepada pembaca.
  1. Buka "Layout" dan temukan gadget "About Me" di bagian "Sidebar" dan klik "Edit"
  2. Kamu akan menemukan kode berikut:
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3VgYVJSHR8ZO6DFqgpa5Ao3Iu2rAfca-dVerkMolziuSxOdpTLJdLinU4pYdHwa6bvqSQ5tKT-MXXo5nxelsYuXi12oGkftahwknBbjohMxP0m5rUbv5Cx1r4-0zqFvzTxS1jGxC0Aq1/s1600/Profile+Picture.jpg"/>
    <div class="author-sign"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtt7MXHnBZ8J9a0ViBTetZj2uVV9tPw8e-5cC27Ij0Tdhh2EvvTVVZaEHxHPDeZp4AIJ2gllTxjSk_78DqNcWchDLGvLdgc3js73dEKEWJKloE_3uXDArLA-eXH4YF_LX15ucTKz36UpD/s1600/Header+1.png" width="150px"/></div>
    <div class="author-text">Hi! I have so many favorite things that I can never fit them in my head. So I started small for this. Let’s talk about lifestyle, travel, and beauty. I believe you will love it.</div>
  3. Ubah teks warna merah dengan link url fotomu
  4. Ubah teks warna biru dengan link url gambar signaturemu
  5. Ubah teks warna hijau dengan tulisan yang ingin kamu tampilkan di profile
  6. Save!

Sidebar - Popular Posts

Di sini kamu & pembaca akan menemukan postingan yang paling banyak dibaca.
  1. Buka "Layout" dan temukan gadget "Popular Posts" di bagian "Sidebar" dan klik "Edit"
  2. Di "Most viewed", kamu dapat memilih periode waktu postingan populermu
  3. Di "Show" pilih "Image thumbnail"
  4. Dalam "Display up to… post(s)" kamu dapat memilih berapa banyak postingan yang ingin ditampilkan
  5. Save!

Sidebar - Thumbnail Categories

  1. Buka "Layout" dan temukan gadget "HTML/Javascript" di bagian "Sidebar" dan klik "Edit"
  2. Nanti akan ditemukan kode berikut:
    <div class="sidebarboxes">
    <a href="https://angella-demo.blogspot.com/search/label/Lifestyle?max-results=6">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYm2H7-4aZHkMmlbApf_iOBAmaBOe75iLCcSVbMtXnJlgGHQo3veaf7pEUx27n5sUmzh5-A7ocqHscVkfdQzB_A3vKAlRzfckiztN7Dkc9FDKOqy1HhmmTquAk-ACgs6-Uhud2N9v6pupq/s1600/laptop_23-2148155464.jpg"/>
    <div>Lifestyle</div>
    </a>
    </div>
    <div class="sidebarboxes">
    <a href="https://angella-demo.blogspot.com/search/label/Travel?max-results=6">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhm7kCXKCIf6PGOJoaH4pO2C18Km3_kkNP0act5oHQwS672UAkrE0dMtsus95YPuy8JTzKG2DwoXXdWXVnaXTlMGQKb7z32iTXe5skJly_oVpQoGy8iXmCm8lzHUXCqXHWHzvUWuBzVkN/s1600/beach-2879929_1920.jpg"/>
    <div>Travel</div>
    </a>
    </div>
    <div class="sidebarboxes">
    <a href="https://angella-demo.blogspot.com/search/label/Beauty?max-results=6">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7G1HiKPtpOYV03Apt9YZqg0to47JVYQ2yHcODCgL3w_72ZH4yhfwIOVS6vu287WYOch-JtrzBPjS-pCFlorb2TVhaOovjRueDjsnvdpKzR9btOGzfAmWwGCFW7xlj9-j2we1b_KmfOmDb/s1600/make-up-4381286_1920.jpg"/>
    <div>Beauty</div>
    </a>
    </div>
  3. Ganti teks berwarna merah dengan link url yang ingin dituju
  4. Ganti teks berwarna biru dengan link url gambar yang akan ditampilkan
  5. Ganti teks berwarna hijau dengan tulisan yang ingin ditampilkan
  6. Save!

Sidebar - Labels

Di sini kamu bisa menampilkan semua atau beberapa label yang digunakan dalam postingan
  1. Buka "Layout" dan cari gadget "Categories" di bagian "Sidebar" klik "Edit"
  2. Jika kamu ingin menampilkan semua label, di "Show" pilih "All Labels"
  3. Jika kamu ingin menampilkan hanya beberapa label, di "Show" pilih "Selected Labels". Klik "edit". Jendela baru akan muncul - pilih label dari daftar.
  4. Di "Sorting" kamu bisa memilih apakah ingin label diatur menurut abjad atau frekuensi
  5. Dalam "Display" pilih "List"
  6. Centang kotak "Show number of posts per label"
  7. Save!


Instagram

  1. Buka "Layout" dan temukan gadget di bagian "Instagram-Footer" dan klik "Edit"
  2. Isi dari widget ini harus berupa kode dari website pihak ketiga "snapwidget.com"
  3. Silakan daftar di Snap Widget, dan pilih fitur Instagram Grid
  4. Atur tampilan yang diinginkan dan terakhir copy kodenya
  5. Masukkan kodenya ke widget "Instagram-Footer"
  6. Save!

Copyright © Angella Blogger Theme | Origin by Odd. Design by Suryani Palamui from Yanikmatilah.