1. 程式人生 > >【分享】部落格美化(3)為部落格新增一個漂亮的分享按鈕

【分享】部落格美化(3)為部落格新增一個漂亮的分享按鈕

  在前2篇部落格“部落格美化(1)基本後臺設定與樣式設定”與"部落格美化(2)自定義部落格樣式細節"中詳細介紹了部落格樣式設定的相關問題,當然可能是自己角度的問題,不是所有人都能完全搞明白,我個人的建議是,自己一邊改,一邊測試,只要花時間,肯定沒問題,想我這種js,css小白都可以慢慢修改一點,大家也都沒問題的,只是看想不想去折騰了。還是那句話,人生在於折騰。這一篇文章來一個實際的案例,也算是前2篇文章的一個補充,為自己的部落格新增一個“分享按鈕”。很多人可能也見到過類似的按鈕,部落格園的很多大神都在使用。效果就是您看這篇文章當前頁面,最右邊的那個按鈕。如下圖所示:

  下面將像大家介紹幾種分享按鈕以及使用步驟。當然可能對很多人是小菜一碟,這裡也算是一個拋磚引玉的作用,希望大家分享更多自己折騰部落格園的外掛,因為我找這個東西花了很長時間(不懂原理,不知道搜尋啥關鍵字),現在看來當然是非常簡單了。進入主題之前,先感謝

部落格園團隊sevennightmarvin,博皮小組以及@Newlife群-長沙老豬,以及其他部落格園關於樣式設計製作文章的作者,沒有一一列出,也記不清了。本文是在很多文章和現有部落格模版的基礎上,自己磕磕碰碰,總結下來的。 

當然這裡的分享按鈕也可以用於大家各自的專案中,很多網站場合都可以使用,而不僅僅是部落格園,使用方法大家模式和參考說明,本文只針對部落格園的使用。

1.社會化分享

  最近幾年所謂的SNS(Social Networking Services),即社會性網路服務非常火,啥微博,空間,蘑菇街。。開心,人人啦。。。數不勝數,雖然我不太經常用,但總歸看到身邊人在用,而且比較頻繁。以前沒有數量的概念,但看到下面一些數字後,我也很吃驚。在這裡也給大家分享以下,作為使用這個按鈕的原因之一:

  上述更詳細的報告可以參考源連結。所以在社會化網路如此發到的今天,看到微信朋友圈每天的那些轉發,的確是很有衝動給自己的部落格新增一個按鈕,讓分享更快,更美麗。(同時也發現很多網友,使用複製貼上來把文章分享到自己的部落格,比較費勁,有了這個工具,事半功倍)。接下來就看看幾款優秀的分享工具吧。

2.選擇一個分享按鈕

  以前不知道有這種現成的東西,一直以為網友的這種按鈕效果是自己用js寫出來的,所以非常羨慕這些朋友。但自從發現這個東西后,百度了一下,非常多,我找了幾個,一起都分享給大家吧。大家根據自己的喜好以及需要來選用。使用方法將在下一小節中提到,過程也很簡單,獲取程式碼後貼上到部落格園的頁首Html程式碼中就可以了。

1.JiaThis分享按鈕

  我最先了解和接觸,也是目前在使用的分享按鈕就是“JiaThis”按鈕,也就是大家目前右側看到的。這個使用量應該很廣泛吧,講到好多園友都是使用的這個。其網址為:http://www.jiathis.com/index2。這個按鈕的特點是樣式多,支援的網站也多大122個,非常全面。還有一個高階的“自定義”的功能,可以生成滿足自己需求的按鈕,比其他的功能要全面些吧,效果還不錯。

2.分享家按鈕

  分享家按鈕是後來百度到的,稍微試了一下,感覺支援的網站不多,樣式也沒有JiaThis那麼豐富,湊合著用吧。分享家官網是:http://addthis.org.cn/,這個分享家網站還提供一個訂閱按鈕,功能類似吧,有興趣的可以去看看。

