maxdome
Chevereto Member
Displaying social media buttons on your site encourages users to follow you on different social media networks. Today, I'll show you step by step how to add all Social Media follow buttons on your Chevereto site.
*Remember, This Script also it is shown on the Mobile and Tablet!
Step - 1: Zip Archive
Download files: https://zupics.com/downloads/SocialMedia.zip
Step - 2: Extract the two folders:
Step 3 - Upload the two folders with the contents on your Chevereto website (FTP):
Step 4 - Edit the header.php file:
/app/themes/Peafowl/header.php
Search this code snippet:
Step 5 - Before the </head> add this code snippet:
Step 6 - Now below the </head> add this code snippet:
Remember: In this code replace the string (href="#") of your existing Social URL.
Note: In this code there are only three buttons activated,.
If you want to activate more buttons, you need to remove the string:
Step 7 - How can to enable e.g the Youtube Icon:
Before:
After:
You can change the SocialMedia background to another color.
Open the CSS (socialmedia.css) file and change (Line: 16) this hexadecimal color: #662350
If you need help to select your color go here: http://www.computerhope.com/htmcolor.htm
Now go to your Homepage web and check the SocialMedia Script .
Demo here: https://zupics.com/
DEMO: PC
DEMO: MOBILE
That’s it. Your follow buttons have been published and visitors of your website can now easily find you on social networks and follow your profiles
Good Luck
If you liked my script, please click the "like" button
Best Regards:
Gio
*Remember, This Script also it is shown on the Mobile and Tablet!
Step - 1: Zip Archive
Download files: https://zupics.com/downloads/SocialMedia.zip
Step - 2: Extract the two folders:
Code:
css
iconsStep 3 - Upload the two folders with the contents on your Chevereto website (FTP):
Code:
lib/Peafowl/css/
/lib/Peafowl/icons/Step 4 - Edit the header.php file:
/app/themes/Peafowl/header.php
Search this code snippet:
Code:
</head>Step 5 - Before the </head> add this code snippet:
Code:
<link rel="stylesheet" type="text/css" media="all" href="<?php echo G\get_base_url(); ?>/lib/Peafowl/css/socialtabs.css">Step 6 - Now below the </head> add this code snippet:
Remember: In this code replace the string (href="#") of your existing Social URL.
Code:
<!--//Start SocialMedia Script-->
<div style="width: 360px; position: fixed; margin-right: -365px; top: 100px; right: 0px;" class="sabox right align-top">
<ul style="position: absolute; top: 0px; left: 0px; margin-left: -34px; width: 34px;" class="sicons">
<li class="twitter first"><a href="#" rel="0" title="twitter"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/twitter.png" alt="" rel="twitter"></a></li>
<li class="facebook"><a href="#" rel="1" title="facebook"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/facebook.png" alt="" rel="facebook"></a></li>
<!--<li class="fblike"><a href="#" rel="2" title="fblike"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/fblike.png" alt="" rel="fblike"></a></li>-->
<!--<li class="fbrec"><a href="#" rel="3" title="fbrec"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/fbrec.png" alt="" rel="fbrec"></a></li>-->
<li class="google"><a href="#" rel="4" title="google"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/google.png" alt="" rel="google"></a></li>
<!--<li class="linkedin"><a href="#" rel="5" title="linkedin"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/linkedin.png" alt="" rel="linkedin"></a></li>-->
<!--<li class="flickr"><a href="#" rel="7" title="flickr"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/flickr.png" alt="" rel="flickr"></a></li>-->
<!--<li class="delicious"><a href="#" rel="8" title="delicious"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/delicious.png" alt="" rel="delicious"></a></li>-->
<!--<li class="youtube"><a href="#" rel="9" title="youtube"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/youtube.png" alt="" rel="youtube"></a></li>-->
<!--<li class="digg"><a href="#" rel="10" title="digg"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/digg.png" alt="" rel="digg"></a></li>-->
<!--<li class="pinterest"><a href="#" rel="11" title="pinterest"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/pinterest.png" alt="" rel="pinterest"></a></li>-->
<!--<li class="instagram"><a href="#" rel="12" title="instagram"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/instagram.png" alt="" rel="instagram"></a></li>-->
<!--<li class="dribbble"><a href="#" rel="13" title="dribbble"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/dribbble.png" alt="" rel="dribbble"></a></li>-->
<!--<li class="vimeo"><a href="#" rel="14" title="vimeo"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/vimeo.png" alt="" rel="vimeo"></a></li>-->
<!--<li class="stumbleupon"><a href="#" rel="15" title="stumbleupon"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/stumbleupon.png" alt="" rel="stumbleupon"></a></li>-->
</ul>
</div>
<!--//End SocialMedia Script-->Note: In this code there are only three buttons activated,.
If you want to activate more buttons, you need to remove the string:
Code:
<!-- . -->Step 7 - How can to enable e.g the Youtube Icon:
Before:
Code:
<!--<li class="youtube"><a href="#" rel="9" title="youtube"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/youtube.png" alt="" rel="youtube"></a></li>-->After:
Code:
<li class="youtube"><a href="#" rel="9" title="youtube"><img src="<?php echo G\get_base_url(); ?>/lib/Peafowl/icons/youtube.png" alt="" rel="youtube"></a></li>You can change the SocialMedia background to another color.
Open the CSS (socialmedia.css) file and change (Line: 16) this hexadecimal color: #662350
If you need help to select your color go here: http://www.computerhope.com/htmcolor.htm
Now go to your Homepage web and check the SocialMedia Script .
Demo here: https://zupics.com/
DEMO: PC
DEMO: MOBILE
That’s it. Your follow buttons have been published and visitors of your website can now easily find you on social networks and follow your profiles
Good Luck
If you liked my script, please click the "like" button
Best Regards:
Gio
Last edited:
