Funkysst.com: Blog Design
Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. 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, March 2, 2018

Orbit - jQuery Image Slider Plugin Untuk Blogger

Tutorial ini akan menunjukkan cara menambahkan slider gambar cantik lainnya untuk Blogger / BlogSpot yang dibuat dengan jQuery dan, tentu saja, dengan HTML dan CSS. Slider ini, yang disebut Orbit, adalah plugin jQuery ringan yang akan menampilkan banyak gambar dalam ruang terbatas menggunakan panah navigasi (tombol sebelumnya-berikutnya). Di bagian kiri atas Orbit slideshow, kita memiliki beberapa ikon peluru kecil yang menunjukkan gambar saat ini yang sedang kita lihat dan, di sisi kanan atas, adalah pilihan jeda dan penghitung waktu yang memberi tahu kita kapan gambar berikutnya akan ditampilkan.

Jika Anda ingin melihat slider gambar keren ini beraksi, kunjungi blog demo ini:


gambar slider, slideshow, jquery


Markup HTML cukup bersih, hanya elemen yang membungkus beberapa gambar tempat teks dibuat dari tag rentang gambar ini.

Cara Menambahkan Slider Gambar Orbit ke Blogger

Langkah 1. Dari Dasbor Blogger Anda, buka Template> Edit HTML> klik di manapun di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian blogger. Tempelkan atau ketik tag di bawah di dalam kotak telusur dan tekan Enter untuk menemukannya.
</ head>

Langkah 2. Tepat di atas </ head> tambahkan script berikut ini:

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

<! - [jika IE]>
<style type = "text / css">
.timer {display: none! important; }
div.caption {background: transparan; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 99000000, endColorstr = # 99000000); zoom: 1; }
</ style>
<! [endif] ->

<script type = 'text / javascript'>
$ (window) .load (fungsi () {
$ (# #; # Fitur & # 39;) orbit ({
advanceSpeed: 5000,
Bullet & # 39 ;: benar,
& # 39; timer & # 39; : benar,
& # 39; animasi & # 39; : & # 39; horizontal-slide & # 39;
});
});
</ script>

<script type = 'text / javascript'>
// <! [CDATA [
/ *
* Plugin Orbit jQuery 1.1
* www.ZURB.com/playground
* Hak Cipta 2010, ZURB
Bebas digunakan di bawah lisensi MIT.
* http://www.opensource.org/licenses/mit-license.php
* /

