For long pages, you might want to keep something on your page visible to the reader. Many sites have been using this technique to keep useful information sticky like sulit.com's contact number on its sidebar. Other bloggers use it to make ads sticky but it can disturb the reader so please use it the way it becomes helpful. It supports photos, paragraphs and even menus.
1. Download the following JS file by right clicking on it and choose “save link as”,
Then upload it to your Weebly template by going to Design > Edit CSS/HTML > Add new files > select the files you've just downloaded and save your template.
2. Time to insert the code in your site/page <head>. Please read “3 Ways in Editing Weebly’s <head>” so you know where will you put the code if you decided to insert this on a single page or on the whole site (for sidebar). Once you've decided, paste the following code on the header code box:
<style>
/* CSS for your HTML element. Do not edit. */
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
<style>
/* CSS for sample sticky content */
.mattblacktabs{
overflow: hidden;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/stickycontent.js">
/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script>
//initialize sticky content:
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
/* CSS for your HTML element. Do not edit. */
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
<style>
/* CSS for sample sticky content */
.mattblacktabs{
overflow: hidden;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/stickycontent.js">
/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script>
//initialize sticky content:
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
Change the red mark text with your website address. The green text refers to the styling of your content. Since I used an image so I just have to define my photo dimensions. Save after.
3. Ready to insert our HTML content. Just go to the page preferred, drag an “embed code” element and paste my sample below:
<div id="samplemenu" class="mattblacktabs">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiEs8LgaBTW8q7_UQG2hbUfeGJAYqrSnDKnHedvaRBjW4n-vgiiVG6_oW8H9E5eBu0MNVqF8NMFZ_V1ph2doYqfcH2psmQOJ9b5Jb55JZvONfn7yi8Tb7yj_yJPxxWHczEzXQjNz66O6J/s1600/Custom+Search+Engine+for+Weebly.png" />
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiEs8LgaBTW8q7_UQG2hbUfeGJAYqrSnDKnHedvaRBjW4n-vgiiVG6_oW8H9E5eBu0MNVqF8NMFZ_V1ph2doYqfcH2psmQOJ9b5Jb55JZvONfn7yi8Tb7yj_yJPxxWHczEzXQjNz66O6J/s1600/Custom+Search+Engine+for+Weebly.png" />
</div>
The red marked text simply defines the image source I used. The size will be 300x300 as I specifically edited my CSS on step 2. You can always change it and use your own image. Publish your site and see the outcome.
You may also try the sample from Dynamic Drive which is "menu" instead of image. Just let me know if you need help.
0 comments: