Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

January 3, 2017

Membuat Template Blogger Amp Dari A Sampai Z

Membuat Template Blogger Amp Dari  A Sampai Z

Membuat Template Blogger Amp Dari A Sampai Z - Hai teman - teman saya nazmudin 😄 pada pembelajaran kali ini kita akan belajar bagai mana cara membuat template atau tema blogger tapi sebelum nya saya akan menjelaskan dulu kepada teman - teman apa sih itu Blogger ? blogger adalah salah satu aplikasi web geratis yang dapat di akses secara online melalui alamat blogger.com yang memiliki fungsi utama yaitu untuk mempublikasikan postingan  tulisan - tulisan  berupa artikel seperti berita, informasi, tutorial, dan bisa juga untuk menyampai kan ide - ide kreatif seiring perkembangan jaman blogger juga dapat menghasilkan uang melalui iklan yang di tampilkan pada blog.

ngomong - ngomong kalau yang pernah denger istilah AMP (Acelerated Mobile Pages) yaitu sebuah proyek google yang berupa sebuah struktur code web yang dapat meminimalisir penggunaan  Html, Css, dan Javascript  dilihat dari nama nya pasti teman - teman sudah bisa menyimpulkan apa itu Acelerated Mobile Pages yang memiliki arti "Halaman Ponsel Yang di Percepat"

Bagi yang belum mempunyai  accounts blogger siapkan terlebih dahulu alamat email untuk mendaftar blogger.com dan silahkan anda daftar terlebih dahulu untuk mengikuti langkah langkah berikutnya

Setelah teman - teman menyimak Apa Itu Blogger dan Apa Itu  AMP (Acelerated Mobile Pages) kita akan lanjut pada poin - poin apa saja yang akan di bahas

  • Mengenal Tag Conditional Pada Blogger
  • Membuat Header Pada Blogger
  • Membuat Menu Vertical Dan Horizontal 
  • Membuat Widget Random Post, Label, Popular Post, Dll
  • Membuat Tampilan Postingan Pada Blogger
  • Membuat Meta Info
  • Membuat Footer Pada Bloger
  • Membuat Halaman Archive
  • Membuat Mesin Pencari
  • Memasang Icon Font Awesome Pada Blogger
  • Template Responsive
  • Memasang Komentar Disqus
List di atas merupakan daftar yang akan di bahas tapi sebelum nya saya akan jelaskan dulu strukrur dan elemen pada template blogger agar teman - teman bisa menjadikan modal untuk membuat tampilan blog amp atau memodifikasi template supaya lebih mudah untuk mempelajari nya.

Struktur dan elemen - elemen Pada Blogger AMP

Struktur dan elemen - elemen Pada Blogger AMP
  • Header
    Headar adalah bagian kepala dari sebuh blog atau website yang tentu memiliki peran yang sangat penting bagi blog atau website yang umumnya berisikan Logo, Nama Blog, atau Judul Blog dan Deskripsi pada blog tersebut.
  • Menu
    Menu tentu saja teman - teman sudah tidak asing lagi apa itu menu karena menu tidak hanya pada website saja bahkan setiap program aplikasi memiliki menu yang memiliki perintah - perintah yang jika di klik akan berpindah halaman utama ke halaman lain atau dari halaman lain ke halaman lain nya.
  • Posting
    Posting adalah sebuah tampilan dimana pada area tersebut menampilkan Judul Postingan, Gambar postingan, Deskripsi Postingan dan Meta Info
  • Sidebar
    sidebar bagian tataletak blog atau website umumnya posisi nya di kanan atau di kiri yang berisikan widget - widget blog atau iklan.
  • Footer
    Jika Header adalah bagian atas dari blog atau website maka Footer sebaliknya artinya footer adalah sebuah tataletak blog atau website yang berposisi di bagian bawah yang berisikan Widget, Info Hak Cipta, DLL.
  • Body
    Body bisa dibilang adalah bagian tubuk dari blog atau website yang berisikan Semua struktur pada website.

