Code snippets are small bits of code that can be added to enhance your website. You can insert widgets and script from source providers to your site. This will help the page include snippets which are most requested, and you can apply them site-wide by adding them to the header and footer portions of the website or on particular pages using the Code Snippet element.

How do I add a back to top floating button in my website? 

You can copy and paste the code below to your website's header/footer code to add a top floating button. If you want it only on specific pages, then add it to page-specific header/footer code boxes.

1. <style>
2. .rounded-floating-btn {
3.     position: fixed;
4.     right: 20px;
5.     width: 50px !important;
6.     height: 75px !important;
7.     bottom: 20px;
8.     padding: 15px;
9.     z-index: 5;
10.     border-radius: 2px;
11.     cursor: pointer;
12.     background-color: #101010;
13.     box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
14.     color: #fff;
15.     font-size: 70%;
16.     font-weight: 400;
17. }
18. .floated-btn-svg-icon {
19.     width: 20px;
20.     fill: #fff;
21.     margin: 0 auto;
22.     margin-top: 3px;
23. }
24. .rounded-floating-btn .zptext {
25.     margin-top: 3px;
26. }
27. </style>
28. <script>
29. window.onload=function(){
30. var div = document.createElement('div');
31. div.innerHTML='<div class="zpelem-box zpelement zpbox-container zpdefault-section zpdefault-section-bg rounded-floating-btn" data-background-type="none" style="display:none" id="scrollToTop"><div class="floated-btn-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.831 268.832"><path d="M223.255 83.659l-80-79.998c-4.881-4.881-12.797-4.881-17.678 0l-80 80c-4.883 4.882-4.883 12.796 0 17.678 2.439 2.44 5.64 3.661 8.839 3.661s6.397-1.221 8.839-3.661l58.661-58.661v213.654c0 6.903 5.597 12.5 12.5 12.5 6.901 0 12.5-5.597 12.5-12.5V42.677l58.661 58.659c4.883 4.881 12.797 4.881 17.678 0 4.882-4.881 4.882-12.795 0-17.677z"></path></svg></div><div class="zptext zptext-align-center"><p>TOP</p></div></div>';
32. div.addEventListener('click',function(e){
33.     e.preventDefault();
34.     window.scrollTo(0,0);
35. })
36. document.body.appendChild(div);    
37. }
38. window.onscroll = function() {
39.     var threshold = 50; // Pixels after the scrol to top should show
40.     var scrollToTop = document.getElementById('scrollToTop')
41.     scrollToTop.style.display = (document.body.scrollTop > threshold || document.documentElement.scrollTop > threshold) ? 'block' : 'none';
42.   };
43. </script>

How do I keep all accordions closed at start?  

You can copy and paste the code below to your website's header/footer code to keep all the accordion folds closed at the start. If you want it only on specific pages, then add it to page-specific header/footer code boxes.

1. <script>
2. function closeAccordian(){
3. var accordianHeader = $D.getByClass('zpaccordion-active')
4. var accordianContent = $D.getByClass('zpaccordion-active-content')
5. for(var i=0;accordianHeader.length>0;){
6. $D.removeClass(accordianHeader[i],'zpaccordion-active')
7. }
8. for(var i=0;accordianContent.length>0;){
9. $D.removeClass(accordianContent[i],'zpaccordion-active-content')
10. }
11. }
12. document.addEventListener("DOMContentLoaded",closeAccordian)
13. </script>

How do I keep all tabs closed at start? 

You can copy and paste the code below to your website's header/footer code to keep all the tabs closed. If you want it only in specific pages, then add it to page-specific header/footer code boxes.

1. <script>
2. function closeTabs(){
3. var tabHeader = $D.getByClass('zptab-active')
4. var tabContent = $D.getByClass('zptab-active-content')
5. for(var i=0;tabHeader.length>0;){
6. $D.removeClass(tabHeader[i],'zptab-active')
7. }
8. for(var i=0;tabContent.length>0;){
9. $D.removeClass(tabContent[i],'zptab-active-content')
10. }
11. }
12. document.addEventListener("DOMContentLoaded",closeTabs)
13. </script>