(fungsi (e) {e.fn.orbit = fungsi (a) {a = e.extend ({animation: "fade", animationSpeed: 800, advanceSpeed: 4E3, startClockOnMouseOut: true, startClockOnMouseOutAfter: 3E3, directionalNav: true, Teks: true, captionAnimationSpeed: 800, timer: false, bullets: false}, a); return this.each (function () {function m (c) {function g () {f.eq (h) .css ({ "z-index": 1}); s = false} var h = b, k = c; if (h == k) return false; if (! s) {s = true; if (c == "next else if (b == n) b = 0) else if (c == "prev") {b -; if (b <0) b = n-1} else {b = c; if (h <b) k = "next"; else if (h> b) k = "prev"} a.bullet & &
x (); if (a.animation == "fade") {f.eq (h) .css ({"z-index": 2}); f.eq (b) .css ({opacity: 0, "z-index": 3}) bernyawa ({opacity: 1}, a.animationSpeed, g); a.captions && o ()} if (a.animation == "horizontal-slide") {f.eq (h ) .css ({"z-index": 2}); k == "next" && f.eq (b) .css ({left: t, "z-index": 3}) bernyawa ({left: 0}, a.animationSpeed, g); k == "prev" && f.eq (b) .css ({left: -t, "z-index": 3}) bernyawa ({left: 0}, a .jimationSpeed, g); a.captions && o ()} if (a.animation == "vertical-slide") {f.eq (h) .css ({"z-index": 2}); k == " prev "&& f.eq (b) .css ({top: u," z-index ": 3}) bernyawa ({top: 0},
a.animationSpeed, g); k == "next" && f.eq (b) .css ({top: -u, "z-index": 3}) bernyawa ({top: 0}, a.animationSpeed, g); a.captions && o ()}}} var b = 0, n = 0, t, u, s, d = e (this) .addClass ("orbit"), f = d.find ("img, a img "); f.each (fungsi () {var c = e (ini), g = c.width (); c = c.height (); d.width (g); t = d.width () , d.height (c); u = d.height (); n ++}); f.eq (b) .css ({"z-index": 3}); if (a.timer) {d.append ('<div class = "timer"> <span class = "mask"> <span class = "rotator"> </ span> </ span> <span class = "jeda"> </ span> </ div> '); var j = e ("div.timer"), p; jika (j.length! = 0) {var C =
a.advanceSpeed ​​/ 180, v = e ("div.timer span.rotator"), y = e ("div.timer span.mask"), z = e ("div.timer span.pause"), l = 0, A, w = function () {p = true; z.removeClass ("active"); A = setInterval (function () {var c = "rotate (" + l + "deg)"; l + = 2; v .css ({"- webkit-transform": c, "- moz-transform": c, "- o-transform": c}); if (l> 180) {v.addClass ("move"); y Jika (l> 360) {v.removeClass ("move"); y.removeClass ("move"); l = 0; m ("next")}}, C)}, q = function () {p = false; clearInterval (A); z.addClass ("active")}; w (); j.click (function () {p? q (): w ()}); if (a.startClockOnMouseOut) {var B;
d.mouseleave (function () {B = setTimeout (function () {p || w ()}, a.startClockOnMouseOutAfter)}); d.mouseenter (function () {clearTimeout (B)})}}} jika ( a.captions) {d.append ('<div class = "caption"> <span class = "orbit-caption"> </ span> </ div>'); var r = d.children ("div.caption ") (c) f (b) .attr (" rel "), g = e (), o = function () {var c = f.eq (b) .attr (" span "), g = e "#" + c) .html (), h = r.height () + 20; r.attr ("id", "#" + c) .html (g); g? r.parent () berhenti () .ivimate ({bottom: 0}, a.captionAnimationSpeed): r.parent () stop () bernyawa ({bottom: -h},
a.captionAnimationSpeed)}; o ()} if (a.directionalNav) {d.append ('<div class = "slider-nav"> <span class = "right"> Kanan </ span> <span class = " kiri "> Kiri </ span> </ div> '); j = d.children (" div.slider-nav ") anak-anak (" span.left "); var D = d.children (" div.slider -nav ") anak-anak (" span.right "); j.click (fungsi () {a.timer && q (); m (" prev ")}); D.click (function () {a.timer && q () ; m ("next")})} jika (a.bullet) {d.append ('<ul class = "orbit-bullets"> </ ul>'); var E = e ("ul.orbit-bullets "); untuk (i = 0; i <n; i ++) {j = e (" <li> "+ i +" </ li> "); e (" ul.orbit-bullets "). tambahkan (j) ;
j.data ("index", i); j.click (function () {a.timer && q (); m (e (this) .data ("index"))}) var x = function () {E (b) .addClass ("active")}; x ()}})}}) (jQuery);
//]]>
</ script>

Catatan: Anda dapat mengubah kecepatan transisi di antara setiap gambar dengan memodifikasi nilai 5000 dari garis biru - angka yang lebih tinggi akan membuat gambar bertahan lebih lama di antara setiap transisi.

Penting! Jika Anda telah memiliki versi jQuery di template Anda, hapus garis merah, jika tidak, slideshow mungkin tidak bekerja.

Langkah 3. Sekarang saatnya menambahkan CSS. Temukan (CTRL + F) tag ini:
]]> </ b: skin>
Langkah 4. Tepat di atas ]]> </ b: skin> tambahkan kode ini:
#featured {height: 1px; lebar: 1px; overflow: hidden;}
div.orbit {
lebar: 1px;
tinggi: 1px;
posisi: relatif;
overflow: tersembunyi;
}

div.orbit img {
posisi: absolut;
atas: 0;
kiri: 0;
}
div.orbit sebuah img {border: none;}

div.timer {
lebar: 40px;
tinggi: 40px;
overflow: tersembunyi;
posisi: absolut;
atas: 10px;
kanan: 10px;
keburaman: .6;
kursor: pointer;
z-index: 1001;
}

