Supervba: Tutorial Blog
Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Friday, 6 July 2018

Pasang iklan Adsense di Blog Valid AMP

Hai sobat Supervba! khususnya kamu yang sudah jadi penayang iklan Adsense. Saya ingin melanjutkan ulasan sebelumnya mengenai Blog AMP. Sebelumnya saya sudah membagikan cara menampilkan Blog AMP yang hanya valid AMP di versi mobile (Non Full AMP). Selanjutnya ulasan mengenai cara pasang iklan adsense di Blog AMP termasuk Blog AMP yang tidak Full AMP seperti yang sudah saya ulas pada postingan sebelumnya.

Pasang iklan Adsense di Blog AMP Valid AMP

Sebelum melanjutkan bagaimana cara pasang iklan adsense di Blog AMP yang cuma valid AMP di versi mobile, saya akan mengulas beberapa cara pasang iklan adsense di Blog AMP secara umum.



Pasang iklan Adsense di Blog Valid AMP

Untuk kamu para penayang Adsense tentu tidak mau kehilangan pendapatan. Setelah template AMP selesai dipasang selanjutnya menempatkan kode iklan adsense. Namun ada perbedaan iklan adsense di blog yang pakai template AMP dengan tidak. Pada blog AMP beberapa jenis iklan adsense tidak bisa diterapkan dengan baik. Jenis iklan tersebut adalah infeed ads, inarticle ads, dan matched content ads. Saya pernah coba menempatkan kode iklan infeed ads di postingan blog tapi sayangnya tidak berhasil. Iklan infeed ads berubah menjadi iklan biasa (gambar dan teks).

Apakah ada cara pasang iklan infeed ads, article ads, dan matched content yang invalid AMP di blog AMP?. Jawabannya, ada. Pembahasannya ada di ulasan lebih bawah postingan ini.

Pada blog AMP kamu hanya bisa memasang iklan adsense secara manual. Iklan adsense bisa di tempatkan di atas judul, bawah judul, bawah artikel, dan sidebar melalui edit HTML. Sedangkan untuk iklan adsense dalam postingan, kamu harus masuk ke editor postingan dan meletakkannya pada posisi yang kamu inginkan lewat mode HTML bukan Compose.



Cara pasang iklan adsense di Blog AMP secara umum

1. Pastikan kode berikut ada di atas kode </head>. Jika belum ada silahkan ditambahkan bersama kode js lainnya.


<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>

2. Penempatan Kode Iklan Adsense

Iklan Adsense di blog AMP hanya menggunakan iklan jenis responsive. Iklan responsive dapat dimodifikasi menjadi iklan ukuran tertentu dengan menetapkan ukuran lebar dan tinggi iklan.

Format iklan adsense responsive yang direkomendasikan oleh Adsense

Contoh unit iklan sesuai format rekomendasi Adsense:

<amp-ad width="100vw" height=320
     type="adsense"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0123456789"
     data-auto-format="rspv"
     data-full-width>
  <div overflow></div>
</amp-ad>

Jika kode iklan di atas langsung diterapkan di HTML template maka akan terjadi kesalahan. Nah perbaikan kode iklannya menjadi berikut.


<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' type='adsense' width='250vw'>
  <div overflow=''/>
</amp-ad>

Supaya iklan makin responsive dapat ditambahkan kode media='(max-width: 700px)' misalnya. Maka kode iklan menjadi:

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' media='(max-width: 700px)' type='adsense' width='250vw'>
  <div overflow=''/>
</amp-ad>

Catatan: Penerapan kode iklan sebaiknya menggunakan tanda petik satu (') seperti contoh di atas.

Iklan adsense responsive dengan tinggi tetap


Contoh 1


<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='100' layout='fixed-height' type='adsense'>
</amp-ad>

Jenis iklan yang muncul dengan format (height='100') di atas adalah:
  • Iklan teks dan gambar ukuran 728 x 90
  • Iklan link/tautan dengan ukuran 2 x 2 (4 unit tautan)
Contoh 2


<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='250' layout='fixed-height' type='adsense'>
</amp-ad>

Jenis iklan yang muncul dengan format (height='250') di atas adalah:
  • Iklan teks dan gambar ukuran 300 x 250
  • Iklan teks dan gambar ukuran 600 x 300
  • Iklan link/tautan dengan ukuran 5 x 2 (10 unit tautan)

Iklan adsense responsive dengan ukuran tetap

Contoh 1

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='250' layout='responsive' type='adsense' width='300'>
</amp-ad>

Kamu tinggal ganti ukuran height dan width dengan ukuran yang kamu inginkan misalnya 728x90, 300x600, 160x600, 336x280, 320x100, dan lainnya.
Catatan
  • ganti ca-pub-1234567890123456 dengan kode penayang.
  • ganti 0123456789 dengan nomor slot iklan.

Pasang iklan infeed ads, inarticle ads, dan Matched content di blog AMP

Di blog AMP yang tidak full AMP kamu bisa pasang iklan infeed ads, inarticle ads, dan matched content. Prosesnya dilakukan dengan menggunakan tag kondisional untuk memisahkan js ad versi desktop dan mobile.



1. Hapus kode amp-ad berikut.

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>


2. Cari kode berikut lewat edit HTML template AMP.


&lt;/head&gt;&lt;!--<head/>--&gt;

Simpan kode berikut di atasnya.


<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
</b:if>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-0123456789",
          enable_page_level_ads: true
     });
//]]>
</script>
</b:if>



2. Ganti slot iklan amp kamu dengan format berikut.


<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- iklan_desktop -->

Kode iklan adsense versi desktop

</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- iklan_AMP -->

Kode iklan adsense versi mobile/AMP

</b:if>



Contoh:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- ads_desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890123456' data-ad-format='link' data-ad-slot='01234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- ads_AMP -->
<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' height='100' layout='fixed-height' type='adsense'> </amp-ad>
</b:if>

Tambahan:

Untuk iklan AMP kamu juga bisa pakai format berikut buat menyesuaikan tampilan blog AMP dengan layar perangkat mobile.

<amp-ad data-ad-client='ca-pub-1234567890123456' data-ad-slot='0123456789' data-auto-format='rspv' data-full-width='' height='300' media='(max-width: 736px)' type='adsense' width='250vw'>
  <div overflow=''/>
</amp-ad>


Begitulah cara pasang iklan Adsense di Blog Valid AMP. Semoga bermanfaat. Terima kasih.

Tuesday, 26 June 2018

Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog

Untuk menambah keterlibatan pengunjung terhadap postingan di blog, kamu dapat menambahkan emoji sebagai tombol reaksi perasaan atau pendapat pengunjung terhadap isi postingan blog. Apakah pengunjung/pembaca kamu suka atau kurang suka dengan materi postingan kamu. Jenis Emoji ini beragam ada emoji senang, sedih, kesal, histeris, bahkan marah.

pasang reaction button pada postingan Blog

Emoji hanya dipasang di halaman postingan saja. Untuk memasang emoji reaksi pengunjung terhadap postingan blog, kamu bisa berkunjung ke halaman Sharethis.

Mulai dari postingan ini, saya akan mulai menulis beberapa materi tutorial Sharethis. Pada Sharethis terdapat beberapa tools yang berguna untuk blog kamu. Alat penayang (Publisher Tools) yang ada di Sharethis sebagai berikut.

  • ShareButtons
  • ShareButtons for Wordpress
  • FollowButtons
  • FollowButtons for Wordpress
  • ReactionButtons
  • ReactionButtons for Wordpress
  • Social A/B
  • Viral Notifications
  • Email List Builder
  • GDPR Compliance Tool


Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog

Sekarang kamu akan menyimak materi cara pasang widget reaction buttons di blog. Berikut langkah-langkahnya.

1. Buka halaman Sharethis.
2. Klik Menu Publisher Tools.
3. Klik Opsi ReactionsButtons.

4. Klik tombol "Get Reaction Buttons".
5. Pada jendela pop-up "We value your privacy" klik opsi "I Accept".
6. Konfigurasi tampilan reactions buttons yang kamu ingin tampilkan.

Tutorial Sharethis-Cara pasang tombol reaksi pengunjung pada postingan di Blog


7. Setelah konfigurasi selesai, klik menu "Register & Get Code".
8. Untuk pemakaian pertama kali, kamu perlu melakukan pendaftaran di Sharethis.


9. Setelah isi semua form yang diperlukan, klik opsi "Get The Code".
10. Baca petunjuk pemasangan widget dengan benar.

petunjuk instalasi pasang widget reaction buttons sharethis di blog

11. Pertama, copy-paste kode HTML berikut sebelum kode </head>.


<script src='//platform-api.sharethis.com/js/sharethis.js#property=5b20281670570d001b5d2448&amp;product=inline-reaction-buttons'/>

Gantilah kode 5b20281670570d001b5d2448 dengan kode penayang Sharethis kamu.



Kesalahan yang biasa terjadi
Jika kamu copy-paste dari kode HTML yang diberikan di halaman Sharethis, setelah kamu simpan tema biasanya kamu akan dapat pesan kesalahan. Pada kode HTML Sharethis itu kamu perlu tambahkan kode amp; seperti contoh kode HTML di atas. Selain itu, kamu tidak perlu Parse kode HTML sharethis yang diberikan.


12. Kedua, Copy-paste kode HTML berikut ke baris HTML dimanapun kamu mau tempatkan widget reaction buttons tersebut.


<div class='sharethis-inline-reaction-buttons'/>

Untuk kode HTML Sharethis yang dimodifikasi, kamu bisa coba kode HTML berikut.


<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>

Tambahkan pula kode CSS berikut sebelum kode HTML ]]></b:skin>.


.share-message{text-align:center;margin:0;position:relative}.share-message:before{z-index:1;content:"";width:100%;height:1px;background:#ccc;position:absolute;left:0;margin-top:10px}.share-text{display:inline-block;margin:0;font-family:"Roboto Slab","Times New Roman",Times,serif;font-weight:700;color:#afafaf;text-transform:uppercase;font-size:14px;background:#fff;z-index:1;position:relative;padding:0 10px
}

Kamu bisa ganti tulisan "Apa Reaksimu?" dengan kata-katamu sendiri yang menarik.

Hasil penerapan kode widget reaction buttons yang saya gunakan seperti ini.

Tutorial Sharethis Cara pasang widget reaksi pengunjung pada postingan Blog

Nah, kalau setelah pemasangan kode, ternyata widget reaction buttons juga muncul di homepage (beranda) maka kamu perlu tambahkan kode HTML kondisional. Sehingga widget reaction buttons hanya tampil pada halaman postingan/artikel blog saja. Jadi kode widget reaction buttons akan jadi seperti ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>
</b:if>

Sementara itu, ini contoh kode HTML kalau kamu gabungkan kode widget reactions buttons dengan widget related posts.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src="&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;" type="text/javascript"></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

Seperti yang sudah dibahas di atas, selain widget reaction buttons masih banyak alat penayang Sharethis yang bisa kamu terapkan. Silahkan eksplore sendiri ya sebelum tutorial Sharethis berikutnya saya terbitkan.

Nah itulah Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog. Semoga bermanfaat.

Sunday, 24 June 2018

Cara Cepat Buat Sticky Widget di Sidebar Blog Paling Bawah

Sticky Widget adalah widget blog yang diberikan efek sticky. Efek sticky membuat widget tetap berada pada posisi semula sekalipun layar blog digulung terus ke bawah. Ada beberapa cara membuat sticky widget di sidebar blog. Kali ini, kami akan berbagi salah satu cara buat sticky widget di sidebar blog.

Buat Sticky Widget Sidebar Blog

Supaya lebih jelas yang mana dimaksud sidebar blog paling bawah, coba perhatikan kembali gambar ilustrasi di atas. Diilustrasikan sidebar blog paling bawah sebagai sebuah kotak berwarna hijau. Nah, widget ini yang akan diberi efek sticky.

Untuk membuat sticky widget sidebar paling bawah di blog terbilang sederhana dan mudah sekali. Ini karena kode HTML yang digunakan hanya sedikit dan prosedur pembuatannya pun tidak rumit.


Cara cepat buat Sticky Widget di Sidebar Blog Paling Bawah

Berikut cara membuat sticky widget di sidebar blog paling bawah.

1. Pastikan kamu mempunyai jquery versi berapapun di template kamu. Biasanya jquery terletak sebelum kode HTML </head>. Contoh jquery kayak gini.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>


Coba gunakan fungsi Find (Ctrl+F) lalu cari dengan keyword "jquery".

2. Copy-paste kode HTML berikut di atas kode HTML </body>.