3.百度分享按鈕

  本人一直對百度的產品比較反感,感覺是啥都要做,啥都做不好,要不是迫於無奈,百度搜索都不會用。這個百度分享按鈕雖然提供的樣式比較多,但沒發現有多少在用,看了網站的介紹,總體感覺一般的,可能使用它的好處是流量統計做得比較好。支援的網站也不如JiaThis的多。樣式可能比較簡潔,大家看看,喜歡可以用用。這個百度分享有 一個專業開發版 和 自由版,專業版可能是供自己網站開發用的,像部落格園使用自由版就好了。

4.bShare分享按鈕

  bShare也是非常專業的一個分享按鈕,據網站介紹使用的人挺多吧,樣式也挺多,不過也都差不多,其支援的網站挺多130+,比JiaThis還多啊。有一些特殊的樣式,比較贊一個吧。這個我也沒去嘗試,留個腳印吧。這個網站也有不少其他產品,值得用用。

3.新增到部落格園部落格

   大家根據上面選擇的按鈕,獲取到程式碼之後,直接貼上到部落格園後臺-頁首Html程式碼 的文字框中就可以了,如下圖我的程式碼和截圖:

<script charset="utf-8" type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&amp;btn=r3.gif"></script>

至此,大功告成,大家儲存後就可以看到效果。

相關推薦

分享部落美化(3)部落新增一個漂亮分享按鈕

  在前2篇部落格“部落格美化(1)基本後臺設定與樣式設定”與"部落格美化(2)自定義部落格樣式細節"中詳細介紹了部落格樣式設定的相關問題,當然可能是自己角度的問題,不是所有人都能完全搞明白,我個人的建議是,自己一邊改,一邊測試,只要花時間,肯定沒問題,想我這種js,css小白都可以慢慢修改一點,大家也都

分享部落美化(4)部落新增一個智慧的文章推薦外掛

  在上一篇部落格“部落格美化(3)為部落格新增一個漂亮的分享按鈕 "中詳細介紹目前各種社會化網站的推薦按鈕,可以讓自己或者網友快速的將你的文章分享到其他網站,增加文章的曝光度。部落格園提供了一個公共通用的平臺,非常好,為了讓自己的部落格更加智慧,更加漂亮,今天繼續像大家推薦幾款部落格外掛,用來給你的部落

更新Stimulsoft Reports v2019.3.1釋出,新增對OData v4的支援功能

下載Stimulsoft Report.Ultimate v2019.3.1試用版 集所有報表解決方案於一體的綜合性平臺 &

視訊免費分享基於Spring Boot技術棧 部落系統企業級前後端實戰

推薦視訊連結 Java 微服務實踐視訊教程 - Spring Boot Java 微服務實踐 視訊教程- Spring Cloud redis高可用視訊 分散式電商商城視訊教程 kubernets+docer jvm 秒殺專案實戰 Lin

解碼浮點數精度問題 | 什麽(int)(32.3 x 100) = 3229?

... amp pre 16進制 匯報 eee 但我 oid 指導 零 | 序 前幾天在找一個代碼問題時,苦思不得其解,簡直要懷疑人生。查看各種參數,輸入輸出,都符合條件,最後各種排除法之後,定位到一段簡單的代碼,簡化後大致如下: #include<stdio.h&

嵌入式開發板學習分享2016年最新迅4412開發板手冊

看到群裡提供了最新的嵌入式開發板4412手冊看著還挺詳細的確實用心,立即收藏,由於檔案過大,上傳到網盤供需要的朋友下載: 版本19 前言23 嵌入式開發板必須注意的問題25 名詞解釋26 一 iTOP-4412 開發板介紹27 1.1 嵌入式開發板平臺簡要介紹27 1.

阿里雲+wordpress搭建個人部落網站小白專用的圖文教程

簡介 對於初次接觸雲伺服器的童鞋,想要搭建一個屬於自己的個人部落格是非常裝比的事情,那麼這裡有一個非常好的框架wordpress可以使用。 這裡主要分享一篇文章基於阿里雲伺服器以及WordPress從頭到尾搭建一個屬於自己的個人部落格 相信看完這篇博文

GitHub建立Git分支將Hexo部落遷移到其它電腦

