MERUBAH FUNGSI BLOCKQUOTE MENJADI KOTAK SCRIPT

Merubah Fungsi Blockquote Menjadi Kotak Script - Situs web yang memuat kontent tutorial mengenai web desain juga bahasa programer misalnya javascript, css serta html umumnya dilengkapi menggunakan kotak script atau code snippets buat mengemas html, css dan javascript dalam tampilan yg propesional dan menarik di page tutorial mereka.
Namun beberapa perkara beberapa jenis kotak script (pre code) umumnya menggunakan JavaScript library dan css pihak ketiga (CDN, Highlight.js, Prism.js. Juga Google Prettify) yang bisa menambah sedikit beban pemuatan laman situs. Dan memakai kotak script menggunakan pre code syntax highlighting wajib extra hati-hati agar kode html serta js yg di sematkan dapat ditampilkan dengan paripurna, umumnya diwajibkan buat memparse kode "html dan js" sebelum disematkan menggunakan pre code (code snippets).

Ditutorial ini saya akan menunjukkan cara membuat kotak script yg bisa digunakan menggunakan tehknik yang lebih sederhana yaitu menggunakan cara merubah fungsi blockquote sebagai kotak script yang mirip menggunakan pre code. Ikuti langkah-langkahnya sebagai berikut;

Membuat Kotak Script dengan Blockquote

1. Login ke blogger > Template > Edit HTML
2. Cari serta temukan style dasar "css blockquote" template anda lalu ganti dengan css dibawah ini;

blockquotequotes:none;
blockquote:before,blockquote:aftercontent:'';content:none;
blockquotemargin:1.5em 0;padding:5px;background-color:#353535;border:1px solid #DADADA;padding-left:1em;color:inherit;color:#fff;font-size:12px;display:block;

Jika sebelumnya template blogger anda nir memiliki style "blockquote" silahkan tambahkan css tadi sempurna diatas kode ]]> kemudian save template.
Cara Penggunaan:
Highligt atau select code (javascript, htm atau kode css) kemudian klik tombol blockquote pada bar atas post editor blogger, lihat model gambar dibawah ini;

Lihat Demo

Catatan: Tutorial ini tidak dianjurkan buat theme ijonkz v.1.tiga lantaran didalam template ijonkz telah tersedia kotak script (pre code) yang diberi nama "ijonkztabs" (Auto Tabs ShortCode).

Demikian saja tutorial cara membuat / merubah fungsi blockquote menjadi kotak script, harap diperhatikan jika halaman situs menggunakan iklan tengan artikel, posisikan blockquote diatas atau paruh atas konten serta dibawah atau paruh bawah konten supaya nir berbenturan menggunakan script iklan. Semoga bermanfaat serta sampai jumpa kembali.

SETTING ANTI COPY PASTE FULL VERSION

Setting anti copy paste full version - Di dunia digital ada banyak jenis anti copy paste yang bisa dipakai buat melindungi konten situs menurut plagiat (tukang copy paste). Tetapi memasang anti copy paste secara mutlak akan menciptakan pengunjung situs yang sesungguhnya ikut terganggu lantaran tidak dapat mengutip teks yang dibutuhkan. Jadi sekarang aku akan membagikan anti copy paste yg lebih flexible serta bisa di setting agar nir aktif pada beberapa bagian. Itu sebebnya artikel ini aku beri judul anti copy paste full version. Untuk lebih jelasnya silahkan lihat demo anti copy paste full version (anti copas sebagian).

Kelebihan anti copy paste full version ini adalah tidak menyenabkan loading situs sebagai berat serta nir menggunakan javascript external (pihak ketiga) dan dapat pada sesesuaikan (flexible).
Cara Memasang Anti Copy Paste Full Version
Tambahkan atau simpan kode css anti copy paste di bawah ini kedalam area css situs, apabila menggunakan platform blogger silahkan letakkan kode tepat diatas kode ]]>, Berikut kode anti copy paste full version.

.post-body -webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;

Kode anti copy paste diatas akan menonaktifkan text selector dan mouse click kanan pada seluruh bagian situs. Kemudian untuk menonaktifkan anti copy paste di bagian-bagian eksklusif silahkan tambahkan lagi kode css berikut adalah dan posisikan diatas kode ]]>.

blockquote,pre,b-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;

Kode tersebut berfungsi buat menonaktifkan anti copy paste di 3 bagian yaitu, area menggunakan blockquote, pre code area (code box) dan teks tebal (bold). Pada langkah ini anti copy paste sebagian sudah rampung di pasang, Agar lebih menarik kita dapat menambahkan navigasi (isu selector dan copy) dalam anti copy paste tersebut. Contoh gosip selector serta copy.

Untuk menciptakan selector berita seperti contoh dalam gambar diatas silahkan masukkan lagi kode css di bawah ini dan posisikan tepat diatas kode ]]>.

bposition:relative;color:#404040;
b:beforeposition:absolute;content:'DOUBLE CLICK TO SELECT USE CTRL+C TO COPY';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;
b:hover:beforetransform:scale(1.0);opacity:1;visibility:visible;transition:all .3s

Kode tersebut akan menampilkan selector info pada bagian text tebal (bold) ketika dilewati oleh mouse. Sehingga pengunjung situs akan tau bagian-bagian yg dapat di copy serta nir. Terakhir save template buat mengakhiri langkah-langkan pemasangan anti copy paste full version ini.
Tambahan:
Jika masih merasa kurang, anti copy paste full versi diatas masih mampu di kombinasikan menggunakan script anti CTRL+U serta script anti CTRL+P, Terkhusus buat script anti Ctrl+P sangat nir dianjurkan karena akan mempengaruhi SEO situs. Saya fikir anti copy paste full version diatas telah cukup untuk membuat repot para plagiat.
Semoga berguna serta selamat mencoba.

CARA LOAD CSS EKSTERNAL TANPA MENUNDA RENDERING

