Tampilkan postingan dengan label Armaila Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Armaila Blog. Tampilkan semua postingan

Cara Membuat Iframe (Embed) Youtube responsive di Blogspot Menggunakan CSS Saja

Cara Membuat Iframe (Embed) Youtube responsive di Blogspot Menggunakan CSS Saja - Kadang sobat blogger ingin menyematkan video youtube pada blog atau website pribadi sebagai bahan tutorial maupun refrensi pendukung tambahan untuk ditayangkan pada blog. Sewaktu kita melihat video pada laman artikel di browser computer PC atau laptop yang kita muat baik-baik saja dan tidak tampak ada masalah yang terlihat, Tapi masalah akan muncul ketika kita membuka postingan artikel yang tersemat video youtube pada perangkat smartphone, ya video tersebut tampak keluar dari zona nyamanya :D atau tidak bisa menyesuaikan dengan ukuran device yang memuatnya inilah yang disebut sebagai Tidak Responsive.

Cara Membuat Iframe (Embed) Youtube responsive di Blogspot Menggunakan CSS Saja

Lantas bagaimana agar video tersebut responsive mengikuti ukuran device nya  ? mari simak tutorial kali ini tentang cara agar video youtube di blog menjadi responsive. Tutorial kali ini akan menggunakan script CSS dengan menyematkan ke dalam Template blogger.

Tutorial Agar Video Youtube di Blog Menjadi Responsive

1. Masuk pada dashboard blogger pilih Tema - Edit HTML
2. Masukan Script CSS dibawah ini tepat diatas kode </head>. Cari script tersebut dengan (Crtl + F) untuk search.

/* Youtube Responsive Armaila */


<style type='text/css'>
/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
</style>

Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian  artikel tentang "Cara Membuat Iframe (Embed) Youtube responsive di Blogspot Menggunakan CSS Saja". Semoga bermanfaat.

Cara Pasang Iklan di Atas, Tengah dan Bawah Artikel

Memasang 3 iklan adsense di atas, tengah dan bawah artikel postingan sekal

Sebenarnya ada 2 cara meletakan iklan adsense pada halaman blog, bisa menggunakan widget dan secara manual menggunakan kode khsus yang dipasang atau ditambahkan di kode template blog yang bersangkutan.

Khusus untuk Memasang iklan adsense di area artikel postingan tidak bisa menggunakan widget, dan hanya bisa menggunakan kode khusus yang harus dipasang di kode HTML template blog yang bersangkutan.

Untuk memasang 3 unit iklan adsense di atas artikel postingan setelah judul, di tengah artikel postingan dan juga di akhir artikel postingan caranya adalah sebagai berikut:

1. Login ke akun blog anda.

2. Pada bilah menu sisi kiri pilih menu template > edit HTML

3. klik di area editor html yang muncul, kemudian tekan tombol CTRL+F untuk mengaktifkan fasilitas pencarian, kemudian cari kode:

<data:post.body/>
Biasanya akan ditemukan lebih dari satu, silahkan coba ganti kode <data:post.body/> yang posisinya paling bawah.

4. Ganti kode <data:post.body/> dengan kode di bawah ini:

<div style="margin-bottom:15px;">
<center>
--KODE IKLAN UNTUK DI ATAS ARTIKEL BAWAH JUDUL--
</center>
</div>
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
--KODE IKLAN DI TENGAH ARTIKEL--
</center>
</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>
<div style="margin-top:15px">
<center>
--KODE IKLAN BUAT DI BAWAH AKHIR ARTIKEL--
</center>
</div>

Silahkan anda ganti text untuk KODE IKLAN yang berwarna Pink di atas dengan kode iklan sesuai dengan ukuran dan format iklan yang anda inginkan. Ingat iklan harus di parse dulu agar tidak error.

Untuk memparse kode iklan anda bisa menggunakan tool online gratis yaitu Free Formater HTML Escape. silahkan parse terlebih dahulu kode unit iklan yang akan anda pasang di situs tersebut kemudian pasang pada template HTML blog anda.


Angka 2 warna biru diatas bisa anda ganti dengan angka lebih besar dari 2, misalnya 3, 4, 5 dll, semakin besar maka iklan yang ditengah akan semakin ke arah bagian atas.