GitHub+Hexo搭建部落格的過程比較平滑,但是它的配置卻非常耗時間,一旦電腦出現問題或者需要在另外一臺電腦上寫部落格,那麼Hexo部落格的遷移非常就讓人頭疼。下面參考其他部落格的方法,整理出一個能在平時就管理重要檔案的方法,方便隨時遷移 必備

轉載Hadoop 2.7.3 和Hbase 1.2.4安裝教程

啟動 運行 property new rop net 文本文 .tar.gz cor 轉載地址:http://blog.csdn.net/napoay/article/details/54136398 目錄(?)[+] 一、機器環境

codevs1082線段樹練習 3

adl for while small get color ace str 所有 題目描述 Description 給你N個數,有兩種操作: 1:給區間[a,b]的所有數增加X 2:詢問區間[a,b]的數的和。 輸入描述 Input Description 第一

MT31傅裏葉級數背景的三角求和

play 學習機 .sh 技術分享 nbsp 如果 .com eight ren 接下來要講的這道題,背景有點復雜,不要求99%的學生看的懂背景,但是解答過程中涉及的反證法以及第二數學歸納法對自主招生的學生來說倒是不錯的學習機會。解答:評 : 本題的背景為高等

OpenCVimread讀取數據

依賴 技術分享 分享 bug features 附加 分開 什麽 ont 直接加配置好的props文件到新的工程時,會出現imread讀出來的Mat為空的情形,搜了一下,發現是opencv的配置問題!!! 是這樣的,之前配置時為了省事兒,無論是Debug還是Release中

WPFMVVM模式的3種command

src handler 因此 初始化 dex ram view ssi 不同 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因為MVVM模式適合於WPF和SL,所以這3種模式中也有一些小差異,比如Relay

四款經典3.7v鋰電池充電電路圖詳解

大小 來源 輸入 控制 電路原理圖 cfa and 繼續 lan 3.7v鋰電池充電電路圖(一) 1、鋰電池的充電: 根據鋰電池的結構特性,最高充電終止電壓應為4.2V,不能過充,否則會因正極的鋰離子拿走太多,而使電池報廢。其充放電要求較高,可采用專用的恒流、恒壓充電器進行

LinuxServicesIaaSOpenStack-Pike(3.搭建高可用消息隊列)

mission 服務 guide lan nsis edit 錯誤 all scp 1. 簡介 1.1. 官方網站: https://www.rabbitmq.com/ 2. 安裝與配置: 詳見:https://docs.openstack.org/ha-guide/sha

pattern設計模式(3) - Observer觀察者模式

獨立 使用 數據 技術 很多 調用 edi 基於 ace 源碼地址:https://github.com/vergilyn/design-patterns 另外一個大神很全的Github:https://github.com/iluwatar/java-design-pat

leetcode 算法題3 無重復字符的最長子串

sim bcb IT wid VM str longest solid eat 問題   給定一個字符串,找出不含有重復字符的最長子串的長度。 示例: 給定 "abcabcbb" ,沒有重復字符的最長子串是 "abc" ,那麽長度

WPFMVVM模式的3種command

exceptio 什麽 () rst 響應 接口 too AD event 原文:【WPF】MVVM模式的3種command1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因為MVVM模式適合於WPF和

科普手機克隆:華手機一鍵搬家工具怎麽使用?

克隆 下載 屏幕 記得 第一步 沒有 數據 現在 推出 記得以前念書時,手機都是闊以裝外置SD卡的,如果換手機,需要事先把手機上的聯系人、短信等重要信息復制到SD卡中,再把SD卡安裝到新手機裏面,過程非常麻煩,如果SD卡內存不夠用,還要反復折騰。現在隨著技術的發展,不同手機

演算法以給定值x基準將連結串列分割成兩部分,所有小於x的結點排在大於或等於x的節點之前

/* * 直接建立兩個連結串列:一個連結串列存放小於x的元素,另一個存放大於或等於x的元素。 * 然後迭代訪問整個連結串列,將元素插入before或者after連結串列前端!!!一旦抵達連結串列末端,則表明拆分完畢,最後合併兩個連結串列。 */