Tutorial Blog Unik: January 2015

Cara Membuat Efek Page Loading Di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Efek Page Loading Di Blog</b> - Tutorial blogger pemula akan bertambah koleksi lagi di blog kecil saya ini. Saya akan beri tutorial yang satu ini khusus untuk sobat yang berbaik hati mengunjungi blog saya ini. Dikarenakan tutorial blogger yang satu ini jarang sekali dipakai oleh para blogger atau pembuat blog untuk mengikuti tutorial ini. Tutorial tersebut adalah <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-efek-page-loading-di-blog.html" rel="dofollow" title="Cara Membuat Efek Animasi Page Loading Di Blog">Cara Membuat Efek Animasi Page Loading Di Blog</a></b>. Saya sendiri memakai tutorial yang satu ini. :D</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjnmZfk-Ze2a3aoN7N35OPDMqTo8xlgUFzguKhQgsDsRnDNQbWT7bJDF3zrcTwUQM6dtg9s57Mf7Apoe0TdJGiY2vEwZBLRdgirdqVgoBh_bmBn_n29uDoNPbsPy3gsJk-BSvOfim28OB/s1600/fahmi+fanirius+-+loading+14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjnmZfk-Ze2a3aoN7N35OPDMqTo8xlgUFzguKhQgsDsRnDNQbWT7bJDF3zrcTwUQM6dtg9s57Mf7Apoe0TdJGiY2vEwZBLRdgirdqVgoBh_bmBn_n29uDoNPbsPy3gsJk-BSvOfim28OB/s1600/fahmi+fanirius+-+loading+14.png" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> Sudah seperti yang saya katakan diatas bahwa tutorial yang satu ini jarang dipakai oleh para blogger entah kenapa tidak memakai tutorial yang satu ini. Padahal tutorial yang satu ini menurut saya terlihat keren. Efek animasi page loading di blog ini akan muncul ketika pengunjung sobat klik link yang merupakan link dari blog sobat sendiri dan akan pergi ke link atau tautan yang dituju.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Sebelum saya beri tutorial nya, saya akan jelaskan bagaiman tutorial cara membuat efek animasi page loading blog. Efek animasi page loading ini akan muncul menutupi halaman blog ketika pengunjung klik sebuah link di dalam blog sobat. Tapi, jika koneksi pengunjung sobat benar-benar lelet alias lambat, gambar animasi ini tidak akan muncul. :v *justkidd Cara menambahkan efek animasi page loading ini menggunakan kode jQuery. Tapi ini tidak akan memperlambat blog sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Langsung saja, saya akan jelaskan tutorial ini.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;">]]></b:skin> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">/* Efek Page Loading */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(<span style="color: cyan;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF</b></span>) no-repeat 50% 50%;padding:1em 1.2em;display:none}</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Cari lagi kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></body></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">7. Copy kode jQuery ini lalu paste dan letakkan kode nya tepat DIATAS kode </body></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">8. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Ganti URL gambar nya sesuai dengan keinginan gambar animasi sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Disini saya hanya memberi beberapa animasi loading saja. Jika sobat ingin mencari sendiri ya silahkan. Atau bisa cari di <span style="color: #073763;"><b>www.preloader.net </b></span></span><span style="font-family: Arial, Helvetica, sans-serif;">Untuk mengambil URL gambar dibawah ini dengan cara klik kanan gambar yang dipilih sobat, lalu 'Copy image URL'</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdZ28DSWMYBLE7wXBsJ_A8QeU1c1_sHF_jTYx6ZOGOdgT9QAry1KUNsdhKuJPBIWy4bHDAmoFfRjscc_kS5MCUjcj10_KHCGqXh9Iteq_F7zOLNGeUnaxR_y1skY6udauF5ZbLQ7TPvX5/s1600/Fahmi+Fanirius+-+loading10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdZ28DSWMYBLE7wXBsJ_A8QeU1c1_sHF_jTYx6ZOGOdgT9QAry1KUNsdhKuJPBIWy4bHDAmoFfRjscc_kS5MCUjcj10_KHCGqXh9Iteq_F7zOLNGeUnaxR_y1skY6udauF5ZbLQ7TPvX5/s1600/Fahmi+Fanirius+-+loading10.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoe5d9tXDXw07YS21Ek8YEVg4f5Op0rvRpD94_VfWV6ogr1YfcXs6kgiI4yTX0WuJJiTqmeZJsCPtEoN856NIllp2ziz2073Mxf2aJrd9Ex0ysw9571fcGGf47wWvohuIvTpSZLGWQmiID/s1600/loading10.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknLwvxFJO13WdhvkQgdm20ZVGyNaveeEr6uEDJmNbwU0fRgq_McZHkrYeyZOSUoXt19r6Aol-8iE2338eLz_5pl0b0OrTQ8iw2apqW_lnM1VBFo7lRkJlr5nhraQKRUfpkpGd3dzEtXwD/s1600/Fahmi+Fanirius+-+loading3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknLwvxFJO13WdhvkQgdm20ZVGyNaveeEr6uEDJmNbwU0fRgq_McZHkrYeyZOSUoXt19r6Aol-8iE2338eLz_5pl0b0OrTQ8iw2apqW_lnM1VBFo7lRkJlr5nhraQKRUfpkpGd3dzEtXwD/s1600/Fahmi+Fanirius+-+loading3.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 20.7999992370605px;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithm5uVjMa4k49_dJy5fPhXEP3mNLs4aMtuvtzp4sqzBJnPP6QuFdGLpFX1A5yVKmdp6_PgRYbGaaPCnbwV1vkJLnNSUfsab4kty6LyEIdFJRVoC56Y74CCvVxx9_3EV4DgKAsBXdD2Mti/s1600/loading7.gif</span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTRtraDniW1hxoL2SvwDjECwNFAFjI3HvA8ei9353AE7kL-XHP82zYXfB_phbmXoTIhv-RxtkhFpKMEM0Nf5ffSu_Ks1cabqj88ykc5A4a6vg1pzyOotIw4xgJuaEJsh1J0UzXkM3r_ou/s1600/Fahmi+Fanirius+-+loading6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTRtraDniW1hxoL2SvwDjECwNFAFjI3HvA8ei9353AE7kL-XHP82zYXfB_phbmXoTIhv-RxtkhFpKMEM0Nf5ffSu_Ks1cabqj88ykc5A4a6vg1pzyOotIw4xgJuaEJsh1J0UzXkM3r_ou/s1600/Fahmi+Fanirius+-+loading6.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouBE_1tcFVC4gcdtFS3y0ahxHH4K_mEpv6rHh_fQsmIVE-TQaGITQIVNJox-vSmCHzFwYzYXNf2ZVdyu3851WaO4llFWjXjhxZXy4sttS5BnthnP2aO4vGVWZi1VmMLlyn3-ySGZwy79H/s1600/loading6.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LAZ3sposyewsHOEx0Rtey5oB4e3PWExTRUiRYXpLyuN5VXKeuSH7NzHLP_ZUqO68ll7TNHS6v3vO7Qhnf9NIOvFi1WIo57Tm27Lvm5Kvbj_dHpAEkIq0AJ1Q0Dwn-0ZhzbYmyrr9JmI3/s1600/Fahmi+Fanirius+-+loading5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LAZ3sposyewsHOEx0Rtey5oB4e3PWExTRUiRYXpLyuN5VXKeuSH7NzHLP_ZUqO68ll7TNHS6v3vO7Qhnf9NIOvFi1WIo57Tm27Lvm5Kvbj_dHpAEkIq0AJ1Q0Dwn-0ZhzbYmyrr9JmI3/s1600/Fahmi+Fanirius+-+loading5.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cPP6nPwFOjfL9yy2UVZmyihzEftSNQxfsZNEQj2VQ_gtlgNqc6a64oK3_cvfbozZaBADTfMNKppmkjB27D_PMZWHcIaO8kymbSiKBFV0kRxzbbFoAWDFG5jtFeEp_SVWDMuxU7bxgYHE/s1600/loading5.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xMc213h6LprsCvS4jsVeXNGDygcmkK62wykKmt7VHI15pl2xkCYQfJg8lprBrZEeZ1sa8fA_gYNJH_yY2OuaSRtrKkJ-h9hbCvl_a2GyWazT3yJfWpmOprMJiY-_ceirNva35n1ePek6/s1600/Fahmi+Fanirius+-+loading4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xMc213h6LprsCvS4jsVeXNGDygcmkK62wykKmt7VHI15pl2xkCYQfJg8lprBrZEeZ1sa8fA_gYNJH_yY2OuaSRtrKkJ-h9hbCvl_a2GyWazT3yJfWpmOprMJiY-_ceirNva35n1ePek6/s1600/Fahmi+Fanirius+-+loading4.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBBYa2BPNHIF3XDC4VT2V_vqc9Add9XilyUp0fUFTqjuw1R6sOOgOH5mRTaBRaKFK8_VtFVn9-enJJXUqgzIb3sXxsAov0vz6UVbtXoFhqjZ8GAmU8pFHg7JSvSUJh6qAYihkgx4ghdGo/s1600/loading4.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw2ExJjC-9uPa44kBDKKLQ-DxIG8XAoXZe6EI-GAB-5Y-Q6XYNAwm-vVYLAm5m2S3G30xbVg8_uBFL3G4TSijosUO8Q9yogueevt6NlkRDwyiIDHNs7SRmrktbNtf9MPfLWE1F__KU7g1/s1600/Fahmi+Fanirius+-+loading2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw2ExJjC-9uPa44kBDKKLQ-DxIG8XAoXZe6EI-GAB-5Y-Q6XYNAwm-vVYLAm5m2S3G30xbVg8_uBFL3G4TSijosUO8Q9yogueevt6NlkRDwyiIDHNs7SRmrktbNtf9MPfLWE1F__KU7g1/s1600/Fahmi+Fanirius+-+loading2.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Cl5QlZ-ifac_AtdJIXfS8q9DECb43D9qYjXxDVivktXw5DFRHL1dQzDqHeEbvriwAtmwXxVn6YsYAmTwMc8KQY9A9e0YIfTfcJa-gc8Y-69mf0dr8OTqqR18IkEcpiK9cwzuFToaYs3U/s1600/loading2.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh2Hq-v2pc4K2Jjo9trQOJuRDYx6mbYtu8qmfRbnJ1Tf9yRuX_icYTA4uYpMhndFFK1l7D9xVLbCRwzA9FNp0OPH8UrpXRKww1OckhLK1fM6ZXxaHMJVXEpjJUQzHcWbfWhFPUAoRzhzY6/s1600/Fahmi+Fanirius+-+loading1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh2Hq-v2pc4K2Jjo9trQOJuRDYx6mbYtu8qmfRbnJ1Tf9yRuX_icYTA4uYpMhndFFK1l7D9xVLbCRwzA9FNp0OPH8UrpXRKww1OckhLK1fM6ZXxaHMJVXEpjJUQzHcWbfWhFPUAoRzhzY6/s1600/Fahmi+Fanirius+-+loading1.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_35Szm52T9Yp4aXzhg6sskrWDLiWlAjz6UqlWEzKHAnhVwBawdrQ7VY4Bo8YqhGH0gkY2psRN98k7nUoSlDop3mMd100qKaMPAwsJZNOoQMYzur8K4RtpYoDCB7WXxenxcoKDne1GukL/s1600/loading1.gif</span><br />
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF" style="margin: 0px; max-width: 80%; padding: 0px;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF</span></div>
</div>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Efek Page Loading Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat efek animasi page loading di blog membuat blog Anda terlihat lebih keren ketika pengunjung Anda klik link/tautan yang ada di dalam blog.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 1947 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Cara Membuat Efek Page Loading Di Blog - Tutorial blogger pemula akan bertambah koleksi lagi di blog kecil saya ini. Saya akan beri tutorial yang satu ini khusus untuk sobat yang berbaik hati mengunjungi blog saya ini. Dikarenakan tutorial blogger y…

Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog

5:44 AM Unknown 19

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog</b> - Siang hari ini, saya akan post tutorial blogger lagi. Ini post ditaman tengah-tengah sekolah. Saya masih nyempetin post untuk sobat semua. Kali ini saya akan bahas tutorial mengenai <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-widget-popular-post-dengan-efek-gradient-di-blog.html" rel="dofollow" title="Cara Membuat Popular Post Efek Gradient Di Blog">Cara Membuat Popular Post Efek Gradient Di Blog</a></b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Banyak sekali para blogger <b>menghias widget</b> mereka demi kenyamanan mata untuk dilihat oleh visitor alias pengunjung. Salah satu nya dengan cara yang satu ini. Sedikit memang para blogger yang melakukan tutorial yang satu ini, yaitu <b>cara membuat popular post dengan efek gradien di blog</b>. Tapi, sobat tak perlu khawatir. Jika blog sobat tidak yang menyamai alias beda, bisa dinilai bahwa sobat sangat kreatif dalam membangun dan memperindah sebuah blog. (<span style="color: red;">Baca juga</span>: <span style="color: black;"><b><a href="http://www.fahmifanirius.ga/2014/12/cara-membuat-widget-popular-post-dengan.html" rel="dofollow" title="Cara Membuat Widget Popular Post Dengan Gambar Round Corner">Cara Membuat Widget Popular Post Dengan Gambar Round Corner</a> - </b></span><b><a href="http://www.fahmifanirius.ga/2014/06/cara-membuat-post-populer-warna-warni.html" rel="dofollow" title="Cara Membuat Post Popular Warna Warni">Cara Membuat Post Popular Warna Warni</a>)</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<b>Widget popular post</b> ini dibentuk dengan <b>efek gradien</b>. Buat sobat yang tidak mengerti <b>efek gradient</b>, saya akan jelaskan. Gradient menurut kamus besar bahasa Indonesia berarti tinggi, curam, tanjakan, atau lereng. Tapi, bukan berarti efek gradient disini menunjukkan bahwa widget nya mempunyai efek curam atau tanjakan. Yang dimaksudkan efek gradient disini yaitu warna background dari <b>widget popular post</b> itu sendiri berwarna gradient.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Warna gradient adalah warna yang awalnya gelap hingga menjadi terang begitu juga sebaliknya. Dan warna efek gradient di <b>widget popular post</b> disini menggunakan warna hitam menjadi putih. Sobat bisa mengganti sendiri warna nya sesuai dengan keinginan.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Untuk contoh <b>widget popular post dengan efek gradient di blog</b>, bisa lihat gambar dibawah ini:</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zOwErqGZLmfovsSV22PjPpKNNTeuVMROlZVTrsXLXdbqXjT_YNFWP_sv0f1SN99gxTRdRQ_h3pTO3SON4vE01-WJDfeFIv0in3CSU9KGt31F_4VxdIInGgGcy762jg7NkWvvf-2z_Nqv/s1600/Cara+Membuat+Widget+Popular+Post+Dengan+Efek+Gradient+-+Fahmi+Fanirius+Blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zOwErqGZLmfovsSV22PjPpKNNTeuVMROlZVTrsXLXdbqXjT_YNFWP_sv0f1SN99gxTRdRQ_h3pTO3SON4vE01-WJDfeFIv0in3CSU9KGt31F_4VxdIInGgGcy762jg7NkWvvf-2z_Nqv/s1600/Cara+Membuat+Widget+Popular+Post+Dengan+Efek+Gradient+-+Fahmi+Fanirius+Blog.jpg" title="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" width="232" /></span></a></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Entri popular</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAJIDBvxfqyJsvLq-XHXIBqxcxZWP4Y0IqGd_RfH9FzLmv-7XCXWLjLxJ9S6RKUzMN2_lQhNSxnXadb2W95zlDlIbZpjpbB3edmjmm3H9SfGKZmoQo4SKyYRYyUTRPg-Sza6Hh9X8HAKg/s1600/Screenshot_10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAJIDBvxfqyJsvLq-XHXIBqxcxZWP4Y0IqGd_RfH9FzLmv-7XCXWLjLxJ9S6RKUzMN2_lQhNSxnXadb2W95zlDlIbZpjpbB3edmjmm3H9SfGKZmoQo4SKyYRYyUTRPg-Sza6Hh9X8HAKg/s1600/Screenshot_10.jpg" title="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" width="320" /></span></a></div><span style="font-family: Arial, Helvetica, sans-serif;">5. Disarankan untuk tidak menyentang Tumbhnail gambar dan cuplikan. Kalau dicentang sih, ya terserah. :v</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9fHByP0tCh0ACw_s5ztAJLUcIZN2u0noAtft08t524Wyx6JRe7pJTkUYhjj8LiTjC9YwcL-RkfJwkU1jGza4JTrfjlNR5JfbBVrKuK3ffEkJQlh09iMEbnjpO41fhdDVwcmIcI49CulX/s1600/Screenshot_11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9fHByP0tCh0ACw_s5ztAJLUcIZN2u0noAtft08t524Wyx6JRe7pJTkUYhjj8LiTjC9YwcL-RkfJwkU1jGza4JTrfjlNR5JfbBVrKuK3ffEkJQlh09iMEbnjpO41fhdDVwcmIcI49CulX/s1600/Screenshot_11.jpg" title="Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog" width="320" /></span></a></div><span style="font-family: Arial, Helvetica, sans-serif;">Masih ada langkah berikutnya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: cyan;"> ]]></b:skin></span> </span></pre><span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">/* Popular Post */
.PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px!important;list-style-type:none}
.PopularPosts .widget-content ul li{position:relative;padding:10px!important}
.PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:&quot;01&quot;;background:#f88c00}
.PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:&#39;02&#39;}
.PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:&#39;03&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:&#39;04&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:&#39;05&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:&#39;06&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:&#39;07&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:&#39;08&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:&#39;09&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:&#39;10&#39;}
.PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px!important}
.PopularPosts .widget-content{padding-right:10px}</span></code></pre></div><span style="font-family: Arial, Helvetica, sans-serif;">10. Simpan Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sobat bisa mengganti angka 01 sampai 10.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sobat bisa mengganti warna gradient. Untuk mengetahui kode warna nya, klik <b><a href="http://www.fahmifanirius.ga/p/blog-page_8.html" rel="dofollow" title="Kode Warna HTML.">Kode Warna HTML.</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;"><b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong"><div itemscope="" itemtype="http://schema.org/Review"><div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"></div><table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat widget popular post dengan efek gradient di blog yang membuat widget popular post Anda berbeda dengan widget popular post yang lain.</span></div></div></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating"><div style="text-align: left;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">83%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 182 votes</span></div></div></td></tr>
</tbody></table></div></div></div>

