在论文中添加光滑的社交媒体图标

所以,就目前的情况来看,有一些非常甜蜜的社交媒体插件甚至还有一些杀手级的社交媒体的论文教程,但就我个人而言,我想为www.gyu-kura.com定制一些东西。

论文社交媒体图标视频:

今天的视频将向您展示如何在没有插件的情况下快速实现光滑、不引人注目的社交媒体链接/智能图标。这些智能图标可以在这篇文章的标题下找到。

[YouTube]http://www.youtube.com/watch?v=fxfep25ml7k[/youtube]

实施

既然您已经观看了有关如何实现代码的视频,那么现在是时候抓取下面的代码了。只需将这两个截图位添加到您的自定义_functions.php和custom.css中,您就可以拥有一个外观巧妙的社交媒体设置。

**更新:我们现在在您的网站旁边有共享按钮的代码,在您的文章标题下面插入共享按钮的代码。

确保更改$twitter='www.gyu-kura.com';发送至$twitter='[插入您的twitter帐户];

边栏式社交栏

要实现下面的代码,只需复制并粘贴到您的custom_functions.php中。别忘了添加你的Twitter名字。这段代码设置了社交媒体的“智能图标”以及HTML,以使我们能够有效地设计它的样式。

函数add_floating_share()global$post;if(is_single()is_page())?>
            
  • 鸣叫
  • 身份证件,“imgURL”,真的);$anchor_text=get_post_meta($post->id,“锚文本”真的);$pin_description=get_post_meta($post->id,'管脚说明',真的);如果(strlen($img_url)>0&&strlen($anchor_text)>0&&strlen($pin_description))?>

添加到自定义.css

现在我们已经添加了智能图标,我们需要为它们设计样式。请注意.社会利润率:-15px自动10px;您可能需要更改-15PX取决于您的自定义设置。

#共享条左-80px;上:100px;位置:绝对;宽度:67 px;背景:fff;填料:0;文本对齐:居中;边框:1个实心CCC;列表样式:无;保证金:0;Z指数:99;框阴影:0 0 4px rgba(0,0,0,.2);-moz-box阴影:0 0 4px rgba(0,0,0,.2);-webkit-box阴影:0 0 4px rgba(0,0,0,2);}#股票保险商实验室利润率:0 0px;列表样式:无;共享栏li显示:块;利润率:5PX 0;填料:0;溢出:可见;文本对齐:居中;}#sharebar fb左边距:10px;text-Align:Left;P.推荐background:WhitesMoke;padding:14px;border:2px solid efefeff;text-Align:Center;.page position:relative;

您可能需要为您的网站调整CSS。此代码改编自www.gyu-kura.com上当前的sharebar。

邮政共享栏下方

要实现下面的代码,只需复制并粘贴到您的custom_functions.php中。别忘了添加你的Twitter名字。这段代码设置了社交媒体的“智能图标”以及HTML,以使我们能够有效地设计它的样式。

函数add_floating_share()global$post;if(is_single()is_page())?>
             
  • 身份证件,“imgURL”,真的);$anchor_text=get_post_meta($post->id,“锚文本”真的);$pin_description=get_post_meta($post->id,'管脚说明',真的);如果(strlen($img_url)>0&&strlen($anchor_text)>0&&strlen($pin_description))?>

添加到自定义.css

#共享栏背景:fff;填料:0;列表样式:无;保证金:0;宽度:100%;溢出:自动;}#股票保险商实验室利润率:0 0px;列表样式:无;共享栏li显示:块;右边距:10px;填料:0;溢出:可见;文本对齐:居中;浮动:左;}#sharebar fb左边距:10px;text-Align:Left;P.推荐background:WhitesMoke;padding:14px;border:2px solid efefeff;text-Align:Center;.page position:relative;sharebar fb width:45px;margin-Left:0px;

默认情况下,这将把图标放在论文标题下面,但是你可以通过使用不同的论文挂钩来改变这一点。

关闭:

注:感谢你的帮助和建议史葛怀登我们添加了“通过电子邮件发送此”功能。这是你需要的图片 .右键单击->将图像另存为。确保您抓取电子邮件图标并将其添加到您自定义/图像文件夹。

希望这个快速教程能帮助你找到如何将社交媒体应用到你的论文主题中。

如果您对实现或代码有任何疑问,请在评论中留言。

尼克瑞茜是一个多情的企业家,他相信任何人都能改变他们的事业和生活,他们有勇气和勇气。他也是现在宽带旨在简化宽带购物流程。