Funkysst.com: css
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Sunday, March 4, 2018

Cara Menyusun Blogger CSS dan File JavaScript di Google Drive

Cara Menyusun Blogger CSS dan File JavaScript di Google Drive

Siapa pun yang pernah mengerjakan desain atau pengembangan web dapat memberi tahu Anda bahwa di mana Anda memutuskan untuk menyimpan file Anda penting. Setiap kali seseorang mengunjungi situs Anda, server atau host akan mengakses lokasi ini dan menampilkan file yang relevan yang perlu ditampilkan. Dimanapun Anda memutuskan untuk menyimpan file Anda, ini akan berdampak pada beberapa aspek penting seperti kecepatan konten situs Anda, keseluruhan peringkat SEO dan kemampuan Anda untuk melakukan penyesuaian yang diperlukan pada situs.

Hal yang Harus Dipikirkan

Saat merancang struktur online dan tempat menyimpan file CSS dan JavaScript penting, berikut adalah petunjuk tentang bagaimana keputusan ini memengaruhi situs Anda nanti:

Kecepatan Pemuatan Situs

Dengan menggabungkan beberapa lembar gaya dan file situs web, server Blogger hanya harus mengumpulkan informasi dari satu lokasi. Ketika Anda membagi file Anda atau mendesentralisasi sistem file, dibutuhkan waktu yang lebih lama untuk semua data agar digabungkan agar situs Anda menjadi mungkin.

Kecepatan pemuatan yang lambat dapat berdampak negatif pada peringkat SEO Anda karena semakin lambat situs ini, semakin kecil kemungkinan pengunjung akan menunggu untuk memuatnya. Jika seseorang mengunjungi situs Anda dan langsung mengeklik tombol 'balik' karena terlalu lama memuat, itu akan meningkatkan rasio pentalan Anda dan memberi Google statistik yang menunjukkan bahwa situs Anda berkualitas rendah atau tidak relevan dengan kata kunci pencarian.

Penyimpanan File Mempengaruhi SEO

Selain meningkatkan rasio pentalan Anda, menyimpan file Anda di lokasi sentral dan mengelola nama file Anda dapat mempengaruhi situs SEO secara luas. Perayap web yang terdaftar oleh Google, atau beberapa mesin telusur lainnya, mengindeks kode di situs Anda, dan nama dan direktori file Anda. Jika nama file acak atau tidak ditempatkan dalam kategori yang tepat, perayap web tidak akan tahu apa yang harus dilakukan dengan informasinya.

Struktur file yang jelas dan lokasi sentral memberi Anda insentif untuk mengatur semuanya dan memberi nama mereka dengan tepat. Semua konten yang relevan dengan subjek situs web atau blog Anda akan berada di lokasi yang sama dengan perayap web untuk ditinjau.

Lokasi Penyimpanan Mempengaruhi Kemampuan Mengedit

Mengacak file dan folder atau membuka koneksi FTP hanya untuk membuat beberapa suntingan sederhana bisa menjadi masalah, dan menghabiskan banyak waktu yang seharusnya bisa dihabiskan untuk menulis konten baru.

Jika Anda adalah pemilik situs Blogger, ini adalah sesuatu yang perlu dipikirkan. Bila Anda perlu melakukan perubahan pada hal-hal seperti tombol berbagi media sosial, posting populer, posting terbaru dan widget posting terkait, Anda harus tahu di mana segala sesuatu dimaksudkan untuk pergi, atau berisiko kehilangan konten dan uang yang tersedia.

Beberapa situs besar yang menghasilkan ratusan artikel unik setiap bulan tidak mampu memiliki konten di lokasi yang berbeda. Ketika artikel mulai tersesat rusak, mereka berisiko menduplikasi konten di situs mereka, atau lupa mengeposkannya sama sekali. Hal-hal yang harus benar di ujung jari Anda untuk meminimalkan kesalahan dan mengurangi jumlah waktu yang dihabiskan untuk mengedit situs saat masih hidup.

Menyimpan File Javascript / CSS Dengan Google Drive