Tutorial Blogger Widget Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog

Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog - Siang hari ini, saya akan post tutorial blogger lagi. Ini post ditaman tengah-tengah sekolah. Saya masih nyempetin post untuk sobat semua. Kali ini saya akan bahas tutorial mengenai Cara…

Cara Membuat Persentase Pada Scrollbar Di Blog

2:17 AM Unknown 39

Tutorial Blogger Cara Membuat Persentase Pada Scrollbar Di Blog

Cara Membuat Persentase Pada Scrollbar Di Blog - Sore ini di hari kamis yang mendung, saya posting tutorial blogger pemula di sekolah saya. :v karena sudah beberapa hari ini saya tidak posting tutoria blogger lagi. Saya sempatkan main internet pulan…

Cara Membuat Menu Multi Tab View Di Blog

8:44 AM Unknown 59

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Menu Multi Tab View Di Blog</b> - Selamat malam para blogger.. Sudah beberapa hari kemarin saya tidak update tentang <b>tutorial blogger</b> karena masih banyak kegiatan yang harus dikerjakan. Dan malam ini saya akan membuat tutorial blogger lagi dengan bahasan tentang <a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-menu-multi-tab-view-di-blog.html" title="Cara Membuat Widget Multi Tab View Di Blog"><b>Cara Membuat Widget Multi Tab View Di Blog</b></a>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Banyak sekali bahasan tentang tutorial ini di google. Banyak juga para blogger memanfaat tutorial ini untuk blog mereka. Dan saya akan jelaskan maksud dari tutorial ini. Multi tab view, dari nama nya sudah sangat jelas. Multi=lebih tab=menu view=melihat. Jadi maksud tutorial ini adalah <b>Cara membuat widget menu lebih dari satu di blog</b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Banyak sekali template atau pun blog yang menggunakan tutorial ini untuk meringkas atau menghemat tempat blog mereka. Dikatakan menghemat tempat karena bebarapa widget bisa menjadi satu widget berdampingan. Jika diklik menu tab view nya akan muncul widget pertama. Jika di klik <b>menu tab view</b> sebelahnya, akan muncul widget kedua.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Biasanya para blogger menggunakan tutorial cara membuat menu tab view di blog untuk mengisi widget seperti related post, popular post, label, arsip blog, ataupun recent comment. (<span style="color: red;">Baca juga</span>: <a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-related-post-artikel.html" title="Cara Membuat Related Post / Artikel Terkait Di Blog"><b>Cara Membuat Related Post / Artikel Terkait Di Blog</b></a> - <a href="http://www.fahmifanirius.ga/2014/12/cara-membuat-widget-popular-post-dengan.html" title="Cara Membuat Widget Popular Post Dengan Gambar Round Corner"><b>Cara Membuat Widget Popular Post Dengan Gambar Round Corner</b></a> - <a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-label-miring-saat-disentuh.html" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog"><b>Cara Membuat Label Miring Saat Disentuh Cursor Blog</b></a> - <a href="http://www.fahmifanirius.ga/2014/12/cara-membuat-recent-comment-dengan.html" title="Cara Membuat Recent Comment Dengan Avatar Di Blog"><b>Cara Membuat Recent Comment Dengan Avatar Di Blog</b></a>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan sobat sudah paham kan maksud dari tutorial ini? Ini sudah sangat jelas, jika sobat masih kurang jelas, sobat bisa lihat gambar dibawah ini mengenai <b>apa itu menu multi tab view di blog</b>:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSIPE1rC3ou8PryDqC4F_sdyYl-F93W_Cl_fCRQNuqHke5l0hAQYew784nDBhfxwZq0YKR5MX9IQPgl7gCQDHRDkDw8xn3DSX_lUhIgpKs6SLArxBaQ3RTcntP0Nsfcl-9CpcnqtJk4V6f/s1600/Multi+tab.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSIPE1rC3ou8PryDqC4F_sdyYl-F93W_Cl_fCRQNuqHke5l0hAQYew784nDBhfxwZq0YKR5MX9IQPgl7gCQDHRDkDw8xn3DSX_lUhIgpKs6SLArxBaQ3RTcntP0Nsfcl-9CpcnqtJk4V6f/s1600/Multi+tab.jpg" width="282" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Copy kode dibawah ini kemudian paste kan pada kolom HTML/JavaScript:</span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">

