社群按鈕小工具
很多部落客習慣透過 ICON的方式來連結到自己的粉絲專頁或者是相關的社群網站 但偏偏這個主題原生沒有這個功能 只好自己手刻一個 其實手刻也不難 方法如下
- 打開主題的sidebar.php 加入下述程式碼即可
12345678910111213141516<div class="widget"><h3><a href="https://www.facebook.com/yosheng0323"><img class="scicon" title="Facebook" alt="Facebook" src="<?php bloginfo('template_directory'); ?>/images/Facebook.png" /></a><a href="https://tw.linkedin.com/in/risen-zhang-020962102"><img class="scicon" title="LinkedIn" alt="LinkedIn" src="<?php bloginfo('template_directory'); ?>/images/LinkedIn.png" /></a><a href="https://github.com/RisenZhang"><img class="scicon" title="Github" alt="Github" src="<?php bloginfo('template_directory'); ?>/images/Github.png"/></a><a href="<?php bloginfo('rss2_url'); ?> "><img class="scicon" title="Rss" alt="RSS訂閱" src="<?php bloginfo('template_directory'); ?>/images/Rss.png" /></a></h3></div>
然後記得去找自己喜歡的 Icon 推薦 https://www.iconfinder.com/ 裡面很多免費可以拿來使用
記得將自己下載回來的 Icon放進主題的資料夾中 我是建立 imges資料夾 統一放在裡面進行連結
- 最後加入CSS調整ICON圖片大小
12345.scicon {width: 40px;height: 40px;padding: 8px;}
- 如果要有滑鼠移過去的旋轉效果則添加下述程式碼
12345678910111213141516171819202122.scicon {width: 40px;height: 40px;padding: 8px;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;cursor: pointer;}.scicon:hover {width: 40px;height: 40px;padding: 8px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
相逢就是有緣,留下足跡吧!