Pengenalan Blog Engine Blogger
Blogger merupakan salah satu blog engine yang cukup banyak dipakai oleh pembuat blog. Selain alasannya gampang digunakan, kebebasan pengguna juga diterapkan kedalamnya. Terutama pada bab penulisan kode. Hal tersebut membuat banyak orang menentukan memakai Blogger. Sebagai salah satu bab dari aplikasi milik Google, Blogger memperlihatkan banyak fitur menyerupai kebanyakan aplikasi blog engine.Sebagian besar pembuat blog akan tertarik untuk melaksanakan modifikasi tampilan blognya semoga sesuai dengan yang diinginkan. Berbagai macam kustomisasi sanggup dilakukan. Khususnya pada bab arahan CSS. Pengguna Blogger yang memahami cara kerja arahan HTML dan CSS mungkin akan mencoba mengubah tampilan blognya baik dari segi warna, posisi-posisi, dan animasi yang diterapkan pada halaman blog. Namun bagaimana dengan yang lebih lanjut menyerupai mengubah jenis font yang ada di blog!? Menggunakan font sendiri.
Tempat d0wnl0ad font gratis untuk Blogger
Terdapat puluhan halaman website di internet yang bisa menjadi tujuan anda untuk mendapat font gratis. Font Squirrel yakni salah satu situs yang menyediakan cukup banyak jenis font yang sanggup diperoleh secara gratis yang mempunyai lisensi komersil. Selain itu Google Fonts juga menyediakan layanan yang sama, terdapat lebih dari 800 jenis font yang sanggup anda peroleh. Adobe menyediakan layanan Edge Web Fonts yang memungkinkan anda mendapat lebih dari 500 web font pilihan.Selain situs-situs di atas, terdapat situs lain yang tidak kalah lengkap menyediakan banyak sekali jenis font yang sanggup anda peroleh secara gratis. Beberapa diantaranya yakni Dafont, 1001freefonts, Typekit, Fonts.com, Fonts2u, Cooltext yang menyediakan cukup banyak font untuk website dan desktop secara gratis.
Format font Web-Friendly
Tahukah anda bahwa font yang dipakai pada browser dari banyak sekali platform sanggup berbeda-beda. Bahkan untuk jenis browser yang berbeda sanggup mendukung jenis format font yang berbeda. Kemampuan browser yang semakin canggih membuat web designer semakin leluasa untuk berkreasi membuat halaman situs (website), termasuk dalam penggunaan font. Secara default kita mungkin telah mengenal beberapa jenis font yang sudah tersedia pada sistem operasi komputer dan smartphone, menyerupai Arial, Verdana, dan Times New Roman yang telah dipakai secara luas dan gratis. Font standar yang sudah ada tersebut dikenal sebagai Safe Font atau ada juga yang menyebutnya System Fonts.
Namun dengan dikembangkannya CSS3 ketika ini kita sanggup memakai banyak sekali jenis font selain safe font tadi, atau yang lebih dikenal dengan istilah custom fonts. Fitur Font-Face pada CSS3 menjadi awal kemunculan perlengkapan gres dalam halaman situs yaitu Web Fonts.
Web fonts bisa mempunyai beberapa jenis yang berbeda terhadap satu font yang sama, perbedaan tersebut terletak pada formatnya. Web fonts mempunyai beberapa jenis format, yang paling umum menyerupai OTF, TTF, dan WOFF. Berikut klarifikasi macam-macam format font.
TrueType Fonts (TTF)
Merupakan format yang dikembangkan oleh Apple dan Microsoft sekitar tahun 1980an sebagai pesaing untuk Type 1 fonts milik Adobe yang dipakai pada PostScript. TrueType kemudian menjadi format yang paling banyak dipakai pada Mac OS klasik, macOS, dan Microsoft Windows. Jenis format ini didukung oleh hampir semua web browser, termasuk IE (Internet Explorer) yang ketika ini sudah tidak dikembangkan lagi.OpenType Fonts (OTF)
OpenType merupakan format untuk font komputer yang terukur. Format OTF merupakan pendahulu dari format TrueType, format ini mempertahankan struktur dasar TrueType dan menambahkan banyak struktur data yang rumit untuk tetapkan sifat tipografi. Format ini merupakan format yang cukup banyak dipakai sebagai web font dan terdaftar sebagai merek dagang (trademark) Microsoft. Font dengan format OTF sanggup bekerja dengan baik pada hampir seluruh web browser.Web Open Font Format (WOFF)
Format font WOFF banyak dipakai pada website dan direkomendasikan oleh W3C (World Wide Web Consortium). File WOFF yakni font OpenType atau TrueType dengan menerapkan kompresi format-spesifik dan komplemen metadata XML. Format ini dibentuk dengan 2 tujuan utama. Pertama yakni untuk membedakan antara file font yang dipakai untuk web dan yang dipakai untuk aplikasi desktop melalui instalasi lokal. Kedua untuk mempermudah proses transfer file font dari server ke klien melalui koneksi jaringan. Makara dengan kata lain format ini merupakan format yang cocok dipakai sebagai format web fonts.WOFF 2.0 (WOFF2)
Seperti namanya WOFF2 merupakan format versi pembaruan dari WOFF yang asli. Format ini dikembangkan oleh Google dan dianggap sebagai format terbaik dibandingkan format lainnya alasannya memperlihatkan ukuran file yang lebih kecil alasannya kemampuan kompresinya yang lebih baik serta mengatakan performa yang lebih baik untuk web browser modern yang mendukung format tersebut.Embedded OpenType (EOT)
Embedded OpenType merupakan format font warisan yang dikembangkan oleh Microsoft. IE pada versi yang lebih usang akan memerlukan EOT untuk merender sebuah web font. EOT juga sering disajikan tanpa kompresi sehingga ada kemungkinan mempunyai ukuran file yang cukup besar. Format ini umumnya dipakai untuk mendukung para pengguna IE8 kebawah, namun kalau anda mengabaikan pengguna tersebut anda sanggup meninggalkan format ini. Makara selanjutnya anda sudah sanggup menentukan jenis format font paling efektif yang akan anda gunakan untuk halaman situs anda. Jika anda tidak mempunyai format font yang anda inginkan anda sanggup melaksanakan konversi terhadap format tersebut. Untuk mengkonversi satu format font menjadi beberapa jenis format font lain, anda sanggup melakukannya pada Online Font Converter atau online @font-face generator.
Cara memakai custom font di Blogger
Dapatkah custom font sendiri di Blogger?
Custom font merupakan proses menyediakan jenis font selain safe font pada halaman situs untuk mengatakan kesan tertentu. Hal ini merupakan sesuatu yang masuk akal dan seringkali dilakukan oleh web developer. Pada dasarnya hal terpenting yang perlu dilakukan yakni menyediakan file font secara cloud pada hosting yang sanggup dijangkau oleh sebuah website.Namun berbeda dengan Blogger. Pada dasarnya Blogger membatasi penggunanya untuk melaksanakan modifikasi dengan file pada sebuah blog. Hal ini merupakan hal yang masuk akal dan juga diterapkan pada WordPress versi gratis. Hal tersebut untuk menghindari pengguna yang akan menyimpan file tertentu dengan ukuran yang besar atau bahkan sebagai kawasan penyimpanan data berukuran bebas. Lalu apa artinya itu? Hal itu berarti anda tidak sanggup mengubah nama file hosting beserta permalink pada file tersebut serta tidak sanggup memindahkan file hosting secara bebas.
Lebih lanjut tentunya hal tersebut membuat anda tidak sanggup menimbulkan hosting Blogger sebagai kawasan anda memarkirkan file font anda untuk dipakai pada blog yang sama. Solusi yang sanggup anda gunakan untuk mengatasi hal tersebut yakni memakai layanan cloud hosting dari pihak ketiga. Cloud hosting merupakan layanan yang memungkinkan anda untuk meng-hosting (mengunggah dan menyimpan) file tertentu yang sanggup diakses secara cloud melalui jaringan internet.
Namun perlu anda perhatikan bahwa tidak semua cloud hosting mendukung web hosting. File hosting biasa berbeda dengan web hosting, perbedaannya yakni file hosting memungkinkan anda untuk eksklusif mendapat (d0wnl0ad) filenya baik itu merupakan file berformat HTML, PHP, CSS, JS yang berisi arahan yang sanggup dijalankan pada web browser. Sedangkan web hosting akan menampilkan isi dari file teks yang didukung, menyerupai file web pada umumnya. Namun untuk sekadar hosting file berjenis font solusi yang sanggup anda gunakan yakni dengan memakai layanan hosting dari GitHub.
Hosting file font dengan GitHub
Di atas telah dijelaskan bahwa anda akan memakai GitHub, artinya anda perlu mengetahui cara penggunaannya. Tapi sebelum itu anda perlu mengetahui cara mendaftar dan hosting file di GitHub. Setelah itu silakan login pada akun GitHub anda, pilih repository kawasan anda menyimpan file font tersebut. Pada bab tombol-tombol administrasi file pada repository, pilih Upload files. Selanjutnya silakan upload file font yang anda ingin gunakan. Misalnya akan dipakai font Pacifico. Silakan d0wnl0ad satu pack web fonts Pacifico disini. Pada file tersebut tersedia 6 file utama. Silakan upload keenam file tersebut pada repository anda. Pastikan anda menekan tombol Commit changes sehabis proses mengupload file selesai.
Setelah proses upload file-file anda akhir dan anda telah menekan tombol Commit changes, maka anda akan eksklusif melihat kesannya pada halaman awal repository tersebut. Selanjutnya klik kanan pada salah satu file font yang ingin anda gunakan untuk mendapat linknya. Sebagai teladan akan dipakai file Pacifico-Regular.ttf.
Setelah mendapat link dari salah satu font yang akan anda gunakan pada Blogger, selanjutnya silakan buka situs Rawgith4ck. Situs ini akan dipakai untuk mendapat raw files dari file repository GitHub. Tempel teks yang telah anda salin sebelumnya dari file repository GitHub pada kotak teks RawGit yang paling atas. Selanjutnya anda akan memperoleh dua URL yang bisa anda gunakan.
Perbedaan kedua URL tersebut terletak pada fungsi dan penggunannya. URL yang sebelah kiri memungkinkan anda untuk memperoleh link dengan isi dari file pada URL tersebut, sedangkan yang sebelah kanan memungkinkan anda untuk memperoleh filenya. Salin URL yang berada di sebelah kiri.
Silakan lakukan hal yang sama menyerupai di atas untuk memperoleh link dari setiap file font yang akan anda gunakan. Secara umum format font yang akan dipakai yakni EOT, WOFF2, WOFF, TTF, dan SVG. Makara silakan dapatkan link RawGit dari file-file font dengan format tersebut.
Memasang font pada Blogger
Langkah selanjutnya yang perlu anda lakukan yakni memasang font anda pada blog anda. Pada dasarnya untuk memasang font yang telah disimpan pada repository GitHub yakni dengan memakai URL nya. Perhatikan arahan CSS berikut.@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Kode CSS di atas yakni arahan yang dipakai untuk menghubungkan link URL font anda dari GitHub ke blog anda. Anda hanya perlu memasang arahan tersebut pada sintaks blog anda. Tetapi sebelum itu URL untuk mengarahkan file font harus menuju ke URL font di repository GitHub tadi. Sebagai contoh, berikut arahan yang telah dilengkapi dengan URL font dari GitHub AhliTekno dengan memakai Statically.
@font-face { font-family: 'Pacifico'; src: url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot'); /* IE9 Compat Modes */ src: url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.woff2') format('woff2'), /* Super Modern Browsers */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.woff') format('woff'), /* Pretty Modern Browsers */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.svg#Pacifico') format('svg'); /* Legacy iOS */ } Selanjutnya beralih ke halaman admin Blogger anda. Silakan masuk pada sajian Tema kemudian pilih Edit HTML. Selanjutnya temukan baris arahan
</style> atau untuk lebih kondusif temukan arahan ]]></b:skin> untuk meletakkan arahan CSS anda. Perlu anda perhatikan bahwa penempatan arahan ini penting untuk anda ketahui, pasalnya letak arahan akan menentukan bagaimana ia dijalankan. Pastikan anda menempatkan arahan CSS tersebut pada letak yang tepat. Yaitu tidak meletakkannya pada arahan CSS dengan lokasi khusus menyerupai arahan CSS yang diapit oleh conditional tag. Silakan tempatkan arahan CSS tersebut sebelum arahan ]]></b:skin>.Menggunakan custom font di Blogger
Sampai pada tahap ini anda telah menuntaskan proses pemasangan custom font pada blog anda. Selanjutnya untuk memakai font tersebut caranya tidak jauh berbeda dengan memakai font pada umumnya. Masih memakai arahan CSS anda hanya perlu mengatur jenis font yang dipakai dari suatu objek tertentu dalam HTML. Secara umum anda bisa mencoba menggunakannya dengan menambahkan tag HTML berikut.<div class="font-pacifico">Teks ini ditulis dengan font Pacifico!</div>
Beserta dengan arahan CSS berikut ini pada satu halaman yang sama atau yang sanggup diakses oleh tag HTML di atas.
.font-pacifico { font-family: 'Pacifico', sans-serif; font-size: 30px; } Atau secara umum anda sanggup memakai arahan berikut pada satu halaman yang sama.
<style> @font-face{font-family:'Pacifico';src:url('https://cdn.rawgit.com/AhliTekno/AhliTekno/a3291c46/Pacifico.eot');/* IE9 Compat Modes */ src:url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.woff2') format('woff2'),/* Super Modern Browsers */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.woff') format('woff'),/* Pretty Modern Browsers */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.ttf') format('truetype'),/* Safari,Android,iOS */ url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.svg#Pacifico') format('svg');/* Legacy iOS */} .font-pacifico{font-family:'Pacifico',sans-serif;font-size:30px} </style> <div class="font-pacifico">Teks ini ditulis dengan font Pacifico!</div> Penutup
Itulah beberapa langkah-langkah yang sanggup anda gunakan untuk sanggup memakai custom font atau memakai font sendiri pada Blogger. Pada dasarnya cara ini sanggup dipakai bukan hanya pada Blogger melainkan pada halaman situs manapun yang anda inginkan. Cara ini merupakan cara yang gampang untuk dipahami dan terksena gampang dalam prosesnya. Dengan begitu anda sanggup jadi lebih bebas melaksanakan kustomisasi pada tampilan halaman blog anda.Sumber http://www.maringngerrang.com/
Buat lebih berguna, kongsi:
