ldsjfiadnskl : Kode Javescrip Template

Showing posts with label Kode Javescrip Template. Show all posts

Cara Mudah Mengatasi Optimize CSS Dilivery Blogger

Mas Rendi 7:13 PM Kode Javescrip Template

Sebelumnya saya sudah sepat post tentang Cara Mengatasi Reder-Blocking Javascript jequery dan sekarang saya akan membahas langkah selanjutnya dari reder-blocking javascript yaitu Mengatasi Optimize CSS Dilivery Blogger yang saya kira hal ini sangat penting untuk diperbincangkan.

Mengapa pelu di bicarakan, karena hal ini penting untuk blogger kamu. Untuk mengetahui Cepat atau lambatnya loding blog kamu, hal ini juga bisa dipengaruhi dengan cara kamu memodifikasi templat blogger sehingga kamu perlu melihatnya di https://developers.google.com/speed/pagespeed/insights/

Langkah-langkah mengoptimalkan CSS Dilivery menurut google Insights

1. Metode Inline CSS Eksternal

Dalam inline haya diperbolehkan untuk CSS yang berukuran kecil kemudian kamu gabungkan ke dalam skin template blog. Kamu bisa lihat contohnya sepeti:

<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// css eksternal.css'/>
<b:skin> isi css......</b:skin>
</head>
<body>
</body>
</HTML>

Lalu kamu buat CSS eksternal tadi menjadi inline CSS dengan copy url di atas kemudian tenpel pada new tab browser seperti ini

New Tab Browser

Maka akan muncul sederetan CSS eksternal tersebut sebagai contoh seperti ini:

.element{
float:right;
background:#fff;
font-size: 8em;
text-decoration:none;
}

Untuk inline CSS nya akan menjadi seperti ini:

<!DOCTYPE html>
<HTML>

<head>
<b:skin>

.element{
float:right;
background:#fff;
font-size: 1.2em;
text-decoration:none;
}

</b:skin>
</head>

<body>
</body>
</HTML>

Kamu perhatikan peletakkan kode CSS nya di bagian mananya sehingga kamu akan dapat memahaminya.

2. Mengatasi Iline CSS Attribut pada HTML element

Hal ini sering terjadi ketika kamu menulis draf compose di bagian postingan sebelum kamu mempublikasikannya mulai dari merubah warna font texs dll.

Contoh inline attributnya akan tampak seperti ini:

HTML
<span style="color: #444444;"> TULISAN</span>
<div style="text-align:center"> TULISAN </div>

Tidak menutup kemungkinan inline attribut ini berada pada HTML templat blog dan biasanya berada pada kode berikut:

HTML
<div style="clear:both"/>

Langkah untuk mengatasinya dengan cara mengganti kode di atas dengan kode berikut ini.

<div class='clear'/>

Kemudian tambahkan juga kode CSS berikut tepat pada bagian atas kode ]]></b:skin>

.clear{clear:both;}

3. Cara Mengoptimalkan CSS Ekternal Blogger

Untuk melihat kode eksternal ini biasanya ada dua CSS ekternal pada defoult blogger yaitu:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/.....-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=.....'/>

Untuk "optimize css delivery blogger" pada kedua kode css ekternal tidak hanya cukup dengan menghapusnya karena, masih akan muncul saat kamu check di Page speed insight dan GTMetrix. Untuk mengatasinya kamu :

Ganti kode <head> menjadi <head> dan </head> menjadi

Peringatan
Cara ini hanya berlaku pada templat bukan bawaan blogger melainkan temlate pihak ketiga.

Trik Mengatasi Render-Blocking Javascript Ddari Jquery

Mas Rendi 10:09 PM Kode Javescrip Template

Kamu pasti pernah sesekali melakukan tes situs, dengan menggunakan https://developers.google.com/speed/pagespeed/insights/ apa yang kamu lihat? dan apa respon kamu terhadap apa yang kamu lihat?

Pertama saya yakin pasti kamu tidak memperdulikannya, karena merasa tidak penting. Bila anda kaji dengan benar, ada masalah dengan kesehatan situs atau blogger kamu, maka perlu tinjauan untuk memperbaikinya.

Kedua saya yakin kamu penasaran, mengapa bisa seperti ini padahal sudah menggunakan template responsive, menarik dll. untuk itu tijau kembali kode-kode script yang ada di dalam template kamu barangkali ada yang double sehingga menyebabkan jquery tidak bekerja dengan baik pada template blogger kamu.

