Mas Fadli: Blogger
News Update
Loading...
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Sunday, 28 June 2020

Cara Import Konten di Blogger

Setelah sebelumnya mimin bahas bagaimana cara backup konten yang ada di blogger, di artikel ini mimin bakal bahas bagaimana cara import konten di blogger.


Import konten ini fungsinya untuk memasukkan atau menambahkan konten yang pernah kita backup kedalam blog yang baru.
Jadi dengan import kita tidak perlu membuat artikel baru yang isinya sama dengan yang ada di blog sebelumnya. Berikut ini caranya.

1. Buka halaman awal blogger
2. Masuk ke menu setting / pengaturan > pilih other
3. Dibagian atas pilih import konten kemudian centang bagian captcha > Klik import from your computer.
4. Pilih file backup (file.xml) dari blog sebelumnya > Klik open.
5. Secara otomatis akan terjadi proses import

Saturday, 27 June 2020

Cara Backup Artikel di Blogger

Backup adalah proses pembuatan data cadangan dengan cara membuat arsip dari data yang ada sehingga dapat digunakan lagi nantinya.

Nah di blogger juga terdapat fitur backup, fungsinya yaitu untuk melakukan pecadangan konten atau artikel, jika suatu saat kita ingin berganti blog tapi tidak ingin kehilangan konten/artikel yang sudah pernah dibuat.

Untuk caranya juga cukup mudah yaitu:

1. Masuk ke halaman utama blogger

2. Klik menu Setting / pengaturan > Pilih Other

3. Kemudian di bagian atas pilih back up content

4. Terakhir pilih save to your computer

Friday, 3 April 2020

Cara Mengaktifkan Notifikasi Komentar di Blogger

Notifikasi komentar bisa jadi penting untuk para blogger, karena dengan adanya notifikasi ini kita bisa tau apakah ada komentar yang masuk di blog kita, entah itu kritik, saran ataupun ucapan terimakasih dari para pembaca.

Nah untuk mendapatkan notifikasi ini kita harus mengaturnya secara manual. Berikut ini langkah langkahnya:


1. Buka blogger kalian
2. Lanjut ke menu setting / pengaturan
3. Kemudian ke sub menu Email
4. Selanjutnya di bagian Comment Notification Email isi dengan email blog kalian ya.
5. Simpan perubahan tadi. Kemudian buka email kalian dan pastikan sudah mendapatkan pesan dari blogger.
6. Isi pesannya seperti berikut ini. Dan klik pada pilihan subscribe



Itu tadi langkah langkah untuk mengaktifkan notifikasi komentar di blogger. Semoga bermanfaat.

Thursday, 5 March 2020

Cara Mengatasi Masalah Breadcrumb di Search Console

Breadcrumb merupakan sebuah navigasi yang ada pada suatu website yang tujuannya untuk membantu pengunjung dalam mengetahui lokasi saat mengunjungi website tersebut.

Breadcrumb berfungsi untuk menyempurnakan navigasi pada sebuag website seperti homepag, tag, ataupun yang lainnya.

Beberapa hari kemarin mimin mengalami masalah pada breadcrumb, mimin sendiri tidak menyadari karena tidak mendapatkan email dari google, berbeda dengan teman blogger lainnya yang langsung mendapatkan email dari google yang berisi pemberitahuan masalah breadcrumb ini.

Untuk mengatasinya cukup mudah, hanya perlu merubah bagian breadcrumbs yang ada di template blog.

Masuk ke menu template kemudian pilih edit HTML. Cari kode dibawah ini.


<b:includable id="breadcrumb" var="posts"> ...sampai dengan penutup ... </b:includable>

Jika sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini.


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
 <b:loop values='data:posts' var='post'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
   <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
   <meta content='1' itemprop='position'/>
   <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
   </span>
   <b:if cond='data:post.labels'>
   <b:loop index='nomor' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
     <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
    <meta expr:content='data:nomor+2' itemprop='position'/>
    <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
      <span itemprop='name'><data:label.name/></span>
    </a>
     </span>
   </b:loop>
   <b:else/>
   &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
   </b:if>
  </div>
 </b:loop>