Masukkan kode HTML widget yang akan dipasang pada tab ke-1

</div>
</div>

Masukkan kode HTML widget yang akan dipasang pada tab ke-2

</div>
</div>

Masukkan kode HTML widget yang akan dipasang pada tab ke-3

</div>
</div>
</div></div></form>

</script></span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Masukkan kode HTML widget yang akan dipasang pada tab 1, 2, dan 3. Contoh nya jika sobat ingin memasukkan <b>widget recent comment.</b> (Baca juga: <b><a href="http://www.fahmifanirius.ga/2014/12/cara-membuat-recent-comment-dengan.html" title="Cara Membuat Recent Comment Dengan Avatar Di Blog">Cara Membuat Recent Comment Dengan Avatar Di Blog</a>)</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Menu Multi Tab View Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat menu tab view di blog memudahkan untuk pengunjung menjakau widget penting Anda sekaligus menghemat tempat blog Anda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">87%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2244 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Tutorial Blogger Widget Cara Membuat Menu Multi Tab View Di Blog

Cara Membuat Menu Multi Tab View Di Blog - Selamat malam para blogger.. Sudah beberapa hari kemarin saya tidak update tentang tutorial blogger karena masih banyak kegiatan yang harus dikerjakan. Dan malam ini saya akan membuat tutorial blogger lagi …

Cara Membuat Label Miring Saat Disentuh Cursor Blog

8:38 PM Unknown 29

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Label Miring Saat Disentuh Cursor Blog</b> - Hari ini, hari minggu tentu nya hari bebas. Kalau bebas, saya ada waktu untuk membuat <b>tutorial blogger pemula</b>. Untuk hari ini, saya akan bahas tutorial tentang <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-label-miring-saat-disentuh.html" title="Cara Membuat Label Cloud Miring Saat Disentuh Cursor Blog">Cara Membuat Label Cloud Miring Saat Disentuh Cursor Blog</a></b>. Banyak sekali cara yang dilakukan oleh para blogger untuk memperindah dan mempercantik blog mereka. Salah satu nya dengan tutorial ini.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Jarang sekali memang, saya menemukan blog yang menerapkan tutorial ini. Tapi, saya juga pernah melihat dan berkunjung ke web/blog orang lain yang menggunakan tutorial ini. <b>Label atau kategori</b> akan <b>miring ketika disentuh cursor blog</b>. Untuk demo nya, lihat animasi di bawah ini.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4ZQyjkdjCK3N4bK3ZEI-VhNQSVMlK7pYJG1x-8-jEWgmR0xMNH5m47LbCXPPMC-7TCYfaoeR7DVp_WMKeOo4k99DM3FZBGF55e_gAPNlSDAUTeUmXs7eD-ZEj7uWBdhXEe3v4XyBocEC/s1600/ab.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4ZQyjkdjCK3N4bK3ZEI-VhNQSVMlK7pYJG1x-8-jEWgmR0xMNH5m47LbCXPPMC-7TCYfaoeR7DVp_WMKeOo4k99DM3FZBGF55e_gAPNlSDAUTeUmXs7eD-ZEj7uWBdhXEe3v4XyBocEC/s1600/ab.gif" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Sobat mungkin tertarik dengan tutorial yang akan saya berikan ini, sobat baca baik-baik. <b>Label atau kategori</b> pasti nya banyak digunakan oleh para blogger, kemungkinan semua blog yang mempunyai banyak postingan atau artikel pasti terdapat label atau kategori nya. Tujuan dari label atau kategori adalah untuk menkategorikan atau menggolongkan beberapa postingan atau artikel sehingga mempermudahkan bagi pengunjung blog untuk membaca informasi didalamnya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan disini, saya akan memberi tutorial yang termasuk efek untuk label atau kategori cloud miring saat disentuh cursor blog. Label yang dipakai harus <b>label cloud</b>. Untuk membuat label cloud bisa ikuti dulu ini, lalu ikuti tutorial <b>cara membuat widget label cloud berputar saat disentuh blog</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Tambahkan gadget/add gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Pilih Label</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Centang yang Cloud. Lihat gambar berikut:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c8gLyqdhMOYX_lo8LUaIs7ry_dYE2HCs_V8Pbn6_r9UXOCrKOFJGBtPsnxcIBq6fH_OKjq6NDIMPvY5ZeGMA0LNIvjjfDLsyaQy7ggWFkTIAIS66AJftiBaaThR_ciVWKB4z5if1WC_9/s1600/Screenshot_1.jpg" imageanchor="1"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c8gLyqdhMOYX_lo8LUaIs7ry_dYE2HCs_V8Pbn6_r9UXOCrKOFJGBtPsnxcIBq6fH_OKjq6NDIMPvY5ZeGMA0LNIvjjfDLsyaQy7ggWFkTIAIS66AJftiBaaThR_ciVWKB4z5if1WC_9/s1600/Screenshot_1.jpg" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Setelah itu pilih menu Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Klik Sesuaikan/customize</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. Pilih advanced</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Lalu Add CSS</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">11. Copy kode dibawah ini kemudian paste kan pada kolom Add CSS</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxSuPz6zgXtBET9NprNpYNVArq0b49G_rtu52MszXiW805stsr9WoFiQMeVqbqRdcifXOmX5b8R5k0Vwk__okXxWudVGVmbW5aPsYHLKlsPuvzS-01Cs2GCpV54B8ieGib6Dmj52_VepI/s320/saa.PNG" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" /></span></div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
</div>
<div style="text-align: left;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">.label-size a{text-transform:uppercase;float:left;text-decoration:none} .label-size a:hover{text-decoration:none} .label-size{float:left;font-size:10px;color:#666;text-transform:uppercase;text-decoration:none;border:solid 1px #C6C6C6;border-radius:3px;margin:0 2px 6px 0;padding:3px} .label-size:hover{border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">12. Apply</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Label Miring Saat Disentuh Cursor Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat label cloud miring saat disentuh cursor blog membuat label Anda semakin keren dan berbeda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2845 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Efek Tutorial Blogger Widget Cara Membuat Label Miring Saat Disentuh Cursor Blog

Cara Membuat Label Miring Saat Disentuh Cursor Blog - Hari ini, hari minggu tentu nya hari bebas. Kalau bebas, saya ada waktu untuk membuat tutorial blogger pemula. Untuk hari ini, saya akan bahas tutorial tentang Cara Membuat Label Cloud Miring Saa…

Cara Membuat Related Post / Artikel Terkait Di Blog

2:14 AM Unknown 53

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Related Post / Artikel Terkait Di Blog</b> - Bertemu lagi dengan saya, <b><a href="http://fahmifanirius.ga/">Fahmi Fanirius Blog</a></b> yang membahas <b>tutorial blogger pemula</b>. Master juga bisa ikut. =)) Sore ini, saya akan bahas tutorial lagi yang banyak dipakai oleh setiap blog, bahkan hampir semua blog maupun web menggunkan tutorial ini. Tutorial tersebut sering disebut dengan <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-related-post-artikel.html">Cara Membuat Related Post / Artikel Terkait Di Bawah Postingan Blog</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5VXahj2RA8uuD2jaxNEiD58szIAZ6fcElCSIabEuamlQHMSBDnWN3ZjnfjIPKk8-4PFVinXJnnhXTqgiYQDhWNpWXoTnRP9MWA2Ck0zKOXUf5xL0P77tcINAsbH2ZEwQFsHpqxbeLTDb/s320/related+posts+blogspot.png" title="Cara Membuat Related Post / Artikel Terkait Di Blog" width="320" /></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Bahkan, banyak juga kalangan blogger mengatakan bahwa sebuah <b>artikel terkait</b> <b>atau related post </b>itu wajib. Kemungkinan sebab nya adalah untuk menaikkan trafik blog tersebut. Logika nya begini, ketika pengunjung sobat selesai membaca artikel sobat yang super menarik untuk dibaca, maka sengaja atau pun tidak sengaja pengunjung tersebut akan membaca <b>artikel terkait / related post di bawah postingan blog</b> tersebut. <b>Artikel terkait</b> yang dimaksudkan disini adalah artikel atau post mempunyai tag yang sama</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dengen tutorial <b>artikel terkait atau related post</b>, pengunjung sobat dapat menjelajahi semua artikel blog sobat jika artikel tersebut saling terkait atau mengaitkan. Dengan ini, pageview atau penayangan blog sobat akan naik. Maka dari itu, sebuah <b>related post atau artikel terkait di bawah postingan blog</b> sangat penting. Karena <b>salah satu cara untuk menaikkan trafik blog</b> sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan disini, saya akan beri tutorial tersebut. Namun, sebelum saya akan jelaskan, disini saya mempunyai 2 cara yang berbeda dan tampilan yang berbeda juga. Maaf, disini saya tidak mempunyai demo nya. Tetapi, tutorial ini 100% work jika sobat membaca nya dengan teliti dan seksama.</span><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="font-size: large;"> Cara Membuat Artikel Terkait Di Bawah Postingan Blog</span></b></span></h2>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Klik template/rancangan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HMTL</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="line-height: 19.2000007629395px; text-align: justify; white-space: normal;"><span style="color: cyan;"><data:post.body/></span></span> </span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIBAWAH kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif; line-height: 19.2000007629395px; text-align: justify;"><data:post.body/></span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
6. Simpan</span><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: large;"><b>Cara Membuat Artikel Terkait Menggunakan Linkwithin</b></span></span></h2>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Contoh tampilan related posts dari Linkwithin</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7E2HhZIQ4UCTfT_60wAvy2Qa2P0Bmd3w5QB_C2R2kzD3kJ1Vlbh2oGzUOmIaL1MF40TZegjKKzMLlyrTsNlS4Thg7SZNx6B3qfCFNjHV2SoekV1_6xzoQ3IW3-o3Ywvct5Cug-eAmhI/s1600/%2528rian-share4u.blogspot.com%2529.PNG" title="Cara Membuat Related Post / Artikel Terkait Di Blog" /></div>
<div style="text-align: center;">
<br /></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Kunjungi dulu situs linkwithin. Klik disini <a href="http://www.linkwithin.com/" rel="nofollow"><b>www.linkwithin.com</b></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8jTasqdRL6rKXIfUUCi1PN9jvAwS5PvzxzXrnK5k5kqc8dSkx8c7Sl503gMvCIjfIwkaGoriEu99Bygbr5Cc6NMU1k9UJs_66blIhM0mUhRua1t-kO6KFyLAfrJ-VXmIzlDftV493WGM/s1600/linkwithin-ab.png" title="Cara Membuat Related Post / Artikel Terkait Di Blog" width="320" /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
2. Isi dulu form yang tersedia.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Email</b>: Isi dengan email sobat. Jika sobat masih belum punya email, buat dulu email nya. (<span style="color: red;">Baca juga</span>: <a href="http://www.fahmifanirius.ga/2014/11/cara-membuat-email-baru-gmail-mudah-di.html"><b>Cara Membuat Email Baru Gmail Mudah Di Google Terbaru 2015</b></a>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Blog link</b>: Isi dengan nama URL blog sobat yang akan diberi related post.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Platform</b>: Pilih blogger. Jika sobat menggunakan wordpress, ya pilih wordpress.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Width</b>: Pilih jumlah artikel terkait thumbnail yang akan ditampilkan (max 5 post).</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Jika sobat ingin related post yang terang, centang tulisan: My blog has light text on a dark background. Jika ingin gelap, jangan dicentang.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Klik Get Widget!</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Tunggu beberapa saat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Setelah itu, akan muncul script HTML/JavaScript, kemudian copy script tersebut.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Template/rancangan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. Cari kode </span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: cyan;"></body></span> </span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></body></span></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.pageType != &quot;item&quot;'><span style="color: cyan;"><b>Paste kan script related post linkwithin disini</b></span></b:if></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">11. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Ganti tulisan </span><b style="color: cyan; font-family: Arial, Helvetica, sans-serif;">Paste kan script related post linkwithin disini </b><span style="font-family: Arial, Helvetica, sans-serif;">dengan kode script related post tadi.</span><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Related Post / Artikel Terkait Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat related post / artikel terkait di blog menggunakan 2 cara yang akan membuat pengunjung Anda menjangkau semua laman web/blog Anda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">95%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2964 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Post Tutorial Blogger Widget Cara Membuat Related Post / Artikel Terkait Di Blog

Cara Membuat Related Post / Artikel Terkait Di Blog - Bertemu lagi dengan saya, Fahmi Fanirius Blog yang membahas tutorial blogger pemula. Master juga bisa ikut. =)) Sore ini, saya akan bahas tutorial lagi yang banyak dipakai oleh setiap blog, bahka…

Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

