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

Thursday, March 8, 2018

Tools Firebug Membantu Anda Merancang Blog Pada Blogger Anda

Alat Firebug Membantu Anda Merancang Blog di Blogger Anda.

Bagi sebagian besar blogger, gagasan untuk menyesuaikan pengkodean blog mereka untuk meningkatkan pengalaman pengguna sangat menakutkan dan seringkali cukup menakutkan. HTML5, CSS, dan elemen pengkodean lainnya adalah bahasa virtual mereka sendiri dan bagi pengguna Blogger rata-rata yang ingin memperbarui blog pribadi, pengaturan otomatis hampir sama baiknya. Bagaimana jika ada cara yang lebih baik untuk kode blog, apakah seorang pemula atau pro, yang bisa dilakukan di dalam browser itu sendiri?

Jika Anda menggunakan Firefox atau Chrome, Anda juga harus menggunakan Firebug. Hal ini memungkinkan Anda untuk kode situs Anda secara real time, sehingga Anda dapat memaksimalkan UX blog Anda dalam waktu singkat sama sekali.

Anda Tidak Perlu Lagi Mengedit Melalui Blogger!

Jika Anda pernah mencoba memperbarui tema Blogger melalui fungsi pengeditan situs web, berarti Anda tahu betapa sulitnya melakukannya. Anda dapat melihat pratinjau desain Anda, namun Anda tidak dapat menyimpan perubahan untuk secara resmi melihat apa yang akan terjadi dengan situs Anda sampai Anda mempublikasikan hasil editnya. Jika Anda melewatkan satu baris kode atau melupakan satu elemen kecil, Anda harus kembali ke matriks pengeditan, temukan kesalahannya, perbarui lagi, dan ulangi sampai Anda memiliki blog yang responsif sekali lagi.

Apa Firebug yang memungkinkan Anda lakukan adalah melihat semua elemen yang membentuk sebuah situs web secara real time. Alih-alih mengedit dan kemudian menerbitkan, Anda dapat mengedit secara real time dan melihat pembaruan terjadi, semua tanpa mempengaruhi pengalaman pengguna pengunjung yang datang ke situs Anda saat Anda mengedit. Anda dapat mengubah font, warna, atau hampir hal lain dalam desain situs dengan cepat dan melihat hasil pekerjaan Anda seperti yang terjadi. Tidak suka? Batalkan perubahan anda

Ini sangat mudah.

Menggunakan Firebug untuk Menyesuaikan CSS di Blogger

Panduan ini akan menunjukkan kepada Anda bagaimana memodifikasi kode CSS dari template Blogger. Biasanya, deklarasi gaya Template Blogger CSS dapat diedit melalui file style.css, ditemukan di antara tag <b: skin> dan </ b: skin> .

Untuk mendownload Firebug dan dapatkan rincian lebih lanjut mengenai fitur canggihnya, kunjungi: Firebug untuk Firefox, atau jika Anda menggunakan Chrome, dapatkan aplikasi Firebug Lite . Saya akan merekomendasikan untuk menggunakan Firefox, yang lebih lengkap dan cepat, tapi bagaimanapun juga keduanya bekerja sama.

Setelah Firebug diinstal, ikon bug kecil akan tersedia di kanan atas bilah alamat browser Web Anda. Mengkliknya, layar terbelah horizontal akan ditampilkan di bagian bawah jendela browser. Halaman akan terus ditampilkan di bagian atas, sedangkan bagian bawahnya akan menampilkan HTML dari halaman web saat ini.

pembakar

Untuk menyesuaikan elemen web dari template Blogger, cukup klik ikon Firebug di toolbar, atau item "Periksa Elemen dengan Firebug" di menu konteks. Selanjutnya, klik tombol kursor biru untuk Memeriksa dan menempatkan kursor tepat di atas elemen yang akan disesuaikan.

Sebagai contoh, katakanlah kita ingin mengubah judul gadget "Arsip Blog". Setelah kami mengklik tombol periksa, turunkan judul "Arsip Blog" yang akan disorot seperti yang ditunjukkan pada gambar di bawah ini. Untuk mengubah elemen ini, klik di atasnya:

memeriksa elemen menggunakan pembakar

Sekarang kita memutuskan elemen mana yang ingin kita ubah, klik kanan pada panel "Style" dan pilih opsi "Add rule":

tambahkan aturan CSS di pembakar