<b:elseif cond='data:view.isPage'/>
 <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
  <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
  <meta content='1' itemprop='position'/>
  <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
  </span> &amp;nbsp;&#8250;&amp;nbsp; 
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
  <meta expr:content='data:num+2' itemprop='position'/>
  <a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'>
    <span itemprop='name'><data:blog.pageName/></span>
  </a>
  </span>
 </div>
</b:if>
</b:includable>

Langkah terakhir kalian bisa masuk ke webmaster, kemudian pilih validasi perbaikan. Jika tidak muncul berarti masalah sudah terselesaikan.

Thursday, 3 October 2019

Cara Membuat Kotak "Artikel Lainnya" di Blogger

Membuat related post atau artikel lainnya dianggap sebagai cara terbaik untuk mempertahankan pengunjung agar tidak segera meninggalkan blog/website kita.


Sebenarnya ada 2 cara untuk membuat kotak artikel terkait, pertama yaitu dengan cara otomatis dan kedua dengan cara manual.

Nah diartikel ini saya akan memberikan tutorial yang manual. Maksudnya adalah kita menambahkan sendiri apa saja artikel terkait yang ingin diikut sertakan dalam postingan tersebut.

>>Langkah-langkah
1. Masuk ke blogger
2. Klik menu themes dan edit html
3. Cari ]]></b:skin> agar lebih cepat gunakan Ctrl+F
4. Masukkan kode CSS dibawah ini tepat diatas ]]></b:skin>
5. Code CSS