Cara Load CSS Eksternal Tanpa Menunda Rendering - Umumnya sebuah situs web / blog tidak terlepas berdasarkan stylesheet css external. Namun terkadang pada website blogger, penggunaan css external bisa menyebabkan render-blocking (penundaan pemuatan laman) sebelum css external selesai dimuat sebagai akibatnya loading situs web menjadi lambat.
Menghapus stylesheet css external tentunya bukan sebuah solusi yg sahih karena situs web justru sangat membutuhkan css external buat estetika desain nya. Nah sekarang saya akan menunjukkan cara memasang stylesheet css external ke dalam html situs web tanpa mengakibatkan pemblokiran render laman terhadap situs tadi.

Stylesheet css external yang paling acapkali digunakan merupakan fonts googleapis buat style teks serta font awesome untuk pemasangan icon-icon penting dalam situs web. Default kode berdasarkan keduanya merupakan menjadi berikut;
Agar kedua stylesheet css tersebut permanen bisa dipakai tanpa mengganggu render laman situs web blogger, usahakan jangan menggunakan kode default seperti diatas. Sedikit modifikasi dengan donasi javascript akan lebih baik buat mengatasi render-blocking terhadap page paruh atas situs. Berikut trik me-load css external menggunakan javascript.
Memanggil (load css external) menggunakan javascript diatas akan memisahkan arsip css dari sumber nya sehingga situs web akan terhindar berdasarkan render-blocking halaman serta loading situs menjadi lebih singkat atau cepat. Apabila pada situs web blogger memakai 2 (dua) css external misalnya //fonts.googleapis.com serta //netdna.bootstrapcdn.com/font-awesome/tiga.dua.1/css/font-awesome.min.css maka nir perlu memasang 2 javascript utuh, cukup tambahakan loadCSS("//your.css.stylesheet_here"); sehingga script akan terlihat seperti dibawah ini;
Kelebihan LoadCSS.js

1. Support dibanyak browser seperti Google Chrome, Mozilla, IE, UC serta lain-lain
2. Mengatasi blokir render halaman paruh atas, dan
3. Mempercepat loading (pemuatan) website

