Home Search results for Cara Membuat Widget Berlangganan/subscribe Mirip Jalan Tikus

Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

  
Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

Anda tentunya sudah tidak asing lagi bukan beserta situs website yang dengan nama jalantikus? Yap, situs website download ini merupakan salah satu situs paling populer dan melegenda.

Tampilan situs yang sangat keren, konten yang menarik dan lengkap adalah salah satu faktor penyebab mengapa situs ini menjadi sangat terkenal diseluruh indonesia.

Tak hanya tampilan situsnya yang mempesona serta selalu menjadi buah bibir dikalangan warga , ternyata widget subscribe yang terdapat pun ikut menjadi sorotan banyak orang.

Widget subscribe atau yg biasa kita kenal beserta widget berlangganan merupakan sebuah widget yg dijalankan buat mempermudah para pengunjung pada mengikuti setiap update yang terdapat di jalantikus.

Dengan adanya widget ini, maka para pengunjung tidak akan ketinggalan buat melihat update terbaru di jalantikus.

Ada banyak alasan mengapa widget ini menjadi sorotan banyak kalangan, terutama para blogger. Salah satu karena adalah lantaran tampilannya yg minimalis, keren, dan terlihat profesional.

Nah karena banyaknya minat para blogger yg ingin pula memakai widget ini didalam blognya, maka pada kesempatan ini aku akan memberikan cara buat memasang widget berlangganan yang mirip mirip dengan milik jalantikus.com.

Untuk cara memasang widget ini sebetulnya cukup mudah, anda hanya perlu menambahkan sedikit script kode serta pula sedikit meng-edit sesuai blog kamu.

Baiklah agar kamu lebih memahami bagaimana cara pemasangan widget yg benar , silahkan ikuti caranya dibawah ini:

1. Pertama, login terlebih dahulu ke blogger
2. Kemudian masuk dalam Tema>Edit HTML
3. Lalu masukan kode berikut, di atas kode ]]></b:skin> atau </style>
.langganan.news-content min-width: 300px; width: 100%; padding: 20px; margin-top: 20px; margin-left: auto; margin-right: auto; background: #ce0a46; background: -webkit-linear-gradient(15deg,#ce0a46,#e98125); background: -o-linear-gradient(15deg,#ce0a46,#e98125); background: -webkit-linear-gradient(75deg,#ce0a46,#e98125); background: -o-linear-gradient(75deg,#ce0a46,#e98125); background: linear-gradient(15deg,#ce0a46,#e98125); border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; .news-content position: relative; .sidebar-content .news-content .news-title position: relative; display: inline-block; font-family: Museo,sans-serif; font-size: 22px; line-height: 32px; .langganan .news-title font-family: Museo,sans-serif; font-size: 20px; margin-bottom: 15px!Important; line-height: 15px; font-weight: 700; padding-left: 0; background-color: hsla(0,0%,100%,0); .sidebar-content .news-title margin-bottom: 20px; .color.white color: #fff; .langganan .news-detail font-family: Open Sans; font-size: 14px; line-height: 20px; .color.white color: #fff; .news-detail white-space: normal; .langganan .email-langganan position: relative; .langganan .email-langganan:before position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px; .icon-mail:before content: "E012"; [class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before font-family: untitled-font-2!Important; font-style: normal!Important; font-weight: 400!Important; font-variant: normal!Important; text-transform: none!Important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .langganan .email-langganan input width: 100%; height: 40px; font-family: Open Sans; font-size: 14px; margin-top: 20px; border: 0; border-radius: 4px; padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; a, button, input, label -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0; user agent stylesheet input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] padding: 1px 0px; user agent stylesheet input -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; user agent stylesheet input, textarea, select, button text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; user agent stylesheet input, textarea, select, button, meter, progress -webkit-writing-mode: horizontal-tb !Important; .langganan .email-langganan position: relative; .langganan .submit height: 35px; width: 100%; margin-top: 20px; font-family: Museo,sans-serif; font-size: 14px; line-height: 35px; text-align: center; border: 0; border-radius: 4px; background-color: #3a2e28; outline: 0;.color.white color: #fff;.trs-2 -webkit-transition: .2s; -o-transition: .2s; transition: .2s;button, input[type=button], input[type=submit], label cursor: pointer; font-family: Open Sans;a, button, input, label -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0;; form display: block; margin-top: 0em; .langganan .email-langganan:before position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px;.icon-mail:before content: "E012";[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before font-family: untitled-font-2!Important; font-style: normal!Important; font-weight: 400!Important; font-variant: normal!Important; text-transform: none!Important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

4. Setelah selesai silahkan klik dalam "Simpan Tema"
5. Kemudian kita beralih ke Tata Letak>Tambahkan Gadget>HTML/Javascript
6. Dan masukan kode dibawah ini
<div id="" class="langganan news-content "><form action="https://feedburner.google.com/fb/a/mailverify/Palingtop21" method="post" sasaran="popup"><div class="news-title color white">Langganan Artikel</div><div class="news-detail color white">Temukan Tips serta Berita menarik setiap harinya. GRATIS!</div><div class="email-langganan icon-mail"><input type="email" placeholder="Alamat Email..." required="" data-role="none"><input type="hidden" value="jalantikus/feed" name="uri"><input type="hidden" name="loc" value="en_US"></div><button type="submit" value="LANGGANAN" class="submit color white trs-2" data-role="none">LANGGANAN</button></form></div>