Menyimpan file CSS dan JavaScript Blogger dengan Google Drive akan membantu menghilangkan semua masalah yang disebutkan di atas dan mengurangi kekacauan di antara layanan Anda. Mengambil metode ini dapat meningkatkan kecepatan situs Anda, meningkatkan peluang untuk kampanye SEO yang sukses, dan membuat hidup Anda jauh lebih mudah.

Google Drive menyediakan banyak ruang untuk menyimpan file berukuran besar, dan menawarkan layanan kolaborasi sehingga Anda dapat bekerja di antara anggota tim yang berbeda pada proyek yang sama. Beberapa file yang Anda unggah ke layanan awan tetap tidak dipublikasikan dan tetap berada di dalam situs pribadi, sedangkan file lain seperti entri blog dapat dipublikasikan atau disimpan ke situs umum.

Fitur lain yang menguntungkan untuk menyimpan semua file Blogger Anda di Google Drive adalah sangat aman. Google hadir dengan dukungan salah satu perusahaan terkemuka di dunia teknis sehingga Anda dapat yakin konten Anda aman dari peretas dan mereka yang ingin kompromi dengan situs Anda.

Panduan ini akan memberi Anda petunjuk langkah-demi-langkah tentang cara men-setup situs Blogger Anda menggunakan Google Drive. Ini benar-benar bebas untuk memanfaatkan strategi ini, dan akan memberi Anda platform yang solid untuk membangun blog Anda.
host blogger css file javascript

Langkah 1. Siapkan CSS / JavaScript Files

  • Pertama, kita perlu membuat file yang kita butuhkan untuk host. Untuk meng-host file CSS, buka Notepad dan tempelkan kode CSS (jika disertakan dalam tag <style> dan </ style>, lepaskan mereka). 
  • Di menu Notepad, pilih 'File'> 'Save as' dan ketik nama file dengan ekstensi .css seperti yang saya lakukan dengan mycssfile.css - lihat gambar di bawah ini.
buat file css
  • Di jendela yang sama, pilih "Semua file" di opsi "Simpan sebagai jenis" dan setel Character Encoding ke UTF-8.
  • Jika Anda ingin meng-host file JavaScript, tambahkan ekstensi .js (bukan .css) di akhir nama file Anda (hapus tag <script> ... </ script> jika Anda melihatnya). Klik "Simpan" dan arahkan ke lokasi di mana Anda ingin menyimpan file.

Langkah 2. Upload File Anda di Google Drive

  • Akses https://drive.google.com dan login dengan akun Gmail Anda. Setelah masuk, klik tombol 'Buat' dan tambahkan folder terpisah yang baru untuk mengunggah file JavaScript dan CSS Anda.
buat folder di drive Google
  • Buka folder yang baru dibuat, dan klik tombol Upload dengan panah ke atas untuk memilih file yang perlu diupload.
upload file menggunakan google drive
  • Sekarang, arahkan ke lokasi di mana Anda menyimpan file, pilih mereka (untuk memilih beberapa file, tekan dan tahan tombol Ctrl di keyboard Anda lalu klik pada mereka) dan tekan tombol Open.
  • Setelah file berhasil diunggah, klik kanan pada nama file (untuk memilih semua file Anda di dalam folder, klik pada kotak centang) dan pilih 'Share':
berbagi file google drive
  • Di jendela 'Sharing settings', klik pada link 'Change' dan pilih opsi 'Public on the web'. Tekan 'Save' dan salin link dari file yang Anda upload dari kotak 'Links to share' yang disorot dengan warna biru, lalu tempelkan ke Notepad untuk menggunakannya nanti.
javascript css file sharing

Langkah 3. Cara Menambahkan file CSS / JavaScript Eksternal ke Blogger

Sebelum dapat menggunakan tautan, Anda harus mengganti ' https://drive.google.com/file/d ' ke ' https://googledrive.com/host ' dan hapus ' / edit? Usp = sharing ' di tautan .

Misalnya, link ke mycssfile.css yang saya salin terlihat seperti ini:
https://drive.google.com/file/d/ 0B4n9GL3eVuV-TkphMkc3SFR2Slk / edit? usp = sharing
Perhatikan bagian berwarna biru setelah bagian "/ file / d /". Itu adalah ID file yang digunakan untuk mengaksesnya melalui layanan hosting baru. Ini harus dimulai dengan URL berikut:
https://googledrive.com/host/
Tambahkan file ID seperti ini (hapus '/ edit? usp = sharing 'part):
https://googledrive.com/host/ 0B4n9GL3eVuV-TkphMkc3SFR2Slk
Sekarang masuk ke akun Blogger Anda, pilih blog Anda dan pergi ke Template> Edit HTML. Klik di manapun di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian:

buka kotak pencarian blogger

Jika Anda ingin menambahkan file CSS, ketik tag berikut di dalam kotak pencarian dan tekan Enter untuk menemukannya:
<head>
Hanya DI BAWAH tag <head>, tambahkan baris ini:
<link rel = "stylesheet" type = "text / css" href = " https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk " />
Dan ganti https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk dengan link file CSS Anda:

tambahkan css eksternal ke blogger

Jika Anda ingin menambahkan file Javascript, cari tag berikut ini:
</ body>
Dan tambahkan baris ini hanya di atasnya:
<script src = ' https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg ' type = 'text / javascript'> </ script>
Ganti garis biru dengan URL Anda:

tambahkan js javascript eksternal ke blogger

Terakhir, tekan tombol 'Simpan template' untuk menyimpan perubahan. Dan kau sudah selesai!

Kesimpulannya

Setelah Anda menyimpan semua folder file dan menutup drive, buka situs Anda di browser dan pastikan semua perubahan telah selesai dengan sukses.

Lain kali jika Anda ingin mengedit informasi atau memindahkan file internal, yang harus Anda lakukan adalah membuka folder Google Drive di akun Anda dan melakukan modifikasi dari lokasi itu. File-file tersebut kemudian akan secara otomatis melakukan sinkronisasi ke folder online dan melakukan update ke situs Anda. Ini bekerja sama jika Anda ingin mengubah tampilannya dengan memodifikasi kode CSS untuk memperpanjang header, footer, atau membuat customizations.

Seperti yang dapat Anda lihat, mengubah penyimpanan file Anda jadi CSS dan JavaScript yang tersimpan di akun Google Drive Anda mudah dilakukan dan hanya membutuhkan waktu beberapa menit. Setelah Anda melakukan perubahan, Anda dapat mulai mendapatkan keuntungan dari kecepatan pemuatan yang lebih cepat, peringkat SEO yang lebih tinggi, dan keseluruhan platform yang lebih nyaman untuk dikerjakan daripada meningkatkan efisiensi pekerjaan Anda.

Friday, February 23, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 2

.saya telah menyebutkan bahwa kita akan belajar tentang bagaimana membuat gambar membulat menggunakan CSS, tanpa perlu mengeditnya satu per satu menggunakan sebuah program. Sekarang setelah kita melihat dasar-dasar CSS, mari kita coba aplikasikan pada beberapa gambar

Apa yang akan kita lakukan dalam tutorial ini adalah mengupload gambar (HTML) dan kemudian menambahkan beberapa aturan di stylesheet yang akan mengubah bentuk luarnya agar terlihat seperti lingkaran ... atau, paling tidak, untuk tampil bulat. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.

Sebenarnya, kita bisa menerapkan efek ini ke gambar apapun, ke bagian tertentu dari blog kita atau ke semua gambar yang ada di blog kita. Hal ini tergantung selera Anda.

Menandai HTML

Tentunya, hal pertama yang perlu kita lakukan agar bisa mengatur border yang membulat di sekitar gambar adalah mendapatkan gambar dan mengunggahnya untuk mendapatkan struktur html. Kode itu bisa sedikit lebih rumit, tapi gambar dibuat dengan tag img , yang pada dasarnya, terlihat seperti ini:
<img src = " image_URL " />
Screenshot :



Menambahkan kode ini di dalam HTML pos dengan url gambar kita - alih-alih teks dengan warna biru - kita akan dapat menampilkannya seperti gambar ini di sebelah kiri.

Biasanya, mungkin juga berisi teks alt , dan terkadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar dan / atau tinggi tertentu). Saat mengunggah gambar menggunakan editor posting Blogger, kode tersebut juga memiliki tautan yang mengarah ke gambar asli.