<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML9').length) { // Ganti "#HTML9" dengan ID-widget-sidebar-mu
    var el = $('#HTML9');
    var stickyTop = $('#HTML9').offset().top;
    var stickyHeight = $('#HTML9').height();
    $(window).scroll(function() {
      var limit = $('.featuredon').offset().top - stickyHeight - 20; // Jarak berhenti "#HTML9" dengan ".featuredon"
      var windowTop = $(window).scrollTop();
        var lebar = $(window).width();
      if ((stickyTop < windowTop)&&(lebar > 759)) {
        el.css({
          position: 'fixed',
          top: 104 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Apa saja yang harus diubah dari kode script HTML di atas gan?
  • #HTML9 ganti dengan ID Widget sidebar kamu.
  • .featuredon ganti dengan ID widget sidebar yang merupakan posisi berhentinya efek sticky.
  • top=104 ganti dengan ukuran yang sesuai sama template kamu. Sahabat bisa coba pakai rumus saya yaitu top = 2 x tinggi header. jadi karena tinggi header template saya 52px maka top saya berikan 104 dan hasilnya pas. Kalau rumus di atas tidak sesuai dengan template sahabat, silahkan dicoba saja yang penting nilainya lebih dari tinggi header.

Catatan penting
Kenapa saya pakai .featuredon bukan #featuredon? Ini karena featuredon masuk kategori Class bukan id. Jadi kalau kategori widget kawan itu id ya pakai awalan # kalau Class pakai awalan dot (.).

3. Cari ID widget sidebar paling bawah yang ada di template kamu. Misalkan di template saya saat ini ID widgetnya adalah HTML9. Yuk perhatikan gambar!


3. Setelah melengkapi langkah 2 dengan ID widget kamu, selanjutnya klik Simpan Tema. Nah cek dah hasilnya.

Coba perhatikan kembali gambar di atas. Posisi stop sticky widget biasanya dibuat sampai footer. Nah sahabat bisa coba opsi 2 seperti yang ada di gambar tersebut. Jadi skema untuk Opsi 2 adalah Start dari #HTML9 dan STOP di #footer-widgets.

Sebagai tambahan, kalau sticky widget sahabat tidak responsive kawan bisa tambahkan kode berikut di CSS.


#HTML9{width:100%;max-width:300px;margin:0;}

Sesuaikan max-width:300px dengan ukuran sidebar sahabat. Buat ukuran max-width:300px kalau bisa kurang dari ukuran maksimal sidebar sahabat.

Ada ndak cara lain membuat sticky widget di sidebar blog gan? Ya, ada sahabat. Tunggu saja pembahasannya ya.

Itulah Cara cepat buat Sticky Widget di Sidebar Blog Paling Bawah. Semoga bermanfaat.

Saturday, 23 June 2018

Desain template-Jenis Hover HTML di blog untuk teks postingan dan link menu

Salah satu elemen perintah di HTML adalah Hover. Hover berfungsi untuk memberikan efek pada teks dalam postingan, link/tautan berbentuk teks menu maupun gambar pada saat teks dan gambar itu disorot menggunakan pointer komputer. Jenis-jenis Hover yang bisa kamu berikan sebenarnya sangat banyak. Namun pembahasan hover kali ini hanya sebagian kecil saja namun sudah cukuplah buat mendesign ulang template blog kamu.

Jenis Hover HTML di blog untuk teks postingan

Jenis-jenis hover HTML pada teks seperti efek garis bawah, huruf miring, huruf tebal, perubahan warna teks, perubahan background teks dan perubahan ukuran huruf teks.




Desain template-Jenis Hover HTML di Blog untuk teks


Macam jenis hover HTML di blog sebagai berikut.

1. Hover untuk memberi warna pada teks

Kamu cukup tambahkan kode css berikut.

:hover{ color: #626262; }

Contoh penerapan hover di HTML untuk memberi warna pada teks:
  • a:hover{ color: #626262; }
  • .sidebar a:hover{text-decoration:none;color: #005E57;}
  • #menu ul li:hover a{color:#fff}
  • a:hover{color:$(color.theme);} --> Hover ini memberi warna otomatis sesuai warna tema/template yang digunakan. Contoh lagi: #social-top ul li a:hover{color:$(color.theme)}.

Kode text-decoration:none; maksudnya adalah teks tanpa efek dekorasi seperti underline, italic dan bold.


2. Hover untuk memberi dekorasi pada teks

Dekorasi teks (text-decoration) itu seperti garis bawah (underline), garis miring (italic), dan huruf tebal (bold). Untuk menambahkan hover jenis ini dengan menambahkan kode berikut.

:hover{text-decoration:underline; }

Efek hover ini akan membuat garis bawah dengan warna default/standar (biasanya warna hitam). Sedangkan untuk underline dengan warna variasi/custom bisa diberikan seperti contoh berikut.

:hover{text-decoration:underline #23b5ab; }

Untuk memberikan text-decoration yang lain kamu tinggal ganti saja underline dengan italic dan bold.

Contoh penerapan  Hover untuk memberi dekorasi pada teks:
  • .status-msg-wrap a:hover{text-decoration:underline}
  • #error-wrap .homepage:hover{text-decoration:underline}
  • a:hover{ color: #626262;text-decoration:underline; }
  • #footer-widgets .label a:hover{text-decoration:underline;}



3. Hover untuk mengubah warna background teks
Kamu cukup tambahkan kode css berikut.

 :hover {background:#23b5ab;}

Background:#23b5ab; berfungsi untuk member warna hijau pada latarbelakang/dasar.

Contoh penerapan Hover untuk mengubah warna background teks:
  • #menu ul li:hover{background-color:#262626}
  • .postags a:hover{background:#aaa}

4. Hover untuk memberikan bingkai warna di bawah teks

Kamu cukup tambahkan kode css berikut.

:hover{ border-bottom: 2px solid #23b5ab;}

Contoh penerapan Hover untuk memberikan bingkai warna di bawah teks:
  •  .menu-secondary li a:hover a{border-bottom:2px solid #23b5ab;}

Begitulah materi desain template tentang jenis Hover HTML di blog untuk teks postingan dan link di Blog ini. Semoga bermanfaat sahabat.

Membuat link dan kotak subscribe email di blog fast loading

Membuat subscribe di blog

Tombol subscribe di blog cukup penting. Saat ini kami menyediakan beberapa cara dan model tombol subscribe email di blog ini. Secara umum ada 2 jenis model subscribe email di blog yaitu (1) menggunakan link subscribe dan ; (2) menggunakan kotak subscribe. Sebelumnya, bagi sahabat yang belum berlangganan via email di blog ini silahkan klik saja link Subscribe atau tombol Submit email. Email kamu akan selalu mendapat update postingan terbaru blog ini.

Untuk membuat tombol subscribe email di blog menggunakan situs feedburner. Feedburner sendiri adalah situs milik Google sehingga 100% aman. Feedburner akan menyimpan semua artikel blog kamu. Kalau kamu belum pernah daftar silahkan daftar terlebih dahulu. Kamu bisa gunakan email gmail kamu untuk mendaftar lebih cepat. Usahakan jumlah feed kamu sama dengan jumlah blog kamu. Kalau kamu punya 3 blog ya kamu cukup buat 3 feed saja untuk masing-masing blog.


Membuat tombol subscribe email di blog fast loading

Setelah kamu punya feed di feed burner, kamu bisa mulai memasang tombol subscribe email di blog baik dengan menggunakan kotak subscribe maupun link susbcribe. Agar tombol subscribe email ini fast loading maka kita tidak perlu melalui edit HTML, cukup dari menu Layout (tata letak) saja.

Membuat tombol subscribe email di blog fast loading menggunakan kotak berlangganan

Caranya sebagai berikut.
1. Buka tata letak blogger.
2. Klik tambahkan gadget. Kemudian klik HTML. Pada bagian isi, copy-paste kode HTML berikut.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Supervba', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="Supervba" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Untuk judul bisa dikosongkan. Ganti Supervba dengan nama/alamat feedburner (feed adress) kamu. Kalau sudah,  klik Simpan.

Kode di atas adalah kode default (standar) dari feedburner. Kamu juga bisa mendapatkan kode di atas dari halaman feedburner kamu. Klik Feed yang mau kamu pakai, pada tab Analyze, di bawah menu  Feed Stats kamu klik Subscribers. Kemudian klik FeedBurner Email Subscriptions. Berikutnya klik Manage Your email subscber list. Nah kamu akan melihat kode kotak/form subscribe di atas.

Untuk hasilnya akan tampak seperti gambar berikut.



Untuk kode kotak berlangganan yang sudah diubah/modifikasi kamu bisa coba kode berikut.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Supervba', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:80%; height:25px; margin-left:15px;margin-right:10px" name="email"/></p><input type="hidden" value="Supervba" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" style="background:#23b5ab;color:#fff; height:35px;" value="Subscribe Via Email" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>


Nah hasilnya seperti ini sahabat.



Membuat tombol subscribe email di blog fast loading menggunakan teks link subscribe

Link subscribe bisa sahabat tambahkan sebagai tambahan menu. 

Caranya sebagai berikut.
1. Buka tata letak blogger.
2. Klik tambahkan gadget atau pilih gadget "Daftar link" yang akan diperbarui. Kemudian tambahkan tautan/link Subscribe via email. Pada bagian alamat/URL, copy-paste kode HTML berikut.

https://feedburner.google.com/fb/a/mailverify?uri=Supervba&amp;loc=en_US

Ganti Supervba dengan nama feed sahabat. Kalau sudah klik Save. Terakhir klik Simpan.

Perhatikan gambar berikut.

Membuat tombol subscribe email di blog

Untuk kode aslinya dari feedburner adalah seperti berikut.

<a href="https://feedburner.google.com/fb/a/mailverify?uri=Supervba&amp;loc=en_US">Subscribe to SuperVBA by Email</a>

Untuk hasilnya seperti berikut.

cara membuat tombol subscribe email di blog

Begitulah cara membuat tombol dan kotak berlangganan email di blog. Semoga bermanfaat. Yuk bagikan artikel ini supaya lebih bermanfaat lagi.

Friday, 22 June 2018

Membuat kotak script HTML menggunakan CSS atau Style untuk postingan tutorial blog

Selain memuat informasi seputar pendidikan, situs Supervba juga berbagi tutorial dunia internet termasuk tutorial adsense dan blog khususnya blogger. Kami berusaha membagikan tutorial yang sudah pernah diterapkan pada blog supervba dan blog kami lainnya. Tutorial yang kami tulis bukan sekedar untuk berbagi informasi kepada sahabat supervba saja. Namun setiap tutorial yang kami tayangkan dijadikan sebagai rekam jejak pengalaman admin dalam mengelola blog termasuk melakukan kustomisasi terhadap template blog. Sehingga saat kami membutuhkan informasi atau tutorial blog tertentu, kami tidak perlu mencari ke blog lain. Tapi cukup mencari tutorial blog tersebut di halaman Supervba ini.

Membuat kotak script HTML dalam postingan blog dengan CSS

Materi tutorial blog termasuk materi yang lumayan menguras waktu saat menulisnya. Ini karena kami tidak hanya cuma menulis teks Bahasa Indonesia pada umumnya. Tapi juga harus menulis kode atau script HTML di setiap postingan tutorial blog.

Kode atau script HTML sebaiknya ditulis dengan rapi. Salah satu caranya dengan memberikan dasar (background) atau kotak script HTML yang menarik. Untuk membuat kotak script HTML di postingan blog ada 2 cara yaitu:

  1. Menambahkan CSS atau style dari mode HTML di postingan blog.
  2. Melalui edit HTML template dengan menambahkan CSS atau style dan javascript.



Membuat kotak script html di postingan blog menggunakan css

Kali ini kita akan menggunakan langkah nomor 1 di atas yaitu menambahkan CSS atau style HTML langsung di postingan blog. Bagaimana cara membuat kotak script HTML di postingan blog dengan CSS atau Style ?.

Kotak script HTML pada dasarnya menggunakan kodeHTML "border". Macam jenis border HTML sebagai berikut.

  • Solid Border
  • Ridge Border
  • Inset Border
  • Outset Border
  • Double Border
  • Dotted Border
  • Dashed Border
Berikut ini ada beberapa model kotak script HTML postingan blog yang bisa dipilih. Silahkan pilih modelnya sesuai template blog kamu supaya terlihat menyatu. Nah berikut cara membuat kotak script HTML di postingan blog dengan CSS atau Style.

1. Pilih salah satu model kotak kotak script HTML yang ada di bawah.
2. Buka postingan blog pada mode HTML.
3. Ketikkan ulang kode kotak script HTML yang kamu pilih. Untuk lebih cepat kamu bisa copy-paste dari halaman ini.
4. Publikasikan/perbarui postingan blog.


Membuat kotak script HTML di postingan menggunakan CSS - Model 1

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>
Kode Script Anda Di Sini
</div>


<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>


Keterangan
  • border:1px berarti tebal border sebesar 1 px
  • border-left 5px adalah border sebelah kiri dengan tebal 5 px
  • border radius : 10 px untuk mengatur sudut lengkungan border sebesar 10px.
  • Solid menunjukkan jenis border. Kamu bisa ganti dengan jenis border HTML yang lain.
  • #444 adalah warna dari border HTML
  • padding : 10px adalah jarak teks dengan border HTML
  • background-color adalah warna background/latarbelakang.
  • text-align:left adalah jenis perataan teks dalam border. Kamu bisa ganti dengan yang lain: right, center, atau justify.


Membuat kotak script HTML di postingan menggunakan CSS - Model 2

1. Jenis Border HTML : Solid Border

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>


2. Jenis Border HTML : Ridge Border

<div style=”border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>


3. Jenis Border HTML : Inset Border

<div style=”border: 2px #006400 inset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;”> Kode Script Anda Disini</div>


4. Jenis Border HTML : Outset Border

<div style=”border: 2px #006400 outset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>


5. Jenis Border HTML : Double Border

<div style=”border: 2px #006400 double; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>


6. Jenis Border HTML : Dotted Border

<div style=”border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda Disini</div>


7. Jenis Border HTML : Dashed Border

<div style=”border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI </div>

<div style=”border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>


Keterangan
  • border:2px berarti tebal border sebesar 2 px
  • border radius : 10 px untuk mengatur sudut lengkungan border sebesar 10px.
  • padding : 10px adalah jarak teks dengan border HTML
  • background-color adalah warna background/latarbelakang.
  • text-align:left adalah jenis perataan teks dalam border. Kamu bisa ganti dengan yang lain: right, center, atau justify.

Membuat kotak script HTML di postingan menggunakan CSS - Model 3

Kotak script HTML dengan tombol scroll untuk menggulung layar

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 100px; width: 300px; text-align: left;”>TULIS KODE/SCRIPTNYA DISINI </div>


Keterangan
  • height:100px berarti tinggi border sebesar 100 px. Kamu bisa sesuaikan dengan kebutuhanmu.
  • width:300px adalah lebar border sebesar 300px. Kamu bisa sesuaikan dengan kebutuhanmu.


Membuat kotak script HTML di postingan menggunakan CSS - Model 4

Kodenya ini:

<div align="left"><textarea cols="80" name="code" rows="10"> Kode HTML tulis di sini
</textarea></div>

Hasilnya ini:


    Keterangan

    • align="left" adalah teks rata kiri. Kamu juga bisa pilih right, center, atau justify.
    • cols="80" adalah lebar border. Silahkan atur lagi sesuai kebutuhan.
    • rows ="10" adalah banyak baris/tinggi border. Silahkan atur lagi sesuai kebutuhan.
    Pemecahan Masalah
    Kalau dalam penerapan kode-kode kotak script HTML di atas terjadi kegagalan maka coba ganti tanda petik (" ") dengan menghapusnya dulu kemudian mengetikkan ulang tanda petik tersebut. Ini dimungkinkan terjadi kalau kamu langsung copy-paste kode di atas ke mode HTML blog kamu. Selamat mencoba.

    Begitulah cara membuat kotak script HTML menggunakan CSS atau Style untuk postingan tutorial blog. Semoga bermanfaat. Yuk bagikan artikel ini supaya lebih bermanfaat lagi.

    Tuesday, 5 June 2018

    Bingung artikel belum terindeks Google, coba lakukan langkah ini

    cara hapus postingan di blogger

    Mengapa artikel blog saya belum terindeks di Google?.

    Setiap selesai mempublikasikan artikel blog sebaiknya melakukan pendaftaran (submit) alamat URL artikel. Salah satunya pada mesin pencari Google. Langkah ini tidak menjamin artikel bisa masuk ke halaman pertama (pageone) Google. Namun jika kamu melakukan submit URL bisa membantu mesin pencari (search engine) Google menemukan (mengindeks) artikel lebih cepat. Apakah kalau saya tidak melakukan submit URL maka artikel saya tidak ditemukan (terindeks)?. Artikel kamu akan tetap terindeks Google namun butuh waktu lebih lama.

    Seperti uraian di atas, setiap artikel blog yang sudah dipublikasikan pasti terindeks Google. Hanya masalah waktu saja apakah cepat atau lambat. Kamu bisa jadi merasa artikel kamu tidak terindeks Google padahal sebenarnya terindeks Google. Artikel kamu bisa jadi ada di halaman kedua, ketiga, keempat, dan seterusnya. Tahukah kamu bahwa Google menampilkan 10 buah artikel pada setiap halamannya. Inilah pentinganya melakukan penelitian kata kunci (research keywords) sebelum menulis sebuah artikel. Dengan harapan artikel kamu bisa langsung tembus ke pageone Google.

    Berikut ini ada sebuah tips untuk mengusahakan supaya artikel blog bisa masuk ke halaman pertama Google. Tips ini sebaiknya dilakukan setelah melakukan research keywords. Tips SEO-nya adalah menghapus URL artikel.

    Cara menghapus URL artikel blog

    Biasakan membaca sampai tuntas ya supaya kamu tidak salah paham.
    Tujuan menghapus URL artikel adalah mengoptimasi judul artikel dan alamat URL artikel.  Biasanya kan judul artikel sama alamat URL sama. Skema proses optimasi artikel blog terkait penghapusan URL artikel adalah sebagai berikut.

    1. Temukan artikel mana yang jumlah tayangannya sedikit. Misalkan artikel A.
    2. Lakukan research keyword dengan kata kunci pada judul artikel A tersebut.
    3. Tentukan judul dan alamat URL artikel baru untuk artikel A dengan kata kunci (keywords) di dalamnya.
    4. Kembalikan URL artikel A tersebut ke Draft melalui edit postingan
    5. Hapus URL di webmaster Google.
    6. Submit URL di webmaster Google.


    Kembalikan URL artikel ke Draft

    1. Buka artikel yang akan diedit pada Blogger.
    2. Klik tombol Kembalikan ke Draft.

    Sekarang, URL artikel sudah tidak ditemukan lagi pada halaman penelusuran.

    Catatan
    Template kamu sebaiknya punya halaman error (404). Sehingga pengunjung yang mengunjungi URL yang sudah dihapus akan diarahkan ke halaman 404. Alamat URL yang sudah dikembalikan ke draft butuh waktu untuk benar-benar hilang dari mesin telusur Google.

    Hapus URL di webmaster Google.

    Cara hapus URL artikel di Google sebagai berikut.

    1. Buka halaman removal Google Search Console atau Google Webmaster.
    2. Salin dan tempelkan alamat URL postingan blog yang akan dihapus. Klik tombol minta penghapusan.

    Google akan melakukan analisis apakah benar alamat URL yang diminta sudah tidak ada di mesin penelusuran. Jika alamat URL ternyata belum dikembalikan ke draf (seperti langkah di atas) maka muncul notifikasi berikut.

    cara menghapus postingan blog

    Nah, kalau proses kembalikan ke draft kamu lewati maka kamu akan dapat notifikasi seperti ini.

    cara hapus postingan di blog blogger

    Proses hapus URL dari Google membutuhkan waktu sekitar 24 jam. URL yang sudah terhapus dari Google akan ditandai sebagai Dihapus. Perhatikan kembali gambar di atas.

    Submit URL artikel di Google

    1. Buka halaman submit URL Google.
    2. Salin dan tempelkan alamat URL artikel ke kolom submit URL.
    3. Tandai kotak Capctha.

    cara agar postingan cepat terindeks google


    4. Klik tombol Kirim permintaan.

    Begitulah informasi mengenai tips SEO supaya artikel terindeks Google. Semoga bermanfaat ya.

    Monday, 28 May 2018

    Cara parse kode iklan adsense dan html serta mengetahui kode hex warna css dalam html

    Cara parse kode iklan adsense dan parse kode html
    Sebagai pengelola blog apalagi blog pribadi tentu sangat mengetahui kekurangan dan kelebihan blognya serta kesulitan-kesulitan yang dialami selama mengerjakan blog atau web. Pernahkah kamu bercerita kepada temanmu misalnya bahwa kamu sekarang mempunyai blog atau web. Nah apa tanggapannya? biasa saja bukan!. Mengapa seperti itu? Karena menurut dia membuat blog dan mengelola blog atau web itu amat mudah. Cukup kita saja yang tahu itu hehe...

    Jika tujuan membuat blog hanya untuk kesenangan diri sendiri seperti blog curhat dan sejenisnya memang mudah. Cukup buat blog dan tulis saja konten apa yang ingin dituangkan. Dulu saya pernah membuat blog pada beberapa tahun silam dan kini sudah tidak tahu rimbanya blog tersebut. Itulah kalau tidak serius menekuni sesuatu begitupun urusan blogging.

    Membuat blog dan mengelolanya ternyata cukup menyita waktu apalagi kalau blog atau web sudah fokus digunakan untuk memperoleh penghasilan. Seperti yang saya rasakan sekarang bersama blog Supervba, tidak terasa hampir 3 tahun. Apa saja yang harusnya dilakukan setelah melalui proses buat blog.


    Inilah beberapa langkah awal yang musti dilakukan kalau ingin lebih fokus di urusan blog.

    Menyesuaikan template blog

    Di handphone, dikenal dengan istilah tema HP sedangkan di blog ada namanya template. Template menentukan tampilan, kecepatan akses (loading time), dan hal-hal penting lainnya. Penyesuaian template blog sangat penting di awal karena proses pun membutuhkan waktu cukup lama. Template blog bisa didapat di internet, ada template gratis dan template premium (berbayar). Usahakan untuk menggunakan template blog responsive baik gratis maupun premium sehingga tampilan blog bisa menyesuaikan di semua perangkat baik perangkat desktop maupun perangkat mobile seperti tablet dan smartphone. Kalau kamu masih pemula dengan edit template blog kamu bisa meminta bantuan kepada rekan yang bisa serta kamu juga dapat bergabung di grup tentang blog yang ada di sosial media seperti facebook.

    Menulis artikel di blog

    Di luar sana banyak orang yang menyediakan jasa menulis artikel di blog. Setiap artikel biasanya dihargai dengan hitungan per banyak kata. Begitulah kalau orang sudah mengerti bahwa menulis artikel di blog itu butuh waktu dan fokus. Zaman sekarang ya, biar cuma tulisan di komputer saja dibayar. Wah wah!

    Kalau sudah membuat blog, selanjutnya mengisi blog dengan konten atau materi. Tentu saja materi atau konten disesuaikan dengan judul blog yang sudah dibuat. Kamu dapat saja menulis materi yang gado-gado atau campur-campur namun sebaiknya sebuah blog perlu memiliki identitas mengenai tema blognya. Perlahan namun pasti kamu harus belajar menulis artikel di blog dengan SEO yang benar. Membuat postingan di blog dengan memperhatikan SEO bisa membuat kualitas blog meningkat di mata mesin pencari (search engine). Dengan begitu jumlah pengunjung blog bisa bertambah.

    Memakai domain TLD (top level domain)
    Domain TLD blog seperti .com, .net, .id, .org dan lainnya yang terletak pada bagian akhir alamat URL blog. Kalau buat blog di Blogger ,alamat URL blog menjadi htpp://judulblog.blogspot.com. Saat ini alamat URL blog Blogger sudah berawalan https. Kalau pakai domain TLD maka nama blogspot sudah tidak digunakan lagi. Begitupun jika menggunakan flatform blog yang lain seperti wordpress, maka nama wordpress juga sudah tidak ada. Untuk mendapatkan domain TLD bisa memesan pada perusahaan jasa web dan hosting. Saat ini perusahaan jasa web dan hosting di Indonesia sudah banyak seperti Domainesia, Idwebhost, Niagahoster, Rumahweb, Dewaweb, dan lainnya.

    Itulah 3 langkah yang bisa diuraikan untuk saat ini kalau mau lebih fokus dengan blog. Apakah kamu percaya bahwa orang yang punya blog dapat penghasilan jutaan rupiah?. Sebaiknya percaya karena saya sendiri semakin percaya setelah menerima langsung uang Dollar ($) Singapura yang akhirnya dikonversikan ke mata uang kebanggaan kita, Rupiah (Rp). Semoga ini bisa menjadi salah satu alasan kamu untuk lebih fokus dengan blog kamu setelah membaca artikel sederhana ini.

    Cara parse kode iklan adsense dan html serta mengetahui kode hex warna css dalam html

    Pada langkah pertama di atas, kita berkutat dengan template blog. Pada saat melakukan editting template atau tema blog seringkali kita diharuskan untuk mem-parse HTML. Selain itu, kita juga membutuhkan kode warna yang akan digunakan untuk merubah warna template blog. Dari kedua hal tersebut maka perlulah memasang widget blog khusus untuk mem-parse HTML dan pencari kode warna.

    Termasuk pada hal-hal di atas maka untuk melakukan parse kode iklan adsense atau kode html maka menggunakan tool Parse HTML. Sedangkan untuk mengetahui kode hex warna css dalam HTML menggunakan tools pencari kode warna css yang akan dibuat sekarang. Widget parse HTML dan pencari kode warna akan dibuat di halaman (laman) blog. Ikuti langkahnya di bawah ini.

    Membuat Laman Parse HTML

    1. Masuk ke dashboard blog, pilih blog yang akan dibuat laman parse HTMLnya.
    2. Klik menu Halaman (page). Klik buat Laman baru.
    3. Buat judul laman kemudian buka mode HTML. Salin dan tempelkan kode HTML berikut (dalam mode HTML).

    <center>
    <script type="text/javascript">
    function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
    </script>

    <table style="margin: 0 auto;"><tbody>
    <tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;"></textarea>

    <input onclick="convert();" style="padding: 5px;" type="button" value="Parse Now" /></td> </tr>
    </tbody></table>
    </center>


    4. Klik Publikasikan untuk membuat laman. Selesai.



    Laman Kode Warna (Color Generator)

    Untuk alat pencari kode warna ini ada 2 model. Bisa pilih salah satu model atau kedua model juga bisa. Langkahnya serupa dengan di atas jadi langsung disingkat saja.
    1. Pada laman postingan, buka mode HTML, salin dan tempel salah satu atau semua kode HTML berikut.

    The First Color Generator

    <center>
    <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"><param value="sameDomain" name="allowScriptAccess"><param value="https://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="https://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="https://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed></object></center>

    Second Color Generator

    <center>
    <object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"><param value="https://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="https://www.macromedia.com/go/getflashplayer" quality="High" src="https://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="485" height="485"></embed></object></center>

    2. Klik Publikasikan (publish). Selesai.


    Kode <center></center> bisa dipakai atau bisa juga tidak (dihapus). Kode ini berguna untuk memposisikan widget rata di tengah.

    Sekarang, coba sebutkan warna apa yang dihasilkan oleh kode warna berikut.

    • #FF0000 = ............
    • #FFFF00 = ...........
    • #0033CC = ...........
    • #660099  = ...........
    • #FF6600 = ...........

    Untuk mengetahui jawabannya, kamu bisa salin dan tempel ke mesin pencari kode warna yang sudah dibuat. Untuk penggunaan pertama kali, kamu harus mengaktifkan plugin adobe flash player dengan mengklik saja pada tampilan notifikasinya. Salin dan tempel pada kolom Update atau Hex kemudian tekan tombol enter di keyboard komputer dan lihat hasilnya.

    Silahkan tinggalkan jawaban kamu di kolom komentar. Manakah kode warna utama yang digunakan pada blog Supervba ini?. Yuk koreksi bersama.

    Untuk saat ini saya merasa perlu memasang kedua widget ini  karena seringkali melakukan penyesuaian template sehingga bagi saya wajib. Jika menurut kamu juga perlu silahkan dipasang di blog. Selain edit template blog, kode warna css juga digunakan dalam penulisan artikel blog.

    Akhirnya, itulah cara parse kode iklan adsense dan html serta mengetahui kode hex warna css dalam html. Nah semoga sesi ini lebih bermanfaat dari sebelumnya. Tinggalkan komentar posistif apapun di kolom komentar dan jangan ragu bagikan di sosial media (facebook, twitter, google plus, dan instagram) jika dianggap berguna bagi yang lain. Terima kasih atas waktu yang sudah diluangkan di Supervba.

    Saturday, 23 December 2017

    Memasang recent posts (artikel terbaru) di sidebar blog

    Halaman beranda (homepage) sebenarnya halaman yang cukup kurang dikunjungi oleh pembaca blog kita. Sehingga seringkali artikel terbaru yang kamu posting bisa jadi tidak ter-ekspos kepada pembaca. Untuk itu, sebaiknya kamu memasang widget Recent Posts (artikel terbaru). Kamu bisa meletakkanya widget Recent Posts ini di sidebar blog kamu. Sehingga sekalipun pembaca kamu tidak melihat halaman beranda kamu, paling tidak beberapa artikel terbaru kamu bisa terlihat dengan jelas oleh pembaca.

    Widget Recent posts merupakan widget yang menampilkan artikel/postingan terbaru. Artikel yang baru saja diposting akan muncul di halaman Home blog. Untuk memudahkan dan menarik pengunjung untuk tetap berada di blog, kawan bisa pasang recent posts di sidebar blog.


    Banyak rupa dari widget recent posts mulai dari yang hanya menampilkan judul artikel hingga variasi lainnya. Admin ingin membagikan widget recent posts yang cukup menarik menurut admin. Screenshootnya bisa kawan lihat pada gambar di atas.



    Memasang artikel terbaru (recent posts) di sidebar blog

    Adapun cara memasang recent posts di sidebar blog sebagai berikut.

    1. Buka dashboard blogger -> Tata letak (layout). Klik opsi Tambahkan Gadget -> Pilih opsi HTML/JavaScript.

    2. Tempatkan kode berikut pada bagian Konten di widget HTML/JavaScript.

    <script type="text/javascript">
    function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
    </script>
    <script type="text/javascript">
    var posts_no = 8;
    var showpoststhumbs = true;
    var readmorelink = true;
    var showcommentslink = true;
    var posts_date = true;
    var post_summary = true;
    var summary_chars = 60;</script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://www.supervba.com/" rel="nofollow">Recent Posts Widget</a>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <style type="text/css">
    img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
    .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
    ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
    ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
    ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
    .recent-posts-container a{text-decoration:none;}
    .recent-post-title {margin-bottom:5px;}
    .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
    .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
    .recent-posts-details a{color: #777;}
    </style>

    Pada kode widget recent posts di atas menampilkan 8 artikel terbaru. kawan bisa ubah dengan banyak artikel yang lain sesuai kebutuhan sobat.

    Artikel ini diupdate pada Juni 2018
    Setelah saya ganti template blog ternyata kode HTML widget recent posts di atas tidak lagi cocok dengan template blog saya. Ada sedikit kekurangan setelah diterapkan yakni nomor urut recent posts tampil berantakan. Sehingga saya coba melakukan modifikasi terhadap kode widget recent posts itu.

    Kalau kawan juga mengalami hal yang sama dengan apa yang sama alami bahwa kode script di atas kurang berhasil karena tidak sesuai sama template yang kawan gunakan, kawan bisa coba kode HTML kedua berikut.

    <script type="text/javascript">
    function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
    </script>
    <script type="text/javascript">


    var posts_no = 8;
    var showpoststhumbs = true;
    var readmorelink = false;
    var showcommentslink = false;
    var posts_date = false;
    var post_summary = true;
    var summary_chars = 65;</script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

    <noscript>Your browser does not support JavaScript!</noscript>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <style type="text/css">
    img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
    .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
    ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
    ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
    ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;float:left; right: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:10px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
    .recent-posts-container a{text-decoration:none;}
    .recent-post-title {margin-bottom:5px;}
    .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
    .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
    .recent-posts-details a{color: #777;}
    </style>

    Apa sih bedanya kode HTML pertama dengan kedua?. Bedanya pada posisi widget yang diubah dari absolute menjadi float di kiri (left). Kemudian kode widget kedua hanya menampilkan thumbnail, judul, dan summary (ringkasan) saja. Jika kawan masih merasa perlu melakukan penyesuaian terhadap element kode widget di atas ya silahkan dilakukan secara hati-hati.

    Berikut dokumentasi admin saat memasang widget recent posts di blog.


    Jika kawan tertarik, kawan bisa coba pasang di sidebar blog. Kawan bisa perhatikan hasilnya, apakah sesuai dengan template/tema blog kawan secara keseluruhan. Untuk menghapus widget di atas, klik Opsi Hapus.

    Begitulah informasi tentang memasang recent posts (artikel terbaru) di sidebar blog. Bila ada kekurangan, mohon simpan di kolom komentar. Semoga informasi ini bermanfaat. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.

    Friday, 1 December 2017

    Cara agar blog muncul di Google dengan Webmaster Google [terindeks]

    Google Search (mesin pencari Google) merupakan alat pencari informasi dari Google. Google Search akan mencari semua informasi yang terkait dengan kata kunci /keywords yang dimasukkan pengguna pada mesin pencari. Google akan menampilkan 10 situs pada tiap halaman yang memuat kata kunci yang dicari. halaman pertama Google memuat 10 situs dengan kata kunci yang paling mendekati dan memiliki rating paling baik di mata Google. Disusul dengan situs-situs lainnya pada halaman berikutnya.

    Jika anda baru saja membuat situs/blog dan kemudian menerbitkan beberapa artikel, maka ketahuilah bahwa situs/blog tersebut hanya memuat artikel yang hanya bisa dibaca oleh si empunya blog. Ini karena Google Search belum bekerja untuk merayapi artikel-artikel yang sudah anda terbitkan di situs/blog anda. Sehingga artikel blog anda tidak akan muncul di halaman Google apalagi halaman pertama Google.

    Google sudah menyiapkan alat berupa Webmaster Google untuk membantu para pengelola situs/blog. Dengan menggunakan webmaster Google, situs/blog dan artikel yang sudah kita terbitkan akan mudah ditemukan oleh Google. Sehingga pembaca/pengguna Google bisa menemukan situs dan artikel kita. Jadi, agar blog muncul di Google atau biasa disebut terindeks adalah dengan mendaftarkan situs kita di webmaster Google.

    Jika kita baru saja membuat blog, sebaiknya kita langsung daftarkan situs/blog kita di Webmaster Google. Supaya setiap artikel yang kita terbitkan bisa segera terindeks Google.


    Baca  juga11 keyword rahasia Google yang belum ditahu banyak orang


    Cara agar blog muncul di Google [terindeks] dengan Webmaster Google

    cara agar blog muncul di google dengan webmaster google

    Adapun langkah-langkahnya adalah sebagai berikut.

    1. Proses pertama adalah daftar di Webmaster Google. Buka halaman Webmaster Google. Pada halaman Home Webmaster Google, klik Opsi Tambahkan Properti. Masukkan alamat url situs/blog. Pastikan opsi Situs Web sudah terpilih. masukkan alamat url lengkap dengan http:// atau https://. Misalnya http://www.supervba.com/. Kemudian klik Opsi Tambah.


    2. Proses selanjutnya adalah verifikasi kepemilikan situs web. Ada 2 tab menu : metode yang disarankan dan metode alternatif. Admin lebih suka menggunakan metode alternatif. Klik tab metode alternatif, klik opsi Tag HTML. Salin/Copy meta tag HTML yang diberikan.



    3. Buka halaman dashbor Blogger, klik opsi tema kemudian klik opsi Edit HTML. Tempel (Paste) meta tag yang diberikan Webmaster Goole setelah kode <head> dan sebelum kode <body> yang pertama. Admin biasanya letakkan persis di bawah kode <head>. Jika sudah selesai klik opsi Simpan Tema.



    Baca jugaInilah Game internet yang bisa dimainkan saat jaringan internet offline, lambat atau putus


    4. Kembali ke halaman Webmaster Google, setelah tadi kita klik Opsi Simpan Tema pada Dashbord Blogger, klik opsi Verifikasi. Jika berhasil akan muncul pesan "Selamat anda telah berhasil meverifikasi kepemilikan situs anda". Kemudian klik lanjutkan pada halaman ini.


    5. Berikutnya kita akan masuk di halaman dashbord webmaster Google.  Pada halaman ini kita akan melakukan proses pengiriman Peta Situs. Untuk itu, pada bilah kiri, klik opsi  Perayapan, kemudian klik opsi peta situs. Pada tombol berwarna merah sebelah kanan, klik tombol tambahkan/uji peta situs. Banyak cara untuk menambahkan peta situs dan salah satunya menggunakan feeds/posts/default. tambahkan kalimat feeds/posts/default pada bidang isian kemudian klik opsi Kirim.


    Setelah peta situs dikirim, pada halaman akan terlihat status terindeks masih tertunda. Butuh waktu bagi mesin perayap Google untuk merayapi URL situs dan artikel blog kita. Jadi, kita tunggu saja hingga statusnya sudah tidak tertunda lagi.


    Baca jugaCara tepat memasang Artikel Terkait dalam postingan blog untuk meningkatkan pengunjung blog


    6. Proses berikutnya adalah Submit URL. Untuk melakukan sekarang silahkan Submit URL anda. Pada bidang URL, isikan dengan URL artikel. Kemudian klik opsi "Saya bukan robot" pada bagian CAPTCHA. Kemudian klik tombol Kirim permintaan. Jika berhasil ada pesan "Permintaan anda telah diterima dan akan segera diproses".


    Jika kita mempunyai 5 artikel baru maka kita harus melakukan proses ini sebanyak 5 kali. Setiap kali kita menerbitkan artikel baru, kita hanya tinggal melakukan proses Submit URL saja. Ini berguna supaya artikel kita mudah dirayapi oleh mesin pencari Google.

    Akhirnya semua proses agar blog muncul di Google sudah selesai. Adapun tahapannya secara umum adalah:

    • daftar di webmaster google.
    • tambahkan situs di webmaster google
    • kirim peta situs di webmaster google
    • Submit URL artikel di webmaster Google.

    Selain Mesin pencari Google, masih ada mesin pencari lainnya seperti Yahoo/Bing milik Microsoft, dan lainnya. Admin akan bahas pada kesempatan berikutnya cara daftar di mesin pencari Yahoo/Bing.

    Begitulah informasi tentang cara agar blog muncul di Google [terindeks] dengan webmaster Google. Bila ada kekurangan, mohon simpan di kolom komentar. Semoga informasi ini bermanfaat. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.

    Friday, 17 November 2017

    Cara tepat memasang Artikel Terkait dalam postingan blog untuk meningkatkan pengunjung blog

    cara memasang related posts dalam postingan blog
    Pengunjung merupakan kunci utama penentu keberhasilan sebuah web atau blog. Lalu lintas pengunjung yang ramai dapat meningkatkan semangat si pengelola blog untuk terus menulis. Selain itu banyak sedikitnya jumlah pengunjung blog menentukan tingkat pendapatan yang dihasilkan dari sebuah blog. Untuk itu penting sekali menarik perhatian pengujung untuk terus kembali berkunjung ke blog kita dan menjelajah lebih banyak artikel di blog kita.

    Ada banyak cara menarik pengunjung datang ke blog kita. Salah satunya dengan memasang widget artikel terkait (related posts). Related posts atau artikel terkait merupakan salah satu fitur yang sangat penting dari sebuah blog. Fitur Artikel terkait menampilkan beberapa artikel lain yang terkait dengan judul artikel yang sedang dibaca pengunjung.

    Artikel terkait biasanya berada di bawah postingan blog atau di bawah tombol sosial media. Kali ini kami akan membagikan cara memasang artikel terkait dalam postingan blog berbasis Blogger. Dengan posisi seperti ini pengunjung blog akan lebih betah di blog kalian.


    Baca jugaCek Domain TLD untuk blog dan web disini


    Cara Memasang Artikel terkait dalam postingan Blog


    Adapun cara memasang artikel terkait dalam postingan blog sebagai berikut.

    1. Buka Blogger -> Tema -> Edit HTML.


    2. Salin dan tempel kode HTML berikut sebelum kode </head>. Gunakan fungsi Find (Ctrl+F) untuk pencarian lebih cepat.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>

    3. Carilah kode <data:post.body> pada editor HTML. Jika ada lebih dari 1 kode <data:post.body> maka temukan kode <data:post.body> yang paling bawah atau terakhir. Gantilah kode <data:post.body> tersebut dengan kode HTML berikut. Perhatikan bahwa kode HTML di bawah tidak perlu di-Parse lagi.

    <div id='tgt-post'>
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'>
    <p><data:post.body/></p>
    </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>
    </div>

    Sebagai tambahan bahwa kalian bisa ganti kata Baca Juga dengan kata lain yang kalian sukai.

    Kode CSS Artikel Terkait dalam postingan blog

    4. Salin dan paste kode HTML berikut sebelum kode </b:skin>.


    /* Related Post dalam postingan*/
    .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:2px solid rgba(196,196,182,100)}
    .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#010101;top:-21px;left:2.5%}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0E5FDA;font-size:15px;font-weight:300; margin:0 0 0 30px;}
    .related-simplify a:hover{color:#f2132d;}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @media only screen and (max-width:768px){
    .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
    .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
    .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
    .related-simplify ul li{padding:5px 0}
    .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

    Jika kalian ingin gaya atau style artikel terkait yang lain kalian bisa coba mengganti kode HTML \f138 dengan \f0c8 . Nah kalian bisa cek sendiri hasil dan perbedaannya dengan kode di atas.

    8. Langkah terakhir adalah klik Simpan Tema untuk melakukan pemasangan. Nah selanjutnya kalian bisa lihat blog kalian apakah sudah tampil dengan baik atau belum. Selamat mencoba!

    artikel terkait dalam postingan blog blogger
    Artikel terkait dalam postingan blog

    Begitulah informasi mengenai cara memasang Artikel Terkait dalam postingan blog. Bila ada kekurangan, mohon simpan di kolom komentar. Semoga informasi ini bermanfaat. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.

    Printer

    3R

    Teknologi