How do I hide RSS subscribe button? 

Copy and paste the CSS code below, under the Custom CSS section (Customization -> Code; Custom CSS Editor tab).

1. .theme-blog-category-column .theme-blog-category-container.theme-blog-rss-feed {
2.     display: none;
3. }

How do I auto-fill forms created in sites? 

Copy and paste the code below to your website's header/footer code. If you want it only in specific pages, then add it to page-specific header/footer code boxes.

1. <script type="text/javascript">
2. var count = 0;
3. var autoFillFunction = setInterval(
4. function() {
5. count++;
6. var formElement = document.querySelector("[elname='<form_link_name>']");
7. if(formElement != null) {
8. var paramString = window.location.search.substr(1),
9. paramArray = paramString.split("&");
10. for(var i=0; i<paramArray.length; i++) {
11. var fieldName = paramArray[i].split("=")[0];
12. var fieldValue = paramArray[i].split("=")[1];
13. var autoFillElement = formElement.querySelector("[name='" + fieldName +"']");
14. autoFillElement.value = fieldValue;
15. }
16. clearInterval(autoFillFunction);
17. } else if(count > 4) {
18. clearInterval(autoFillFunction);
19. }
20. },2000);
21. </script>

How do I list the latest blogs on any page? 

Create a code snippet element in the place you want by dragging and dropping the Code Snippet.

