TIGA ANGGAPAN KELIRU PADA SAAT UPDATE TEMPLATE BLOGGER DAN CARA MENGGUNAKAN CSS

Diposting Oleh:
CSS power
CSS illustration by Lynda.com
Update dalam bentuk apa saja: Membuat konten atau mengedit template blog, berdasarkan pengalaman pribadi sih. Ada beberapa kesalahan fahaman yang sering tidak kita sadari pada saat blogging, terutama pada saat membuat konten dan mengedit template blogger.

Kesalah fahaman pertama: Meletakan CSS ke dalam HTML itu sulit.

 Pada halaman editor HTML blogger kita sering mendapatkan tutorial agar menempatkan CSS di atas kode ]]></b:skin> memang benar, akan tetapi penempatan css ini sebenarnya melalui beberapa cara:

1. Meletakan CSS diatas ]]></b:skin> contoh :
div#ContactForm1 {
display: none !important;
}

]]></b:skin>
2. Meletakan CSS diatas penutup tag </head> contoh:
<style>div#ContactForm1 {display: none !important;}</style>
</head>
Catatan: CSS yang diletakan diatas </head> harus dibuka dengan  <style> dan di tutup dengan tag </style> saran penempatannya biasanya di dalam HTML adalah, letakan CSS berikut di atas </style> atau di bawah kode CSS lainnya di dalam tag <head>.

Dimanakah sesungguhnya paling baik untuk meletakan CSS? Ada yang berpendapat sebaiknya di atas kode </style> atau di atas </head> tadi. Sebenarnya tergantung, terkadang kondisi tertentu HMTL membuat CSS tidak bekerja pada saat di letakan di atas ]]></b:skin> sebaliknya baru bekerja pada saat di letakan di atas </style>. Namun untuk menyederhanakan template CSS memang di letakan di atas ]]></b:skin>

Sesungguhnya memasang CSS ke dalam template blogger itu sangat mudah!

Akan tetapi jika kalian di sarankan memasukan kode CSS ke dalam template blog dan tidak ingin melakukan pengeditan HTML, cukup melalui cara berikut:
  • Masuk ke pengaturan Blogger atau Dasbor blogger.
  • Pilih Tema
  • pengaturan dasbor blogger
    Pengaturan/Dasbor blogger
  • Pada menu Blogger Theme Designer yang muncul dengan beberapa pilihan, scroll keatas hingga bagian paling bawah yakni menu "Add CSS" atau "Tambahkan CSS" klik dan setelah itu akan muncul kotak CSS.
Meletakan CSS di dalam kotak CSS
melatakan CSS ke dalam kotak CSS
  • Copy kode CSS yang di inginkan untuk membentuk HTML, pastekan ke dalam kotak tadi. Kalian harus tahu dengan mempastekan kode CSS ke dalam kotak CSS, sama saja kalian menempatkan kode CSS di atas ]]></b:skin> melalui Edit HTML.
  • Save template. Karena langkah selanjutnya mungkin kalian harus memasang widget tertentu yang terkait dengan kode CSS yang telah kalian pasang di atas
Namun harus di perhatikan, memasang CSS melalui kotak CSS pada pengaturan Blogger Theme Designer diatas harus murni CSS dalam bentuk contoh:
div#ContactForm1 {display: none !important;
Mengapa? karena meletakan CSS ke dalam kotak CSS, berarti menempatkan CSS tersebut ke dalam template HTML dengan posisi diatas ]]></b:skin>. Tidak boleh di sertakan dengan <style> dan </style> seperti ini:
 <style>div#ContactForm1 {display: none !important;
}</style>
Karena jika kalian letakan kode CSS dengan kode  pembuka dan penutup tersebut maka di atas header blog atau tepatnya diatas navbar (menu navigasi) akan tersisa dan muncul kode yang mengganggu, dalam bentuk tanda: => atau -->

Jadi sekarang saya harap kalian dapat mengerti.

Kesalah fahaman kedua: Menghapus konten lama.

Ada masanya kalian tidak menginginkan lagi sebuah konten, artikel atau postingan lama yang ada di halaman blog kalian. Jangan di hapus! Tetapi di edit. Dengan menghapus kalian akan kehilangan link apalagi jika postingan tersebut telah di kunjungi beribu ribu orang sejak bertahun tahun. Saya memiliki pengalaman buruk ketika pengunjung terpental karena masih mendapatkan Judul postingan blog yang telah saya hapus di pencarian Google dan ketika mereka klik, konten tersebut tidak ada. Padahal konten itu telah di baca hampir 100 ribu kali selama 11, 5 bulan! Apa yang terjadi selanjutnya? Sebagian mereka berkomentar sangat buruk.
hapus postingan lama?
hapus postingan lama?
Tentu saja kita bisa menghapusnya secara permanen dan menghilangkannya dari kotak penelusuran di internet, akan tetapi yang saya maksudkan adalah alangkan lebih baik jika konten tersebut di edit dan di sesuaikan dengan kebutuhan agar penempatannya yang sudah tinggi di mesin pencari tetap terjaga atau malah lebih di tingkatkan. Namun jika tidak ingin berpengaruh buruk terhadap SEO berhati hatilah!