span.rotator {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: -20px;
background: url (http://2.bp.blogspot.com/-RIbuOzbC8os/UwDPg1IgFaI/AAAAAAAAGN0/DrmP4kh7G08/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
tampilan: blok;
lebar: 20px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kanan: 0;
z-index: 2;
overflow: tersembunyi;
}

span.rotator.move {left: 0;}
span.mask.move {
lebar: 40px;
kiri: 0;
background: url (http://1.bp.blogspot.com/-9FdwFtBqvS4/UwDPqzE3ABI/AAAAAAAAGN8/r4xhlPpOHY4/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: 0px;
background-image: url (http://2.bp.blogspot.com/-8G-L7Onwt-Y/UwDPy372vYI/AAAAAAAAGOE/4qUdsKJaK98/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
keburaman: 0;
}

div.timer: hover span.pause,
span.pause.active,
div.timer: hover span.pause.active {opacity: 1; }

div.caption {
latar belakang: # 000;
latar belakang: rgba (0,0,0, .6);
lebar: 100%;
z-index: 1000;
posisi: absolut;
bawah: -100px;
warna: #fff;
padding: 8px 0;
text-align: center;
}

rentang div.caption {
padding: 0 10px;
ukuran huruf: 14px;
text-shadow: 0px 1px 0px rgba (0,0,0, .8);
margin: 0;
}
caption-caption {display: none; }

div.orbit: hover div.slider-nav {display: block; }
div.slider-nav {display: none; }
div.slider nav team {
lebar: 33px;
tinggi: 33px;
text-indent: -9999px;
posisi: absolut;
z-index: 1000;
atas: 43%;
kursor: pointer;
}

div.slider-nav span.right {
background-image: url (http://1.bp.blogspot.com/-oW1NQkjT3Ws/UwDP7b7T2-I/AAAAAAAAGOM/JaeJxm9qZ60/s1600/arrow-right.png);
kanan: 10px;
}
div.slider-nav span.left {
background-image: url (http://3.bp.blogspot.com/-T9eMQBFvVro/UwDQBxCnpWI/AAAAAAAAGOU/L8KS7EAOqOU/s1600/arrow-left.png);
kiri: 10px;
}

.orbit-peluru {
posisi: absolut;
z-index: 1000;
daftar-gaya: tidak ada;
atas: 10px;
kiri: 7px;
margin: 0;
padding: 0;
}

.orbit-peluru li {
float: kiri;
margin-left: 5px;
kursor: pointer;
warna: # 999;
text-indent: -9999px;
background-image: url (http://1.bp.blogspot.com/-lKQgWI4_xhQ/UwDQI0WIQmI/AAAAAAAAGOc/1e6zuurwFSg/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
lebar: 7px;
tinggi: 7px;
overflow: tersembunyi;
}
.orbit-peluru li.active {color: # 222; background-position: -7px 0; }
Langkah 5. Klik pada tombol "Simpan template" untuk menyimpan perubahan.

Akhirnya, kita akan menggunakan kode HTML yang menampilkan gambarnya. Kami memiliki pilihan untuk menambahkan slider baik di dalam salah satu posting / halaman kami, atau menampilkannya sebagai gadget di sidebar blog atau di bawah header.

Jika Anda memilih untuk menambahkannya ke dalam salah satu posting Anda, beralihlah ke tab HTML dan tempel kode di bawah ini di dalam kotak HTML pos Anda.

Jika Anda ingin menambahkannya di sidebar blog / di bawah header, masuklah ke "Layout", klik pada "Add a gadget link"> pilih "HTML / JavaScript" dari jendela pop-up dan tempel html ini di dalam kotak. :
<div id = 'featured'>

<a href=' Tautkan URL'> <img rel = ' photo1 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Orbit-caption id = "span class =' photo1 "> Bagaimana Jepang pisang makro dan diurutkan sekarang, besar utama. </ Span>

<a href=" URL tautan "> <img rel = ' photo2 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo2 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

<a href=" URL tautan "> <img rel = ' photo3 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo3 style =" text-align: center "> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>

<a href=' Tautkan URL'> <img rel = ' photo4 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo4 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

</ div>
Kode ini berisi gambar, link dan deskripsi untuk setiap gambar. Secara biru, adalah URL dari link dan gambar yang perlu Anda ganti dengan milik Anda. Di dalam kode HTML setiap gambar, Anda memiliki ukuran setiap gambar yang dapat diubah dengan memodifikasi lebar (590) dan tinggi (348) nilai. Untuk menambahkan deskripsi gambar Anda, ganti teks dengan warna merah.

Jika Anda ingin menambahkan lebih banyak gambar, tambahkan HTML ini sebelum tag </ div> :
<a href=' URL Tautan'> <img rel = ' photo5 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo5 '> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>
Perhatikan bahwa setiap gambar dan deskripsi memiliki pengenal unik (id) dan tidak boleh diulang. Misalnya, dalam deskripsi teks gambar pertama, kita memiliki id = " photo1 " dan dalam kode gambar adalah atribut "rel" dengan nama id, yaitu rel = " photo1 ".

Setelah menambahkan gambar Anda, klik tombol "Simpan" atau "Publikasikan" dan hanya itu! Sekarang Anda bisa menikmati Slider Gambar Orbit keren ini untuk Blogger.

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 .

Sunday, February 4, 2018

Template Blogger CustomizeMe (Gaya Helplogger)

CustomizeMe adalah template Blogger sangat disesuaikan dan SEO dioptimalkan untuk indeks blog Anda lebih cepat. Ini telah dirancang dengan cara yang dapat dengan mudah disesuaikan sesuai dengan kebutuhan Anda tanpa harus menyentuh kode template Anda. Yang perlu Anda lakukan adalah untuk menekan tombol "Customize" dan Anda siap untuk mulai menyesuaikan blog Anda. Hanya mencoba pengaturan template dan menjadi kreatif dengan tema font, warna dan latar belakang.

Beberapa Fitur Template meliputi:

  • Kedua datar dan Grid Desain
  • Sticky / Tetap Left Navigation Menu Bar
  • Disesuaikan Populer Posting
  • Tulisan Terbaru
  • komentar terbaru
  • halaman Penomoran
  • Diupgrade Search Bar
  • Mengambang Social Bar Widget
  • Penulis Bio dengan Image
  • Tulisan Terkait dengan Thumbnail
  • 404 Kesalahan Halaman
  • Seo ramah

Cara menginstal CustomizeMe Template

1) Masuk ke blog Blogger Anda dan kepala ke "Template"
2) Backup saat ini template yang dengan mengklik "Backup / Restore" tombol> "Unduh template lengkap"

blogger backup Template

3) Download dan buka file CustomizeMe.xml dengan Notepad sebuah

xml terbuka dengan notepad

4) Pilih semua kode dan salin ke clipboard

pilih semua kode di notepad

5) Pergi lagi ke Template dan klik tombol "Edit HTML"

template blogger, edit html

6) Pilih semua kode template Anda saat ini dan menghapusnya, kemudian paste kode yang baru saja Anda copy tadi
7) Preview blog Anda dan jika semuanya ok, tekan tombol 'Simpan Template'.