Sebelumnya saya juga telah mempublikasikan teknik menghindari render-blocking yang disebabkan oleh javascript serta css eksternal dengan metode preload serta onload, namun metode proload css tersebut masih kurang optimal karena tidak support di browser mozilla serta script load css external ini jauh lebih baik untuk menggantikan-nya.
Penempatan (Pemasangan) Script Load CSS
Jika kode css external default umumnya terletak dalam area (antara ...dan...) maka load css menggunakan javascript diletakkan pada area body (antara ...serta...</body>. Mungkin dalam template situs anda telah masih ada perpaduan javascript internal maka engkau sanggup menggabungkan javascript load css tadi menggunakan javascript internal yg telah ada.
Buang kode pembungkus javascript yaitu "" serta "" seperti yang telah saya terapkan pada situs ini. Silahkan lihat contoh gambar dibawah ini;

Jika telah memasang script loadCss.js maka kode default stylesheet css external tidak dibutuhkan lagi, silahkan hapus kode default stylesheet css dari html situs web anda kemudian pertinjau situs serta uji dengan tool google laman speed insights.
Saya fikir sekarang saya tidak dibutuhkan lagi disini karena solusi mengatasi render-blocking css external sudah anda temukan serta sudah waktu nya untuk memperbaiki performa situs web anda menjadi lebih baik dengan code loadcss.js diatas. Jangan lupa follow situs ini untuk mendapatkan update trik-trik blogging, javascript serta css menarik lain-nya. Semoga ini dapat bermanfaat serta membantu mengatasi permasalahan css external situs web kesayangan kamu. Sampai jumpa kembali di tutorial berikutnya and good luck for you.

CARA MENGHILANGKAN TOMBOL SHARE BLOGGER DI HALAMAN TERTENTU

Cara Menghilangkan Tombol Share Blogger di Halaman Tertentu - Tombol share atau share button merupakan fitur penting dalam situs blog / website, namun di beberapa kasus "tombol share" justru tidak diperlukan serta perlu dihilangkan / disembunyikan. Sebagai model page situs yg nir membutuhkan tombol share merupakan Disclaimer, Privacy Policy, Terms of Service, About us serta Contact us, kebanyakan pengelola situs blog menghilangkan tombol share / share button pada laman-page tadi.

Bagaimana Cara Menghilangkan Tombol Share pada Halaman Tertentu?

Untuk menghilangkan tombol shere di page atau post tertentu yang wajib kita lakukan adalah menambahkan "css hide share button" kedalam halaman / post yang ingin pada hilangkan atau disembunyikan tombol share nya. Berikut css buat menghilangkan tombol share di bagian-bagian laman eksklusif saja.
Dengan menambahkan css diatas pada suatu laman atau postingan maka tombol share dalam laman tadi akan hilang / disembunyikan. Dengan catatan "masukkan css melalui mode html bukan compose dalam waktu menulis post atau page (page)".
Keterangan:
Kode css atau "id" .post-addshare-buttons merupakan id share button situs aku , mungkin tidak sama menggunakan id template anda, lakukan inspect element buat mengetahui id tombol share situs blog anda.

Setelah mengetahui aid element tombol share situs anda ganti .post-addshare-buttons menggunakan .id-tombol-shere-anda. Selain menggunakan css diatas untuk menghilangkan tombol share blogger di halaman tertentu juga bisa dilakukan menggunakan menggunakan css berikut ini.
Id element .post-footer generik nya sama disetiap situs atau template blogger, hanya saja menghilangkan / menyembunyikan element Post Footer akan membuat seluruh yg terdapat pada post footer hilang misalnya tombol share, pengarang atau penulis blog serta lainnya yang ada pada post footer artikel / page (halaman).
Template situs ini memang memposisikan pengarang / penulis artikel di bagian atas atas artikel, tetapi situs anda mungkin nir, beberapa template meletak-kan pengarang di post footer sebelum tombol shere, jika engkau ingin menghilangkan nya juga pakai saja css yg ke 2 kedalam artikel / page anda yang nir inginkan tombol share berada disitu, lihat metode penerapan css buat menghilangkan tombol share pada bagian halaman atau post eksklusif.

Letak kan css dibagian paragraf akhir post / laman anda agar tombol share yg di sembunyikan atau pada hilangan hanya tombol share pada laman post tadi saja sedangkan di halaman post yg lain tombol share tetap muncul misalnya biasa nya.
Nah, begitulah kira nya seni penggunaan css pada halaman atau postingan blog guna untuk menyembunyikan / menghilangkan tombol share dalam bagian post / page tertentu, demikian saja artikel ini aku sudahi semoga berguna serta menambah pengetahuan blogging bagi kita seluruh, selamat mencoba dan salam sukses buat anda.

CARA MENGHILANGKAN SIDEBAR BLOGGER DI HALAMAN TERTENTU

Cara Menghilangkan Sidebar Blogger di Halaman Tertentu - Setiap blogger tentu nya pernah mencari cara menghilangkan atau menyembunyikan sidebar blog pada halaman / post tertentu supaya tampilan main post atau halaman sebagai full width (lebar penuh). Umum nya menghilangkan sidebar blog seringkali dilakukan pada postingan atau halaman about us, contact us serta lain-lain. Nah, pada kesempatan kali ini aku akan menunjukkan tutorial blogger yaitu " Cara menghilangkan sidebar blogger di halaman post tertentu" dengan menggunakan css.

Menghilangkan Sidebar Blogger Dengan Css

Seni Css tidak hanya dapat diterapkan pada template blog saja, penggunaan css dalam page atau post pula dapat dilakukan seperti model buat menghilangkan sidebar blog di halaman tertentu maka kita tidak perlu menambahkan css pada template blogger, relatif menggunakan menambahkan css buat menghilangkan / menyembunyikan sidebar blog dalam halaman / post yang ingin kita tampilkan menggunakan lebar penuh (full width), cara nya adalah:
Tambahkan Css Berikut ini pada post / halaman blog dengan mode penulisan html bukan compose, berikut css buat menghilangkan sidebar blog serta css agar tampilan post sebagai lebar penuh.
Css diatas berfungsi buat menghilangkan / menyembunyikan sidebar blog, namun tampilan post atau laman belum full width (lebar penuh), buat menciptakan page post sebagai lebar 100% maka tambahkan jua css berikut ini tepat dibagian bawah post / laman serta dibawah lokasi css diatas.
Keterangan:

• Kode #main-wrapper serta #sidebar-wrapper adalah id sidebar serta main post situs blog saya, kamu harus mengganti nya dengan id sidebar blog kamu sendiri karena besar kemungkinan id sidebar serta main post setiap template akan berbeda, sedangkan
• Kode .post umum nya sama pada setiap template situs blogger, kamu dapat menggunakan metode inspect element untuk mengetahui id sidebar serta main blog anda

Lihat contoh penerapan css dalam post atau page blog

Posisikan css menghilangkan sidebar blog dibagian bawah laman / post pada mode html, pastekan kedua css diatas secara ber-urutan, saya fikir demikian saja tutorial "Cara Menghilangkan Sidebar Blogger di Halaman Tertentu" ini sangat mudah dilakukan bukan? oh iya jika kamu ingin melihat [Demo] nya silahkan cari sesuatu pada "Search Box" situs ini karena pada laman penelusuran search box saya tidak menampilkan sidebar blog agar hasil penelusuran di tampilkan dengan lebar penuh. Selamat mencoba serta good luck for you, happy blogger.

MEMBUAT CONTRAST EFECT PADA GAMBAR DENGAN CSS

Image Hover Contrast - Jika sebelumnya kita sudah membahas tentang cara membuat efect hover zoom image dengan css, maka kini kita membahas tentang image contrast efect serta tentu nya masih menggunakan menggunkan css. Apa manfaat image contrast efect dalam atikel blogger? Manfaat-nya artinya buat memanjakan para pembaca (pengunjung) dengan hal-hal mini namun menarik buat di rasakan.
Contrast efect secara umum bisa diartikan menjadi gradasi,kecerahan, atau nada (rona) antara bidang gelap (shadow) dengan bidang terang. Nah itulah yg akan kita buat sekarang ini dengan menggunakan css. Supaya ada seni menurut sebuah gambar yang ditampilkan pada sebuah artikel, waktu gambar pada hover atau dilalui sang mouse maka otomatis gambar akan memancarkan cahaya lebih terperinci (cahaya yang berwarna).
Cara Menerapkan Css Image Hover Dengan Contarst Efect
Simpan Css Image Hover (Image Contrast) berikut adalah kedalam template blog kamu, serta letakkan sempurna di atas kode ]]>.

.imgscontras1:hovertransition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-webkit-filter:contrast(130%);

Keterangan:
.imgscontras1 merupakan "id" target yg ingin pada beri efek contrast (cahaya), id tadi sanggup kamu ganti menggunakan apa saja asalkan di awali dengan titik serta nir menggunakan spasi, kemudian
Nilai 150% merupakan level kecerahan atau contrast, semakin besar nilai contras nya akan semakin jelas juga imbas yang ditampilkan pada gambar, sebaliknya semakin mini nilai contras nya maka semakin redup efect cahaya "contrast" dalam gambar.
Penerapan Tag Image Untuk Memanggil Css Image Contras
Saya sudah menyediakan tiga type tag image, engkau tinggal memilih nya saja mana yg cocok buat engkau , dan yang lebih mudah menurut engkau , tetapi disarankan pilih yang nomer dua atau nomer tiga.

url_gambar" width="100%"  height="auto"/>

url_tujuan">

url_gambar" width="100%" height="auto"/>

Image (Gambar) disertai link target

//caraflexi.blogspot.com"target="_blank">

url_gambar" width="100%" height="auto"/>

Ganti url_gambar dengan url gambar yang ingin kamu tampilakan
Pada tag image nomer 3 ganti pula ulr blog ini (url_tujuan) menggunakan url yang engkau targetkan.
Demikian penerangan dan cara menciptakan dampak cahaya "contrast" pada gambar postingan blog menggunakan Css, kalimat epilog nya masih sama yaitu "semoga berguna serta selamat mencoba" selesai...! Demo nya lihat dan arahkan mouse kamu dalam gambar pada bawah ini.

CARA MEMUAT EFEK ZOOM IN DAN OUT PADA GAMBAR POST BLOGGER

Efek Zoom In & Out - Menghias artikel blog itu penting asalkan tidak hiperbola, lantaran sesuatu yang hiperbola itu jelek. Style Css memiliki poly varian dan dapat digunakan dalam banyak tagg html, galat satu nya merupakan image atau gambar. Adapun pembahasan kali ini adalah tentang Cara memuat pengaruh zoom in dan zoom out pada sebuah gambar artikel (Post) blogger.
Sederhana saja, kita pribadi ke css zoom image post blogger buat mempersingkat saat, namun terdapat sedikit penjelasan tambahan tentang css zoom image ini yaitu "Css zoom image atau gambar kali ini merupakan salah satu efek hover (mouse hover) jadi gambar akan mengembang (zoom out) ketika dilalui sang mouse saja dan kembali normal saat tidak kemudian mouse, beitu pula dengan css imbas zoom in (menyusut/mengecil), berikut css zoom image (gambar) nya.
Css Image Zoom Out (Perbesar Gambar)

.imgscale1  height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale1:hover
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.lima);
}

Css Image Zoom In (Perkecil Gambar)

.imgscale2 height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale2:hover
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.lima);
}

Simpan kedua css tersebut kedalam template blog engkau sempurna diatas kode ]]> dan kemudian metode penerapan nya (buat memanggil css tersebut) mulaikah tulis sebuah artikel serta masukkan gambar menggunakan tag image misalnya berikut adalah. Engkau jua bisa meletakkan tag image "html" nya pada sebuah widget html sebagi promosi atau iklan offline engkau .
1.zoom Image Efect Tanpa Link
Tag image berikut ini adalah gambar tanpa disetai link

imgscale1" src="url_gambar" />

2.zoom Image Efect Dengan Link
Yang ini adalah zoom image yg disertai dengan link target

imgscale1"   href="url_tujuan">

url_gambar" />

3.contoh Penerapan Lainnya adalah misalnya berikut adalah.

//goo.gl/9mrasW"target="_blank">imgscale1" alt="Advertisment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1yGrdOjRfgYqRM7UWPrLUBLAKhZlJhheREtYN4fLpHCNzA2Z2kdXAlGe2iaarQg8ogQRsuv8Ogpwvx_4TEbgFJ6TIqJ8RRJCHi0np7e92Lrky6D_CV76UjjZ3SitkjVIbJzIfdWtvMA/s640/hkripersen2Bindonesia.png" width="100%"/>

Ganti imgscale1 menjadi imgscale2 (Merubah zoom out sebagai zoom in)
Gantu url_tujuan dengan link yang ditargetkan example: //caraflexi.blogspot.com
Ganti url_gambar dengan url gambar yg ingin engkau tampilkan
Nah sesudah diterapkan dengan benar, maka hasilnya akan terlihat misalnya gambar berikut ini, silahkan arahkan mouse kamau buat melihat hasil-nya. Gambar dengana style css zoom out akan mengembang dan gambar dengan style css zoom in akan mengecil, ke 2 gambar tadi pula mempunyai link (Link Target) jika pada klick akan menunjuk ke url lain (artikel lain).

Demikian penjelasan mengenai cara membuat dampak zoom in dan efek zoom out dalam sebuah gambar postingan atau artikel blog, semoga ini berguna serta dapat membantu  kamu, jangan sungkan memberi komentar, finishing good luck for you.

CARA MEMBUAT MOUSE HOVER LINK TITTLE

Cara Membuat Mouse Hover Tittle (Link Tittle) - Dalam mendesain template sebenar-nya tidak perlu menambahkan pernak-pernik atau animasi yg aneh-aneh. Sedikit sentuhan mini saja telah relatif buat memperindah tampilan webiste. Lantaran semakin simple tampilan website akan semakin ringan dalam saat pemuatan (loading) serta semakin nyaman juga dimata pengunjung situs. Umum-nya situs-situs super besar misalnya google, blogger dan lain-lain mendesain template mereka sesederhana mungkin sehingga kita merasa nyaman serta fokus membaca.
Sebalik-nya, template yang memakai poly animasi yang berkedap-kedip justru menghilangkan fokus kita ketika membaca bahkan kita sanggup kehilangan mood secara spontan untuk menuruskan membaca. Maka menurut itu hari ini aku akan mengungkapkan tentang bagaimana cara menambahkan mouse hover tittle (link tittle) menjadi setuhan kecil atau imbas sederhana pada template blogger.
Saya tidak tahu pasti apa nama dampak ini, maka saya sebut saja dengan nama mouse hover tittle atau link tittle. Lantaran ketika waktu mouse di arahkan kepada sebuah element atau dalam sebuah link ia akan menampilkan sebuah judul (tittle) yang menjelaskan isi dari link tadi seperti model gambar di bawah ini.

Cara membuat nya sangat sederhana hanya menggunakan menambahkan title='berita' saja. Karena impak ini biasa nya ditambahkan pada sebuah element yg mengandung maka aku sebut jua ini menjadi link tittle. Langsung saja begini cara membuat-nya.
Sebuah link dalam format html dasarnya merupakan misalnya ini

Kemudian dibubuhi element tittle="" kedalam-nya maka sebagai seperti ini

Selesai, begitu saja cara membuat link tittle atau mouse hover tittle serta buat demo nya merupakan misalnya berikut adalah. "Arahkan mouse pada link pada bawah ini".

Keterangan: Mouse Hover Tittle (Link Tittle) sanggup diterapkan dimana saja yang mengandung , baik itu didalam artikel atau di dalam template seperti yang aku terapkan pada template blog ini tepat nya dibagian pilihan menu atas (top menu). Mouse Hover Tittle (Link Tittle) berfungsi sebagai informasi yang menjelaskan isi dari sebuah link. Selamat mencoba...!

BELAJAR CSS FONT STYLE TAHAP DASAR TUTORIAL BLOG

Cascading Style Sheet atau Css merupakan galat satu menurut bahasa pemrograman yang bertujuan buat mengatur sebuah tampilan atau layout seperti website model-nya. Dalam dunia website (blogger) css telah merogoh poly peranan penting yg bertujuan buat memudahkan pengguna seperti pengelola website. Nah, kali ini saya akan menulis turial dasar mengenai cara mengatur style font (huruf) dalam situs blog menurut dasar-dasar metode penggunaan css.
Sebelum-nya aku juga telah menulis tutorial cara menginstall google font kedalam template dan cara penggunaan nya. Apabila sobat ingin menginstall google font buat situs blog engkau , silahkan baca disini. Baiklah balik ke topik pembahasan yaitu Belajar CSS Font Style Tahap Dasar.
CSS telah menyediakan property text-transform yg berfungsi menjadi pengubah tampilan teks menjadi alfabet akbar seluruh (uppercase) atau menjadi huruf mini semua (lowercase) dan menciptakan alfabet akbar atau kapital (capitalize) di awal kalimat.
Apa krusial-nya css font syle (font-variant)
Fungsi yang paling menonjol font-variant adalah buat menghindari kesalahan dalam saat menulis/mengetik, terkadang kita lupa menciptakan huruf akbar atau kelalaian lainnya pada menulis, aku sendiri memakai property text-transform pada situs ini yang aku spesifik-kan dalam bagian topmenu, pilihan menu, serta widget tittle agar selalu menampilkan alfabet besar . Jadi meskipun saya menulis pilihan menu menggunakan alfabet acak (besar -kecil) property text-transform permanen menampilkan-nya dengan huruf akbar (modal).
Cara Membuat Huruf Menjadi Kapital Semua Dengan Css
Tambahkan properti text-transform:uppercase; dalam id element situs, menjadi contoh penerapan properti text-transform:uppercase; adalah sebagai berikut.
h2text-transform:uppercase; maka setiap element yang di beri tag h2 akan menempilkan huruf modal (huruf besar seluruh) atau engkau jua bisa menerapkan pada element individu yaitu misalnya ini .id_element_kamutext-transform:uppercase;. Contoh penerapan pada situs aku adalah:
#top-pilihan menutext-transform:uppercase;font-size:11px;
Css text-transform:uppercase; memerintahkan buat selalu menampilkan alfabet modal (akbar) dalam bagian menu atas dengan size (tinggi/akbar) huruf adalah 11px.
Cara Membuat Huruf Kecil Dengan Css Font Style
Kebalikan dari model diatas, buat menampilkan alfabet mini semua pada sebuah element maka kita relatif menggunakan menambahkan properti text-transform:lowercase;}. Akan tetapi aku tidak tau penulisan menggunakan style huruf mini semua sempurna nya buat pada bagian apa, mungkin kamu punya pandangan baru.
Membuat alfabet besar pada awal kalimat dengan css
Yang satu ini cocok pada terapkan dalam page artikel web, buat berakibat setiap paragraf di awali dengan alfabet besar . Cara penerapan nya adalah seperti berikut adalah.
p text-transform:capitalize;} bila engkau ingin menambahkan property size (settingan besar huruf) masukkan jua font-size:nilai_pixel; sehingga menjadi ptext-transform:capitalize;font-size:16px;}. Apabila property css font style tadi bersebrangan dengan style css laman web engkau , maka kita bisa menambahkan property "!Important;" buat menggunggulkan-nya, model: ptext-transform:capitalize;font-size:16px!Important;} alfabet "p" adalah "id element" page yg berarti "paragraf". Bila engkau ingin menambahkan nya pada element selain paragraf maka setiap element selalu di awalai dengan pertanda titik atau pagar, contoh:

.menutext-transform:capitalize;font-size:16px;} or #menutext-transform:capitalize;font-size:16px;}

Jika ingin menambahkan text-transform pada beberapa element maka cara penerapan nya merupakan misalnya contoh berikut ini:

.menu,.sub-menu,.post-tittle,widget-tittletext-transform:capitalize;font-size:16px;}

Untuk mengetahui id element situs kita mampu melakukan inspect element pada setiap bagian bagian situs, saya haraf engkau sudah mengerti tentang inspect element.
Nah, yg terakhir buat menghilangkan semua efek css diatas relatif menggunakan menambahkan property "none" atau text-transform:none;} menggunakan demikian seluruh imbas font style akan hilang dan akan menampilkan apa adanya (seperti yang kamu tulis) saja. Demikian saja penjelasan tentang css font style (font-variant) dan silahkan pada coba serta beri komentari tentang post ini.

CARA INSTALL GOOGLE FONT KE DALAM TEMPLATE TUTORIAL BLOG

Font atau alfabet yang dipakai dalam sebuah laman web sangat mempengaruhi tingkat ke popularan situs web tadi, penggunaan jenis font dan besar kecil ukuran font yg kurang tepat dapat membuat minat pembaca hilang secara datang-tiba. Ideal nya ukuran font yg membuat nyaman pembaca adalah 15px hingga 16 px, sedangkan jenis font yang ideal untuk situs web/blog merupakan open sans, arial reguler, raleway dan masih banyak lagi, tetapi pada dasarnya pilih lah font yg generik dan rapi, sebagai akibatnya nir mengejutkan mata pembaca.
Bagaimana cara membarui jenis huruf (font) dalam template blog?
Login ke blogger, klik template > klick tingkat lanjut, kamu bisa memilih font header, font page atau content yang telah tersedia disitu. Namun aku nir membahas itu lebih jauh karena aku rasa semua paham bila memilih font dari pengaturan template. Tapi bagaimana jika ternyata kita tidak menemukan jenis font yg sesuai dengan yang kita inginkan pada pengaturan template, maka solusi nya kita bisa menggunakan google font menggunakan cara menginstal nya di template blog kita. Ada banyak jenis-jenis font yang cantik pada google font, mungkin ratusan atau 300 jenis font bahkan mungkin lebih dari itu, aku nir pernah menghitung nya.

Cara Memilih dan Mengambil Google Font

1. Kunjungi //fonts.google.com buat menentukan font
2. Setelah menemukan jenis font yg sempurna, klick indikasi +,
3. Setting sedikit panda ventilasi yg ada misalnya gambar pada bawah ini.

