tag:blogger.com,1999:blog-33404047198729012952024-03-14T09:13:12.636+07:00ZONESPEDIALearn to create a blogAnonymoushttp://www.blogger.com/profile/04447257878236826384noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-3340404719872901295.post-57954918181237984952016-02-21T15:37:00.000+07:002018-01-28T02:44:11.827+07:00How to install histats in the latest bloggerInstall histats of visitor counters in the latest bloggers<br />
<br />Often we look at the dashboard blogger some impressions on the blog that suddenly rose 6-10 views after we visit it even though with only 1 impressions only, because the blogger counter impressions machine does not work properly, not real or not valid even though we have activated Do not track your own pageviews feature, but the effort is just useless and has no effect on my personal experience.<br /><br />Well, the question now is, Why do I just arrive just by showing us 1 page can read 2 to 6 or even 10 impressions? I can not guarantee the truth about this, which obviously I've read an article I do not know where the source came from, it defines that 1 page impressions on the blog are read by counters until 2 or more it matches the template used. Yes though I'm a bit confused from where it could happen, I think it could be hell, oh until now a mystery to me. hehe<br />
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-B72sm4u2uZo/VsjDewedMfI/AAAAAAAABek/iQ2Kls09_hw/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="364" src="https://3.bp.blogspot.com/-B72sm4u2uZo/VsjDewedMfI/AAAAAAAABek/iQ2Kls09_hw/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Histats counter</td></tr>
</tbody></table>
<div>
<br /></div>
Know and monitor our blog page impressions witnessed by the visitor<br />Histats counter<br /><br />That way, it confuses us to make sure which page the visitor is showing and where the page is displayed by us, all read by the calculating machine. So, with this article so we can make sure.<br /><br />Know and monitor our blog page impressions witnessed by the visitor<br />Namely with histats, this visitor count keeps track of all activities on blog / web that is somewhat rich in features, the salasatunya<br /><br />Real time stat<br />Keep track of when visitors serve with real-time statistics reports.<br /><br />Free<br />Free alias, unlimited service until our site has so many visitors.<br /><br />User online<br />We can see the statistics of online visitors which means visitors are staying on our site. Can track online visitors in detail with the latest, summary, the number of active visitors, the page that is often served, as well as any location we can track it.<br /><br />Uptime<br />Which means network access is very fast and solid over millions of tracks hits per month, so with no doubt.<br /><br />And many others, so much can not be detailed overall, but when we use the service, will mengatahui everything.<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-YIWWy8xmX0Y/Vslqb-qk0-I/AAAAAAAABe8/FlrfCUA5fnk/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="298" src="https://2.bp.blogspot.com/-YIWWy8xmX0Y/Vslqb-qk0-I/AAAAAAAABe8/FlrfCUA5fnk/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru0.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></div>
<br />Know and monitor our blog page impressions witnessed by the visitor<br /><br />How to install histats on blog<br />The first step we should do is to create an account first, please register through the following link http://www.histats.com.<br />After the registration please Add a Website, fill all the forms in accordance with the site information and do not forget to read the Terms of Service & Privacy Policy first if you agree check the checkbox that we agree and click continue.<br /><br />On the next page there will be statistics that are still empty on the sites we listed earlier, please bookmark the page to make it easy to monitor our site quickly. Next click on Counter CODE just above the statistic then add new counter and select with hidden tracker method and save, like the following illustration<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-axk1QsvXtOA/VsluBkC1HnI/AAAAAAAABfI/GAOfKIIADeI/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="226" src="https://2.bp.blogspot.com/-axk1QsvXtOA/VsluBkC1HnI/AAAAAAAABfI/GAOfKIIADeI/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru1.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-qP3B9JZlmbc/Vsluhj97SLI/AAAAAAAABfQ/mgN5ichDSQg/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="202" src="https://4.bp.blogspot.com/-qP3B9JZlmbc/Vsluhj97SLI/AAAAAAAABfQ/mgN5ichDSQg/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru2.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-qWkSQ9h3jmo/VslvEYXNLGI/AAAAAAAABfY/aOHrouaS444/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="184" src="https://4.bp.blogspot.com/-qWkSQ9h3jmo/VslvEYXNLGI/AAAAAAAABfY/aOHrouaS444/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru3.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></div>
<br />
<br />
To get the code, we can click on the standard counter and select the async tab. Why should async? Asynchronous is the best solution for page loading density which means it will not slow down our site when the page loads.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-YoGb9j2cD3c/Vslz2Vz3fXI/AAAAAAAABfs/vzJuJuXqD0k/s1600/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" border="0" height="402" src="https://3.bp.blogspot.com/-YoGb9j2cD3c/Vslz2Vz3fXI/AAAAAAAABfs/vzJuJuXqD0k/s640/Cara%2Bmemasang%2Bhistats%2Bdi%2Bblogger%2Bterbaru4.jpg" title="Mengetahui dan memantau tayangan laman blog kita yang disaksikan oleh si pengunjung" width="640" /></a></div>
<br />
Next copy the code and install it in layout by entering blogger dashboard and select layout, Add a gadget, select HTML / JavaScript paste the code and save. with the hidden tracker method, the Widget will not appear but will track and record all activities on the site. To make it happen we can visit the page previously bookmarked on the points above.</div>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-35650569596670527862016-02-18T19:56:00.000+07:002016-02-19T02:54:54.607+07:00Mengatasi widget yang tidak tampil pada perangkat seluler blogger<h4>
Cara mengatasi widget yang tidak tampil pada mobile device blogger</h4>
<div>
<a href="http://www.blogeridiots.com/"><span style="color: #444444;">Biasanya</span></a> ada beberapa template yang apabila mengaktifkannya pada perangkat seluler, widget yang ditambahkan pada tampilan PC tidak tampil apabila dilihat melalui perangkat seluler, itu karena pada widgetnya tidak ada permission untuk tampil pada tampilan mobile device.</div>
<div>
<br /></div>
<div>
Apabila widget tersebut sangat diperlukan untuk tampil pada perangkat seluler, mungkin widget followers, popular posts, dan widget-widget lainnya maka sangat disayangkan. Seperti kasus sebelumnya yang saya alami di sebabkan karena template yang saya pakai mengalami masalah seperti ini, pada saat saya mengaktifkan template khusus pada perangkat seluler, widget widget yang ditambahkan di tata letak menghilang begitu saja <a href="http://www.blogeridiots.com/2016/02/mengatasi-widget-yang-tidak-tampil-pada.html">pada saat di lihat menggunakan perangkat seluler</a>. <b>Kecuali</b> jika tidak mengaktifkan template khusus.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-u5nqwzXtL-0/VsW0rmw8OCI/AAAAAAAABeM/_39ek5kRSzs/s1600/mengatasi%2Bwidget%2Byang%2Btidak%2Btampil%2Bpada%2Bperangkat%2Bmobile.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara mengatasi widget yang tidak tampil pada tampilan mobile device blogger" border="0" height="364" src="https://2.bp.blogspot.com/-u5nqwzXtL-0/VsW0rmw8OCI/AAAAAAAABeM/_39ek5kRSzs/s640/mengatasi%2Bwidget%2Byang%2Btidak%2Btampil%2Bpada%2Bperangkat%2Bmobile.jpg" title="Cara mengatasi widget yang tidak tampil pada tampilan mobile device blogger" width="640" /></a></div>
<div>
<br /></div>
<div>
Baik, langsung saja apabila ada yang mengalami masalah yang sama bisa kita ikuti tips ini, misal kita menambahkan widget popular post pada tata letak. otomatis pada template akan ada bagian id widget popular posts seperti berikut</div>
<div>
<br /></div>
<div>
<div>
<pre><code><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><span style="background-color: black; color: red;">...</span></b:widget></code></pre>
</div>
</div>
<div>
<br /></div>
<div>
Jika tidak diciutkan kira kira seperti ini</div>
<div>
<br /></div>
<div>
<pre><code><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget></code></pre>
<br />
Kita hanya perlu menambahkan atribut <b>mobile='yes'</b> pada setiap tag widget yang ingin ditampilkan, sehingga akan terlihat seperti ini<br />
<br />
<pre><code><b:widget id='PopularPosts1' locked='false' <span style="color: red;">mobile='yes'</span> title='Popular Posts' type='PopularPosts'><span style="background-color: black; color: red;">...</span></b:widget></code></pre>
<br />
Save template dan silahkan lihat melalui perangkat seluler. Semoga bermanfaat</div>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-74643776290991925732016-02-17T23:07:00.000+07:002016-02-17T23:07:35.579+07:00Memasang tombol social share melayang disamping blog<h4>
Cara memasang tombol social share melayang disamping blog dengan sumome</h4>
<div>
<a href="http://www.blogeridiots.com/"><span style="color: #444444;">Dengan memasang tombol sosial share</span></a> di blog tujuannya agar memudahkan si pengunjung untuk berbagi ke sosial media seperti facebook, twitter, pinterest, google+ dan banyak lainnya. Ya meski terbilang jarang jarang ada yang menekan tombolnya apa salahnya jika memasangnya siapa tau dengan konten yang berkualitas si pembaca tertarik untuk berbagi ke media sosialnya apalagi di tambah dengan tampilan tombol nya yang menarik.</div>
<div>
<br /></div>
<h4>
Tombol social share lengkap</h4>
<div>
Ya, <a href="http://www.blogeridiots.com/2016/02/memasang-tombol-social-share-melayang.html">tombol berbagi dari sumome</a> termasuk lengkap, selain itu kita dapat mengatur posisi posisi nya, kita juga dapat melihat seberapa banyak konten kita di bagikan ke masing masing sosial media yang disebut dengan counter. Ditambah kita dapat melihat statistik per hari nya. mantap</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-64pb37KUelE/VsSNJDgdv4I/AAAAAAAABdM/SvGu9YapVRk/s1600/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara memasang tombol social share melayang disamping blog dengan sumome" border="0" height="364" src="https://3.bp.blogspot.com/-64pb37KUelE/VsSNJDgdv4I/AAAAAAAABdM/SvGu9YapVRk/s640/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog.jpg" title="Cara memasang tombol social share melayang disamping blog dengan sumome" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Social share button sumome</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
Baik, langsung saja cara pasangnya di blog yakni langkah pertama dengan registrasi akun sumome di <b>https://sumome.com/</b>. Selanjutnya masukan alamat blogmu dan embel embel lainnya.</div>
<div>
<br /></div>
<div>
Dihalaman selanjutnya akan ada javascript yang harus di copy seperti gambar dibawah ini</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-TRyxSZ261vA/VsSPb5Ndz3I/AAAAAAAABdY/uL2UAhfKN3A/s1600/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara memasang tombol social share melayang disamping blog dengan sumome" border="0" height="310" src="https://2.bp.blogspot.com/-TRyxSZ261vA/VsSPb5Ndz3I/AAAAAAAABdY/uL2UAhfKN3A/s640/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog1.png" title="Cara memasang tombol social share melayang disamping blog dengan sumome" width="640" /></a></div>
<div>
<br /></div>
<div>
Silahkan sisipkan script tersebut pada template blogmu tepat sebelum kode <b></head></b>, lalu simpan. Jika sudah segera tekan tombol <b>VISITE SITE</b> berwarna hijau pada laman sumome sebelumnya lihat gambar di atas.</div>
<div>
<br /></div>
<div>
Selanjutnya akan dialihkan ke laman blog kita yang sudah terpasang sumome, sekarang tinggal memasang tombol berbagi dengan klik tombol yang ditandai panah. Lihat gambar ilustrasi berikut</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-Ds0ohMJhDuk/VsSR_1NPchI/AAAAAAAABdo/fOX48xt0gr0/s1600/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara memasang tombol social share melayang disamping blog dengan sumome" border="0" height="190" src="https://3.bp.blogspot.com/-Ds0ohMJhDuk/VsSR_1NPchI/AAAAAAAABdo/fOX48xt0gr0/s640/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog2.png" title="Cara memasang tombol social share melayang disamping blog dengan sumome" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Lalu pilih <b>sumo store</b> selanjutnya pilih lagi <b>share</b> dan klik tombol <b>FREE</b> otomatis social share button muncul di samping blog.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-OgQA5236ta4/VsSSy7CxW1I/AAAAAAAABdw/ZzrAIKEWUb4/s1600/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara memasang tombol social share melayang disamping blog dengan sumome" border="0" height="312" src="https://1.bp.blogspot.com/-OgQA5236ta4/VsSSy7CxW1I/AAAAAAAABdw/ZzrAIKEWUb4/s640/memasang%2Btombol%2Bsocial%2Bshare%2Bmelayang%2Bdisamping%2Bblog3.png" title="Cara memasang tombol social share melayang disamping blog dengan sumome" width="640" /></a></div>
<div>
<br /></div>
<div>
Selesai, namun tombol tersebut muncul di semua halaman. Tidak lucu kan apabila tombol tersebut muncul pada halaman utama dan halaman statis? he he</div>
<div>
<br /></div>
<h4>
Lalu bagaimana agar tombol social share muncul pada halaman posting saja?</h4>
<div>
Kita bisa memanfaatkan tag condisional berikut untuk memasangnya pada halaman posting saja</div>
<div>
<br /></div>
<div>
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style="color: red;">Sisipkan disini script sumome yang sebelumnya di salin</span>
</b:if></code></pre>
<br />
Bingung pasangnya dimana? tenang saja posisi tidak ada perubahan tetap sisipkan sebelum kode <b></head></b>, hanya saja menetukan kodisinya. Seperti yang di jelaskan pada ulasan sebelumnya silahkan baca juga <a href="http://www.blogeridiots.com/2016/02/menentukan-elemen-atau-objek-pada.html" target="_blank">Mentukan elemen atau objek pada halaman tertentu</a> dengan memanfaatkan tag conditional. Semoga bermanfaat</div>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-53049479119158571912016-02-16T22:55:00.000+07:002016-02-17T05:17:07.019+07:00Cara mudah memasang komentar disqus valid HTML5 blogger<h4>
Cara mudah memasang komentar disqus pada blogger valid HTML5</h4>
<div>
<a href="http://www.blogeridiots.com/"><span style="color: #444444;">Sedikit</span></a> banyaknya para blogger hampir semua menggunakam sistem komentar disqus pada blognya terutama platform blogger. Akan tetapi, setelah review kesana kemari tidak hanya platform blogger saja, ternyata website-website besar pun menggunakannya.</div>
<div>
<br /></div>
<h4>
Lalu apa kelebihan memasang komentar disqus?</h4>
<div>
Selain tampilannya yang menarik, disqus tergolong sangat ringan dan mudah digunakan sehingga memudahkan diskusi antara si author dan si komentator komentator lainnya. Namun hanya saja tidak ada fitur emoticon. Jika ada, mungkin sudah menjadi widget komentar terbaik.</div>
<div>
<br /></div>
<div>
<a href="http://www.blogeridiots.com/2016/02/cara-mudah-memasang-komentar-disqus.html">Memasang komentar disqus di blog sangat mudah</a>, dengan menekan tombol tambahkan disqus ke situs dan menambahkan embel embelnya, otomatis widgetnya akan terpasang pada tata letak. Namun dengan sangat mudahnya itu, membuat widgetnya tidak valid HTML5.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-dBjppnW6vT0/VsMyQ8kN5eI/AAAAAAAABcE/-Sm1QGZwemY/s1600/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" border="0" height="364" src="https://1.bp.blogspot.com/-dBjppnW6vT0/VsMyQ8kN5eI/AAAAAAAABcE/-Sm1QGZwemY/s640/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5.jpg" title="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Disqus comment widget</td></tr>
</tbody></table>
<div>
<br /></div>
<h4>
Bagaimana cara agar komentar disqus valid HTML5?</h4>
<div>
Sesuai judulnya terbilang sangat mudah juga, langkah pertama yang harus dilakukan pastikan sudah mempunyai akun disqus. Jika belum silahkan daftar di <b>http://www.disqus.com</b>.</div>
<div>
Selanjutnya masuk ke halaman utama disqus dan klik tombol gear lalu <b>Add Disqus To Site</b>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Qp2WBdWsnBI/VsM2v1eahFI/AAAAAAAABcU/dPB3FoFTEgE/s1600/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" border="0" height="364" src="https://4.bp.blogspot.com/-Qp2WBdWsnBI/VsM2v1eahFI/AAAAAAAABcU/dPB3FoFTEgE/s640/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5_1.jpg" title="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" width="640" /></a></div>
<div>
<br /></div>
<div>
Lanjutkan dengan menekan tombol <b>Install on Your Site</b> tepat di atas kanan halaman. Lalu akan muncul form yang harus di isi seperti ini</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-SVrlgKEyHa8/VsM3ubzKQ_I/AAAAAAAABcc/xdp0A9VUN0g/s1600/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5_2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" border="0" height="342" src="https://1.bp.blogspot.com/-SVrlgKEyHa8/VsM3ubzKQ_I/AAAAAAAABcc/xdp0A9VUN0g/s640/cara%2Bmemasang%2Bkomentar%2Bdisqus%2Bvalid%2Bhtml5_2.jpg" title="Cara mudah memasang komentar disqus agar valid HTML5 pada blogger" width="640" /></a></div>
<div>
<br /></div>
<div>
Site name silahkan di isi dengan judul blogmu dan unique disqus URL itu akan menjadi alamat disqus blogmu katakalah nama pengguna, seperti contoh di atas misal blahblahblah dan silahkan salin nama pengguna tersebut lalu tempel di notepad. Pilih category sesuai blog dan klik next.</div>
<div>
<br /></div>
<div>
Sampai disini step pada disqus selesai, selanjutnya masuk blogger dan edit template lalu salin kode javascript berikut dan sisipkan sebelum kode <b></body></b></div>
<br />
<pre><code><script type='text/javascript'>
var disqus_shortname = &#39;<span style="color: red;">blahblahblah</span>&#39;;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:if>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script></code></pre>
<br />
Ganti <b>blahblablah</b> dengan nama pengguna yang sebelumnya disimpan di notepad, langkah terakhir simpan template dan lihat hasilnya.<br />
Namun pada saat memuat komentar disqus, komentar bawaan blogger akan muncul terlebih dahulu dan otomatis terganti dengan komentar disqus. Cara mengatasinya adalah menyambunyikan komentar bawaan blogger.<br />
<br />
Silahkan edit template ulang lalu cari atau cara cepatnya dengan menekan CTRL+F dan ketikan <b>#comments</b> lalu tambakan <b>display:none;</b> pada elemen tersebut sehingga akan terlihat <b>#comments{......;......;......;display:none;}</b>.<br />
Save template, dan lihat hasilnya kembali. Semoga bermanfaat.Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-50602675771922959962016-02-08T04:00:00.000+07:002016-02-09T17:38:53.001+07:00Tips agar gulir pada web atau blog menjadi lembut<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-5DTJtLy03NI/VrectOuYwdI/AAAAAAAABao/z_Dz9ahdF4I/s1600/membuat%2Bsmooth%2Bscroll%2Bpada%2Bweb%2Bblog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara agar gulir pada web atau blog menjadi lembut atau smooth scroll" border="0" height="364" src="https://1.bp.blogspot.com/-5DTJtLy03NI/VrectOuYwdI/AAAAAAAABao/z_Dz9ahdF4I/s640/membuat%2Bsmooth%2Bscroll%2Bpada%2Bweb%2Bblog.jpg" title="Cara agar gulir pada web atau blog menjadi lembut atau smooth scroll" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">smooth scroll</td></tr>
</tbody></table>
<br />
<b><a href="http://www.blogeridiots.com/2016/02/tips-agar-gulir-pada-web-atau-blog.html">Cara agar gulir pada web atau blog menjadi lembut</a></b> - Bisa di bilang smooth scroll, namun banyak orang yang salah mengartikan smooth scroll terutama mengartikannya untuk back to top, mengapa begitu? fakta, ketika gw search di <a href="http://www.google.com/" target="_blank">google</a> dengan kata kunci 'cara agar blog menjadi smooth ketika di scroll' yang muncul semua membahas cara membuat smooth scroll to top atau back to top menggunakan jQurey dsb.<br />
<br />
Sampai akhirnya gw menemukan blog bule apalah blog nya lupa, mereka berbagi tips apa yang gw cari, dan ternyata sangat mudah dengan menyisipkan script tertentu bisa membuat blog atau web terlihat lebih lembut saat di gulirkan ke atas maupun kebawah menggunakan tombol navigasi yang ada di keyboard. Lalu bagaimana agar gulirnya menjadi lembut ketika di scroll ke samping kiri atau kanan? Bisa saja, asal tampilan blog mu melebihi resolusi layar PC aliasnya jumbo kan bisa tuh di scroll ke samping LOL.<br />
<br />
Ok, kembali lagi pada script tertentu yang di sisipkan sebelum kode </head> kira kira wujudnya seperti ini<br />
<br />
<pre><code><script src='https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk' type='text/javascript'></script></code></pre>
<br />
Namun script tersebut tidak valid html5, akhirnya gw sedikit ngoprek agar menjadi valid. anggap aja ceritanya gw jago vro. Dan sukses valid html5 seperti ini<br />
<br />
<pre><code><script src='https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk' type='text/javascript'/></code></pre>
<br />
Sampai disini masih ada janggal, yakni terkena bloking perenderan pada <a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.blogeridiots.com%2F&tab=desktop" target="_blank">pagespeed insights</a> dan membebankan load saat halaman di muat.<br />
<br />
Agar tidak terkena perenderan dan tidak membebankan load, manfaatkan javascript async, seperti berikut ini<br />
<br />
<pre><code><script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></code></pre>
<br />
Namun jangan senang dulu, script tersebut tidak valid html5, agar valid html5 ganti symbol kutip tunggal dengan &#39; disemua isi javascriptnya.<br />
Ok, agar tidak bingung silahkan langsung salin javascript berikut deh<br />
<br />
<pre><code><script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></code></pre>
<br />
Tempel sebelum kode </head>.<br />
<br />
<br />
<blockquote class="tr_bq">
Akan terlihat biasa saja jika menggulirkan menggunakan handle scroll yang ada di samping kanan. Jadi, gunakanlah navigasi atas atau bawah yang ada pada keyboard saat menggulirkan dan akan berjalan lancar menggunakan peramban chrome, selamat mencoba.</blockquote>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-75246423173331349502016-01-31T20:40:00.002+07:002016-01-31T20:46:25.371+07:00Membuat long shadow menggunakan javascript<b><a href="http://www.blogeridiots.com/2016/01/membuat-long-shadow-menggunakan.html">Cara membuat long shadow menggunakan javascript</a></b> - Shadow panjang yang merupakan gaya utama dari flat UI kini dapat memanfaatkan javascript untuk membuatnya dalam sebuah web atau blog. Jadi, tidak hanya menggunakan photoshop, corel draw, maupun adobe ilustrator saja.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-zZDRu3cm_lk/Vq3-jrRvIMI/AAAAAAAABVE/t5r8KuGFKOk/s1600/membuat%2Blong%2Bshadow%2Bjavascript.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara membuat long shadow menggunakan javascript" border="0" height="364" src="http://2.bp.blogspot.com/-zZDRu3cm_lk/Vq3-jrRvIMI/AAAAAAAABVE/t5r8KuGFKOk/s640/membuat%2Blong%2Bshadow%2Bjavascript.jpg" title="Cara membuat long shadow menggunakan javascript" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Javascript long shadow</td></tr>
</tbody></table>
<br />
Selain tidak ribet, long shadow menggunakan javascript tergolong ringan dan tidak membebankan load pada sebuah web atau blog apalagi jika javascript dikompress dan memproteksinya menggunakan Obfuscator silahkan baca juga <b><a href="http://www.blogeridiots.com/2016/01/cara-proteksi-file-javascript-yang-tepat.html" target="_blank">cara proteksi file javascript yang tepat</a></b>. Istilahnya gini tidak harus beresiko meski tampilan menarik, bener gak bro. he he<br />
<br />
Seperti contoh misal kita ingin membuat long shadow pada teks kita ambil html sederhana berikut.<br />
<br />
<pre><code><div class='text-shadow'>
<span>BLOGER IDIOTS<i class="fa fa-check-circle"></i></span>
</div></code></pre>
<br />
Dengan gaya nya seperti ini.<br />
<br />
<pre><code>.text-shadow {
color: #fff;
text-align: center;
font-weight: bold;
<span style="background-color: #6fa8dc;"><span style="color: white;">overflow: hidden</span></span>;
}
.text-shadow span {
display: block;
background: #f8695f;
padding: 20px 0;
border-radius: 5px;
}
.fa-check-circle {
color: #03a9f4;
font-size: 40px;
margin-left: 10px;
vertical-align: top
}</code></pre>
<br />
<blockquote class="tr_bq">
overflow: hidden = guna agar shadow pada teks tidak keluar jalur di blok teks tersebut.</blockquote>
<br />
Dan javascript nya seperti contoh di bawah ini<br />
<br />
<pre><code><script type='text/javascript'>
//<![CDATA[
//long shadow
var genLongShadow = function (num, color) {
var value = '';
for (var i = 1; i < num; i++) {
value += i + 'px ' + i + 'px 0px ' + color;
if (i != num - 1) {
value += ', ';
}
}
return value;
};
document
.querySelector('<span style="background-color: #9fc5e8;"><span style="color: white;">.text-shadow span</span></span>')
.style.textShadow = genLongShadow(<span style="background-color: #9fc5e8;"><span style="color: white;">80</span></span>, '<span style="background-color: #9fc5e8;"><span style="color: white;">#f63f31</span></span>');
//]]>
</script></code></pre>
<br />
<h4>
Keterangan</h4>
<div>
.text-shadow span: id class pada text</div>
<div>
80: silahkan ganti untuk mengatur panjang shadow</div>
<div>
#f63f31: warna shadow, gw sarankan jangan memakai warna transparan, seperti 'rgba(0,0,0,01)'</div>
<div>
<br />
<br /></div>
<div style="text-align: center;">
<a href="http://codepen.io/zulmyeve/pen/EPEpmZ" target="_blank"><b><button>DEMO</button></b></a></div>
<br />
<br />
<div>
Silahkan di selaraskan sesuai kebutuhan. semoga bermanfaat.<br />
<br />
<h4>
Tambahan</h4>
</div>
<div>
Jika long shadow ingin digunakan pada template blogger, sisipkan javascript nya sebelum kode </body></div>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-58323489474736616272016-01-27T22:00:00.000+07:002016-01-27T23:20:22.402+07:00Memasang social share button dengan gaya flat UI<b><a href="http://blogeridiots.blogspot.com/2016/01/memasang-sosial-share-button-dengan.html">Cara memasang social share button dengan gaya flat UI responsive</a></b> - Material design itulah gaya yang sekarang banyak orang pakai. Maka dari itu gw menyarankan ente pakai juga dengan gaya gaya flat UI jangan sampai ketinggalan jaman. he he<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-mhFdKBeHe5c/VqjOpgKvq_I/AAAAAAAABRQ/CKOnQTX5QSM/s1600/memasang%2Bshare%2Bbutton%2Bflat%2BUI.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara memasang sosial share button dengan gaya flat UI responsive - Material design" border="0" height="364" src="http://4.bp.blogspot.com/-mhFdKBeHe5c/VqjOpgKvq_I/AAAAAAAABRQ/CKOnQTX5QSM/s640/memasang%2Bshare%2Bbutton%2Bflat%2BUI.jpg" title="Cara memasang sosial share button dengan gaya flat UI responsive - Material design" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sosial share button material design</td></tr>
</tbody></table>
<br />
Dengan begitu, siapa tahu dengan melihat sosial share button yang sangat menarik si pengunjung blog ente mau menekan tombol ini yang sangat jarang sekali orang klik pada setiap blog maupun web. FAKTA !<br />
<br />
Cara pasang si agak sedikit rumit, namun bagi yang sering bergelut dengan template sangatlah mudah. Tidak seperti gw yang newbie ini. he he<br />
<br />
Langkah pertama edit template blogger ente dan sisipkan kode css ini.sebelum /]]></b:skin> ataupun </style> tapi ingat, jika ingin menyisipkan sebelum </style>, sisipkan pada style yang ada di dalam tag conditional <b:if cond='data:blog.pageType == &quot;item&quot;'>. awas bro jangan kebangetan wkwk.<br />
<br />
<pre><code>.sharede,.sharein{position:relative;display:inline-block;}
.sharein{display:table;margin:auto;text-align:center}
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:60px;height:60px;line-height:60px;text-decoration:none!important;display:inline-block;margin:0 15px 0px 0;font-weight:700;border-radius:100%;color:#fff;text-shadow:none;padding:0 10px;transition:all .3s;text-align:center;overflow:hidden}
.sharein a.gp {background:#e74c3c;}
.sharein a.fb {background:#2980b9;}
.sharein a.tw {background:#03a9f4;}
.sharein span.pl {background:#878f96;margin-right:0;}
.fbtea,.gotea,.plustea,.twtea{font-size:20px!important;vertical-align:middle}
.sharein a.fb:hover,.sharein a.gp:hover,.sharein a.tw:hover,.sharein span.pl:hover{transform:rotate(360deg);}
.sharein a.fb:active,.sharein a.gp:active,.sharein a.tw:active,.sharein span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position:absolute;bottom:100%;right:5px;z-index:99999;float:right;min-width:100px;padding:10px 20px;margin:0;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:2px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#666!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#03a9f4!important}
ul#share-menu{margin:10px 0;padding:5px 15px}
@media only screen and (max-width:640px){
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:45px;height:45px;line-height:45px;}
.fbtea,.gotea,.plustea,.twtea{font-size:15px!important;}}</code></pre>
<br />
Lalu sisipkan kembali kode html/javascript ini nya didalam tag <b:if cond='data:blog.pageType == &quot;item&quot;'> yang sesudah <data:post.body/>. Pada setiap template memiliki tiga <data:post.body/> namun jangan bingung, caranya search/tekan CTRL+F cari <data:post.body/> jika yang dibawahnya ada tag <b:if cond='data:blog.pageType == &quot;item&quot;'> berarti itu tempat yang tepat dan silahkan ente sisipkan dalam tag itu.<br />
<br />
<pre><code><script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharein"><div class="sharede"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus gotea"></i></a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbtea"></i></a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter twtea"></i></a> \
<span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
<li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
<li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
<li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
<li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
<li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
<li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
<li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
<li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
<li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
</ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
var _0xba47=["","\x70\x78\x20","\x70\x78\x20\x30\x70\x78\x20","\x2C\x20","\x74\x65\x78\x74\x53\x68\x61\x64\x6F\x77","\x73\x74\x79\x6C\x65","\x2E\x66\x62\x74\x65\x61","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x23\x32\x32\x36\x61\x39\x62","\x2E\x67\x6F\x74\x65\x61","\x23\x65\x33\x33\x30\x31\x63","\x2E\x70\x6C\x75\x73\x74\x65\x61","\x23\x37\x34\x37\x65\x38\x36","\x2E\x74\x77\x74\x65\x61","\x23\x30\x32\x38\x65\x63\x66"];var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[6])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[8]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[9])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[10]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[11])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[12]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[13])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[14]);
//]]>
</script></code></pre>
<br />
Sampai disini simpan template ente dan lihat hasilnya. Sebaiknya jika dalam template ente sudah memliki sebuah share button di bawah postingannya, silahkan dihapus kode html ataupun kode cssnya guna agar share button flat UI tidak menumpuk dengan share button sebelumnya.<br />
<br />
<div style="text-align: center;">
<a href="http://codepen.io/zulmyeve/pen/Goxaxv" target="_blank"><b><button>DEMO</button></b></a>
</div>
<h4>
Tambahan</h4>
<div>
Sebelumnya pada template ente harus sudah terpasang font awesome, jika belum silahkan sisipkan font awesome berikut sebelum </head></div>
<div>
<br /></div>
<div>
<div>
<pre><code><script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");");
//]]>
</script></code></pre>
</div>
</div>
Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0tag:blogger.com,1999:blog-3340404719872901295.post-25309471692685854002016-01-26T20:58:00.001+07:002016-03-27T21:42:46.619+07:00Cara paling tepat untuk memproteksi file javascript<b><a href="http://blogeridiots.blogspot.com/2016/01/cara-proteksi-file-javascript-yang-tepat.html">Cara menyembunyikan javascript</a></b> - Memproteksi file javascript memang sangat penting bagi yang sering berbagi template atau javascript yang tidak ingin sebagian dari file itu di ganti apalagi jika javascript yang terlalu transparan, akan mengakibatkan mudahnya si plagiater untuk mengubahnya seperti menghilangkan atau mengubah credit creator template dan atribut atribut lain. Yehi gw ngomong kayak orang bener aja, padahal masih belajar.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-ue-GgGzV_c8/VqdfEhJYzZI/AAAAAAAABQ4/ZEmOD1ZCO6Q/s1600/javascript%2Blogo.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara proteksi file javascript yang tepat" border="0" height="364" src="https://4.bp.blogspot.com/-ue-GgGzV_c8/VqdfEhJYzZI/AAAAAAAABQ4/ZEmOD1ZCO6Q/s640/javascript%2Blogo.jpg" title="Cara proteksi file javascript yang tepat" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">proteksi file javascript</td></tr>
</tbody></table>
<br />
Sering kita jumpai pada sebuah template web atau template blogger sebagian file javascript yang sudah di encrypt alias di proteksi. Kurang lebih seperti ini tampilannya<br />
<br />
<pre><code>var _0xbc58=["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x63\x6C\x69\x63\x6B","\x66\x6F\x63\x75\x73","\x2E\x73\x65\x61\x72\x63\x68","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x6C\x69\x76\x65\x2D\x73\x65\x61\x72\x63\x68","\x6F\x6E","\x2E\x73\x65\x61\x72\x63\x68\x62\x75\x74\x74\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x63\x6C\x6F\x73\x65","\x6F\x6E\x6C\x6F\x61\x64","\x73\x69\x74\x65\x2D\x63\x72\x65\x64\x69\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x62\x6C\x6F\x67\x65\x72\x69\x64\x69\x6F\x74\x73\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x72\x65\x6C","\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x44\x65\x73\x69\x67\x6E\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x3A\x2F\x2F\x62\x6C\x6F\x67\x65\x72\x69\x64\x69\x6F\x74\x73\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x27\x20\x72\x65\x6C\x3D\x27\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x6C\x6F\x67\x65\x72\x20\x49\x64\x69\x6F\x74\x73\x27\x3E\x42\x6C\x6F\x67\x65\x72\x20\x49\x64\x69\x6F\x74\x73\x3C\x2F\x61\x3E"];</code></pre>
<br />
Bagaimana? sulit si baca? bagaimana jika mengubahnya? bisa saja memakai java decoder. Tapi harus di ingat, tidak semua tools java decoder bisa men decode javascript yang sudah di encode ini. Selain menjadi sulit untuk dibaca, javascript yang di encode juga sedikit dapat meringankan sebuah web/blog.<br />
<br />
Nah, yang jadi pertanyaan apa nama tool untuk enkripsi javascript terbaik seperti di atas. Yakni bernama Javascript Obfuscator, ente bisa kunjungi https://javascriptobfuscator.com/Javascript-Obfuscator.aspx.<br />
<br />
Cara mainnya, misal ente punya javascript yang ingin di enkrip seperti di bawah ini<br />
<br />
<pre><code><script type='text/javascript'>
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).ready(function(){
<span class="Apple-tab-span" style="white-space: pre;"> </span>setInterval(function(){
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (!$('#zulmy-footer-wrapper .site-credit:visible').length) window.location.href = 'http://blogeridiots.blogspot.com';}, 3000);
<span class="Apple-tab-span" style="white-space: pre;"> </span>});
</script></code></pre>
<br />
Ambil isi dari javascript itu alias jangan semuanya, sebab jika semua di enkrip akan gagal. Obfuscator mendeteksi itu adalah html.<br />
Pengambilannya seperti ini<br />
<br />
<pre><code><span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).ready(function(){
<span class="Apple-tab-span" style="white-space: pre;"> </span>setInterval(function(){
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (!$('#zulmy-footer-wrapper .site-credit:visible').length) window.location.href = 'http://blogeridiots.blogspot.com';}, 3000);
<span class="Apple-tab-span" style="white-space: pre;"> </span>});</code></pre>
<br />
Tempel pada kolom Obfuscator Lalu klik Obfuscate, nantinya contoh hasil seperti ini<br />
<br />
<pre><code>var _0x89cb=["\x6C\x65\x6E\x67\x74\x68","\x23\x7A\x75\x6C\x6D\x79\x2D\x66\x6F\x6F\x74\x65\x72\x2D\x77\x72\x61\x70\x70\x65\x72\x20\x2E\x73\x69\x74\x65\x2D\x63\x72\x65\x64\x69\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x62\x6C\x6F\x67\x65\x72\x69\x64\x69\x6F\x74\x73\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];$(document)[_0x89cb[5]](function(){setInterval(function(){if(!$(_0x89cb[1])[_0x89cb[0]]){window[_0x89cb[3]][_0x89cb[2]]=_0x89cb[4]}},3000)});</code></pre>
<br />
Lalu tambahkan kembali tag pembuka dan penutup <script>. seperti ini<br />
<br />
<pre><code><script type='text/javascript'>
var _0x89cb=["\x6C\x65\x6E\x67\x74\x68","\x23\x7A\x75\x6C\x6D\x79\x2D\x66\x6F\x6F\x74\x65\x72\x2D\x77\x72\x61\x70\x70\x65\x72\x20\x2E\x73\x69\x74\x65\x2D\x63\x72\x65\x64\x69\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x62\x6C\x6F\x67\x65\x72\x69\x64\x69\x6F\x74\x73\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];$(document)[_0x89cb[5]](function(){setInterval(function(){if(!$(_0x89cb[1])[_0x89cb[0]]){window[_0x89cb[3]][_0x89cb[2]]=_0x89cb[4]}},3000)});
</script></code></pre>
<br />
Sampai disini enkrypting sudah selesai, silahkan tempel script encrypted pada tempatnya.Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com1tag:blogger.com,1999:blog-3340404719872901295.post-86545051131295422702016-01-24T00:48:00.000+07:002016-01-25T09:24:55.451+07:00Mengganti tampilan checkbox blogger menjadi flat UI style<a href="http://blogeridiots.blogspot.com/2016/01/cara-mengganti-tampilan-checkbox.html"><b>Cara mengganti tampilan checkbox blogger menjadi flat UI style</b></a> - Bisa dibilang material design lah ya bro, jadi buat ente yang merasa bosan dengan tampilan checkbox bawaan blogger, ente bisa menggantinya dengan gaya flat UI style bro. bentar ada gambar dulu lewat ceritanya ilustrasi bro biar hebring dikit. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-BvLD-X1A7-w/VqUh0c99HLI/AAAAAAAABNQ/oeMtE_kC7Ao/s1600/mengganti%2Btampilan%2Bcheckbox%2Bblogger.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara mengganti tampilan checkbox blogger menjadi flat UI style" border="0" height="364" src="http://2.bp.blogspot.com/-BvLD-X1A7-w/VqUh0c99HLI/AAAAAAAABNQ/oeMtE_kC7Ao/s640/mengganti%2Btampilan%2Bcheckbox%2Bblogger.jpg" title="Cara mengganti tampilan checkbox blogger menjadi flat UI style" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">flat UI style checkbox</td></tr>
</tbody></table>
<br />
Ok, seperti biasa langsung saja, langkah pertama yang harus dilakukan yakni mengorbankan checkbox bawaan blogger menjadi tidak tampil dengan cara edit template dan tambahkan CSS di bawah ini terapkan di atas /]]></b:skin><br />
<br />
<pre><code>input[type="checkbox"]:not(:checked),input[type="checkbox"]:checked{position:absolute;left:-9999px;}</code></pre>
<br />
Ya begitulah bro jika ada keinginan biasanya harus ada yang dikorbankan seperti cinta kita :D<br />
CSS diatas, guna agar tampilan checkbox menjadi tidak double alias numpuk yang artinya checkbox bawaan blogger tampil dan checkbox custom juga tampil, mengerti kan maksud saya. Tenang aja bro kalo gak ngerti bisa ditanyakan sama pak RT setempat. Hor ning naha jadi kadinya.<br />
<br />
Ges ah ocon na, lalu tambahkan CSS di bawah ini tepat di bawah CSS yang tadi ente tambahkan pada langkah pertama<br />
<br />
<pre><code>input[type="checkbox"]:not(:checked) + label,input[type="checkbox"]:checked + label{position:relative;padding-left:50px;cursor: pointer;margin-left:20px;}
input[type="checkbox"]:not(:checked) + label:before,input[type="checkbox"]:checked + label:before,input[type="checkbox"]:not(:checked) + label:after,input[type="checkbox"]:checked + label:after{content:'';position:absolute;}
input[type="checkbox"]:not(:checked) + label:before,input[type="checkbox"]:checked + label:before{left:0;top:-3px;width:40px;height:20px;background:#ddd;border-radius:15px;transition:background-color .2s;}
input[type="checkbox"]:not(:checked) + label:after,input[type="checkbox"]:checked + label:after{width:10px;height:10px;transition:all .2s;border-radius:50%;background:#7F8C9A;top:2px;left:5px;}
input[type="checkbox"]:checked + label:before{background:#f8695f;}
input[type="checkbox"]:checked + label:after{background:#fff;top:2px;left:25px;}</code></pre>
<br />
Save template ente bro jangan ampe lupa kalo lupa ente pinter banget aslinya.<br />
<br />
<h4>
Demo</h4>
<input class="opt1" id="BlogerIdiots" type="checkbox" /> <label for="BlogerIdiots">Bloger idiots</label><input checked="" class="opt2" id="BelajarNgeblog" type="checkbox" /> <label for="BelajarNgeblog">Belajar ngeblog</label><br />
<br />
Jika demo nya berbeda, berarti style checkbox gw sudah ganti bro, kalo ente keras kepala, haha ente bisa liat gambar ilustrasi nya di atas, tidak jauh berbeda seperti itu.Zulmy Evehttp://www.blogger.com/profile/10235264897306226532noreply@blogger.com0