Formasi Format dan ukuran iklan terbaik

Untuk pemasangan dan pelatakan 3 iklan dengan tata letak ini yang paling baik adalah:
a. di atas ukuran 330 x 280 kotak
b. tengah iklan link 200 x90
c. Bawah iklan konten 280 250;

Untuk template dan niche saya format iklan di atas memiliki nilai klik lebih tingi dan nilai CPC lumayan rata-rata bisa dibilang cukup besar untuk blog indonesia.

Jika anda berhasil maka iklan yang anda pasang akan muncul di atas postingan di bawah judul artikel, di tengah artikel dan di bawah akhir artikel.

Itulah artikel tentang  Memasang 3 iklan adsense di atas, tengah dan bawah artikel postingan, selamat mencoba dan semoga bermanfaat.

Membuat Iklan di Sebelah Kiri di Awal Paragraf

Ukuran iklan yang cocok untuk diletakkan di posisi ini adalah 336x280 atau 300x250 agar tidak menggangu tampilan text di sampingnya.

Pertama cari kode <data:post.body/>. Kalau ada banyak pastikan memilih yang ada di dalam tag kondisional halaman post <b:if cond='data:view.isPost'>.

Lalu tambahkan kode HTML berikut SEBELUM kode yang disebutkan tadi.
<div class="iklankiri">
  <!-- Tulis Kode Iklan -->
</div>

Sehingga hasil akhirnya kurang lebih seperti ini.
<b:if cond='data:view.isPost'>
  ....
  ....
  <div class="iklankiri">
    <!-- Tulis Kode Iklan -->
  </div>
  <data:post.body/>
  ....
  ....
</b:if>

Tambahkan juga kode CSS ini agar posisinya bisa ada di kiri sekaligus membuatnya responsif seperti yang sudah dijelaskan sebelumnya. Simpan DI ATAS </style> atau ]]></b:skin>.
.iklankiri {float:left; margin-right:15px; margin-bottom:15px;}
@media screen and (max-width:568px){
  .iklankiri {float:none; display:block; margin:0px auto 15px; text-align:center;}
}


Simpan template dan lihat hasilnya. Semoga tutorial lengkap menyisipkan iklan AdSense di sebelah kiri di awal postingan ini bisa bermanfaat.

Membuat Peta Situs di Webmaster, Ada 3 Kode Yang Sering Digunakan

Setidaknya ada 3 kode url yang Armaila gunakan saat Membuat Peta Situs di Webmaster agar semua postingan tersebut di index oleh google.

Berikut ini adalah kode url yang biasa Armaila gunakan


  • feeds/posts/default
  • feeds/posts/default?orderby=updated
  • feeds/posts/default?max-results=9999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc
  • sitemap.xml

Update 24 Februari 2021
Selain postingan, jika halaman statis blog juga ingin diindex maka kita juga harus memasukkan sitemap halaman atau page kita tersebut ke google webmaster dengan menambahkan:
  • /sitemap-pages.xml

Hal pertama yang perlu diperhatikan adalah mendaftarkan blog ke webmaster tool.

Selanjutnya klik pada bagian "peta situs" dan pada kolom "Tambahkan peta situs baru" silahkan isi url kode peta situs diatas satu persatu sehingga hasilnya seperti berikut ini

Membuat Peta Situs di Webmaster, Ada 3 Kode Yang Sering Digunakan

Bagi teman teman yang sering gonta ganti template. maka harus mengirimkan ulang peta situs setiap ganti template agar blog dengan template yang baru dicrawl oleh google.

Jika mengabaikan poin ini biasanya akan menyebabkan pengunjung blog menjadi menurun. Tentu saja hal itu tidak kita inginkan bukan??

URL Yang Dikirimkan Tampaknya Berupa Soft 404

URL Yang Dikirimkan Tampaknya Berupa Soft 404 | Tadi malam Armaila mendapatkan sebuah email dari Google Search Console Team yang isinya seperti berikut ini.

URL Yang Dikirimkan Tampaknya Berupa Soft 404


