如何在侧栏上添加社交媒体按钮

如果您目前正在进行博客设计,或者您正在考虑在博主的侧栏上添加一些社交媒体按钮…

by 

如何在侧栏上添加社交媒体按钮

如果您目前正在撰写博客设计或正在考虑在博主博客的侧栏上添加一些社交媒体按钮,那么这是您正在寻找的教程。

我也想改变我博客中的社交媒体按钮,但我没有’T有时间去做。如果你害怕在你的博客上调整事情,请不要’t是因为添加社交媒体按钮ISN’你认为这是难。你不’T也必须搞定你的模板,因为我们只会为此添加一个小工具。所以,根本没有恐惧。这是如何:

1.寻找美丽的社交媒体图标免费下载。您可以在Pinterest甚至在Google中搜索。对于我为博客使用的那些,我得到了它 verve和sass. 虽然上面的图标来自 lil blue boo..

社交媒体按钮

2.下载图标后,将其上传到您使用的任何用于存储/托管您的照片,如Photobucket或Imagehack。我使用photobucket了解我的图像。将每个照片上传到它。

3.然后将此代码复制到记事本或单词文档:

<!–social media icons—>
<center>

<a href=”RSS FEED URL” target=”_blank”>
<img src=”RSS FEED图标直接图像URL” width=55px border=”0″
alt =”youtubeicon”/ ></a>

<a href=”FACEBOOK URL” target=”_blank”>
<img src=”FACEBOOK图标直接图像URL” width=55px border=”0″
alt =” facebookicon”/  ></a>

<a href=”TWITTER URL” target=”_blank”>
<img src=”TWITTER图标直接图像URL” width=55px border=”0″
alt =” twittericon”/ ></a>

<a href=”PINTEREST URL” target=”_blank”>
<img src=”PINTEREST图标直接图像URL” width=55px border=”0″
alt =” pinteresticon”/ ></a>

<a href=”GOOGLE PLUS URL” target=”_blank”>
<img src=”Google Plus图标直接图像URL” width=55px border=”0″
alt =” googleplus icon”/  ></a>

<a href=”INSTAGRAM URL” target=”_blank”>
<img src=”INSTAGRAM图标直接图像URL” width=55px border=”0″
alt =”instagramicon”/ ></a>

<a href=”BLOGLOVIN’ URL” target=”_blank”>
<img src=”BLOGLOVIN’图标直接图像URL” width=55px border=”0″
alt =” youtubeicon”/ ></a>

<a href=”TUMBLR URL” target=”_blank”>
<img src=”TUMBLR图标直接图像URL” width=55px border=”0″
alt =”tumblricon”/ ></a>

<a href=”mailto:EMAIL ADDRESS”>
<img src=”EMAIL图标直接图像URL”  width=55px
alt =”Click to email me” ></a>
</center>

4. Change those in all caps. For example, change FACEBOOK URL to the link of your own Facebook Page. In my case it is //www.facebook.com/PinkHeartString. Then look for the direct image url you uploaded. It has to be a .png file to make sure that there isn’t any background. In my case, the direct url is http://i273.photobucket.com/albums/jj211/Kareen_Liez_Ecal_Datoy/facebook_zps46e0547d.png. I will change the FACEBOOK图标直接图像URL to that link. So, the final look of my html code for the Facebook icon is like this:

如何添加社交媒体按钮

对代码中的每个URL和图标执行此操作。

关于宽度,如果您想要取决于侧栏的大小,则可以更改它。如果看起来很大,那么尝试像42px这样的较小值。

5.使用所有代码完成后,请转到博主帐户。然后去布局>Add Gadget>HTML。粘贴上面的代码,然后保存。将它放在您希望社交媒体按钮出现的区域上。

如何添加社交媒体按钮

6.检查您的博客,您的新社交媒体按钮是否存在!

如何添加社交媒体按钮


这是我的第一个教程! Wooot !!我希望你发现本教程有用。如果您有疑问,请随时偏离以下评论部分。如果有些东西你想让我写作,但LEMME知道。

31 comments

  1. 我记得当我第一次学会调整博客时'S设计。添加社交图标是我学到的第一件事之一。现在,我知道如何编写整个布局! -

  2. 哇,谢谢你的这篇文章,我会尽力遵循这些步骤。一世'在我的博客中,这一直是这样做的,我只是唐'知道哪里可以获得图标。

  3. 这是非常有帮助的!感谢您的发表。一世'累了搜索如何做到这一点,感谢您以非常简单的方式呈现它。我现在肯定会尝试一下我的博客。

    xo,
    传说中的乌亚泰斯塔的路易丝

  4. 社交共享媒体按钮是使您的网站流行和驾驶流量的重要组成部分,它们是营销活动的不可或缺的一部分,所以我同意它们对博主至关重要,代码建议很棒!

  5. 你的帖子是非常及时的,同时,它'S的信息和乐于助人。这些天,社交分享按钮非常重要。一世'M全部用于社交共享按钮,因为它使传递信息更容易。

  6. 我本周刚刚添加了我的社交媒体按钮。我意识到我只有三个。我应该开始开发我的Google + Page和Facebook页面。我觉得我没有时间更新那些所以我没有创造一个。

  7. 非常好的教程。我会回到这个问题,看看你的按钮是否会在我的博客上看起来很好。谢谢!

  8. 我需要为此页面添加书签,因为我'一直在寻找定制的分享按钮,并以您提出的方式呈现此教程是非常用户友好的。感谢分享。

  9. 在我仍在举办博客中的博客之前,我在寻找这个,但我真的找到了调整博客,所以我转移到WordPress

  10. 天啊!那太酷了!感谢你的分享! - 一世'一直试图弄清楚自从它以来如何在博主中做到这一点'非常容易添加WordPress。现在,这里'解决我困境的解决方案。谢谢你太多了! -

  11. 这只适用于Blogger还是这也适用于WordPress?我真的需要改变我们网站上的社交媒体按钮,但坦率地说…。我想让某人为我做这件事!

    我相信本教程将有助于许多人!

    最好的,
    凌晒太阳
    kidsonboard.net

  12. 博主或博客的美好时光。自从我上次使用平台以来已经过年了,这篇文章周四真的给出了一个很好的回归。我认为博主是一个不容易定制的平台之一。如果您真的想自定义它,几乎每个人都需要代码。这是你分享这个教程的那么好!

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

3 × one =