Harap dicatat bahwa metode ini mungkin menghapus beberapa widget Anda, jadi jika Anda ingin menyimpan salah satu dari mereka, hanya Browse file CustomizeMe.xml (langkah 2) dan klik pada tombol "Upload" (mengabaikan sisa langkah-langkah) .

Dan hanya itu! Sekarang Anda siap untuk menggunakan template yang CustomizeMe Blogger .

Menambahkan item menu

Pergi ke Template> Edit HTML, klik di mana saja di dalam area kode dan tekan tombol CTRL + F. Di dalam kotak pencarian, ketik "item 1" dan tekan Enter untuk menemukannya - lihat screenshot di bawah ini

Perubahan html template blogger

Ubah Item 1, 2, 3 ... dengan judul halaman Anda dan ganti "add-url-sini" teks dengan url Anda. Terakhir, klik tombol "Simpan template" untuk menyimpan perubahan.

Recent Posts & Komentar Widget

Cari (CTRL + F) untuk alamat berikut dan menggantinya dengan Anda sendiri (Anda akan menemukan dua kali dan Anda harus mengubahnya di kedua tempat):
http://helplogger.blogspot.com

template blogger html

Harap memperhatikan tidak memiliki dua garis miring ke depan pada akhir alamat Anda, jika tidak script tidak akan dapat membaca feed blog. Simpan template Anda setelah Anda telah membuat perubahan ini.

Mengaktifkan "Tentang Penulis" profil

Pergi ke "Layout" dan klik link "Edit" dari "Blog posting" elemen. Pada pop-up yang muncul, centang "Tampilkan Penulis Profil Di bawah Post" pilihan dan tekan Simpan.

profil penulis blogger

Mengubah warna dan font di Template CustomizeMe

Pergi ke Template> klik "Customize" tombol. Di sini Anda dapat melakukan banyak hal keren, seperti perubahan semua font default, teks dan latar belakang warna - pada dasarnya, apa pun yang Anda inginkan.

Beberapa kustomisasi yang dapat Anda buat:
Menambahkan gambar latar belakang: Latar Belakang > Upload Gambar> Telusuri dan tekan Selesai

template blogger desainer, latar belakang

Ubah Font, Teks dan Warna Latar Belakang: pergi ke Lanjutan > pilih Elemen yang Anda ingin menyesuaikan> pilih warna favorit Anda dan font.

blogger desainer canggih

Untuk menghapus warna, cukup ketik "transparan" dalam kotak teks seperti yang Anda lihat dalam gambar di atas (4).

Setelah Anda puas dengan hasilnya, tekan tombol "Apply ke blog" tombol dan melihat blog Anda. Itu dia!
Bersenang-senang mengubahnya;)