Keterangan Gambar:

• Pada tab costumize pilih regular 400 dan bold 700, itu adalah merupakan ukuran ketebalan font font-weight: nilai_font; yang paling umum, perhatikan jua indikator hijau dalam gambar, itu adalah tanda aman atau nilai kecepatan loading (pemuatan font) tadi. Bila kita menentukan 3 berukuran ketebalan font misal 400,700, serta 800 maka indikator hijau umumnya berubah jadi kuning atau merah, memberi tanda bahwa menentukan 3 ukuran font akan membuat loading (pemuatan) font lebih berat.
• Tab-Embed, Copy ke 2 kode yg di berikan google font, simpan pada notepad atau catatan buat ad interim.

Cara Memasang Google Font ke Template Blog

1. Login ke Dashboard Blogger > klick Template > Edit Html
2. Cari kode epilog tag-heading yaitu dan pastekan kode google font tepat pada atas lalu save template.
3. Lihat contoh pada bawah ini.

Catatan: proses pemasangan google font ini belum terselesaikan, apabila pada waktu menyimpan template ternyata template kita nir mampu menyimpan kode google font tersebut, karena format template berbeda menggunakan kode google font, maka ubahlah kode google font tadi menjadi seperti ini dia.
Perhatikan disparitas nya ada dalam indikasi kutip satu ' serta pertanda kutip dua " serta bagian ujung kode yaitu />.
Simpan kembali kode google font sempurna pada atas tag , bila template permanen tidak mampu menyimpan nya maka parse kode google font tadi klik disini buat memparse. Script apapun jikalau sudah pada parse insya allah masuk ke template blog apapun.
Setelah kode tersebut disimpan di pada area heading tag template, maka langkah selanjut-nya memasang css google font (kode yang ke 2) yaitu ().
Masukkan kode css google tepat pada atas kode ]]> dengan format misalnya di bawah ini.

p
 
}

Huruf "p" berarti paragraf, maka css di atas meminta "tampilkan seluruh paragaf text dengn font raleway". Sedangkan fungsi sans-serif; adalah font cadangan, bila jaringan internet sedang tidak mengagumkan maka font raleway akan pada gantikan dengan sans-serif untuk pemuatan (loading) yang lebih singkat.
Selain menggunakan format misalnya di atas, css google font juga bisa pada pasang menggunakan format seperti model berikut ini.

.post-body
 
}

.post-body merupakan id halaman artikel, jadi seluruh yg di pada laman artikel akan dimuat menggunakan tampilan huruf (font) raleway. Supaya artikel ini lebih panjang lagi, maka aku kasi contoh lagi yaitu memasang css google font menggunakan format misalnya ini dia.

.post-body,.post-tittle,.popular-post {
 
}

Css tersebut ialah meminta judul artikel, page artikel, serta post popular di tampilkan dengan jenis alfabet raleway.
Catatan Penting:
.post-body, .post-tittle, serta .popular-post adalah "id" element yg generik pada template blogger, tapi apabila template anda tidak memakai "id" seperti itu, maka engkau mampu lakukan inspect element buat mengetahui "id" setiap element template anda, awali menggunakan memberi tanda titik di belakang id dan pisahkan id dengan pertanda koma, seperti terlihat pada contoh css diatas, relatif sekian penerangan saya tentang cara memasang google font ke template blogger.

3 METODE MEMBUAT CREDIT LINK FOOTER TEMPLATE

" serta tag body penutup "

BEGINI CARA MENGHAPUS CREDIT LINK FOOTER

Credit Link - sebelum membahas mengenai bagaimana cara menghapus credit link template blog, aku jelaskan dulu tentang credit link agar tidak galat paham, credit link adalah claim menurut para desing template, model credit link merupakan "Desing by, Theme by, Templateism Credit Link dan lainnya" biasanya credit link pada tempatkan pada bagian footer template, selain untuk memberi claim terhadap template tersebut credit link jua di fungsikan untuk mempromosikan situs pembuat template tersebut.  bila credit link di hapus dengan cara yang tidak tepat, maka situs anda akan otomatis pada redirect atau di alihkan ke situs oleh pembuat template.
Apasih kerugian (pengaruh buruk) menggunakan template yang mempunyai credit link?
Dalam prinsip SEO (Search engine optimization) tidak terdapat kerugian apapun bila anda menggunakan template yang memiliki credit link atau membiarkan template permanen mempunyai credit link. Sebagai manusia yg punya sopan santun maka kita tidak perlu menghapus atau menghilangkan credit link tersebut, Tetapi sebagai insan propesional tetap terdapat alasan mengapa kita harus menghapus credit link berdasarkan situs blog/website kita.
Dua alasan mengapa kita harus menghapus Credit Link

1. Jika website kita terkenal, di khawatirkan akan ada yg menduplikat atau melakukan penyamaran situs dengan menggunakan template yang serupa dengan template website kita. Itu sebabnya situs-situs akbar seperti dtk.com, kompas.com akan membeli template resmi bahkan mendesing sendiri template mereka supaya nir ada yg menyerupai mereka. Bahkan jika di inspek element (view-source) nama template mereka jua tidak terlihat (tidak di cantumkan).
2. Menjaga propesionalisme situs, situs yang mempunyai credit link tentu terlihat tidak memmiliki sikap propesional yang tinggi, sebagai akibatnya kecil kemungkinan buat menerima iklan ofline, tetapi iklan online misalnya Ads permanen bisa asalkan situs kita memenuhi syarat.

Dua Cara Menghapus Credit Link Template

#Cara1: Menghapus credit link secara permanent, metode ini kamu harus mengerti jenis-jenis credit link karena setiap desinner template memiliki metode yang tidak selaras menempatkan/membuat credit link dalam karya mereka. Tapi jangan risi karena pada dasar nya prinsip credit link itu sama, apabila di istilahkan dengan kunci, maka kunci dan gembok nya diletakkan pada dalam template tadi.
Kunci "Original Script Credit Link" adalah sebagai berikut
Sedangkan "Gembok" Credit Link adalah sebagai berikut

Template by Somad Listrik

Nah... Jadi jadi untuk "Menghapus Credit Link" secara permanent, hapus terlebih dahulu "kunci" nya baru kemudian buang gembok nya atau rubah gembok nya nya menjadi link situs anda sendiri. Maka situs anda nir akan pada redirect lagi oleh credit link tadi.
Masih ada lagi jenis Credit Link selain contoh credit link di atas yaitu credit link type alien, saya sebut ini credit link ini sebagai credit link alien, karena kunci atau kode script credit link nya di samarkan menjadi seperti berikut ini.

var _0xbf5d=["x68x72x65x66","x61x74x74x72","x23x63x72x65x64x69x74x2Cx2Ex63x72x65x64x69x74","x68x74x74x70x3Ax2Fx2Fx74x75x6Bx61x6Ex67x6Cx69x73x74x72x69x6Bx70x75x6Cx61x75x62x61x74x61x6Dx2Ex62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6D","x6Cx6Fx63x61x74x69x6Fx6E","x72x65x61x64x79"];$(document)[_0xbf5d[5]](function()if($(_0xbf5d[2])[_0xbf5d[1]](_0xbf5d[0])!= _0xbf5d[3])window[_0xbf5d[4]][_0xbf5d[0]]= _0xbf5d[3])

Sedangkan buat gembok credit link nya masih tetap sama, yaitu misalnya.

Template by Somad Listrik

Maka untu menghapus credit link misalnya ini maka engkau harus mencari kode alien di atas serta menghapus nya, baru lalu gembok nya pada hapus menurut footer template anda, maka situs anda tidak di redirect lagi ke situs penghasil template.
#Cara2: Menghapus/Menghilangkan Credit Link (Tidak Permanent)
Metode menghapus credit link berikut ini, hanya untuk melumpuhkan fungsi credit link itu saja, namun ia tetap ada di dalam template anda. Metode ini hanya di lakukan jika kamu tidak menemukan kunci "Credit Link" seperti contoh di #Cara1.
Tambahkan style='visibility:hidden' dalam bagian kode gembok credit link, sehingga menjadi seperti berikut model ini.

Template by style='visibility:hidden' title='Somad Listrik'>Somad Listrik

Dengan demikian maka credit link tidak akan terlihat di template anda. Credit link tersebut tersembunyi serta tidak berfungsi lagi. Anda jua sanggup menambahkan style='display: none' untuk melumpuhkan total fungsi credit link tadi sebagai akibatnya gembok credit link sebagai misalnya ini.

style='display: none'>
Template by Somad Listrik

Baiklah hingga disini saja penerangan saya tentang cara menghapus credit link template yg di redirect ke situs pembuat templete nya. Jika kamu butuh template yg tanpa credit link, saya pula menyimpan beberapa koleksi template blogger yang nir pada sisipkan credit link, lihat saja pada Download Template Blogger. Semoga artikel ini bermanfaat dan semoga aku nir di benci oleh para desiner template. Kalau saya eksklusif nir begitu mempermasalahkan credit link, lantaran memang sepatut nya kita menghargai karya orang lain yg geratis kita gunakan, dengan demikian lambat laun karya kita juga akan dihargai oleh blogger lain.
Contoh Credit Link Lainnya Type Base64

MEMBUAT EFEK BAYANGAN PADA GAMBAR ARTIKEL BLOG DENGAN CSS

Box Shadow - Sebelumnya saya telah membuat artikel tentang cara menciptakan pengaruh bayangan dalam text menggunakan bantuan css (text shadow) serta kali ini saya akan menulis artikel mengenai cara membuat efek bayangan dalam gambar post blog, umum nya ini diklaim menggunakan "box shadow" style css. Bagaimana cara menciptakan dampak bayangan pada gambar artikel blog? Simak penerangan singkat ini dia mengenai css box shadow.
Saya sudah menyiapkan 2 metode menciptakan imbas bayangan (shading efec) gambar menjadi hiasan buat mempercantik sebuah postingan blog. Yg pertama dengan cara manual dan yg ke 2 menggunakan cara otomatis, eksklusif saja kita mulai agar tidak membuang-buang saat.
#Metode1: Membuat css efek shadow (bayangan) dalam post blog dengan cara manual
Menerapkan css box shadow seperti ini nir menciptakan semua gambar di artikel blog anda mempunyai bayangan, melainkan hanya satu gambar saja yg pada beri dampak bayangan, bila anda ingin menciptakan impak bayangan di semua gambar maka anda wajib menerapkan css box shadow ini pada setiap gamabar satu-per satu.

• Bentuk dasar css box shadow adalah [box-shadow: 3px 7px 5px #009678;]
• Nilai 3px pada css diatas adalah merupakan sumbu offset-x: horizontal, semakin besar nilai nya maka bayangan text akan semakin ke kanan, dan sebaliknya semakin kecil nilai nya misal nya -3px (minus tiga pixel) maka bayangan text akan semakin kekiri.
• Nilai 7px merupakan sumbu offset-y: vertical, semakin besar nilai nya maka bayangan text semakin ke bewah, dan sebaliknya semakin kecil nilai nya misal -4px (minus empat pixel) maka bayangan tex akan semakin ke atas.
• Nilai 5px merupakan pembentuk karakter bayangan-blur, jika di beri niai 0px maka garis bayangan text akan terihat jelas tapi jika di beri nilai 3px garis bayangan tidak jelas (blur). Dan
• #009678 merupakan kode warna css untuk warna bayangan.

Cara Penerapan Css Box Shadow (Manual)
1. Uplood gambar pada sebuah artikel lalu ubah mode penulisan dari Compose ke mode HTML
2. Kemudian cari tag-html gambar tersebut biasanya kode nya seperti di bawah ini.

Baca Juga

• Cara Membuat Efek Bayangan Pada Gambar
• Cara Membuat Efek Bayangan Pada Gambar Di Photoshop
• Cara Membuat Efek Bayangan Pada Gambar Anime

3. Untuk memberi efek bayangan masukkan css box shadow pada bagian tag-html gambar yang saya tandai dengan huruf tebal sehingga menjadi seperti berikut ini

box-shadow: 3px 7px 5px #009678;clear: both; text-align: center;">Maka hasil nya gambar akan memiliki efek bayangan bayangan hijau di sisi bawah dan kanan gambar seperti terlihat pada contoh gambar berikut ini Lihat Demo
#Metode2: Membuat css efek shadow (bayangan) pada post blog dengan cara Otomatis
Penerapan css box shadow berikut ini, untuk membuat efek bayangan di semua gambar dalam postingan (artikel) blog, jadi dengan melalui metode ini anda tidak perlu menerapkan kode css box shadow satu-persatu lagi. Sekali pasang semua gambar yang ada di dalam postingan blog akan memiliki efek bayangan.

Cara  Memasang Css Box Shadow (Otomatis)
Simpan kode css berikut ini ke dalam template anda tepat nya pass... Di atas kode ]]> lalu simpan tempate.

