Skip to main content

Create different "back to top" buttons on mobile version

How to make different back to top buttons on mobile version, follow these steps .

"back to top" mobile version

create back to top

  1. Login on your Blogger.
  2. On the Blogger Dashboard, "Layout" then click "Add Gadget"> "HTML / JavaScript".
  3. Then enter the following script code, and give the title "back to top mobile version"

  4. Press Highlight All, then Ctrl + C to copy the code
and give the title

4. Then click "Save"

5. Click "Theme" ==>> "Edit HTML"

Edit HTML

6. Press Ctrl+ F , then input "back to top mobile version" 

7. Add code: mobile='only' , in the widget tag.
in the widget tag.

8. Save theme

Explanation: To set the widgets you can install in the mobile version the way you only need to add a new Attribute to the tag <b:widget/>

Well what we need to do is add a new Attribute on the widget tag, which is mobile. This mobile attribute itself has three values, namely Yes, No, and Only. Such is the application:


<b:widget id='HTML3' mobile='yes' locked='false' title='back to top mobile version'> 

The above code is for displaying mobile version widgets and also showing in desktop version views.


<b:widget id='HTML3' mobile='only' locked='false' title='back to top mobile version'>

The above code is for displaying mobile version widgets but not showing in desktop version.


<b:widget id='HTML3' mobile='no' locked='false' title='back to top mobile version'>

And the above code is to hide widgets in the mobile version.


9. Click Layout then delete title 'back to top mobile version'

delete title

10. Save , now your blog has a button back to top mobile version.



  • Select a thumbnail below for mobile version.
  • Replace the red code.

https://3.bp.blogspot.com/-1g0PcvtNFc0/WcKy1bNmvPI/AAAAAAAAGew/A2WbT34TyroTRJeQhegmNl6WaF_q-DCDACLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25281%2529-min.jpg

https://3.bp.blogspot.com/-28WiXEGOZZw/WcKy1SNsNvI/AAAAAAAAGes/y9wz5xHFxGYkmRF_xcjvMY6m06xrdrzJQCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25281%2529-min.png


https://3.bp.blogspot.com/-pVJczT6OkQ0/WcKy2WMlGYI/AAAAAAAAGe8/IL_Jhgp0ikgjnUyBRDHdYy0oUdSpOaGHACLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25282%2529-min.jpg


https://3.bp.blogspot.com/-OyksgEkLYp0/WcKy3BO5yMI/AAAAAAAAGfE/SAeU5rUmYQ4hCBDUQ2YfMtx4lBSzIb5hwCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25282%2529-min.png


https://4.bp.blogspot.com/-2y1F5razK4Y/WcKy3tO0q5I/AAAAAAAAGfI/gyTwkUPygSo4kC-8q_y9HrWQCr5cIQSXwCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25283%2529-min.png


https://4.bp.blogspot.com/-FP6hcff-QLQ/WcKy4G1wwUI/AAAAAAAAGfQ/ClvZD9RWGOkcr2nSEjjrX57dzcKlV4LUgCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25284%2529-min.png


https://4.bp.blogspot.com/-pTULDO_X4LE/WcKy3mJkmFI/AAAAAAAAGfM/U4rR8RVZvAkvOrnX-srg1P4GTbpJi3-4QCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25285%2529-min.png


https://4.bp.blogspot.com/-EcDB3JbX91Y/WcKy4UecOfI/AAAAAAAAGfU/a8spoSQQjbQNzEsF1veFIQg_UJhSFichACLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25286%2529-min.png


https://3.bp.blogspot.com/-r29ZBiBr_yc/WcKy40lpCpI/AAAAAAAAGfY/Ixd-eFImRfInuHp9QGypFoX_4PkQNmT7QCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25287%2529-min.png


https://3.bp.blogspot.com/-VwwAnbj--5I/WcKy5C9oH-I/AAAAAAAAGfc/6wXAWnj2zxstcPShEXlBn4wiSmhopLTnQCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25288%2529-min.png


https://3.bp.blogspot.com/-iSNdGWYYqJE/WcKy5J7QBmI/AAAAAAAAGfg/y0WdQstNlUMriiNUOgPKaAORhML3IL4QwCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%25289%2529-min.png


https://2.bp.blogspot.com/-PWudkytjmKg/WcKy1SNdknI/AAAAAAAAGe0/VtxAHGe9iFUpUJbxIQvHvppswrzycuS3wCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%252810%2529-min.png


https://1.bp.blogspot.com/-SKFcNbzM6D0/WcKy2OmPFzI/AAAAAAAAGe4/f0uxY2QZQ8cfdvWcjaSoVinGuX92SkVbwCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%252811%2529-min.png


https://2.bp.blogspot.com/--AGwvYVxNrM/WcKy2ZMPCRI/AAAAAAAAGfA/PxUQaS_Qkt4MXw7IXbE3LO0d9sjkOlwmgCLcBGAs/s1600/back%2Bto%2Btop%2Bbutton%2B%252812%2529-min.png


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

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:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png" />', //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
scrolltotop.init()
[--other code--]
</script>



Comments