Trik Mengatasi Render-Blocking Javascript Ddari Jquery

Ssaya sendiri juga sama seperti kamu semua, yang pertama saya bersikap acuh, namun saya pikir-pikir measara penasaran juga dengan hal itu akhirnya saya pun meninjaunya ulang dan terus mempelajarinya dan tak bisannya saya bertanya terus menerus sama mbah google, dan akhirnya seperti ini:

Sebelum Diatasi Render-Blocking Javascript Ddari Jquery

Sebelum diperbaiki

Saya menemukan petunjuk untuk menggunakan atribut HTML async pada Jquery-nya. Sebelumnya Jquery saya simpan di edit HTML sebagai berikut:

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

Sesudah Diatasi Render-Blocking Javascript Ddari Jquery

Stelah diperbaiki

Kemudian saya mencoba menambahkan atribut HTML async menjadi seperti berikut:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Jika ada kesamaan antara kesalahan di situs kamu dengan yang saya post jangan ragu untuk memperbaikinya, dan perhatikan dengan benar antara script pertama dan kedua karena ada perbedaan dengan begitu maka demikianlah artikel tentang Trik Mengatasi Render-Blocking Javascript Ddari Jquery semoga bermanfaat.

Baca Juga: Cara Membuat Template Bawaan Blogger Menjadi Responsive

Cara Mudah Membuat Template Bawaan Blogger Menjadi Responsive

Mas Rendi 8:59 PM Kode Javescrip Template

Telah kita ketahui bersama, sekarang ini banyak sekali benrmunculan template dengan berbagai gaya dan trend yang membuat tampilan blogger menjadi lebih fresh dan menarik bila pengunjung datang ke web site kamu dan pastinya akan merasa lebih betah.

Sebenarnya gaya dan tampilan menarik itu memang sangat diminati banyak kalangan blogger khususnya saya sendiri, namun sekarang telah muncul lagi dengan gaya template responsive tidak hanya bisa respon dengan dekstop, namun dengan perangkat mobile juga respon "dalam artian template itu dapat menyesuaikan sesuai dengan alat yang digunakan untuk mengaksesnya" dan dengan tampilan yang masih sama menariknya dengan template-template sebelumnya.

Nah pada kesempatan yang luasr biasa ini saya akan membahas Cara Mudah Membuat Template Bawaan Blogger menjadi Responsive postingan ini sebenarnya sudah ada pada template bawaan blogger. Menggunakan template bawaan blogger maka kamu akan terbebas dari kreadit link karena kamu memodifikasi template itu sendiri.

Untuk bisa diakses melalui hp maka kamu harus menyetingnya seperti ini:

Cara Mudah Membuat Template Bawaan Blogger Menjadi Responsive

Kamu buat blog baru lalu pilih salah satu template yang anda di blogger contoh seperti pada gambar di bawah ini:

Cara Mudah Membuat Template Bawaan Blogger Menjadi Responsive

Kemudian langkah selanjutnya mari kita jadikan template bawaan blogger menjadi responsive mobile friendly caranya sebagai berikut.

1. Non aktifkan navbar blogger

Kamu klik layout/ tata letak pilih Edit Gadget Navbar= lalu pilih option OFF untuk menonaktifkan navbar. contoh gambar seperti di bawah ini

Cara Mudah Membuat Template Bawaan Blogger Menjadi Responsive

2. Kamu klik Template lalu Edit HTML

Kamu cari kode dibawah ini dengan menggunakan {CTRL+F}

.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }

3. Setelah kamu temukan kode di atas lalu kamu hapus dan ganti dengan kode di bawah ini

.post-body img, .post-body .tr-caption-container { padding: 0; width:auto; max-width:100%; height:auto; }

4. Kamu cari lagi kode di bawah ini caranya seperti pada nomer 2.

<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

5. Ketika kamu temukan hapus dan ganti dengan kode di bawah ini

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

6. Langkah selanjutnya kopy dan paste kode di bawah ini dan letakkan tepat DI ATAS kode </head>

<style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width:100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

7. Klik Save

Kini template bawaan blogger kamu sudah responsive cek hasilnya di https://www.google.com/webmasters/tools/mobile-friendly/