Saya memiliki sebuah artikel dengan isi yang sedikit berbeda daripada aslinya beberapa tahun yang lalu, namun lebih lengkap dan lebih up to date. Hasilnya sungguh menggembirakan pengunjung merasa mendapatkan kemudahan dan manfaat dari informasi yang telah saya berikan. Walhasil Blog saya dapat menempus ranking Alexa ke 600 ribuan dalam beberapa bulan, ranking Alexa penting untuk parameter bisnis, pada saat saya memasang iklan dari Amazon (sama halnya seperti adsense, saya melepasnya karena pertimbangan yang menurut saya lebih baik).

Sebaiknya konten lama jangan di hapus, kecuali kalau ia masih dalam bentuk draft.

Kesalah fahaman ke tiga: Pengertian Javascript dan penempatannya

Benar jika ia adalah kode js untuk membuat elemen seperti tombol perintah ke dalam HTML. Namun tidak jika ia adalah script link elemen dari pihak ke tiga misalnya pemasangan ikon font awsome. Kekeliruan para pemula adalah pada saat mengenali kode javascript dengan tanda di mulai dengan <script> dan di akhiri dengan </script> di dalam template blogger.

Perhatikan kode Javascript berikut:
<!DOCTYPE html>
<html>
<body>


<h2>Contoh Javascript</h2><p id="demo"></p><button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript inilah saya!'">Klik saya!</button>
</body>
</html>
Dan lihat hasil dari kode Js diatas, coba klik tombol di bawah ini:

Contoh Javascript



Di dalam template Javascript memang ditandai dengan <script> ....</script> dan letaknya memang di atas </body> seperti contoh diatas.

Akan tetapi jika ia dalam bentuk HTML-DOM untuk merubah style di dalam HTML, misalkan warna font, maka dia bisa berbentuk seperti kode yang kita sebutkan diatas menggunakan
<script> dan </script>:
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger";</script>
</body>
</html>
Di dalam template HTML pragraf diatas warna birunya memang di rubah melalui script. Itu adalah aturannya. Dan letaknya bisa di atas penutup tag </head> atau di dalam HTML.

Jadi Javascript memang di letakan di atas tag penutup </body> namun dalam beberapa kasus khusus mengikuti fungsinya JS dapat di tempatkan di mana saja di dalam template.

Baca Juga:

Komentar

  1. Template blogku apa adanya
    Jika ditambah CSS/HTML ga muncul

    Mau ganti template malah PR nya dari 3 turun jadi satu :D

    BalasHapus
    Balasan
    1. Menambah elemen dan mengganti template adalah dua hal yang berbeda, menambahkan CSS pada template untuk menambahkan elemen dan widget tidak berpengaruh pada PR.

      Setiap template akan berubah asalkan kode kode HTML_CSS diletakan dengan benar.

      Hapus
  2. Iya, konten-konten lama ane gak bakal dihapus (kecuali yang udah terlanjur dan ada alasan-alasan tertentu buat dihapus :v), karena ane yakin pasti jadi manfaat buat orang lain, meskipun cuma menghibur :D.

    BalasHapus
  3. Blognya makin keren banget👍
    Karena saya agak tertarik dengan coding atau html atau apalah itu, jadi saya bacanya agak serius, walaupun masih banyak nggak pahamnya😁
    Sempet beberapa waktu lalu coba belajar. Menarik ya, tapi belum ada waktu lagi.

    BalasHapus
  4. Saya pernah mengubah url artikel Mas, eeee...pas Di kelik , terjadi error, disanalah saya ngak mau hapus artikel, paling - paling disimpan saja di Draf.

    Kalau artikelnya cuma disimpan di draf, malahan akan membuat error juga yah Mas...

    BalasHapus
    Balasan
    1. Artikel yang di rubah menjadi draft tidak akan kebaca lagi oleh mesin telusur, berakibat sama dengan di hapus. Namun tentu saja karena dia hanya menjadi draft akan dapat di kembalikan lagi dengan mudah ke jalur link nya

      Hapus
  5. Min...request cara pasang amp ke blogger dobg

    BalasHapus
    Balasan
    1. kami telah membuat postingan perihal AMP termasuk trik penerapannya di dalam blog ini satu tahun yang lalu..

      Hapus

Posting Komentar

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose compose view contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Downoad Notable simple yang pas buat blog curhat

Download Update Template Blogger Notable simple versi kedua