Home Search results for Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

  
Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

Tombol Back To Top adalah sebuah tombol kecil yang sering kali terletak pada bagian kanan bawah pada tampilan suatu blog. Kegunaan dari tombol ini sangat sederhana, yaitu buat kembali ke tampilan atas halaman.

Dengan adanya tombol ini maka kamu tidak perlu lagi melakukan scroll keatas bila ingin melihat pulang laman awal blog.

Anda hanya perlu menekan tombol Back To Top yang telah kamu pasang sebelumnya, serta otomatis laman blog akan kembali ke tampilan atas blog.

Untuk cara pemasangan tombol ini sendiri juga sangat mudah, buat lebih jelasnya mengenai pemasangan tombol Back To Top ini silahkan ikuti caranya dibawah ini:

1. Langkah yang paling awal adalah beserta login ke blogger.com
2. Pada dashboard blogger, silahkan pilih Tema>Edit HTML
3. Cari kode </head> beserta memakai CTRL+F

4. Kemudian letakkan kode berikut, diatas kode </head> tadi
<style type='text/css'>/*<![CDATA[*//*Back To Top*/.scroll-buttonbox-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.microsoft.alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(210,104,211);color:rgb(249,104,211);border-radius:0%;position:fixed.scroll-button:hoverfilter:alpha(opacity=100);filter:progid:DXImageTransform.microsoft.alpha(Opacity=100);opacity:1.scroll-button--hiddenfilter:alpha(opacity=0);filter:progd:DXImageTransform.microsoft.alpha(Opacity=0);opacity:0;visibility:hidden/*]]></style><script type='text/javascript'>//<![CDATA[function downloadJSAtOnload()var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)window.addeventListener?Window.addeventListener("load",downloadJSAtOnload,!1):window.attachEvent?Window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;//]]></script>

5. Simpan Tema serta selesai

Baca Juga: Cara Mematikan Fungsi Klik Kanan Pada Semua Gambar Di Postingan Blog

Sangat mudah dan simpel bukan? Nah sekarang anda sanggup memanfaatkan tombol ini untuk menggunakan scroll ke halaman atas pada tampilan blog dengan sangat gampang.

Semoga cara ini dapat berguna untuk anda ya. Terimakasih dan sampai jumpa di pembahasan selanjutnya.
Baca Juga

Cara Memasang Widget Recent Post Slider Di Sidebar Blog

  

Jika sering kali widget recent post hanya berbentuk link beserta beberapa gambar tumbnail yg menuju ke postingan terbaru, namun pada kesempatan kali ini admin akan mencoba menunjukkan sebuah cara buat menciptakan wigdet recent post slider.

Widget yang akan saya bagikan ini tidak sama dengan kebanyakan recent post yg ada. Widget ini berbentuk sebuah kotak dengan beberapa tumbnail postingan terbaru yang sanggup digeser atau di slide baik secara otomatis maupun manual.

Widget recent post slider ini sebetulnya bukanlah hal baru, mungkin anda pernah melihat widget ini di beberapa situs di internet, namun kamu tidak tahu apa nama widget tersebut, serta bagaimana cara mengolahnya?

Tapi tenang, lantaran dalam saat ini admin akan menunjukkan kepada anda cara menciptakan widget recent post slider tersebut. Penasaran bagaimana caranya? Silahkan ikuti panduannya dibawah ini:

Baca Juga: Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

1. Login ke blogger
2. Masuk ke Tata Letak>Tambahkan Gadget>HTML/Javascript
3. Copy kode berikut, serta paste di halaman tadi
<style scoped="" type="text/css">ul.rcentside *-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box ul.rcentsidefont-size:11pxul.rcentside,ul.rcentside limargin:0;padding:0;list-style:none;position:relative ul.rcentsidewidth:100%;height:500px ul.rcentside liheight:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4)display:block ul.rcentside imgborder:0;width:100%;height:autoul.rcentside li:nth-child(1)width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 ul.rcentside li:nth-child(2)left:0;top:50% ul.rcentside li:nth-child(3)left:50.5%;top:50% ul.rcentside li:nth-child(4)width:100%;left:0;top:75% ul.rcentside .overlayx,ul.rcentside litransition:all .4s ease-in-out ul.rcentside .overlayxwidth:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiP9ULZTPK39Whzjme5Sa29Agv7sM6xsD6qPsC5Wy8JD6w4wYQ_IKMgm-P68lqxBWix-uDuA-num_I2Liypd7tFkwZNNzAJ81ybBf3VkmtlSPBAmEPc4_glblcc77xTW5MQR2QtwyXy1Y/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x ul.rcentside .overlayx,ul.rcentside imgmargin:3pxul.rcentside li:nth-child(1).overlayxbackground-position:50% 25% ul.rcentside .overlayx:hoveropacity:.1 ul.rcentside h4position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3sul.rcentside li:hover h4bottom:30pxul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4font-size:150% ul.rcentside .label_textposition:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3sul.rcentside li:hover .label_textbottom:20px;opacity:1ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autnamedisplay:none .buttonsmargin:5px 0 0 .buttons adisplay:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative .buttons a::beforecontent:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% .buttons a.nextx::beforeborder-color:transparent transparent transparent #535353;margin-left:-3px </style><div id="featuredpostside"></div><script type='text/javascript'>function FeaturedPostSide(a)(function(e)var h=blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false;h=e.extend(,h,a);var g=e(h.idcontaint);var d=h.maxpost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w)var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++)for(var n=0;n<s[o].link.length;n++)if(s[o].link[n].rel=="alternate")q=s[o].link[n].href;breakif("media$thumbnail" in s[o])u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.imageSize+"-c")elseu=h.pblank.replace(//s[0-9]+(-ck=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.monthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"e("ul",g).append(l).addclass(h.loadingClass);var c=function()e(h.idcontaint+" .nextx").click();var b=function()e.get((h.blogURL===""?Window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagname===false?"":"/-/"+h.tagname)+"?Max-results="+h.maxpost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function()e(h.idcontaint+" .prevx").click(function()e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false);e(h.idcontaint+" .nextx").click(function()e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false);if(h.autoplay)var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function()clearInterval(j),function()j=setInterval(c,i))e("ul",g).removeClass(h.loadingClass),d);e(document).ready(b))(jQuery);//<![CDATA[FeaturedPostSide( blogURL: "https://tipsblogmfs.blogspot.com", MaxPost: 8, idcontaint: "#featuredpostside", ImageSize: 300, interval: 5000, autoplay: true, tagName: false);//]]></script>

Keterangan:
  • blogURL: ganti dengan URL blog anda
  • MaxPost: Jumlah postingan
  • ImageSize: kapasitas gambar
  • interval: waktu yang dibutuhkan dikala post slider berpindah
  • autoplay: true : mengaktifkan auto slider, buat merubahnya ubah menjadi "autoplay:false"
  • tagName: false : mematikan nama label, untuk menambahkan artikel terbaru berdasarkan label, ubah false menjadi nama label yang diinginkan. Misal: blogger
4. Simpan widget, serta lihat hasilnya pada blog anda
Baca Juga

Nah itu beliau cara memasang widget recent post berbentuk slider. Dengan adanya widget ini maka para pengunjung akan lebih tertarik buat mengunjungi postingan terbaru kamu.