recent posts

banner image

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"


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.

<script type="text/javascript" src=""></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="" />', //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
[--other code--]

Create different "back to top" buttons on mobile version Create different "back to top" buttons on mobile version Reviewed by nenk Saja on August 30, 2017 Rating: 5

No comments:

please write a comment ...

Powered by Blogger.