Showing posts with label BLOGGER. Show all posts
Showing posts with label BLOGGER. Show all posts

Jan 18, 2017

Cara Terbaru Memasang Video Youtube Responsive di Blog

Dengan membuat video youtube yang awalnya tidak responsive menjadi responsive ternyata cukup mudah, kita perlu menambahkan pengaturan di css mengubah iframe , video dan embed dengan width 100% , karena ukuran persenlah inti dari responsive.
Seperti yang kita tahu bahwa iframe itu tidak baik untuk seo , kalau kita masang video youtube cuma mengambil script iframenya doank , tanpa di modifikasi sama sekali , meskipun itu simple dan mudah sekali tapi mau blog anda kurang SEO.

Berikut cara membuat youtube menjadi responsive dan tidak mengurangi nilai SEO :
01. Tambahkan kode dibawah ini sebelum kode </b:skin> atau </style>
/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
02. Tambahkan kode dibawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
03. Simpan template
04. Tambahkan kode dibawah ini pada postingan anda di HTML bukan Compose
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/ITHKAu4xmNg">
</div>
</div>
</div>
05. Simpan dan Publikasi postingan anda.

Jan 12, 2017

Tips dan Trik Agar Loading Blogger Ringan

Kecepatan loading sebuah blog sangat dipengaruhi oleh kode-kode pemrograman yang ada pada template. Untuk itu dalam memilih template, jangan cepat tergiur oleh judul artikel dengan embel-embel "fast loading".
Banyak alat yang bisa dipakai untuk mengecek kecepatan loading blog. Salah satunya pagespeed insight. Tool gratis dari Google ini memiliki tingkat akurasi yang jempolan lengkap dengan solusi perbaikan yang disarankan untuk Anda lakukan.

Silahkan cek loading blog Anda saat ini juga. Jika score yang Anda peroleh menunjukkan indikator warna merah atau kuning, Anda wajib waspada. Itu sinyal yang memberitahu kerja loading blog Anda masih lamban dan butuh perbaikan.

Lewat artikel ini saya bagi tips yang bisa Anda terapkan agar loading blog Anda lebih enteng dan ngebut.

Tips agar Loading Blog Ringan dan Cepat
Loading halaman super cepat (versi desktop dan mobile) sangat di sukai oleh mesin pencari dan penggunanya.

Dimata search engine, blog dengan loading yang ringan memiliki struktur yang mudah untuk dirayapi. Bagi pengunjung, cepatnya waktu loading tak akan membuat mereka lama menunggu.

Nah, berikut ini tips yang saya sarankan untuk Anda lakukan, demi kepuasan pembaca blog Anda.

1. Kode Jquery harus asinkron
Hampir di semua template sebuah website terdapat kode script jquery. Jquery adalah library JavaScript multiplatform yang dirancang agar menyusun client-side script pada file HTML menjadi lebih mudah.

Dengan syntax jquery, para pengembang template lebih gampang dalam merancang berbagai plugin berbasis JavaScript. Plugin inilah yang dipakai untuk menyusun abstraksi seperti interaksi animasi, dan efek yang kompleks dari berbagai widget yang dapat dikonfigurasikan.

Namun begitu, penempatan kode jquery pada template haruslah dibarengi dengan kode asinkron agar kerja loading blog jadi lebih ringan dan cepat. Silahkan buka template Anda, cari kode jquery seperti ini:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
Untuk menambah kecepatan loading blog, tambahkan kode asinkron (tulisan warna biru) hingga jadi seperti di bawah ini.
<script async='true' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

2. Hapus kode jquery pada widget
Saat memasang widget pada blog, perhatikan kode script nya. Hapus jika ada kode jquery di dalamnya. Anda tak perlu khawatir jika widget tidak akan muncul, karena secara otomatis kode jquery nya sudah di load dari template Anda.

Andai kode jquery pada widget tidak dihapus, justru akan membebani loading blog. Resiko nya tentu widget akan lama tampil, atau muncul tapi tidak sempurna. Dan dikhawatirkan akan menimbulkan konflik jquery pada template.

3. Kompres gambar
Setiap artikel butuh gambar untuk visualisasi nya. Gambar pun bisa di optimasi untuk mendekatkan artikel di halaman bergengsi. Masalahnya tiap gambar punya muatan file dan format yang berbeda. Perhatikan kedua hal itu saat memasang gambar untuk artikel Anda.

Makin besar ukuran file dan resolusinya, daya muat blog akan semakin berat. Itulah perlunya meng-kompres gambar agar ukuran file jadi lebih ramping. Jangan buat blog Anda tersiksa, segera perkecil file gambar Anda.

4. Minimalkan html template
Untuk membantu meringankan kerja loading, HTML template pun perlu diperkecil ukurannya. Banyak situs yang memberikan layanan gratis untuk merampingkan HTML. Salah satunya adalah HTML Compressor.

Selain mudah, hasil kompresinya akan tetap mempertahankan kode script asli pada template Anda. Mereka hanya ‘membuang’ kode-kode yang memang tidak dibutuhkan.

Perlu diingat, sebelum melakukan tips ini, backup dulu template Anda.

Berikutnya, buka alamat ini https://htmlcompressor.com lalu klik boks hijau bertuliskan “Start Using Now”. Dari edit html, gunakan ctrl+A lalu copy dan paste kan html template Anda pada kotak source di halaman HTML Compressor. Selanjutnya klik compress. Tunggu beberapa saat.

Setelah muncul hasil kompres, pilih select all, lalu paste kan ke html template Anda. Pratinjau template, jika tidak terjadi masalah simpan template.

Agar lebih yakin, coba cek URL homepage dan URL artikel ini pada pagespeed insight. Lihat skornya ?

5. Pisahkan kode asinkron iklan pada css template (khusus blog adsense)
Tips ini khusus buat pemain Adsense blog. Tahukah Anda, iklan termasuk salah satu penyebab lambatnya tampilan loading halaman sebuah blog, tak terkecuali iklan Adsense.

Andai ada lebih dari satu iklan Adsense yang terpasang pada blog, mengakibatkan terjadinya pengulangan pada pembacaan kode asinkron. Ini bisa memperlambat daya muat loading. Tapi tenang, ada cara untuk menyiasatinya.

Secara umum, kode script iklan Adsense adalah seperti ini.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog si kuya 300x250 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Sengaja saya beri warna pada kode tersebut agar lebih mudah membedakannya. Untuk mempercepat loading iklan, prosesnya mirip dengan pemasangan kode jquery di atas.

Pisahkan kode asinkron iklan Adsense (tulisan warna biru) lalu tempatkan pada CSS template, tepatnya di bawah kode </b:skin>. Selanjutnya, saat memasang kode iklan lewat widget atau pun dalam postingan, cukup body iklan nya saja yang Anda pasang (tulisan warna merah).

Pemisahan ini tujuan nya agar saat proses loading, kode asinkron di load cukup sekali untuk semua iklan yang terpasang sehingga loading pun jadi lebih enteng.

6. Modifikasi css bundle blogger
Bagi Anda yang sering ngecek speed loading lewat pagespeed insight, dan kebetulan mendapat skor warna merah atau kuning, tentu tidak asing dengan warning ini “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.

Peringatan itu memberitahu bahwa ada script di konten paruh atas pada template yang menghalangi proses render. Salah satu nya adalah css bundle blogger.

Solusinya cukup mudah. Cari kode <b:skin>….</b:skin> lalu letakkan kode di bawah ini sebelum kode <b:skin>.
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*
Simpan template, dan cek kembali skor Anda.

7. Pasang widget seperlunya
Peran widget sangatlah penting. Sebagai blogger yang cerdas, Anda harus bisa menentukan apa saja widget yang mujarab untuk meningkatkan pageview.

Utamakan widget yang berfungsi sebagai navigasi untuk menggiring pengunjung agar mengklik artikel yang ada pada blog. Jangan pasang widget yang nggak penting bagi pembaca yang justru akan ‘menyiksa’ blog Anda.

Menurut saya, ada 3 widget yang wajib Anda pasang yaitu popular post, recent post, random post. Diluar ketiganya, saya anggap tidak terlalu penting.


Sumber : http://www.maseteguh.com/

Cara Mengetahui Warna Blog Orang Lain

Ketika Anda mengunjungi blog atau situs orang lain ada kalanya Anda tertarik warna pada blog atau situs yang dimaksud. Anda juga ingin mengetahui kode warna karena mereka ingin menginstalnya pada blog Anda. Namun, Anda mengalami kesulitan mengetahui kode. Jangan khawatir, di sini bagimana bagaimana kita bisa mengetahui kode warna blog orang lain dan Anda akan dengan mudah mengetahui kode warna. Anda melakukan ini dengan menggunakan ekstensi Mozilla disebut ColorZilla. Anda tinggal sorot warna yang ada, maka ekstensi ini menginformasikan kode warna tersebut.

Berikut adalah cara menginstal dan menggunakan ColorZilla.
01. Disini saya menggunakan browser Firefox. Kalau anda menggunakan Chorme pilih Chrome.
02. Kunjungi situs ColorZilla.
03. Pilih tombol Install ColorZilla.
04. Muncul pop-up pilih Klik Allow untuk penginstalan ColorZilla.
05. Lalu pilih Install Now.
06. Setelah selesai, restart browser mozilla Anda.
07. ColorZilla akan muncul di bagian atas kirinya browser Anda.
08. Untuk menggunakannya, klik tanda colorzilla.
09. Lalu sorot warna yang ingin Anda ketahui kodenya. Kemudian klik..
10. Hasil klik tadi akan secara otomatis mengcopy kode tersebut.

Sekian dan terima kasih telah berkunjung Cara Mengetahui Warna Blog Orang Lain dengan ColloZilla. Selamat mencoba..

Jan 6, 2017

Kode Warna di Blogger

Mungkin anda bertanya kenapa saya memposting ini. Awalnya saya masih awam soal kode-kode warna pada HTML. Kejadiannya ketika saya sendiri memasang sebuah widget yang latar belakang warnanya sudah bawaan. Trus saya ingin sekali mengganti warna latar belakang widget itu. Itulah cerita singkat mengenai postingan ini. Kunjungi Kumpulan Kode Warna di Blogger...
Apalagi saya suka blog dengan kombinasi warna yang sangat padu dan serasi. Warna-warna ini membuat blog semakin cantik dan menarik. Kalau anda masih suka mengganti template, maka tidak ada salahnya untuk mencoba kode warna ini. Banyak situs yang menyediakan free color code, namun saya sengaja membuat posting ini untuk kemudahan akses mengganti warna blog jika nanti diperlukan.

Jan 4, 2017

Cara Membuat Tampilan Font di Blogger

Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Hal ini sebenarnya sangat mudah jika template blog Anda meliputi fungsi variabel untuk mengubah font. Jadi bagaimana jika template blog Anda tidak dilengkapi dengan variabel?

Kebanyakan template download tidak dapat diedit di perancang template. Jadi untuk mengubah font, Anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT
  • Buka halaman http://www.google.com/webfonts/#
  • Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.
  • Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
  • Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperluka.
  • Jika anda sudah selesai memilih huruf silahkan klik USE.
  • Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan.
    • Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya.
    • Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini.

    • Ketiga, copy kode yang diberikan untuk dipasang di blog.

MENAMBAHKAN FONT PADA BLOG
  • Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
  • Pilih menu TEMPLATE lalu EDIT HTML.
  • Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy.
  • Jangan lupa untuk menambahkan kode "/" sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah.
  • Simpan Perubahan.
  • <link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' / >
MENGGUNAKAN FONT
Setelah melakukan langkah di atas anda sudah menambahkan jenis font pada blog anda. Ada dua cara untuk mengganti font pada blog anda.
01. Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine
  • Masuk ke menu TEMPLATE >> EDIT HTML.
  • Centang Expand Template Widget.
  • Copy semua kode yang muncul.
  • Buka notepad dan paste kode yang dicopy tadi.
  • Tekan Ctrl+H untuk membuka Tool Replace.
  • Isi kolom Find What dengan Arial.
  • Isi kolom Replace With dengan BenchNine.
  • Klik tombol REPLACE ALL.
  • Copy kode yang sudah berubah tadi.
  • Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad.
  • Simpan Perubahan.
02. Mengganti Font Elemen Tertentu Saja
Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template. Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:
  • Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
  • Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS.
  • .post h2 {
    font-family: BenchNine;
    }
    .post h2 a, .post h2 a:visited, .post h2 strong {
    font-family: BenchNine;
    }
    .post h2 strong, .post h2 a:hover {
    font-family: BenchNine;
    }
  • Simpan Template.
font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

Tekno Warung - Jan, 4 2017
Sumber : http://trikmudahseo.blogspot.com/

Dec 29, 2016

Kumpulan Kode Warna di Blogger

Kumpulan kode warna HTML yang juga dapat dibuka dan dilihat di photoshop ini selain dapat dikombinasikan untuk memberi variasi dalam melihat warna yang tampil, juga sebagai salah satu upaya untuk mempercantik blog atau website. Warna-warna dalam HTML mempunyai kode tersendiri, misalnya warna putih mempunyai kode #FFFFFF, warna hitam dengan kode #000000 dan lain sebagainya. Berikut kode, nama warna dan contoh warnanya :



No Code Name Color Color
01 #F0F8FF Alice Blue
02 #FAEBD7 AntiqueWhite
03 #00FFFF Aqua
04 #7FFFD4 Aquamarine
05 #F0FFFF Azure
06 #F5F5DC Beige
07 #FFE4C4 Bisque
08 #000000 Black
09 #FFEBCD BlanchedAlmond
10 #0000FF Blue
11 #8A2BE2 BlueViolet
12 #A52A2A Brown
13 #DEB887 BurlyWood
14 #5F9EA0 CadetBlue
15 #7FFF00 Chartreuse
16 #D2691E Chocolate
17 #FF7F50 Coral
18 #6495ED CornflowerBlue
19 #FFF8DC Cornsilk
20 #DC143C Crimson
21 #00FFFF Cyan
22 #00008B DarkBlue
23 #008B8B DarkCyan
24 #B8860B DarkGoldenRod
25 #A9A9A9 DarkGray
26 #006400 DarkGreen
27 #BDB76B DarkKhaki
28 #8B008B DarkMagenta
29 #556B2F DarkOliveGreen
30 #FF8C00 Darkorange
31 #9932CC DarkOrchid
32 #8B0000 DarkRed
33 #E9967A DarkSalmon
34 #8FBC8F DarkSeaGreen
35 #483D8B DarkSlateBlue
36 #2F4F4F DarkSlateGray
37 #00CED1 DarkTurquoise
38 #9400D3 DarkViolet
39 #FF1493 DeepPink
40 #00BFFF DeepSkyBlue
41 #696969 DimGray
42 #1E90FF  DodgerBlue
43 #B22222 FireBrick
44 #FFFAF0 FloralWhite
45 #228B22 ForestGreen
46 #FF00FF Fuchsia
47 #DCDCDC Gainsboro
48 #F8F8FF GhostWhite
49 #FFD700 Gold
50 #DAA520 GoldenRod
51 #808080 Gray
52 #008000  Green
53 #ADFF2F GreenYellow
54 #F0FFF0 HoneyDew
55 #FF69B4 HotPink
56 #CD5C5C IndianRed
57 #4B0082 Indigo
58 #FFFFF0 Ivory
59 #F0E68C Khaki
60 #E6E6FA Lavender
61 #FFF0F5 LavenderBlush
62 #7CFC00 LawnGreen
63 #FFFACD LemonChiffon
64 #ADD8E6 LightBlue
65 #F08080 LightCoral
66 #E0FFFF LightCyan
67 #FAFAD2 LightGoldenRodYellow
68 #D3D3D3 LightGrey
69 #90EE90 LightGreen
70 #FFB6C1 LightPink
71 #FFA07A LightSalmon
72 #20B2AA LightSeaGreen
73 #87CEFA LightSkyBlue
74 #778899 LightSlateGray
75 #B0C4DE LightSteelBlue
76 #FFFFE0 LightYellow
77 #00FF00 Lime
78 #32CD32 LimeGreen
79 #FAF0E6 Linen
80 #FF00FF Magenta
81 #800000 Maroon
82 #66CDAA MediumAquaMarine
83 #0000CD MediumBlue
84 #BA55D3 MediumOrchid
85 #9370D8 MediumPurple
86 #3CB371 MediumSeaGreen
87 #7B68EE MediumSlateBlue
88 #00FA9A MediumSpringGreen
89 #48D1CC MediumTurquoise
90 #C71585 MediumVioletRed
91 #191970 MidnightBlue
92 #F5FFFA MintCream
93 #FFE4E1 MistyRose
94 #FFE4B5 Moccasin
95 #FFDEAD NavajoWhite
96 #000080 Navy
97 #FDF5E6 OldLace
98 #808000 Olive
99 #6B8E23 OliveDrab
100 #FFA500 Orange
101 #FF4500 OrangeRed
102 #DA70D6 Orchid
103 #EEE8AA PaleGoldenRod
104 #98FB98 PaleGreen
105 #AFEEEE PaleTurquoise
106 #D87093 PaleVioletRed
107 #FFEFD5 PapayaWhip
108 #FFDAB9 PeachPuff
109 #CD853F Peru
110 #FFC0CB Pink
111 #DDA0DD Plum
112 #B0E0E6 PowderBlue
113 #800080 Purple
114 #FF0000 Red
115 #BC8F8F RosyBrown
116 #4169E1 RoyalBlue
117 #8B4513 SaddleBrown
118 #FA8072 Salmon
119 #F4A460 SandyBrown
120 #2E8B57 SeaGreen
121 #FFF5EE SeaShell
122 #A0522D Sienna
123 #C0C0C0 Silver
124 #87CEEB SkyBlue
125 #6A5ACD SlateBlue
126 #708090 SlateGray
127 #FFFAFA Snow
128 #00FF7F SpringGreen
129 #4682B4 SteelBlue
130 #D2B48C Tan
131 #008080 Teal
132 #D8BFD8 Thistle
133 #FF6347 Tomato
134 #40E0D0 Turquoise
135 #EE82EE Violet
136 #F5DEB3 Wheat
137 #FFFFFF White
138 #F5F5F5 WhiteSmoke
139 #FFFF00 Yellow
140 #9ACD32 YellowGreen