/* kotaklink Mulai*/
.kotaklink {background: rgb(246, 247, 249);
    border-top: 7px solid #219FDE;border-bottom: 2px solid #219FDE; /* tebal dan warna garis*/
    margin: 25px 20px 10px 20px;
    padding: 5px 15px 0px 0;
    position: relative;
    color:#383838;}
.kotaklink:before {display: block;border-radius: 5px;content: "Baca Juga"; /* bisa diganti dengan kata yang anda sukai*/
    text-align: center;
    font-size: 16px;width: 130px;
    font-weight: bold;background: #219fde;
    position: absolute;
    border: 2px solid #219fde;left: 25px;top: -20px; /* pengaturan posisi kotak atas*/
    color: #fff;}
.kotaklink cite {text-align: left;color: #999999;
    font-size: 12px;
    display: block;
    margin-top: 5px;}
.kotaklink cite:before {content: "\2014 \2009";}/* costumisasi pada badian bullet*/
.kotaklink ul {padding: 0 0 0 15px;}
.kotaklink ul li {border-bottom:1px dashed #219FDE; /* posisi bullet*/
    line-height:1.75em;
    list-style:none;
    padding: 0 0 0px;}
.kotaklink a:visited {color: #585858;} /* warna link*/
.kotaklink ul li:before{content:'\f138';font-family:fontawesome;position:absolute; /* mengatur bullet dan animasi*/
    margin:0 9px 0 -28px;
    color:#219fde;overflow:hidden;
    transition:all .3s}
.kotaklink ul li:hover:before{content:'\f138';font-family:fontawesome; 
    -webkit-animation:bounceright .3s alternate ease infinite;
    animation:bounceright .3s alternate ease infinite}/* Pengaturan huruf dalam kotak*/
/* kotaklink Selesai*/
6. Jika sudah simpan atau kalian dapat merubah tampilan terlebih dahulu di code CSS tersebut.

>>Cara Penggunaan
Tulis artikel yang kalian inginkan. Jika sudah panggil kotaklink dengan cara menggunakan div class. Perhatikan langkah dibawah ini:
1. Pindah dari Compose ke HTML

2. Jika sudah panggil dengan script dibawah ini


Untuk menempatannya bebas sesuai keinginan kalian sendiri. Entah itu ditengah artikel, di bawah artikel ataupun di tengah dan bawah artikel.

Sunday, 22 September 2019

Cara Memasang Tag Hreflang di Blogger dan wordpress

Tag hreflang merupakan sebuah tag yang digunakan untuk menentukan bahasa pada halaman blog atau website. Jadi bisa diambil kesimpulan bahwa tag hreflang merupakan acuan bahasa pada blog yang diikuti oleh google secara otomatis.


Dengan tag ini kita dapat menentukan bahasa yang digunakan diblog kita, ketika ada orang yang melakukan pencarian di google. Sehingga jika ada pengunjung dari luar negeri akan muncul menu Terjemahkan/Translate di index pencarian atau bisa juga pengunjung tersebut melihat artikel kita sesuai dengan bahasa yang mereka gunakan.


>>Cara memasang tag hreflang

1. Untuk pengguna blogger
Pasang salah satu tag berikut ini tepat dibawah tag <head>

<link rel="alternate" hreflang="id" expr:href="data:blog.url"/>

<link rel="alternate" hreflang="x-default" expr:href="data:blog.url"/>


Note :
  • hreflang="x-default" = artinya tidak mengkhususkan bahasa blog kita jadi target pembaca adalah seluruh dunia
  • hreflang="id" = artinya menargetkan untuk wilayah indonesia saja

2. Untuk pengguna wordpres
Pasang salah satu tag berikut ini

<link href="<?php the_permalink() ?>" hreflang="id" rel="alternate"/>

<link href="<?php the_permalink() ?>" hreflang="x-default" rel="alternate"/>

Note :
  • hreflang="x-default" = artinya tidak mengkhususkan bahasa blog kita jadi target pembaca adalah seluruh dunia
  • hreflang="id" = artinya menargetkan untuk wilayah indonesia saja
Setelah memasang tag ini perubahan tidak langsung terjadi. Putuh waktu untuk mesin robot webmaster merayap ulang website kita.

Friday, 13 September 2019

Cara Memasang Iklan di Dalam Postingan Blogger

Iklan pada blog merupakan sumber penghasilan bagi seorang blogger, yang sudah bersusah payah membagikan artikel agar bermanfaat untuk para pembaca. Namun, untuk blogger pemula terkadang merasa hasil dari iklan yang di tampilkan di blog belum seberapa atau sama sekali belum membuahkan hasil.


Nah untuk mendapatkan penghasilan agar lebih maksimal, seorang blogger harus menambahkan iklan diposisi terntentu agar iklan yang sudah dipasang mudah dilihat oleh para pembaca/pengunjung.

Agar lebih maksimal lagi, iklan dapat dipasang di dalam artikel blogger sesuai dengan keinginan diri sendiri. Ada 3 tawaran penempatan iklan yang banyak digunakan oleh para blogger, yaitu:
1. Dibawah judul artikel
Dengan menempatkan iklan dibawah judul akan membuat pembaca langsung melihat iklan yang sudah kita pasang.

2. Ditengah-tengah artikel
Posisi ini juga masih ideal, jika iklan relevan maka pembaca akan dengan mudah mengunjungi iklan yang ada.

3. Dibagian paling akhir/bawah artikel
Pengunjung akan ditunjukkan iklan setelah selesai membaca. Sehingga masih ada kemungkinan untuk mengunjungi iklan tersebut.

Cara Memasang Iklan di Dalam Postingan Blogger

1. Memasang Iklan di Bawah Judul Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian masukkan kode dibawah ini tepat diatas kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
Pilih ingin posisi iklan yang kalian inginkan

a. Rata Kiri


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if> 


b. Rata Kanan


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-left: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if> 


c. Rata Tengah


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>

2. Memasang Iklan di Tengah-Tengah Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian cari kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
  • Jika sudah ketemu, ganti code <data:post.body/> dengan kode dibawah ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<div class='separator' style='clear: both;
text-align: center; '>
Letakkan Kode Iklan yang sudah Anda PARSE disini
</div>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script> 


3. Memasang Iklan di Akhir/Bawah Artikel

  • Siapkan kode iklan yang sudah diparse. Jika belum di parse langsung saja kunjungi link berikut Parse Kode Iklan 
  • Masuk ke blogger dan pilih menu Tema > Edit HTML
  • Kemudian masukkan kode berikut ini tepat dibawah kode <data:post.body/> untuk lebih cepat cari dengan kombinasi Ctrl + f
a. Rata Kanan


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-left: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>


b. Rata Kiri


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right: 10px'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>


c. Rata Tengah

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;'>
Kode Iklan yang sudah Anda PARSE tadi.
</div></b:if>

Wednesday, 11 September 2019

Membuat Kolom Syntax Highlighter di Blogger

Syntax Highlighter adalah teks editor yang menyoroti markup code yang ada dihalaman web dengan tujuan mempermudah pembaca dalam mengenali seluruh codenya. Kebanyakan ditemukan diblog tutorial seperti masfadli.com


Untuk kali ini mimin akan membagikan code untuk membuat Syntax Highlighter memanfaatkan CSS. Jika blogmu bertemakan tutorial sangat cocok menggunakan code ini.

Cara memasang  Syntax Highlighter

1. Buka blogger masuk ke menu tema > edit html.
2. Kemudian cari code </style> lebih cepat dengan menekan Ctrl+f.
3. Jika sudah tambahkan code dibawah ini tepat diatas </style>


.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Cara Menggunakan Syntax Highlighter

1. Masuk ke blogger
2. Buat artikel baru
3. Kemudian klik tab HTML
4. Tambahkan 
<pre><code> kemudian tutup dengan </pre></code> 
Contoh:

<pre><code>
   <!-- Masukkan semua code/perintah disini -->
</pre></code>

Note : Jika menggunakan code HTML parse dulu codenya agar tidak bentrok

Tuesday, 23 July 2019

Cara Menambahkan Video dari YouTube ke Blogger

Menambahkan video dari YouTube ke Blogger merupakan salah satu cara promosi channel YouTube yang kita miliki. Dengan seperti itu channel kita akan semakin di kenal oleh orang banyak.




Caranya sendiri bisa dibilang simpel kita hanya membutuhkan link video kita. Lengkapnya di bawah ini.

1. Masuk ke akun YouTube

2. Pilih video yang nantinya akan kita pasang di blogger

3. Jika sudah copy link video tersebut.

4. Masuk ke akun Blogger

5. Tulis artikel baru atau edit artikel yang sudah ada.

6. Kemudian klik icon video yang ada di menu Post Artikel


7. Jika sudah pilih From YouTube

7. Paste-kan link video tadi kemudian klik icon cari
8. Jika sudah ketemu kalian klik video tersebut dan pilih select

9. Video akan langsung muncul di di halaman artikel yang kalian tulis.

10. Dan jika sudah di posting hasilnya seperti berikut ini.

Itu tadi tutorial singkat Cara Menambahkan video dari YouTube ke Blogger. Semoga bermanfaat dan salam literasi.

Wednesday, 12 June 2019

Merubah Alamat Domain dari non-www ke www di Blogger

Fitur redirect non-www ke www di blogger sangatlah membantu, karena sebagian orang lebih memilik untuk menuliskan nama domain tanpa di awali dengan kata "www" sedangkan ketika seorang blogger yang baru saja membeli sebuah domain fitur redirect tersebut tidak langsung di aktifkan secara otomatis, melainkan harus diaktifkan secara manual. 

Cara mengaktifkannya cukup simpel dan sangat mudah di lakukan. Cus langsung ke langkahnya:
1. Masuk ke halaman blogger kalian

2. klik menu setting

3. Kemudian di submenu setting pilih Basic

4. Di bagian publishing klik edit

5. Terakhir beri tanda centang seperti gambar dibawah ini. Jangan lupa save ya :D
Notification
Selamat datang di masfadli.com. Semoga apa yang saya tuliskan dapat bermanfaat untu kalian semua. Jika ada kritik dan saran kalian isikan dikolom komentar ya. Selamat membaca.
Done