Pengertian Serta Penjelasan HTML CSS dan Javascript

Pengertian Serta Penjelasan HTML CSS dan Javascript
Untuk membuat Template Blogger Amp harus mengerti HTML CSS dan Javascript karena akan lebih mudah untuk mempelajari nya.

HTML
Html adalah singkatan dari (Hyper Text MarkUp Language) yaitu adalah struktur dasar dari sebuah website atau blog untuk membut krangka nya untuk membuat teks, gambar ataupun video untuk menghias nya agar blog amp teman - teman lebih cantik atau mengatur Struktur nya kita gunakan CSS Lalu ada Javascript Untuk menjadikan blog amp anda lebih interaktif seperti membuat galery foto atau ntuk pengunjung melakukan action acton tertentu pada blog amp anda

Teman - Teman Tidak Usah Khawatir Bagi Yang Masih Baru Belajar Mengenai CSS, HTML Dan Javascript Karena Saya Akan Menjelaskan Code Setiap Rancangan Dari Template Nya Nanti

Mengenal Tag Kondisional Pada Blogger

Ini yang harus diperhatikan saat membuat template blog amp karena pada pada template amp tidak boleh ada dua costum style dalam satu halaman tag kodisional berfungsi untuk mengatur kondisi dari kode yang di bungkus oleh tag kondisional apakan elemen - elemen dari kode tersebut di tampikan atau tidak.

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.pageType == "static_page"'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.url == data:post.url'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.pageType == "item"'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.pageType == "index"'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.searchLabel'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.searchQuery'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.pageType == "archive"'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.pageType == "error_page"'>
[...CODE...]
</b:if> 
 <b:if cond='data:blog.url == "URL"'>
[...CODE...]
</b:if> 
 <b:if cond='data:post.numComments == [number_DISINI]'>
[...CODE...]
</b:if> 


Operator Tag Conditional


Teman - Teman bisa lihat code di atas ada tanda == berarti untuh Tag Conditional tersebut di nyatakan BENAR untuk pernyataan yang dinyatakan sebaliknya teman bisa mengubah nya dengan !=
dan inilah beberapa List oprator Tag Conditional
  • == Operator yang menyatakan BENAR
  • != Operator yang menyatakan SALAH
  • < Kurang dari
  • > Lebih besar dari
  • <= Kurang dari atau sama dengan
  • >= Lebih besar dari atau sama dengan
The [number_Disini] (Tag Conditional Untuk Halaman Tampilkan konten hanya pada posting yang memiliki nomor komentar tertentu) harus diganti dengan bilangan bulat non-negatif (0, 1, 2, ..., 200, dll).

Akan banyak sekali yang bisa teman - teman pelajari, semoga jelas saya saya stop dulu untuk postingan Membuat Template Blogger Amp  akan lanjut pada postingan berikut nya jika ada yang mau ditanyakan teman - teman bisa berkomentar di bawah daaah 👋 sampai ketemu lagi di postingan berikut nya

December 27, 2016

Memasang Widget Instagram Di Blogger AMP

Memasang Widget Instagram Di Blogger AMP

Memasang Widget Instagram Di Blogger AMP - Instagram merupakan social media termasuk pada urutan terpopuler pada saat ini dengan pengguna aktif 300 juta lebih dan indonesia pun termasuk negara ke 3 pengguna terbanyak jika anda termasuk pengguna instagram dengan memasang widget instagram pada blog anda dan  instagram pada widget blog anda itu bisa menjadikan cara untuk mempromosikan instagram anda dan menjadikan instagram anda banyak Followes (Pengikut) dan menampilkan foto

Dengan memanfaatkan amp-instagram kita bisa menampilkan instagram pada blogger amp anda sebenar nya anda bisa memasangnya bukan hanya flatfrom blogger saja tapi anda bisa memasang pada flatfrom lain seperti wordpress dan flatfrom yang mendukung AMP(Accelerated Mobile Pages Project) lain nya

yoooo anda penasara bagaimana cara nya kita langsung saja anda ikuti langkah - langkah  di bawah

Memasang Widget Instagram Di Blog AMP

  • Langkah Pertama
Pastikan anda sudah memasang code di bawah ini tepat di atas </head>
<script async='async' custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

  • Langkah Kedua
  • Pastikan Akun Blog Anda Sudah Login
  • Pada Menu Dasboard Klik Layout
  • Klik Add a Gadget
  • Pilih Hatml/Javascript
  • Masukan Html Di Bawah ini

<amp-instagram data-shortcode="BF1BH20NEw0"
      width="600"
      height="450"
      layout="responsive">
  </amp-instagram>
Code yang bertanda biru di atas ganti dengan code foto instagram anda

https://www.instagram.com/p/BF1BH20NEw0

Untuk Mamasang Widget Ini Tentunya Anda Harus Menggunakan Template AMP (Accelerated Mobile Pages Project)

Anda bisa memasangnya bukan hanya pada widget saja anda bisa memasang nya di Header di dalam postingan di bawah postingan DLL

Angka yang bertanda biru di atas ganti dengan angka tinggi dan lebar sesuai selera anda DEMO

yooo mudah bukan itulah Cara Memasang Widget Instagram Di Blogger AMP jika ada yang mau di tanyakan anda bisa berkomentar di bawah

December 10, 2016

Cara Optimasi SEO Dengan Tag Heading

Cara Optimasi SEO Dengan Tag Heading H1 H2 H3 H4 H5 H6

Banyak sekali cara untuk Optimasi seo salah satu syarat untuk optimasi seo onepage adalah memasang Tag heading  pada blog anda dengan Cara Optimasi SEO Dengan Tag Heading kita bisa memanfaatkan fungsi Tag heading akan memberikan dampak yang berpengaruh besar pada seo blog atau website anda dengan Tag Heading akan membuat blog atau website anda semakin bersahabat dengan mesin pencari google maka dari itu cara optimasi seo dengan tag heading menjadi cara untuk memperbanyak visitor atau pengunjung pada blog kita.

Kerap Kali trik dari cara optimasi seo dari tahun ketahun sering beruban namun Cara Optimasi SEO Dengan Tag Heading ini adalah trik yang sampai saat ini tidak berubah maka dari itu dengan mempelajari cara optimasi seo ini akan menjadi bahan untuk menjadikan website atau blog kita semakin berkembang dan maju dan memiliki konten yang berkualiatas lebih jelasnya tag heading digunakan untuh judul yang menjadi katakunci pada setiap paragrap yang anda tulis dengan cara tersebut mesin pencari akan lebih mudah untuk menemukan artikel anda.

Tag heading kerap kali digunakan oleh para penulis website atau blog yaitu H2, H3 dan H4 kenapa hanya itu yang sering di gunakan ? semua tag heading ada 6 (Enam) tingkatan susunan Yaitu H1 H2 H3 H4 H5 dan H6 namun ketahuilah semua tag heading tersebut tidak sembarangan digunakan ada aturan yang musti anda pelajari dengan jelas salah satu aturan tersebut harus penempatan tag heading harus sesuai dengan kata kunci yang anda targetkan.