Dec 25, 2016

Cara Youtube Responsive di Blogger

Ada kalanya kita harus memasukkan video ke dalam posting dan sering merupakan video yang diambil dari Youtube, sekarang bahwa video dapat ditonton dengan nyaman oleh pengguna ponsel itu harus dibuat responsif, oleh karena itu, saat ini akan berbagi cara menginstal video Youtube responsif bawaan.
Cara Membuat Youtube Responsif Standar :
01. Log In ke Blog anda
02. Pilih Template - Edit HTML
03. Cari ]]></b:skin> dari letakkan kode dibawah ini tepat di atas ]]></b:skin>
.teknowarung-vdo { width:100%; max-width:560px; margin:15px auto; } .teknowarung-vdowp { position:relative; padding-bottom:56%; padding-top:0; height:0; background-color:#000 !important; } .teknowarung-vdowp iframe,.seocips-vdowp object,.teknowarung-vdowp embed { position:absolute; top:0; width:100%; height:100%; }
04.Masukkan kode dibawah ini ke artikel anda pada HTML sebelah Compose
<div class="teknowarung-vdo">
<div class="teknowarung-vdowp bottomshadows">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU" width="560"></iframe> </div>
</div>
05. Save Template

Keterangan :
Biru : Ganti yang berwarna BIRU dengan video anda. Atau anda bisa mengganti seluruh URL seperti diatas.

Sekarang video youtube terpasang di posting sudah responsif, yang berarti video dapat menyesuaikan ukuran layar apapun. Semoga bermanfaat untuk semua blogger. Terima kasih.