Cara Edit Instant Article Facebook Untuk Blogger Cara Edit Instant Article Facebook Untuk Blogger - Berguru IT - Tutorial Visual Basic, Networking, Tips dan Trik
VB.Net

VB.Net Tutorial Untuk pemula

Instant Article

Cara Membuat Instant Article Untuk Blogger

logo

Cara Edit Instant Article Facebook Untuk Blogger

Cara Edit Instant Article Facebook Untuk Blogger - Pada artikel saya yang sebelumnya tentang cara membuat instant article disitu dijelaskan cara membuat instant article dari awal sampai dengan proses pengimporan artikel di blog ke produksi artikel instant facebook.

Selain itu saya juga sudah membahas mengenai cara mendaftar proses pengisian pembayaran instant article dengan baik dan benar. Buat kamu yang belum bergabung di instant article facebook berikut ini saya sediakan artikel yang sudah saya publish :

Dari kedua link diatas sudah cukup buat anda untuk memulai instant article facebook, dan untuk kali ini saya akan membahas cara edit instant article facebook.

Berikut ini adalah pertanyaan yang sering muncul ketika ingin membuat instant article :

1. Kapan kita bisa mengedit artikel instant?

Jawaban : Ketika kita baru mempublish artikel baru di blog, otomatis nantinya facebook akan menarik artikel tersebut ke artikel produksi instant article. Biasanya sekitar 1 menit artikel yang baru kita publish akan muncul di artikel produksi instant article.

2. Apakah artikel yang terimport sudah bisa langsung di publish di facebook?

Jawaban : "Bisa" tapi tidak akan sempurna seperti tampilan artikel anda di blog, nah untuk menyerupai artikel yang ada di blog kita harus mengedit artikel tersebut sesuai dengan yang di inginkan facebook.

Umumnya untuk mengedit tulisan Instant article dibutuhkan pengetahuan tentang koding html seperti struktur HTML, CSS, apa itu head dan apa itu body di html.

Buat kamu yang mungkin tidak ingin pusing tentang pengkodingan, ikutilah cara saya dibawah ini untuk memulai mengedit tulisan instant article agar sesuai dengan yang diinginkan facebook :


Begini Cara Edit dan Customize Instant Article Facebook


Untuk memulai edit dan customize instant article facebook segeralah masuk ke fanspage facebook anda dan pilih Artikel Penerbiatan lalu pilih Artikel Produksi, maka akan muncul beberapa artikel yang sudah di import melalui umpan RSS.

Berikut ini langkah-langkah mengedit artikel produksi instant article :

1. Masuk Fanspage Facebook.

2. Pilih Alat Penerbitan lalu pilih artikel produksi.

3. Klik Tombol Edit atau Sunting artikel yang hendak di edit atau customize.

4. Akan muncul Area Kerja edit dan customize artikel.

5. Mulai mengedit dan customize dengan cara dibawah ini :

Lebih kurang berikut ini contoh artikel saya yang sudah terimport dari artikel blog saya di berguruit.com dan belum saya edit atau di custom :

