Menggabungkan Beberapa Kode HTML dan JavaScript Dalam Satu Widget Blogger

Selamat pagi sobat blogger kali ini saya akan share bagaimana cara menggabungkan Beberapa Kode HTML dan JavaScript Dalam Satu Widget Blogger, Saya telah mencoba tutorial ini dan ternyata berhasil dan tetap membuat blog anda tetap responsive.

Baca Juga: Mmebuat About Me Keren dan Simple Pada Blog
Kelebihan tutorial yang saya tawarkan ini adalah anda bisa menggabungkan kode HTML/JavaScript pada satu widget blog anda, dan saya rasa anda harus mencoba ini. Ketika saya tidak menggabungkan ketiga kode dibawah ini saya rasa tampilan blog saya kurang rapi dan memakan banyak space dan ruang dan menurut saya itu mengganggu, Oleh karena itu saya memikir dan akhirnya bisa.


Lihat gambar di atas tampaknya kode yang saya gunakan sangat simple tetapi sebenarnya ada 3 kode HTML/JavaScript yang saya gabungkan dalam satu Widget HTML/JavaScript. Mungkin banyak yang bertanya itu bagus ngga dan tidak dipermasalahkan sama Google atau mengganggu SEO blog anda, Jawabannya dalah sama sekali tidak.
Note : Sangar Recommended Untuk Digunakan
Kode HTML/Java Script yang saya gabungkan itu adalah:
  1. Kode About Me
  2. Kode Back To Top
  3. Kode Translate Google
Tujuan dari penggabungan 3 kode adalah untuk menghemat tempat widget yang ada pada blog anda, dan sama sekali tidak berpengaruh terhadap tampilan blog anda. Oleh karena itu saya akan memperlihatkan kode yang saya gabungkan dibawah ini.
<center><div><h5>Hi Semua! Nama saya Arman. Saya Seorang Blogging Beginner. Disamping itu saya sangat suka dengan Musik Daerah, Futsal dan Menulis...</h5></div><div id="my-link"><a href="YOUR LINK FACEBOOK" target="_blank"><img src="YOUR LINK IMAGE FACEBOOK" title="Facebook"/></a><a href="YOUR LINK TWITTER" target="_blank"><img src="YOUR LINK IMAGE TWITTER" title="Twitter"/></a><a href="YOUR LINK GOOGLE+" target="_blank"><img src="YOUR LINK IMAGE GOOGLE+" title="Google"/></a><a href="YOUR LINK YOUTUBE" target="_blank"><img src="YOUR LINK IMAGE YOUTUBE" title="Youtube"/></a><a href="YOUR LINK LINKEDIN" target="_blank"><img src="YOUR LINK IMAGE LINKEDIN" title="Linkedin"/></a></div></center><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.MyBloggerTricks.com * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/var scrolltotop={     //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control     //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).     setting: {startline:100, scrollto: 0, scrollduration:100, fadeduration:[500, 100]},     controlHTML: '<img src="YOUR LINK IMAGE BACK TO TOP" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"     controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner     anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links    state: {isvisible:false, shouldvisible:false},    scrollup:function(){         if (!this.cssfixedsupport) //if control is positioned using JavaScript             this.$control.css({opacity:0}) //hide control immediately after clicking it         var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)         if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists             dest=jQuery('#'+dest).offset().top         else             dest=0         this.$body.animate({scrollTop: dest}, this.setting.scrollduration);     },    keepfixed:function(){         var $window=jQuery(window)         var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx         var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety         this.$control.css({left:controlx+'px', top:controly+'px'})     },    togglecontrol:function(){         var scrolltop=jQuery(window).scrollTop()         if (!this.cssfixedsupport)             this.keepfixed()         this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false        if (this.state.shouldvisible && !this.state.isvisible){             this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])             this.state.isvisible=true         }         else if (this.state.shouldvisible==false && this.state.isvisible){             this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])             this.state.isvisible=false         }     },         init:function(){         jQuery(document).ready(function($){             var mainobj=scrolltotop             var iebrws=document.all             mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode             mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')             mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')                 .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})                 .attr({title:'Scroll Back to Top'})                 .click(function(){mainobj.scrollup(); return false})                 .appendTo('body')             if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text                 mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text             mainobj.togglecontrol()             $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){                 mainobj.scrollup()                 return false             })             $(window).bind('scroll resize', function(e){                 mainobj.togglecontrol()             })         })     } }scrolltotop.init()</script><br><center><div id="google_translate_element"></div><script type="text/javascript">function googleTranslateElementInit() {  new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-10301139-6'}, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center>
Ket : 
  • Kode Paling Atas, Hijau terang = Kode About Me dan Media Sosial 
  • Kode tengah, Warna Biru = Kode Back to Top
  • Kode Paling Bawah, Hijau Buram = Kode Google Translate
  • Kode yang saya beri warna Hitam = Url Media Sosial dan Url Image Media Sosial
Sekian share yang sangat singkat ini, sekali saya sarankan sobat untuk menggunakan ini, karena tutorial ini sangat bagus bagi blogger yang ingin tampilan blognya tetap elegan karena banyaknya widget yang menurut saya bisa mengganggu.
Note: Sobat Juga bisa memisahkan satu per satu kode di atas sesuai warna, misalnya anda ingin Translate saja.
Jangan lupa beri saran dengan memberi comment dibawah, jangan lupa share ketemna kalian jika artikel yang saya share ini bermanfaat.