社群按鈕小工具

1,384次閱讀
尚無留言

共计 1350 个字符,预计需要花费 4 分钟才能阅读完成。

很多部落客習慣透過 ICON 的方式來連結到自己的粉絲專頁或者是相關的社群網站 但偏偏這個主題原生沒有這個功能 只好自己手刻一個 其實手刻也不難 方法如下

  • 打開主題的 sidebar.php 加入下述程式碼即可
    <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 圖片大小
    .scicon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
  • 如果要有滑鼠移過去的旋轉效果則添加下述程式碼
    .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);
    }

     

社群按鈕小工具

正文完
 0
評論(尚無留言)