6:35 AM Admin 23

Post Tutorial Blogger Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog - Banyak sekali tutorial yang membahas tentang adanya Drop Cap (Huruf Besar) pada awal postingan blog. Drop Cap (Huruf Besar) ini sangatlah populer di dunia blogger ini, banyak sekali para…

Cara Membuat Navigasi Next Page Number Di Blog

8:00 AM Unknown 53

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Navigasi Next Page Number Di Blog</b> - Tutorial lagi... Tutorial blogger pertama saya di bulan januari. Sebelum nya, selamat tahun baru 2015. *maap telat. Kembali ke tutorial, dari judulnya sih, kemungkinan ada yang ngerti dan gak ngerti tutorial apa yang akan saya bahas hari ini. Saya akan bahas mengenai <a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-navigasi-next-page-number.html" title="Cara Memasang Navigasi Page Number Di Blog"><b>Cara Memasang Navigasi Page Number Di Blog</b></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLk7XLp_frbN0DtQ9dSECt9Yp-apRWLmC6cQnvSvnmpRNPRGcmtQo2ktygy5czCbPd9nSFZr9nWnFMgdSdKdyzRMcaXqV0_hWUIMUmHu8nQrUJfs3Ej0N-1l5C_NCCIOtZkboHd3yFB28/s1600/blogger+page+numbering.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Navigasi Next Page Number Di Blog" border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLk7XLp_frbN0DtQ9dSECt9Yp-apRWLmC6cQnvSvnmpRNPRGcmtQo2ktygy5czCbPd9nSFZr9nWnFMgdSdKdyzRMcaXqV0_hWUIMUmHu8nQrUJfs3Ej0N-1l5C_NCCIOtZkboHd3yFB28/s1600/blogger+page+numbering.gif" title="Cara Membuat Navigasi Next Page Number Di Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Terima kasih saya ucapkan buat pengunjung setia saya yang rela buat membaca dan memberi request tutorial di blog saya yang sangat jelek ini. -_- Saya kemarin tidak buat tutorial selain tidak ada koneksi internet, juga tidak mempunyai ide tutorial blogger apa lagi yang akan saya buat. Dan, salah satu pengunjung saya meminta tutorial kepada saya untuk membuatkan <b>tutorial Cara Membuat Next Page Number Di Blog</b>. Untuk bukti request nya, ini screenshot nya. :D</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8HYgixuaggkBKnNPLyIRxWTCRS8gQUs8VZt_f0OizevY0dxHvL-TWOmQZixqBEGISSCjC3Mjobpbv3o7k6T8oCI5tmrsGbUuwRI73FeoiwTpfhKOaJ2DJ4GkE-qM1c3bDY0HNK8ej_HM/s1600/Screenshot_8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Navigasi Next Page Number Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8HYgixuaggkBKnNPLyIRxWTCRS8gQUs8VZt_f0OizevY0dxHvL-TWOmQZixqBEGISSCjC3Mjobpbv3o7k6T8oCI5tmrsGbUuwRI73FeoiwTpfhKOaJ2DJ4GkE-qM1c3bDY0HNK8ej_HM/s1600/Screenshot_8.png" title="Cara Membuat Navigasi Next Page Number Di Blog" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Nah, harus nya pengunjung setia blog saya request berterima kasih kepada saya. :D *canda. Kembali ke tutorial. Banyak sekali para blogger yang menggunakan tutorial ini, tapi saya tidak tau <b>apakah navigation page number</b> dari template atau buatan sendiri. Buat sobat saya, yang belum ada atau pun tidak ada <b>navigation next page number</b> nya, bisa ikutin tutorial ini. Sobat gak harus ganti template yang ada <b>navigation page number</b> nya. Tapi, lebih baik buat sendiri. Sekalian belajar script dan coding. Meskipun sedikit yang dimengerti. (<span style="color: red;"><b>Baca juga</b>:</span> <b><a href="http://www.fahmifanirius.ga/2014/12/cara-mengganti-newer-post-older-post.html" title="Cara Mengganti Newer Post, Older Post, Home, Previous, Next Dengan Gambar Di Blog">Cara Mengganti Newer Post, Older Post, Home, Previous, Next Dengan Gambar Di Blog</a></b>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Untuk penampakannya sendiri, sobat bisa lihat gambar yang ada diatas. Itu adalah salah satu contoh <b>tampilan navigation next page number di blog</b>. Kita ke tutorial nya aja langsung.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Sebelum kita pergi ke tutorial nya, disini saya akan beri 2 cara untuk tutorial <b>Cara Membuat Navigasi Halaman Page Number Di Blog</b>. InsyaAllah dijamin work semua tutorial yang ada di blog ini. Karena, sebelum saya publish tutorial blogger yang ada di blog ini di coba terlebih dahulu dan hasilnya benar-benar work. 2 cara tersebut menggunakan edit HTML dan HTML/JavaScript. Tapi, sebenarnya sama-sama kode HTML dan CSS. Yang membedakan hanya penempatan kode tersebut.</span><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="font-size: large;"> Cara 1:</span></b></span></h2>
<br />
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">1. Login Blogger</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">2. Klik tata letak/layout </span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari HTML/JavaScript</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">5. Copy kode dibawah ini kemudian paste kan pada kolom HTML/JavaScript:</span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
</div>
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] =  '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px  2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-"  class="showpage">Page '+thisNum+' of '+(postNum-1)+':  </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

Tutorial Blogger Cara Membuat Navigasi Next Page Number Di Blog

Cara Membuat Navigasi Next Page Number Di Blog - Tutorial lagi... Tutorial blogger pertama saya di bulan januari. Sebelum nya, selamat tahun baru 2015. *maap telat. Kembali ke tutorial, dari judulnya sih, kemungkinan ada yang ngerti dan gak ngerti t…