Tapi jika kita ingin memodifikasi gambar ini dengan menggunakan CSS, kita perlu menambahkan pemilih kelas. Kita dapat menambahkannya dalam dua cara: dalam tag img atau dalam kotak induk. Nama yang telah saya pilih untuk pemilih gambar adalah roundedcorners , namun Anda dapat menambahkan nama yang Anda inginkan:
<img class = " roundedcorners " src = " image_URL " />


<div class = " roundedcorners ">
<img src = " image_URL " />
</ div>

Menerapkan gaya ke semua elemen homogen

Tapi pemilih itu saja tidak akan melakukan sesuatu yang istimewa. Ini perlu dikaitkan dengan peraturan gaya yang mengatakan apa yang harus dilakukan dengannya. Sama jika bila kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, tampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk semua gambar di blog kita, inilah yang harus kita tambahkan ke CSS kita:
img {
border: 2px solid # BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}
Dan bagaimana ini diterjemahkan ke browser Anda?

Cari gambar dengan tag nama ( img ) dan terapkan gaya berikut:
  • batas hijau solid 2 piksel
  • atur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) menjadi nol
  • Terapkan sudut bulat ke keempat penjuru
Sekarang kita memiliki peraturan ini di lembar gaya kita sendiri, kita akan dapat melihat gambar yang kita inginkan - lihatlah gambar di sebelah kanan.

Untuk menyatakan sebuah properti dengan benar, kita perlu tahu apa yang dilakukannya dan bagaimana cara menulisnya - rincian yang dapat ditemukan di seluruh internet, walaupun W3C adalah otoritas dalam hal ini.

Misalnya, properti border-radius pada awalnya membutuhkan empat (4) nilai pembacaan dari kiri ke kanan, yang mewakili kebalikan dari sudut kiri atas, kanan atas, kanan bawah dan kiri bawah. Jika Anda menambahkan satu nilai, itu akan membuat keempat sudut menjadi sama dengan nilai itu.

Penting untuk disebutkan bahwa bila nilai batas melebihi dimensi wadah, perbatasan ini akan menciptakan lingkaran.

Bagaimana menerapkan gaya yang sama pada t ia unsur t ia s kontainer ame

Terkadang, kita tidak ingin semua gambar di blog kita menjadi bulat, tapi hanya yang kita pilih, jika tidak menambahkan gaya di atas dalam head tag akan membuat semua gambar berbentuk seperti ini. Sebelumnya, kami menggunakan tag HTML ( img ) dan bukan pemilih dan, untuk alasan ini, gaya akan memengaruhi semua gambar kami.
Untuk menghindarinya, kita bisa melakukan salah satu hal yang kita lihat di awal posting ini dan itu adalah untuk menempatkan gambar di dalam sebuah div dengan kelas roundedcorners . Dengan cara ini, hanya gambar dalam wadah dengan kelas itu yang akan terpengaruh oleh aturan yang akan membuat mereka berputar.
<div class = " roundedcorners "> <img src = " image_URL " /> </ div>
Tapi aturannya seharusnya tidak mempengaruhi img tag secara langsung, tapi pemilih roundedcorners . Dalam hal ini, Anda harus menuliskannya seperti ini:
.roundedcorners img {
border: 2px solid # BADA55;
....
}
Ini menyiratkan bahwa gaya ini hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.

Kata akhir

Untuk mengakhiri tutorial ini untuk membuat gambar dengan batas yang membulat, perlu diingat bahwa jika ini tidak persegi, alih-alih menjadi lingkaran, mereka akan terlihat oval:


Untuk memperbaiki ini kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam piksel) untuk memaksa cropping gambar dan membuatnya tampak sempurna melingkar. Itu saja!

Jika anda senang membaca blog ini, silahkan share dan berlangganan. Untuk pertanyaan apa pun, turunkan komentar di bawah;)

Thursday, February 8, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 1

Tutorial ini akan menjelaskan bagaimana mengubah perbatasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya bulat, tapi ini begitu mudah melakukan hal ini, bahwa aku akhirnya akan membuat posting ini untuk tujuan lain.
sudut bulat, trik css, trik blogger, desain blogger
Trik hari ini bahwa saya akan mempublikasikan dalam dua bagian adalah untuk membantu Anda untuk memahami, setidaknya, sedikit dari apa CSS (Cascading Style Sheets) adalah.

Bagi mereka yang ingin mempelajari lebih lanjut, silakan lihat di link ini dan bagi mereka yang benar-benar ingin belajar secara menyeluruh, saya sarankan untuk mengunjungi situs ini .

Pengantar dan terminologi

style sheet bertujuan untuk membantu memilah apa struktur dari sebuah situs web dan yang formatnya atau penampilan. Jadi, model kotak CSS adalah, pada dasarnya, sebuah kotak yang membungkus di sekitar elemen HTML, dan menentukan bagaimana kotak-kotak disajikan dalam hal warna, font, lebar, latar belakang dll

Keuntungannya adalah bahwa, kapan saja kita memutuskan untuk mengubah sesuatu, kita tidak harus mengubah semua halaman satu per satu, tetapi hanya, mengubah properti dari style sheet dan modifikasi ini secara otomatis akan berlaku di semua halaman.

Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. Pemilih yang akan digunakan sebagai nama panggilan atau nama dari apa yang Anda ingin mengkonfigurasi dari style sheet dan berlaku untuk HTML, dan deklarasi adalah properti yang kita menambahkan nilai-nilai yang diinginkan (informasi lebih lanjut tentang sintaks CSS )

Menambahkan pemilih CSS

Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya kami, kami mungkin tidak melihat apa-apa terjadi khususnya di website kami. Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS sehingga, jika kita ingin kotak untuk mengambil nilai-nilai ini untuk lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:
<div class = " SelectorName "> Teks disini </ div>
Di sini kita menambahkan aturan memberitahu browser untuk menafsirkan bahwa kotak ini harus menjadi dari jenis tertentu atau kelas . Ini kelas atau pemilih bisa memiliki beberapa sifat tertentu dan nilai-nilai yang didefinisikan dalam style sheet, seperti yang Anda lihat pada gambar di atas.

Sekarang mari kita lihat bagaimana ini akan mengubah tampilan kotak, sementara semua yang lain yang tidak memiliki   nama SelectorName akan mengikuti tampilan standar.

Pada dasarnya, ketika kita menambahkan sebuah aturan dalam style sheet, atau memodifikasi yang sudah ada, apa yang terjadi adalah bahwa semua kotak yang ditandai dengan pemilih itu akan mengubah penampilan mereka sesuai dengan properti dan nilai yang telah kita definisikan di style sheet.


Dimana menambahkan style CSS

Gaya ini dapat ditambahkan dalam file CSS eksternal - buat file CSS dengan semua aturan, upload di situs hosting dan dapatkan URL dari file tersebut. Untuk memanfaatkannya, sertakan baris berikut di header template Anda. Untuk Blogger, Anda bisa menambahkannya di antara <head> dan <b: skin> <! [CDATA [/ * :
<link href = " syle.css "rel =" stylesheet" type = "text / css" />
Catatan: mengganti teks warna biru dengan url dari file CSS.

Anda juga dapat menambahkan gaya langsung dalam HTML template dengan menambahkan CSS antara tag gaya:
<Style>
. SelectorName {
background-color: #EAEAEA;
border: 1px solid # 444444;
width: 200px;
font-size: 12px;
}
</ Style>
Hal ini dapat ditambahkan dalam HTML dari elemen halaman juga. Dalam hal ini, Anda tidak perlu menambah pemilih apapun untuk menunjukkan di mana gaya CSS adalah:
<div style = " background-color: #EAEAEA ; border: 1px solid # 444444; width: 200px; font-size: 12px; "> Teks disini </ div>
Di Blogger, aturan antara <b: skin> <! [CDATA [/ * dan ]]> </ b: skin> tag kulit. Jika kita mengakses HTML template kita, kita akan menemukan sekelompok kode di antara tag ini, yang sebenarnya adalah styling CSS yang mendefinisikan tampilan blog kita.

Bagi mereka yang tidak ingin menyentuh kode template, kita dapat menambahkan CSS langsung dengan pergi ke desainer Blogger Template> Lanjutan > Tambah CSS .


Itu cukup untuk hari ini. Dalam tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS -> cara mengatur batas bulat di sekitar gambar menggunakan CSS .