Aturan Penggunaan Tag Heading

  • Aturan Penggunaan Tag Heading H1 Hanya boleh digunakan 1 (Satu) saja pada satu halaman wesite atau blog anda dan hanya bisa digunakan 1 (Satu) saja pada postingan
  • Aturan Penggunaan Tag Heading H2 Hanya boleh digunakan Maximal 4 (Empat) saja artinya anda juga bisa menggunakan Tag Heading H2 di Bawah 4 (Empat) saja
  • Aturan Penggunaan Tag Heading H3 Hanya boleh digunakan Maximal 8 (Delapan saja artinya anda juga bisa menggunakan Tag Heading H2 di Bawah  8(Delapan) saja. 
  • Aturan Penggunaan TagHeading H4 16 Hanya boleh digunakan Maximal 4 (empat) saja artinya anda juga bisa menggunakan Tag Heading H2 di Bawah 4 (Delapan) saja.
Aturan di atas merupakan aturan agar blog kita menjadi Seo OnePage dan juga Seo Friendly diluar aturan diatas artinya tidak Seo OnePage dan juga Seo Friendly
Contoh penulisan code HTML nya adalah


<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Tag Heading Pada Home Page Blog Atau Website

Berikut adalah Tag Heading yang umum dan sering di gunakan pada halaman blog atau website Tag heading pada Home Page atau Halaman Pertama pada blog berguna agar blog kita dapat terindex oleh mesin pencari dan juga akan menjadikan blog kita menjadi Optimasi SEO OnePage.
  • <H1> Judul Blog </ H1>
  • <H2> Judul Postingan </ H2> 
  • <H3> Judul widget sidebar </ H3>
Cara Optimasi SEO Dengan Tag Heading H1 H2 H3 H4 H5 H6

Tag Heading Pada Postingan Blog

Optimasi SEO Dengan Tag Heading tentunya juga berlaku pada postingan blog akan tetapi cara penggunaan tag heading pada postingan dengan tag heading pada halam blog berbeda juka blog anda menggunakan blogger atau wordpress pada text editor sudah tersedia untuk menggunakan tag heading pada postingan dengan begitu anda bisa lebih mudah untuk menggunakan Tag Heading pada postingan anda
  • <H1> Judul Halaman Blog </H1>
  • <H2> Judul Postingan </H2>
  • <H2> Judul Poin-Poin Penting Artikel</H2>
  • <H3> Judul SUB Poin Penting Artikel </H3>
  • <H4> Judul widget sidebar </ H4>
Setiap Poin - Poin penting pada setiap artikel anda bisa bungkus dengan Tag Heading ini yang di sesuaikan dengan katakunci artikel anda dengan memasang tag heading  ini  akan sangat menguntungkan karena selain tulisan terlihat rapi artikel anda juga menjadikan blog anda Seo Friendly dan Optimasi Seo dengan Tag Heading. dan dengan memasang tag heading pada postingan anda mensin pencari akan mengindex kata kunci pada setiap tag heading yang anda pasang pada postingan anda.

Bagai mana dengan Cara Optimasi SEO Dengan Tag Heading ini semoga sangat membantu anda dalam mempelajari seo dan optimasi pada blog anda dan bisa menjadikan blog anda mudah dicari oleh mesin pencari google maupun mensin pencari lain nya juga menjadikan blog anda Optimasi Seo Page One artinya blog anda ada pada halaman pertama pada mesin pencari

Jika masih ada yang bingung atau masih ada pertanyaan mengenai artikel ini anda bisa berkomentar dibawah atau contact pada blog ini

October 8, 2016

Cara Backup Dan Restore Template Pada Blogger

ICara Backup Dan Restore Template Pada Blogger

Membuat backup atau cadangan dari template blogger memang sangat penting untuk menghindari hal-hal tak terduga terjadi, contoh nya anda tidak sengaja mengacaukan tata letak pada blogger anda. Jika anda memiliki tata letak cadangan yang disimpan di Hard Drive atau di Komputer anda. Jika anda ingin membuat cadangan template anda setiap kali anda ingin. Lebih baik lagi anda selalu membackup dan menjaga dari template anda yang tersimpan di Hard Drive atau Komputer Anda.

Pengertian Backup


Jika anda belum tau apa itu backup sekarang asaya akan jelaskan apa itu backup.
backup adalah proses menduplikat atau mencopy data sehingga data tersebut dapat digunakan kembali apabila terjadi kerusakan.

Tujuan Backup


 Tujuan membackup adalah untuk mengembalikan data apabila data tersebut hilang, baik karena terhapus atau karena rusak.

Jika sekarang bahwa anda memahami bertapa pentingnya membackup atau cadangan pada Template blogger anda mari kita mulai melakukan Cara Membackup Dan Restore Template Pada Blogger.

Cara Membackup Template Pada Blogger


Langkah 1: Buka Blogger Dan msukkan akun blogger anda

Langkah 2: Dari Blogger Dashboard  klik  Template  -> Backup / Restore 

Cara Backup Dan Restore Template Pada Blogger
Langkah 3: Klik Download full template cari tempat penyimpanan dan Save

Cara Backup Dan Restore Template Pada Blogger

Cara Restore Template Pada Blogger


Langkah 1: Buka Blogger Dan msukkan akun blogger anda

Langkah 2: Dari Blogger Dashboard  klik  Template  -> Backup / Restore 

Cara Backup Dan Restore Template Pada Blogger
Langkah 3: Klik Choose File cari file yang akan di restore Open

Cara Backup Dan Restore Template Pada Blogger
Sekian Cara Backup Dan Restore Template Pada Blogger semoga bermanfaat mohon maap jika ada kesalahan kata atau pun yang lain nya.
silahkan jika ada pertanyaan anda bisa contact klik pada menu di atas atau komentar di bawah ini semoga bermanfaat

October 6, 2016

Post Blog Open Tab Otomatis Pada Blogger

Post Blog Open Tab Otomatis Pada Blogger

Jika anda mengunjungi suatu situs atau blogger anda mengklik salah satu link pada situs tersebut kemudian tab terbuka dengan sendirinya. dan jika anda ingin memasang pada blog anda maka The Encoding akan membahas bagaimana Cara Post Blog Open Tab Otomatis Pada Blogger.

Kenapa Kita Harus Memasang Ini ?


   Ketika pengunjung mengngunjungi halaman blogger kita setelah membaca konten kemudian melompat ke artikel lain. Akibatnya pembaca mungkin kehilangan beberapa konten yang menarik dan Blogger akan kehilangan beberapa tambahan tampilan halaman. contoh nya kita membaca sebuah tutorial dan kita mengklik salah satu link pada maka kita akan kehilangan halaman pertama .

Jika anda memasang secript ini anda tidak usah khawatir untung masalah tersebut. karena dengan memasang script pembuka tab secara otomatis tab akan terbuka dan pembaca bisa membaca halaman sebelumnya. jelas ini sangat membatu para pengunjung blog anda dan blog anda menjadi lebih nyaman untuk para visitor atau pengunjung blog anda.


Untuk URL atau LINK apapun kita gunakan  Tag Line ini kita menggunakan Tag Line ini untuk mengaktifkan fungsi Open Tab Secara Otomatis.
target = '_ blank'

Tag line ini kita sering menggunakan untuk membuka URL atau LINK tunggal pada tab baru atau jendela baru. Jadi saya akan menggunakan kode ini untuk semua URL atau LNK Blog postingan anda .

Ikuti Langkah Langkah Dibawah ini


Langkah 1: Buka Blogger Dan msukkan akun blogger anda

Langkah 2: Dari Blogger Dashboard  klik  Template  -> Edit HTML

Post Blog Open Tab Otomatis Pada Blogger
Langkah 3: Cari Dengan menekan CTRL+F cari code </head>

Langkah 4: cara code <base target='_blank' /> Klik Save Template

untuk melakukan secara manual contoh nya pada link download atau link yang terdapat pada postingan anda hanya perlu menambahkan kode target='_blank' pada url atau link blog anda
Contoh <a href="link anda" target="_blank">contoh tulisan</a>

jika anda mengklik link ini maka akan open tab otomatis contoh tulisan

Sekarang buka blog anda klik salah satu link pada halaman blogger anda dan semua URL atau LINK jika di klik maka akan secara otomatis open tab

sekian tutorial Cara Membuat Postingan Blogger Open Tab otomatis semoga bermanfaat mohon maaf jika ada kesalahan dalam penulisan maupun yang lain nya.

Jika ada pertanya silahkan klik menu contact pada menu di atas atau komentar di bawah