Catatan:
Ubah kode yang sudah aku beri pertanda, bersama FeedBurner anda
7. Terakhir, klik "Simpan" lalu cek blog kamu buat melihat hasilnya

Baca Juga: Cara Membuat Widget Breaking News Slider Sederhana Di Blog

Bagaimana sobat-sobat, gampang bukan cara memasang widget subscribe seperti jalantikus ini? Sekarang para pengunjung anda bisa mengikuti update terbaru pula dari blog kamu.
Baca Juga

Baiklah aku rasa hanya itu yang dapat admin sampaikan, terimakasih dan sampai jumpa di postingan berikutnya.

Cara Memasang Lazy Load Untuk Percepat Loading Blog

  

Lazy Load merupakan sebuah script kode yang berhubungan bersama proses loading gambar dalam situs blog.

Fungsi dari script lazy load sendiri adalah menghentikan proses loading gambar secara sementara, dan akan dilanjutkan bila halaman blog telah di scroll.

Dengan begitu loading laman blog akan lebih cepat, karena tak membutuhkan proses load gambar.

Untuk memakai script ini juga tak terlalu sulit, kamu hanya perlu memasukkan script kode lazy load sebelum kode penutup </body>.

Untuk lebih jelasnya tentang cara memasang script lazy load, silahkan ikuti saja caranya dibawah ini:

1. Pertama-tama buka situs blogger.com
2. Pilih Tema>Edit HTML
3. Salin kode dibawah ini, sebelum kode </body>
<script type='text/javascript'>//<![CDATA[// Lazy Load(function(a)a.fn.lazyload=function(b)var c=threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window;if(b)a.extend(c,b)var d=this;if("scroll"==c.event)a(c.container).bind("scroll",function(b)var e=0;d.each(function()else if(!A.belowthefold(this,c)&&!A.rightoffold(this,c))a(this).trigger("appear")elseif(e++>c.failurelimit)return false);var f=a.grep(d,function(a)return!A.loaded);d=a(f))this.each(function()var b=this;if(undefined==a(b).attr("original"))a(b).attr("original",a(b).attr("src"))a.rightoffold(b,c))if(c.placeholder)a(b).attr("src",c.placeholder)elsea(b).removeAttr("src")b.loaded=falseelseb.loaded=truea(b).one("appear",function()if(!This.loaded)a("<img />").bind("load",function()a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true).attr("src",a(b).attr("original")));if("scroll"!=c.event)a(b).bind(c.event,function(c)if(!B.loaded)a(b).trigger("appear")));a(c.container).trigger(c.event);return this;a.belowthefold=function(b,c)if(c.container===undefinedvar d=a(window).height()+a(window).scrollTop()elsevar d=a(c.container).offset().top+a(c.container).height()return d<=a(b).offset().top-c.threshold;a.rightoffold=function(b,c)c.container===window)var d=a(window).width()+a(window).scrollLeft()elsevar d=a(c.container).offset().left+a(c.container).width()return d<=a(b).offset().left-c.threshold;a.abovethetop=function(b,c)c.container===window)var d=a(window).scrollTop()elsevar d=a(c.container).offset().topreturn d>=a(b).offset().top+c.threshold+a(b).height();a.leftofbegin=function(b,c)c.container===window)var d=a(window).scrollLeft()elsevar d=a(c.container).offset().leftreturn d>=a(b).offset().left+c.threshold+a(b).width();a.extend(a.expr[":"],"below-the-fold":"$.belowthefold(a, threshold : 0, container: window)","above-the-fold":"!$.belowthefold(a, threshold : 0, container: window)","right-of-fold":"$.rightoffold(a, threshold : 0, container: window)","left-of-fold":"!$.rightoffold(a, threshold : 0, container: window)"))(jQuery);$(function()$("img").lazyload(placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbexkPRruJ5wfhzkqTDCop-HhzXQe9e7qYxgJ95zVDbfB44L19XStlUYB_FZRjP-Mkp6y_mXY9Zh5NnALGu7pGd6tYTSgdwJ6LwKnfWlr68PtApmTtrOdpTP5Ce0j-XPSGq_fH0D2oOX9q/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"));//]]></script>

4. Terakhir Simpan Tema, dan cek blog kamu buat mengetahui hasilnya

Baca Juga: Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

Itu beliau cara gampang memasang lazy load pada blog. Script ini memang bisa meringankan loading blog, namun yg perlu kamu ketahui merupakan bahwa script ini tak cocok dalam semua template blog.
Baca Juga

Jadi apabila anda telah memasang script lazy load, namun loading blog semakin berat, maka aku sarankan buat menghapus kode tadi.