.post img box-shadow: 3px 7px 5px #009678;

Sekarang silahkan lihat artikel anda, jika dilakukan dengan benar maka semua gambar dalam artikel akan mempunyai bayangan. Silahkan kode rona #009678; buat merubah warna bayangan. Demikian saja penjelasan mengenai cara membuat pengaruh bayangan pada gambar artikel blog, cobalah berkreasi dengan css box shadow tadi, atau pelajari lebih lanjut di www.W3schools.com.

MENAMBAHKAN EFEK BAYANGAN PADA TEXT DENGAN CSS CASCADING STYLE SHEET

Cara  Menambahkan Efek Bayangan (Text Shadow) dalam Text dengan CSS - Perlahan akan tetapi pasti, selangkah demi selangkah kita mulai merambah ke arah CSS (Cascading Style Sheet). Seperti sayur kurang garam bila menjadi seorang blogger kita tidak menguasai yang nama-nya css ini. Bila kita pelajari secara keseluruhan maka sulit rasa nya kita khatam belajar menggunakan css, apalagi kita tidak punya dasar pengetahuan tentang css. Namun bukan berarti nir mungkin bagi siapa pun buat mengetahui serta mempelajari nya. Sebab pada zaman canggih seperti ketika ini ilmu itu bisa kita dapatkan asalkan kita rajin membaca.
Sekarang kita akan belajar sedikit tentang css tentang cara menambahkan impak bayangan (shadow) pada sebuah text. Pepatah menyampaikan "sedikit demi sedikit, usang usang sebagai bukit" begitu juga dengan ilmu css ini, dari sedikit insya allah kita bisa mengerti yg poly. Baikalah telah cukup basa-basi nya serta pribadi saja ke cara menambahkan impak bayangan dalam text nya dengan memakai css nya. Model bayangan text (text shadow) misalnya terlihat pada gambar diatas.
Dalam penerapan efek bayangan pada CSS Text Shadow terdiri atas 4 (empat) nilai primer yaitu sumbu offset-x, sumbu offset-y, nilai pembentuk impak blur, serta rona shadow atau bayangan. Mari kita lihat model css text shadow ini dia:

text-shadow: 1px 2px 3px #666666;

Keterangan:

• Nilai 1pxpada css diatas adalah adalah sumbu offset-x: horizontal, semakin besar nilai nya maka bayangan text akan semakin ke kanan, dan kebalikannya semakin kecil nilai nya misal nya -3px(minus 3 pixel) maka bayangan text akan semakin kekiri.
• Nilai 2pxmerupakan sumbu offset-y: vertical, semakin besar nilai nya maka bayangan text semakin ke bewah, serta kebalikannya semakin kecil nilai nya misal -4px (minus empat pixel) maka bayangan tex akan semakin ke atas.
• Nilai 3px merupakan pembentuk karakter bayangan-blur, apabila pada beri niai 0px maka garis bayangan text akan terihat kentara tapi apabila di beri nilai 3px garis bayangan tidak jelas (blur). Dan
• #666666merupakan kode warna css buat rona bayangan.

Cara Menerapkan CSS Text Shadow (Bayangan Text)

Simpan kode css ini dia ke dalam template anda tepat nya pass pada atas kode ]]> lalu simpan tempate.

.id_element_kamufont-size: 30px;
   font-weight: bold;
   color: #DC143C;
   text-shadow: -3px 3px 0px #666666;}

Kemudian buat memanggil css tadi, dalam waktu menulis artikel sisipkan kode html berikut ini di mana saja, di tengah kalimat atau di awal kalimat.

id_element_kamu">Contoh Text Dengan Bayangan

Maka hasilnya akan terlihat misalnya dibawah ini:
Contoh Text Dengan Bayangan
Kamu bisa ganti isi text nya sinkron menggunakan yg engkau inginkan, apabila engkau ingin menciptakan bayangan tersebut pada sebuah tautan link maka engkau relatif mengubah tag-html nya saja sebagai seperti pada berikut ini.

Hai....id_element_kamu">Klick Link ini buat menghubungi kami..! 

Maka tulisan klick link akan mempunyai bayangan dan dapat pada klick seperti model pada bawah ini.
Hai....Klick Link ini buat menghubungi kami..!
Nah kini bagaimana bila css text shadow tersebut di terapkan pada sebuah element template blog misal nya pada template saya dalam bagian sub_menu (anak pilihan menu) blog ini.
CSS aslinya adalah misal:

.sf_menubackground-color:$(topmenu.background.color);color:$(pilihan menu.text.color);height:29px;line-height:29px;font-size:11px;

Setelah di tambahkan properti text shadow (bayangan bayangan text) maka css sub_menu menjadi seperti berikut ini.

.sf_menubackground-color:$(topmenu.background.color);color:$(pilihan menu.text.color);height:29px;line-height:29px;font-size:11px;text-shadow: 0px 1px 0px #666666;}

Dan hasil nya seperti yang terlihat dalam sub_menu template blog ini, arahkan mouse anda ke bagian menu dengan tanda panah buat melihat sub_menu template blog ini. Sekarang cobalah berkreasi sendiri menggunakan css text shadow tadi. Semoga artikel ini sedikit membantu anda pada mengenal css serta cara menerapkan nya.