Now, paste the below code:

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.js"></script>
2. <div id="template" style="display:none">
3.     <div data-element-type="row" class="zprow zpalign-items-flex-start zpjustify-content-flex-start ">
4.         {{#blog_list}}
5.         <div data-element-type="column" class="zpelem-col zpcol-md-4 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg ">
6.             <style type="text/css"></style>
7.             <div data-element-type="heading" class="zpelement zpelem-heading ">
8.                 <style></style>
9.                 <h3 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><a href="{{link}}">{{title}}</a></h3>
10.             </div>
11.             <div data-element-type="text" class="zpelement zpelem-text ">
12.                 <style></style>
13.                 <div class="zptext zptext-align-left " data-editor="true">
14.                     <p>{{{description}}}</p>
15.                 </div>
16.             </div>
17.             <div data-element-type="button" class="zpelement zpelem-button ">
18.                 <style></style>
19.                 <div class="zpbutton-container zpbutton-align-left">
20.                     <style type="text/css"></style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="{{link}}" target="_blank"><span class="zpbutton-content">Read More</span></a>
21.                 </div>
22.             </div>
23.         </div>
24.         {{/blog_list}}
25.     </div>
26. </div>
27. <script>
28. function renderList(list) {
29. 
    
30.     var template = document.getElementById('template').innerHTML;
31.     var rendered = Mustache.render(template, list);
32.     document.getElementById('list').innerHTML = rendered;
33. }
34. 
    
35. function getFeeds() {
36.     $X.get({
37.         url: '/blogs/feed',
38.         handler: function() {
39.             var result = this.responseText;
40.             if (window.DOMParser) {
41.                 parser = new DOMParser();
42.                 xmlDoc = parser.parseFromString(result, "text/xml");
43.             } else // Internet Explorer 
44.             {
45.                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
46.                 xmlDoc.async = false;
47.                 xmlDoc.loadXML(result);
48.             }
49.             var items = xmlDoc.getElementsByTagName('item');
50.             renderList({ blog_list: itemsToJSON(items) })
51.         }
52.     });
53. }
54. 
    
55. function itemsToJSON(items) {
56.     var blog_list = [];
57.     for (var i = 0; i < items.length; i++) {
58.         var blog_post_json = {};
59.         var blog_post = items[i];
60.         var children = blog_post.children;
61.         for (var j = 0; j < children.length; j++) {
62.             var tagName = children[j].tagName;
63.             blog_post_json[tagName] = children[j].textContent;
64.         }
65.         blog_list.push(blog_post_json);
66.     }
67.     return blog_list;
68. }
69. document.addEventListener('DOMContentLoaded', getFeeds);
70. </script>
71. <div id="list">Loading...</div>

How do I add a popup in Zoho Sites? 

Copy and paste the code below to your website's header/footer code. If you want it only in specific pages, then add it to the page-specific header/footer code boxes.

Step 1: Add this code to the header code of the website. 

1. <script> 
2. function openPopup(event, class_name) { 
3.  event.preventDefault(); 
4.  var target = $D.getByClass(class_name)[0]; 
5.  $D.removeClass(target, 'zp-hidden-md'); 
6.  $D.removeClass(target, 'zp-hidden-sm'); 
7.  $D.removeClass(target, 'zp-hidden-xs'); 
8.  var modalContainer = $D.getByClass("modal-content")[0]; 
9.  modalContainer.appendChild(target);
10. 
    
11. var closeElement = document.createElement('span')
12. closeElement.classList += 'close'
13. closeElement.innerHTML= '&times;'
14. modalContainer.appendChild(closeElement)
15. 
    
16.  var modal = document.getElementById("myModal"); 
17.  modal.style.display = "flex"; 
18.  var span = document.getElementsByClassName("close")[0]; 
19.  if (span) { 
20.  span.onclick = function() { 
21.  modal.style.display = "none"; 
22.  } 
23.  } 
24.  window.onclick = function(event) { 
25.  if (modal && event.target == modal) { 
26.  modal.style.display = "none"; 
27.  } 
28.  } 
29. } 
30. </script>

1. <div id="myModal" class="modal"><div class="modal-content"></div></div>

1. /* The Modal (background) */
2. .modal {
3. justify-content:center;
4. display: none; /* Hidden by default */
5. position: fixed; /* Stay in place */
6. z-index: 300; /* Sit on top */
7. padding-top: 100px; /* Location of the box */
8. left: 0;
9. top: 0;
10. width: 100%; /* Full width */
11. height: 100%; /* Full height */
12. overflow: auto; /* Enable scroll if needed */
13. background-color: rgb(0,0,0); /* Fallback color */
14. background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
15. }
16.  
17. /* Modal Content */
18. .modal-content {
19. display:inline-flex;
20. position: relative;
21. background-color: #fefefe;
22. margin: auto;
23. padding: 0;
24. border: 1px solid #888;
25. width: 60%;
26. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
27. -webkit-animation-name: animatetop;
28. -webkit-animation-duration: 0.4s;
29. animation-name: animatetop;
30. animation-duration: 0.4s
31. }
32.  
33. /* Add Animation */
34. @-webkit-keyframes animatetop {
35. from {top:-300px; opacity:0}  
36. to {top:0; opacity:1}
37. }
38.  
39. @keyframes animatetop {
40. from {top:-300px; opacity:0}
41. to {top:0; opacity:1}
42. }
43.  
44. /* The Close Button */
45. .close {
46. color: white;
47. position: absolute;
48. top: -13px;
49. right: -13px;
50. float: right;
51. font-size: 20px;
52. font-weight: bold;
53. border-radius: 50%;
54. width: 30px;
55. height: 30px;
56. background:#969494;
57. text-align:center;
58. }
59. .close:hover,
60. .close:focus {
61. text-decoration: none;
62. cursor: pointer;
63. }
64.  
65. .modal-header {
66. padding: 2px 16px;
67. background-color: #5cb85c;
68. color: white;
69. }
70.  
71. .modal-body {padding: 2px 16px;}
72.  
73. .modal-footer {
74. padding: 2px 16px;
75. background-color: #5cb85c;
76. color: white;
77. }

Note: The function used is openPopup(event,"target"). Here "target" is class name input in the element will be converted into a popup.