Masalah baru detected onarminaven.blogspot.com
Pemilik arminaven.blogspot.com yang terhormat,
Search Console telah mengidentifikasi bahwa situs Anda terpengaruh oleh 1 masalah baru jenis Liputan.
Error teratas (maksimum 5)
Error dapat mencegah halaman atau fitur Anda muncul di hasil Penelusuran. Error berikut ditemukan di situs Anda:
URL yang dikirimkan tampaknya berupa Soft 404
Sebaiknya pelajari lebih lanjut masalah ini dan perbaiki jika memungkinkan agar situs Anda dapat memberikan cakupan dan pengalaman terbaik di Google Penelusuran.
Selanjutnya setelah googling akhirnya admin mencoba membuka sebuah halaman https://support.google.com/webmasters/answer/181708?hl=id yang membahas tentang "Error Soft 404" ini. 

Berikut ini penjelasan tentang URL Yang Dikirimkan Tampaknya Berupa Soft 404 dari link support google diatas

Apa itu error soft 404?

Jika terjadi error soft 404, artinya URL menampilkan halaman pemberitahuan bahwa halaman yang dituju tidak ada serta kode level 200 (sukses) kepada pengguna. Dalam beberapa kasus, halaman yang ditampilkan mungkin menampilkan sedikit atau tanpa konten, seperti halaman yang hanya memuat potongan-potongan konten atau kosong sama sekali.

Dari penjelasan diatas. Informasi error soft 404 ini muncul karena halaman menampilkan konten artikel yang sedikit atau malah tidak memiliki konten.

Namun anehnya pada kasus admin. link artikel yang ditandai error soft 404 ini malah artikel yang panjang di link http://arminaven.blogspot.com/2018/12/affiliate-marketing-tips-back-end.html seperti yang terlihat pada gambar berikut ini:

Error soft 404

karena merasa tidak ada permasalahan maka hal yang admin lakukan selanjutnya adalah memvalidasi dengan cara membuka laporan dan klik tombol "Validasi Perbaikan"

Validasi Perbaikan
Sekarang tinggal menunggu hasil validasi perbaikan. Dan berikut ini adalah balasan dari google console setelah admin melakukan validasi diatas


Kami sedang memvalidasi perbaikan masalah Liputan Anda untuk situs https://arminaven.blogspot.com/

Yth. pemilik https://arminaven.blogspot.com/,

Google mulai memvalidasi perbaikan masalah Liputan di situs Anda. Khususnya, kami memeriksa ‘URL yang dikirimkan tampaknya berupa Soft 404’, yang saat ini memengaruhi halaman 1.


Validasi memerlukan waktu beberapa hari; kami akan mengirimkan pesan kepada Anda saat proses selesai. Anda dapat memantau proses pengujian dengan membuka link di bawah.

Cara Membuat Video Youtube Responsive di Blog Template Newser

Cara Membuat Video Youtube Responsive di Blog Template Newser | Malam ini aku baru saja mengganti template blog Armaila.com dari template VioMagz ke template Newser. Banyak hal yang harus dibenahi salah satunya adalah Membuat Video Youtube Responsive di Blog pada template yang baru ini.

Aku mencoba googling dan membaca beberapa panduan yang dishare oleh teman teman blogger dan baru berhasil pada artikel "https://blogaeres.blogspot.com/2019/03/cara-memasang-video-youtube-responsive.html"

Cara Membuat Video Youtube Responsive di Blog Template Newser

Dan berikut ini rincian panduan yang berhasil untuk kasus ku ini.

Langkah 2: Tempelkan (paste) HTML videonya di postingan Anda pada mode HTML. Selesai, boleh dipublish.

Cara Agar Video Youtube Menjadi Responsive

Perhatikan bahwa ukuran width="560" dan height="315" dari HTML di atas adalah rasio lebar-tinggi standar untuk YouTube di desktop adalah 16:9, boleh hitung sendiri, nilainya 1.77:1. Nah, cara yang saya lakukan agar video youtube menjadi responsive di postingan blog adalah dengan menggunakan rasio tersebut pada settingan tampilan CSS Media Query untuk berbagai resolusi.
Langkah 3: Buka Blogger > Tema > Edit HTML. Tambahkan kode CSS berikut sebelum ]]></b:skin>.
/* Video Youtube Responsive */ .post-body iframe,.post-body embed,.post-body object{max-width:100%;max-height:auto} @media screen and (max-width:768px){.post-body iframe,.post-body embed,.post-body object{height:432px}} @media screen and (max-width:600px){.post-body iframe,.post-body embed,.post-body object{height:337.5px}} @media screen and (max-width:480px){.post-body iframe,.post-body embed,.post-body object{height:270px}} @media screen and (max-width:320px){.post-body iframe,.post-body embed,.post-body object{height:180px}}
Langkah 4: Simpan Tema.

Sumber: blogaeres

Cara Membuat Box Facebook Fan Page Like Button Melayang dan Tombol Subsribe Youtube di Blog

Cara Membuat Box Facebook FansPage Like Button Melayang dan Tombol Subsribe Youtube di Blog | box facebook tepatnya tombol like fan page facebook yang kita kelola dapat dibuat melayang dengan menggunakan script like box facebook yang bisa teman teman lihat dibawah.
link html facebook page
Cara Membuat Box Facebook FansPage Like Button Melayang dan Tombol Subsribe Youtube di Blog

Selain untuk kotak like facebook melayang, dalam script ini juga sudah ditambahkan tombol subscribe ke channel youtube teman teman, jadi dari 1 widget bisa mempromosikan fan page dan channel youtube sekaligus.

untuk membuat facebook like button sangatlah mudah. Cukup dengan menambahkan widget baru dan mengisinya dengan script like box fan page facebook. dan berikut ini adalah script yang akan di masukkan ke widget fanspage facebook.

Cara Membuat Box Facebook Fan Page Like Button Melayang dan Tombol Subsribe Youtube di Blog

Masuk ke dashbor blog teman teman lalu pilih Tata Letak
klik + Tambahkan Gadget
Selanjutnya pilih HTML/JavaScript
lalu masukkan kode berikut ini:

<!-- FACEBOOK MELAYANG ARMAILA -->
<style type='text/css'>
/* Message Box Facebook  */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:292px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:3px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"250px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->

<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/AkhirMali&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:215px;" allowtransparency="true"></iframe>


<a href="http://bit.ly/SubscribeArmailaYoutubeChannel" re="nofollow" target="_blank" >
<img border="0" alt="Jangan Lupa Like dan Subscribe ya [KLIK DISINI] Terima Kasih" title="Jangan Lupa Like dan Subscribe ya [KLIK DISINI] Terima Kasih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQHwPtoSyjxgUkgaqYsQMqj_e6rYaqqEpwY3up9KqXGB-U1piuz1HSx_hE7ifphP54jAQy52shidJwm36QrHeG6RW4ny-I23wGc9f0ePtFgEKcbIp6l6WINF7MLtV0hUbGpxImkXjiNc/s1600/Please+Like+and+subscribe+our+youtube+channel+armaila.gif"/></a>
</center>
<!-- HTML End -->

<a class='close' href='#'>&times;</a>
</div>
<!-- FACEBOOK MELAYANG ARMAILA -->

Note:
Ganti https://www.facebook.com/AkhirMali dengan alamat fan page facebook teman teman
Ganti http://bit.ly/SubscribeArmailaYoutubeChannel dengan channel youtube teman teman.

Demikianlah "Cara Membuat Box Facebook Fan Page Like Button Melayang dan Tombol Subsribe Youtube di Blog" semoga saja bermanfaat.

Ukuran Favicon Blogger dan Cara Membuat Icon Blog Favicon di Blogspot

Ukuran Favicon Blogger dan Cara Membuat Icon Blog Favicon di Blogspot | Blogspot telah menyediakan secara otomatis favicon untuk blogger. Namun bagi teman teman yang ingin mengganti dan membuat icon bloggernya sesuai keinginan sendiri sebagai contoh ingin logo pribadi maka bisa mencoba panduan beriku ini.

Ukuran Favicon Blogger dan Cara Membuat Icon Blog Favicon di Blogspot

Ukuran Favicon Blogger
  • Siapkan logo atau gambar berbentuk persegi (panjang dan lebar sama)
  • Rubah ukuranya dengan menggunakan aplikasi photosop menjadi ukuran maksimal 100 x 100 pixel dan ukuranya tidak boleh lebih dari 100 kb.
  • Simpan dengan format JPG, GIF, atau PNG.

Cara Membuat Icon Sendiri Secara Online

Untuk merubah ukuran photo dilakukan secara manual dengan menggunakan aplikasi photo seperti photosop atau yang lainnya. Tetapi jika tidak mau repot bisa juga mengunakan beberapa situs pembuat Favicon berikut ini :
  • http://www.favicon-generator.org/
  • http://www.genfavicon.com/
  • http://www.favicon.cc
Memasang Icon Blog Favicon di Blogspot
  1. Masuk ke halaman dasboard blogger
  2. Masuk ke halaman tata letak
  3. Klik edit pada Favicon (lihat bagian kiri atas) akan terbuka sebuah jendela baru
  4. Klik choose file / Browse /telusuri
  5. Cari tempat dimana file Favicon tadi disimpan
  6. Klik simpan
  
Favicon pada blog tidak akan langsung tampil setelah dipasang, tetapi membutuhkan waktu beberapa saat. Umumnya dalam waktu 24 jam Favicon akan tampil.

Demikianlah artikel "
Ukuran Favicon Blogger dan Cara Membuat Icon Blog Favicon di Blogspot" semoga bermanfaat.

Cara Membuat Redirect Link Mengalihkan Link Web Ke Website Lain

Cara Membuat Redirect Link Mengalihkan Link Web Ke Website Lain | Armaila Blog

redirect link cara membuat redirect link  cara redirect website  cara membuat redirect link facebook  cara redirect website ke website lain  redirect link blog  cara mengalihkan link web  cara membuat redirect link di wordpress  cara membuat redirect link html

Berikut ini langkah langkahnya:

  • 1. Pertama Login ke Akun Blog Lama.
  • 2. Lalu masuk ke Dasboard
  • 3. Pilih dan Klik template
  • 4. Lalu klik 'Edit HTML'
  • 5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script type="text/javascript">
  window.location="https://blogging.armaila.com/";
</script>
*Ganti https://blogging.armaila.com/ dengan alamat Blog Baru.

BACA JUGA: Cara Membuat Redirect Link Redirect Setelah Beberapa Detik Di Blogspot


Jika hanya ingin mengalihkan beberapa artikel saja ?  

Caranya sederhana, yaitu :
  • 1. Masih pada Dashboard Blog Lama, buka Postingan.
  • 2. Cari Artikel yang akan sobat redirect.
  • 3. Lalu Klik Edit.
  • 4. Pada tampilan jendela edit entri, klik HTML.
  • 5. copy kode di bawah ini lalu pastekan di atas artikel sobat

<script type="text/javascript">
  window.location="https://blogger.armaila.com/2018/05/cara-membuat-anti-block-artikel-bagian-postingan-saja.html";
</script>

**Ganti https://blogger.armaila.com/2018/05/cara-membuat-anti-block-artikel-bagian-postingan-saja.htmldengan alamat URL atau Link Baru. 

Cara Membuat Anti Block Artikel Bagian Postingan Saja

Cara Membuat  dan Memasang Anti Block Artikel Bagian Postingan Saja Agar Tidak Bisa DIcopas - Untuk menjaga agar artikel tidak bisa dicopy adalah dengan cara menutup akses untuk memblock artikel untuk dicopy dan paste. Kali ini Armaila akan share bagaimana Cara Membuat Anti Block Artikel Bagian Postingan Saja yang armaila terapkan di blog Neldik dengan template Sora Ribbon.

Langkah Langkah Cara Membuat Anti Block Artikel Bagian Postingan Saja

Masuk Ke Dasbor Blogger.com
Pilih Tema
Klik Edit HTML
Masuk Ke Dasbor Blogger.com  Pilih Tema  Klik Edit HTML

Copy kode script anti block berikut ini

<!-- anti blok armaila.com -->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>


Pastekan di atas kode </body>
Pastekan di atas kode </body>  Simpan tempalte teman teman  Selesai

Simpan tempalte teman teman
Selesai

Demikianlah artikel "Cara Membuat Anti Block Artikel Bagian Postingan Saja" semoga bermanfaat

Cara Memperbaiki Tanggal Undefined Template Sora Ribbon

Cara Memperbaiki Tanggal Undefined Template Sora Ribbon | Armaila Blog - Setelah sebelumnya kita memperbaiki link artikel yang tidak berwarna di postingan. Kini kita lanjutkan lagi pembahasan tentang template sora ribbon. Salah satu kendala yang armaila temukan saat menggunakan template sora ribbon adalah tanggal postingan yang tidak teratur seperti yang teman teman lihat dibawah ini.

Cara Memperbaiki Tanggal Undefined Template Sora Ribbon

Nah, Cara Memperbaiki Tanggal Undefined Template Sora Ribbon sangat lah mudah. Teman teman cukup mengatur pengaturan "Setelah Bahasa dan Pemformatan" seperti dibawah ini.

Setelah Bahasa dan Pemformatan

Selamat mencoba dan semoga berhasil.

Solusi Link di Artikel Tidak Berwarna Template Sora Ribbon

Solusi Link di Artikel Tidak Berwarna Template Sora Ribbon | Armaila Blog - Baru saja Armaila menggunakan template baru "Sora Ribbon". Namun setelah armaila terapkan ternyata link yang ada di dalam artikel tidak berwarna sama sekali. Baru warna muncul saat diarahkan kursor ke text yang bersangkutan. Tentu saja hal ini sangat merepotkan.

Setelah googling dan mencoba mencocokkan artikel yang ada maka akhirnya Armaila temukan Solusi Link di Artikel Tidak Berwarna Template Sora Ribbon tersebut.

link di artikel tidak berwarna cara merubah warna link di html  cara membuat link berwarna di html  cara mengubah warna tulisan link html

Bagi yang sudah menggunakan template ini. Silahkan tekan control + f dan ketik a {text-decoration:none;color:#000;}

Yang Armaila beri warna adalah kode warna yang harus diganti dengan warna yang teman teman sukai. Contoh akan diganti menjadi warna biru (1f3a93) sehingga menjadi seperti dibawah ini:
a {text-decoration:none;color:#1f3a93;}

Selanjutnya simpan template anda.

Berikut kode CSS Lengkap berdasarkan berdasarkan kode hexadecimal dan kode RGB. Referensi kode warna dibawah berdasarkan sumber dari w3schools yang aku tambahkan dengan kode RGB.
  
 Nama WarnaHEXRGB
 
Alice Blue#F0F8FFrgb(240, 248, 254)
 
Antique White#FAEBD7rgb(251, 235, 217)
 
Aqua#00FFFFrgb(0, 255, 254)
 
Aquamarine#7FFFD4rgb(115, 255, 216)
 
Azure#F0FFFFrgb(239, 255, 255)
 
Beige#F5F5DCrgb(245, 245, 223)
 
Bisque#FFE4C4rgb(255, 227, 200)
 
Black#000000rgb(0, 0, 0)
 
Blanched Almond#FFEBCDrgb(255, 234, 208)
 
Blue#0000FFrgb(0, 0, 255)
 
Blue Violet#8A2BE2rgb(138, 43, 226)
 
Brown#A52A2Argb(165, 42, 42)
 
Burly Wood#DEB887rgb(222, 184, 135)
 
Cadet Blue#5F9EA0rgb(95, 158, 160)
 
Chartreuse#7FFF00rgb(127, 255, 1)
 
Chocolate#D2691Ergb(210, 105, 30)
 
Coral#FF7F50rgb(251, 127, 80)
 
Cornflower Blue#6495EDrgb(100, 149, 237)
 
Cornsilk#FFF8DCrgb(225, 248, 220)
 
Crimson#DC143Crgb(220, 20, 60)
 
Cyan#00FFFFrgb(62, 254, 255)
 
Dark Blue#00008Brgb(0, 0, 139)
 
Dark Cyan#008B8Brgb(29, 139, 139)
 
Dark Golden Rod#B8860Brgb(184, 134, 11)
 
Dark Gray#A9A9A9rgb(169, 169, 169)
 
Dark Green#006400rgb(19, 100, 0)
 
Dark Khaki#BDB76Brgb(189, 183, 107)
 
Dark Magenta#8B008Brgb(139, 0, 140)
 
Dark Olive Green#556B2Frgb(85, 107, 47)
 
Dark Orange#FF8C00rgb(251, 140, 1)
 
Dark Orchid#9932CCrgb(153, 50, 204)
 
Dark Red#8B0000rgb(139, 5, 0)
 
Dark Salmon#E9967Argb(233, 150, 122)
 
Dark Sea Green#8FBC8Frgb(143, 188, 144)
 
Dark Slate Blue#483D8Brgb(72, 61, 139)
 
Dark Slate Gray#2F4F4Frgb(47, 79, 79)
 
Dark Turquoise#00CED1rgb(48, 206, 209)
 
Dark Violet#9400D3rgb(148, 0, 211)
 
Deep Pink#FF1493rgb(249, 19, 147)
 
Deep Sky Blue#00BFFFrgb(43, 191, 254)
 
Dim Gray#696969rgb(105, 105, 105)
 
Dodger Blue#1E90FFrgb(30, 144, 255)
 
Fire Brick#B22222rgb(178, 34, 33)
 
Floral White#FFFAF0rgb(255, 250, 240)
 
Forest Green#228B22rgb(34, 139, 35)
 
Fuchsia#FF00FFrgb(249, 0, 255)
 
Gainsboro#DCDCDCrgb(220, 220, 220)
 
Ghost White#F8F8FFrgb(248, 248, 255)
 
Gold#FFD700rgb(253, 215, 3)
 
Golden Rod#DAA520rgb(218, 165, 32)
 
Gray#808080rgb(128, 128, 128)
 
Green#008000rgb(27, 128, 1)
 
Green Yellow#ADFF2Frgb(173, 255, 48)
 
Honey Dew#F0FFF0rgb(240, 255, 240)
 
Hot Pink#FF69B4rgb(240, 255, 240)
 
Indian Red#CD5C5Crgb(205, 92, 92)
 
Indigo#4B0082rgb(75, 0, 130)
 
Ivory#FFFFF0rgb(255, 255, 239)
 
Khaki#F0E68Crgb(240, 230, 140)
 
Lavender#E6E6FArgb(230, 230, 250)
 
Lavender Blush#FFF0F5rgb(254, 240, 245)
 
Lawn Green#7CFC00rgb(124, 252, 2)
 
Lemon Chiffon#FFFACDrgb(255, 250, 205)
 
Light Blue#ADD8E6rgb(173, 216, 230)
 
Light Coral#F08080rgb(240, 128, 128)
 
Light Cyan#E0FFFFrgb(224, 255, 255)
 
Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)
 
Light Gray#D3D3D3rgb(211, 211, 211)
 
Light Green#90EE90rgb(144, 238, 144)
 
Light Pink#FFB6C1rgb(252, 182, 193)
 
Light Salmon#FFA07Argb(251, 160, 122)
 
Light Sea Green#20B2AArgb(40, 178, 170)
 
Light Sky Blue#87CEFArgb(135, 206, 250)
 
Light Slate Gray#778899rgb(119, 136, 153)
 
Light Steel Blue#B0C4DErgb(176, 196, 222)
 
Light Yellow#FFFFE0rgb(255, 255, 224)
 
Lime#00FF00rgb(63, 255, 0)
 
Lime Green#32CD32rgb(50, 205, 50)
 
Linen#FAF0E6rgb(250, 240, 230)
 
Magenta#FF00FFrgb(249, 0, 255)
 
Maroon#800000rgb(128, 4, 0)
 
Medium Aqua Marine#66CDAArgb(102, 205, 170)
 
Medium Blue#0000CDrgb(0, 0, 205)
 
Medium Orchid#BA55D3rgb(186, 85, 211)
 
Medium Purple#9370DBrgb(147, 112, 219)
 
Medium Sea Green#3CB371rgb(60, 179, 113)
 
Medium Slate Blue#7B68EErgb(123, 103, 238)
 
Medium Spring Green#00FA9Argb(62, 250, 153)
 
Medium Turquoise#48D1CCrgb(72, 209, 204)
 
Medium Violet Red#C71585rgb(199, 21, 133)
 
Midnight Blue#191970rgb(25, 25, 112)
 
Mint Cream#F5FFFArgb(245, 255, 250)
 
Misty Rose#FFE4E1rgb(254, 228, 225)
 
Moccasin#FFE4B5rgb(254, 228, 181)
 
Navajo White#FFDEADrgb(254, 222, 173)
 
Navy#000080rgb(0, 0, 128)
 
Old Lace#FDF5E6rgb(253, 245, 230)
 
Olive#808000rgb(128, 128, 1)
 
Olive Drab#6B8E23rgb(107, 142, 35)
 
Orange#FFA500rgb(252, 165, 3)
 
Orange Red#FF4500rgb(250, 69, 1)
 
Orchid#DA70D6rgb(218, 112, 214)
 
Pale Golden Rod#EEE8AArgb(238, 232, 170)
 
Pale Green#98FB98rgb(152, 251, 153)
 
Pale Turquoise#AFEEEErgb(175, 238, 239)
 
Pale Violet Red#DB7093rgb(219, 112, 147)
 
Papaya Whip#FFEFD5rgb(254, 239, 213)
 
Peach Puff#FFDAB9rgb(253, 218, 185)
 
Peru#CD853Frgb(205, 133, 63)
 
Pink#FFC0CBrgb(252, 192, 203)
 
Plum#DDA0DDrgb(221, 160, 221)
 
Powder Blue#B0E0E6rgb(176, 224, 230)
 
Purple#800080rgb(128, 0, 128)
 
Rebecca Purple#663399rgb(102, 51, 153)
 
Red#FF0000rgb(255, 0, 0)
 
Rosy Brown#BC8F8Frgb(188, 143, 142)
 
Royal Blue#4169E1rgb(65, 105, 225)
 
Saddle Brown#8B4513rgb(139, 69, 19)
 
Salmon#FA8072rgb(250, 128, 114)
 
Sandy Brown#F4A460rgb(244, 164, 95)
 
Sea Green#2E8B57rgb(46, 139, 87)
 
Sea Shell#FFF5EErgb(255, 245, 238)
 
Sienna#A0522Drgb(160, 82, 45)
 
Silver#C0C0C0rgb(192, 192, 192)
 
Sky Blue#87CEEBrgb(135, 206, 235)
 
Slate Blue#6A5ACDrgb(106, 90, 205)
 
Slate Gray#708090rgb(112, 128, 145)
 
Snow#FFFAFArgb(255, 250, 250)
 
Spring Green#00FF7Frgb(63, 255, 128)
 
Steel Blue#4682B4rgb(70, 130, 180)
 
Tan#D2B48Crgb(210, 180, 140)
 
Teal#008080rgb(26, 128, 127)
 
Thistle#D8BFD8rgb(216, 191, 216)
 
Tomato#FF6347rgb(250, 99, 71)
 
Turquoise#40E0D0rgb(64, 224, 208)
 
Violet#EE82EErgb(238, 130, 238)
 
Wheat#F5DEB3rgb(245, 222, 179)
 
White#FFFFFFrgb(255, 255, 255)
 
White Smoke#F5F5F5rgb(245, 245, 245)
 
Yellow#FFFF00rgb(255, 255, 0)
 
Yellow Green#9ACD32rgb(154, 205, 49)


Contoh Cara Penggunaan

Berikut cara penggunaan kode warna CSS yang benar pada sebuah kode CSS.
Kode CSS:
.warna-teks {
    color: #FF6347;     /* TOMATO */
}
Atau bisa penulisan warna dalam bentuk rgb seperti berikut:
Kode CSS:
.warna-teks {
    color: rgb(250, 99, 71);     /* TOMATO */
}
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Kode Warna CSS</title>
</head>
<body>
 <p class="warna-teks">Warna Teks Berubah</p>
</body>
</html>


Kode warna tersebut juga dapat digunakan pada kode HTML seperti berikut:
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Kode Warna CSS</title>
</head>
<body>
 <p><font color="#FF6347">Warna Teks Berubah</font></p>
</body>
</html>
Hasilnya akan seperti berikut:
Warna Teks Berubah

Atau bisa juga menggunakan inline style seperti berikut: 
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Kode Warna CSS</title>
</head>
<body>
 <p><font style="color:#FF6347">Warna Teks Berubah</font></p>
</body>
</html>

Demikianlah artikel "Solusi Link di Artikel Tidak Berwarna Template Sora Ribbon" semoga saja bermanfaat.