社群按鈕小工具

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

打開主題的sidebar.php 加入下述程式碼即可

<div class="widget">
	<h3>
		<a rel="nofollow" target="_blank" href="https://www.facebook.com/yosheng0323">
			<img class="scicon" title="Facebook" alt="Facebook" src="<?php bloginfo('template_directory'); ?>/images/Facebook.png" />
		</a>
		<a rel="nofollow" target="_blank" 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 rel="nofollow" target="_blank" href="https://github.com/RisenZhang">
			<img class="scicon" title="Github" alt="Github" src="<?php bloginfo('template_directory'); ?>/images/Github.png"/>
		</a>
		<a rel="nofollow" target="_blank" href="<?php bloginfo('rss2_url'); ?>	">
			<img class="scicon" title="Rss" alt="RSS訂閱" src="<?php bloginfo('template_directory'); ?>/images/Rss.png" />
		</a>
	</h3>
</div>

<h3>

<img class="scicon" title="Facebook" alt="Facebook" src="<?php bloginfo('template_directory'); ?>/images/Facebook.png" />

</a>

<img class="scicon" title="LinkedIn" alt="LinkedIn" src="<?php bloginfo('template_directory'); ?>/images/LinkedIn.png" />

</a>

<img class="scicon" title="Github" alt="Github" src="<?php bloginfo('template_directory'); ?>/images/Github.png"/>

</a>

<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圖片大小

CSS

.scicon { width: 40px; height: 40px; padding: 8px; }

1
2
3
4
5

.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);
}