<html>
<body><article><b>Cara Mengubah Warna Baris dan kolom Datagridview VB.Net</b> - Untuk mengubah warna baris atau kolom pada datagridview vb.net caranya cukup mudah, anda bisa ikuti tutorial dibawah ini untuk membuatnya.<br>
<br>Sebelumnya saya sudah membuat tutorial tentang <a href="http://www.berguruit.com/2017/10/populate-array-to-datagridview-vbnet.html" target="_blank">cara mempopulasikan array ke datagridview vb.net</a>, nah pada tutorial kali ini saya masih gunakan untuk menampilkan data kedalam datagridview sebagai tampilan saja karena kita akan membuat warna pada baris / kolom datagridview vb.net.<br>
<br>Maksud dari mengubah warna pada baris / kolom datagridview pada dasarnya hanya untuk mempercantik tampilan tabel yang kita tampilkan, selain itu juga untuk mempermudah membedakan baris data pada tabel datagridview.<br><br>Mengubah warna pada baris / kolom datagridview seperti warna pada zebra atau seperti warna kolom yang ada pada excel ternyata dapat juga kita lakukan di visual basic .net.<br><br>Berikut ini tutorial cara mengubah warna baris dan cara mengubah warna kolom pada datagridview vb.net :<br>
<h2>Cara Mengubah Warna Baris Pada Datagridview VB.Net</h2>
<br>Untuk membuat atau mengubah warna baris pada datagridview vb.net tentunya anda harus mempersiapkan sebuah project baru pada aplikasi visual studio lalu beri nama project (terserah).<br>
<br>Masukkan toolbox datagridview kedalam form 1 lalu tambahkan kolom sebanyak yang anda mau. Jika sudah, kita akan memasukkan sintaks-nya.<br><br>Untuk Sintaks Mengubah Warna Baris Ada 2 Cara yaitu :Taruh sintaks diatas pada form_load, jika sudah jalankan dan hasilnya akan seperti dibawah ini ;<br>
<br>Itulah cara mengubah warna baris pada datagridview yang pertama, sedangkan yang kedua seperti ini sintaks-nya :<br>
<br>Public Sub warnaRebra(ByVal rDataGridView As DataGridView)
<br> For Each iniRow As DataGridViewRow In rDataGridView.Rows<br> For Each iniCell As DataGridViewCell In iniRow.Cells<br> If iniRow.Index Mod 2 = 0 Then<br> iniCell.Style.BackColor = Color.AliceBlue<br> Else<br> iniCell.Style.BackColor = Color.LightBlue<br> End If<br> Next<br> Next<br>End Sub<br></code></pre>
<br>Karena sintaks diatas bersifat public, maka anda bisa memanggilnya dimana saja seperti pada saat form_load lalu panggil sintaks diatas dengan cara :
<br>Coba jalankan cara ke 2 diatas dan hasilnya akan seperti gambar dibawah ini :<br><table><tbody>
<tr>
<td><a href="https://3.bp.blogspot.com/-ZlEGiAm81AU/WfgCHXSQ7QI/AAAAAAAADjE/_fJse7RCuqgdIWe4y2IXxiHffI6V1m1mwCLcBGAs/s1600/Cara%2BMengubah%2BWarna%2BBaris%2BDatagridview%2Bvb.net%2B2.JPG" imageanchor="1"><figure><img alt="Cara ubah warna baris datagridview vb.net" border="0" data-original-height="265" data-original-width="425" height="200" src="https://3.bp.blogspot.com/-ZlEGiAm81AU/WfgCHXSQ7QI/AAAAAAAADjE/_fJse7RCuqgdIWe4y2IXxiHffI6V1m1mwCLcBGAs/s320/Cara%2BMengubah%2BWarna%2BBaris%2BDatagridview%2Bvb.net%2B2.JPG" title="Cara ubah warna baris datagridview vb.net" width="320"></figure></a></td> </tr>
<tr>
<td>Result Cara ubah warna baris datagridview vb.net</td> </tr>
</tbody></table>
<br>Itulah cara merubah warna baris pada datagridview vb.net, silahkan dirubah warnanya sesuai dengan warna yang anda suka. Untuk merubah warna kolom pada datagridview lihat cara dibawah ini :<br>
<br><h2>Cara Mengubah Warna Kolom Pada Datagridview VB.Net</h2>
<br>Jika pada tutorial diatas membahas tentang cara merubah warna baris pada datagridview, maka untuk selanjutnya kita akan membahas cara mengubah warna kolom pada datagridview vb.net.<br>
<br>Untuk mengubah warna kolom, sintaks-nya tidak terlalu banyak cukup beberapa baris saja dan tergantung dari jumlah kolom yang anda buat pada datagridview. Oke langsung aja<br><br>Inilah Sintaks atau coding untuk merubah warna kolom datagridview :
<br><pre data-codetype="CSS" title="VB.Net"><code class="language-markup"><br>For i = 0 To 4<br> DataGridView1.Rows(i).Cells(1).Style.BackColor = Color.Aqua<br> DataGridView1.Rows(i).Cells(3).Style.BackColor = Color.Aqua<br>Next<br></code></pre>
<br>Penjelasan :<br>
<br>Datagridview1 adalah nama datagridview yang saya masukkan kedalam form
<br>Karena saya menggunakan 4 kolom dan 5 baris maka,
<br>indeks kolom dimulai dari 0 1 2 3
<br>Cells(1) artinya indeks yang ada di kolom ke 2
<br>Cells(3) artinya indeks yang ada di kolom ke 4<br>
<br>Untuk menggunakan sintaks diatas, taruh sintaks tersebut pada form_load atau dimana anda mau. Jika sudah coba anda jalankan dan hasilnya akan seperti ini :<br>
<br>Ubahlah warna sesuai yang anda suka dan tentunya di sesuaikan dengan warna tulisan yang ada di tabel datagridview agar tidak bertabrakan.<br>
<br>Sampai disini dulu tutorial <a href="http://www.berguruit.com/2017/10/cara-mengubah-warna-baris-dan-kolom.html" target="_blank">Cara Mengubah Warna Baris Dan Kolom Datagridview VB.Net</a>, apabila ada yang ingin ditanyakan silahkan isi kolom komentar dibawah ini.<br>
<br>Semoga bermanfaat.<br>
<header><time class="op-modified" datetime="2017-10-31T00:07:00-07:00">2017-10-31T00:07:00-07:00</time>
<time datetime="2017-10-31T00:07:00-07:00" class="op-published"></time>
<h1>Cara Mengubah Warna Baris Dan Kolom Datagridview VB.Net</h1>
</header>
<footer></footer>
</article>
</body>
<head>
<link rel="canonical" href="http://www.berguruit.com/2017/10/cara-mengubah-warna-baris-dan-kolom.html">
</head>
</html>

Ingat diatas hanya contoh artikel yang saya buat, untuk mengedit artikel diatas mulailah pada bagian berikut ini :

#1. <html> silahkan diganti dengan :

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">

#2. Tambahkan setelah diatas, dengan kode dibawah ini :

<head>
 <link rel="canonical" href="url artikel sobat">
 <meta property="op:markup_version" content="v1.0">
 </head>

#3. Cari kode <article> lalu tambahkan kode dibawah ini :

<header>
 <h1>Judul dari artikel anda</h1>
 <h2>Ini deskripsi dari artikel anda</h2>
 <!-- A kicker for your article -->
 <h3 class="op-kicker">Isi label / category</h3>
 <!-- Untuk time ini bisa anda ambil pada bagian bawah artikel anda -->
 <time datetime="2017-10-30T01:22:00-07:00" class="op-published"></time>
 <!-- Untuk time ini bisa anda ambil pada bagian bawah artikel anda -->
 <time class="op-modified" datetime="2017-10-30T01:22:00-07:00">2017-10-30T01:22:00-07:00</time>
 <!-- The authors of your article -->
 <address><a rel="facebook" href="http://facebook.com/aris.triyanto">Aris Triyanto</a></address>
 <!-- Ini untuk cover image article anda-->
 <figure><img src="https://isi dengan alamat gambar anda" data-fb-disable-360/>
 <figcaption>isi keterangan gambar</figcaption>
 </figure>
 </header>



#4. Tambahkan <p> pada setiap paragraf artikel anda lalu akhiri dengan </p> contoh :

<p>ini adalah sebuah contoh untuk anda untuk memulai instant article</p>
<p>jika anda berminat silahkan ikuti tutorial dibawah ini.</p>

#5. Untuk tautan link Baca juga dalam artikel ikuti cara ini :

Baca Juga :
<ul class="op-related-articles">
  <li><a href="https://blogger.com/url artikel anda"></a></li>
  <li><a href="https://blogger.com/url artikel anda"></a></li>
  <li><a href="https://blogger.com/url artikel anda"></a></li>
</ul>

#6. Untuk Menambahkan gambar, kodingnya seperti ini :

<figure>
 <img src="https://4.bp.blogspot.com/alamat gambar url anda.JPG" >
 <figcaption>Isi keterangan gambar</figcaption>
 </figure>

#7. Pada bagian akhir <footer> silahkan tambahkan koding dibawah ini :

<footer>
 <aside>Silahkan gunakan informasi didalam artikel ini, tapi jangan di copy paste tanpa seijin penulis</aside>
 <small>© berguruit.com</small>
 </footer>
pada bagian aside silahkan isi dengan apa yang anda mau.

Inilah kode lengkap dalam penulisan instant article sesuai dengan contoh diatas.

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
 <head>
 <link rel="canonical" href="http://www.berguruit.com/2017/10/populate-array-to-datagridview-vbnet.html">
 <meta property="op:markup_version" content="v1.0">
 </head>
 <body>
 <article>
 <header>
 <h1>Populate Array To Datagridview VB.Net</h1>
 <h2>Untuk mempopulasikan data array ke dalam tabel datagridview vb.net silahkan ikuti panduan dibawah ini</h2>
 <!-- A kicker for your article -->
 <h3 class="op-kicker">VB.Net</h3>
 <!-- The date and time when your article was originally published -->
 <time datetime="2017-10-30T01:22:00-07:00" class="op-published"></time>
 <!-- The date and time when your article was last updated -->
 <time class="op-modified" datetime="2017-10-30T01:22:00-07:00">2017-10-30T01:22:00-07:00</time>
 <!-- The authors of your article -->
 <address><a rel="facebook" href="http://facebook.com/aris.triyanto">Aris Triyanto</a></address>
 <!-- The cover image shown inside your article -->
 <figure><img src="https://4.bp.blogspot.com/-wOLAszWf4ws/Wfbc4PJMI/AAAAAAAADik/bksAIjAJ7csZ2G37XwwRl1cPaJf4mvxnwCLcBGAs/s1600/Cara%2BPopulate%2BArray%2BTo%2BDatagridview%2BVB.Net.jpg" data-fb-disable-360/>
 <figcaption>Populate Array To Datagridview VB.Net</figcaption>
 </figure>
 </header>
 <p><b>Populate Array To Datagridview VB.Net</b> - Pada kesempatan kali ini saya coba sharing cara populate array ke datagridview vb.net dengan mudah, tentunya kita harus terlebih dahulu memahami apa itu array khususnya pada vb.net?</p>
 <p><b>Array</b> adalah merupakan sebuah variabel atau kumpulan / urutan elemen-elemen data yang menyimpan lebih dari satu buah data yang memiliki tipe data yang sama. Setiap variabel di dalam array disebut elemen array, yang dapat diakses melalui indeksnya. Dalam Visual basic .net, indeks array dimulai dari 0, bukan dari 1. Indeks berfungsi sebagai posisi dari elemen array.</p>
 
 <p>Itulah penjelasan singkat tentang array dan untuk lebih jelasnya anda bisa mengunjungi artikel saya sebelumnya tentang <a href="http://www.berguruit.com/2017/06/cara-mudah-belajar-array-visual-basic.html" target="_blank">Cara Mudah Belajar Array Visual Basic .Net</a></p>
 <p>Baca Juga :</p>
 <ul class="op-related-articles">
 <li><a href="http://www.berguruit.com/2017/09/cara-menghitung-interval-hari-bulan.html"></a></li>
 <li><a href="http://www.berguruit.com/2017/10/ini-dia-fungsi-terbilang-bahasa.html"></a></li>
 <li><a href="http://www.berguruit.com/2017/08/cara-membuat-format-rupiah-di-textbox.html" ></a></li>
 </ul>
 <p>Apabila sudah memhami apa itu array, marilah kita langsung ke pokok pembahasan sesuai judul diatas yaitu bagaimana mempopulasikan atau memasukkan data array ke dalam tabel datagridview vb.net.</p>
 <p><b>Cara Mempopulasikan Array Ke Datagridview VB.Net</b></p>
 <p>Untuk mempopulasikan data array ke dalam tabel datagridview ikutilah panduan dibawah ini.</p>
 <figure><img src="https://4.bp.blogspot.com/-KjRLffKw/WfasjJbU8SI/AAAAAAAADiE/eF6JokdVnEgKF1tS9hwRJVddiegG-56FQCLcBGAs/s320/Populate%2BArray%2BTo%2BDatagridview%2BVB.Net.JPG" title="Populate Array To Datagridview VB.Net" width="320">
 <figcaption>Populate array to datagridview vb.net</figcaption>
 </figure>
 <p>Jalankan program dengan menekan tombol F5 pada keyboard atau klik run, dan hasilnya akan seperti gambar dibawah ini:</p>
 <p>Jika hasilnya sudah seperti gambar diatas berarti anda sudah sukses mempopulasi data array ke dalam datagridview vb.net, untuk selanjutnya anda bisa kembangkan lagi.</p>
 <p>Demikianlah <a href="http://www.berguruit.com/2017/10/populate-array-to-datagridview-vbnet.html" target="_blank">cara mempopulasikan array ke dalam datagridview vb.net</a>, jika ada yang ingin ditanyakan silahkan isi komentar dibawah ini.</p>
 <p>Semoga bermanfaat.</p>
 <footer>
 <aside>Silahkan gunakan informasi didalam artikel ini, tapi jangan di copy paste tanpa seijin penulis</aside>
 <small>© berguruit.com</small>
 </footer>
 </article>
 </body>
</html>

#8. Save / Simpan

Jika langkah #1 sampai dengan #7 sudah dilakukan silahkan di save atau simpan. Coba lihat pada aplikasi Pengelola Halaman Facebook jika sudah sesuai dengan apa yang dimau facebook maka akan terlihat seperti gambar dibawah ini :


Gambar diatas menujukkan bahwa artikel yang telah saya edit dan custom sudah sesuai dengan pattern yang diinginkan facebook sehingga artikel sudah terlihat seperti artikel aslinya pada blog, hanya saja pada instant article terlihat lebih responsive.

Jangan lupa untuk publish instant article yang sudah siap agar bisa dilihat oleh orang lain, dan jangan lupa juga untuk memasang kode iklan dari audience network milik facebook supaya dapat mengais pundi-pundi uang dari instant article.

Itulah cara edit instant article facebook untuk blogger, jika ada yang ingin ditanyakan jangan sungkan untuk mengisi kolom komentar yang sudah saya sediakan.

Semoga bermanfaat. Amin


0 Komentar untuk "Cara Edit Instant Article Facebook Untuk Blogger"

Subscribe