Ini akan memberi kelas atau id elemen yang disorot - dalam kasus kami, judul Arsip Blog (# BlogArchive1> h2). Untuk mengedit aturan ini yang baru saja kita tambahkan, klik di dekat braket keriting kiri yang akan membuka kotak teks, sehingga kita bisa mengetikkan deklarasi CSS baru:

firebug css deklarasi

Dan inilah bagian yang menyenangkan. Katakanlah kita ingin membuat judul merah. Kita akan ketikkan warna dan tekan Enter, maka kita akan mengetikkan nilai warna atau teks merah dan tekan Enter. Kami juga akan mengatur ukuran font menjadi 20px, alignment teks ke center (text-align: center) dan membuat teks digarisbawahi (text-decoration: underline):

modifikasi css blogger dengan pembakar

Hal yang keren tentang Firebug adalah saat memodifikasi properti CSS apapun, Anda bisa melihat hasilnya langsung diaplikasikan pada halaman. Jadi, setelah menambahkan deklarasi ini, kami akan melihat judul bergaris merah besar untuk gadget Arsip Blog kami (lihat di gambar di atas).

Untuk menerapkan aturan CSS ini pada template Blogger, cukup pilih mulai dari braket keriting kanan dan ke simbol # (id) atau. (Kelas), lalu klik kanan dan Copy kode CSS.

copy aturan firebug css

Sebelum melakukan perubahan, sangat disarankan untuk membuat cadangan dari template Anda saat ini. Buka "Template" dan klik tombol "Backup / Restore" di sisi kanan atas. Di lokasi "Template" yang sama, klik tombol "Customize" dan arahkan ke "Advanced"> "Add CSS". Tempel aturan CSS yang baru saja Anda salin ke dalam kotak CSS:

tambahkan firebug css ke template blogger

Klik tombol "Terapkan ke blog" di pojok kanan atas untuk menyimpan perubahan dan melihat blog Anda.

Firebug juga memberi Anda satu keunggulan yang berbeda ...

Salah satu alasan terbaik untuk menginstal Firebug ke Chrome atau Firefox adalah memungkinkan Anda meniru beberapa desain situs web favorit Anda dengan cepat dan mudah. Alih-alih menyewa seorang desainer web untuk melakukan pekerjaan itu, yang bisa menghabiskan biaya ribuan, Anda bisa langsung memulai Firebug dan melihat apa gaya CSS untuk situs favorit Anda. Ini memungkinkan Anda membuat widget serupa.

Dari situlah, yang harus Anda lakukan hanyalah mengubah pengkodean untuk membuat elemen desain bekerja sesuai aturan custom.css Anda sendiri. Ini berarti Anda bisa membuat perubahan desain yang mudah ke blog Blogger Anda tanpa harus melalui semua menu dan fungsi editing sehingga template Anda bisa menjadi milik Anda sendiri. Apakah Anda memiliki beberapa pekerjaan yang harus dilakukan? Tentu - tapi Firebug melakukan semua pekerjaan utama untuk Anda.

Yang harus Anda lakukan adalah memiliki pikiran kreatif dan beberapa menit untuk membuat perubahan pada desain pengkodean. Apakah Anda pernah coding selama bertahun-tahun atau baru memulai blog pertama Anda, inilah cara terbaik untuk memastikan bahwa pengunjung Anda memiliki pengalaman terbaik!.... Terima kasih..

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 .

Tambahkan Latar Belakang yang Berbeda untuk Penulis Komentar di Blogger's Threaded Comments

Dalam tutorial ini kita akan belajar bagaimana untuk menyoroti komentar penulis sehingga mereka akan memiliki warna yang berbeda latar belakang, perbatasan, atau apapun yang membuat mereka menonjol dari yang lain. Untuk mencapai hal ini, kita perlu menambahkan kode dalam template Blogger dan memodifikasi gaya sesuai dengan preferensi kita.
blogger trik, komentar blogger
  

Bagaimana untuk menyoroti komentar penulis di Blogger:

Langkah 1. Masuk ke Template, klik Edit HTML

blogger ulir komentar, menyesuaikan komentar blogger

Langkah 2. Klik di mana saja di dalam area kode dan mencoba untuk menemukan - menggunakan tombol CTRL + F - tag ini:
</ Body>
screenshot:
blogger komentar, trik blogger

Langkah 3. Tepat di atas itu, paste kode berikut:
<Script src = 'http: //code.jquery.com/jquery-latest.js'/>
<Script>
$ (Function () {
Fungsi sorot () {
$ ( 'User.blog-penulis). Terdekat ('. Komentar-blok')
Css ( 'perbatasan', ' 1px solid # FFA500 ')
Css ( 'background', ' # F1F1F2 url ( " http://www.blogblog.com/1kt/transparent/white80.png ")')
Css ( 'warna', ' # 444444 ')
Css ( 'font-size', ' 12px ')
Css ( 'bantalan', '10px');
}
$ (Document) .bind ( 'siap scroll klik', sorot);
});
</ Script>

Menyesuaikan Penulis Komentar:


Berbatasan:
Garis ditandai orange mewakili gaya perbatasan ini.
Apa yang bisa dilakukan:
  • 1px - Anda dapat meningkatkan nilai untuk mengubah ketebalan perbatasan ini
  • padat - mengubah gaya perbatasan untuk putus-putus , putus-putus, inset, awal dll
  • # FFA500 - ini adalah nilai warna perbatasan ini, mengubahnya dengan warna Anda sendiri
Latar Belakang:
Garis ditandai dengan warna biru mewakili gaya latar belakang ini. Anda dapat menggunakan warna polos atau gambar. Secara default ada kombinasi keduanya (gambar transparan putih dengan warna polos abu-abu).
Untuk mengubah / menambahkan:
  • warna yang berbeda: ganti # F1F1F2 nilai dengan Anda sendiri (menggunakan alat ini untuk menemukan kode hex warna yang Anda inginkan)
  • gambar: mengganti defaul url http://www.blogblog.com/1kt/transparent/white80.png dengan itu gambar Anda

Warna huruf:
Untuk mengubah warna font, ganti nilai # 444444 warna hijau dengan Anda sendiri. (Anda dapat menggunakan alat ini untuk menemukan kode hex warna yang Anda inginkan)

Ukuran huruf:
Mengubah nilai merah dengan meningkatkan / menurunkan "12" value untuk mengubah ukuran teks.

Langkah 4. Sekarang Simpan Template Anda.

Untuk menyesuaikan seluruh gaya komentar threaded, silakan cek tutorial saya sebelumnya tentang Cara Customize Latar Belakang Komentar ini, Font Color dan Border di Blogger.