【全網最全的博客美化系列教程】02.添加QQ交談連接

全網最全的博客美化系列教程相關文章目錄

【全網最全的博客美化系列教程】01.添加Github項目連接

【全網最全的博客美化系列教程】02.添加QQ交談連接

【全網最全的博客美化系列教程】03.給博客添加一隻萌萌噠的小倉鼠

【全網最全的博客美化系列教程】04.訪客量統計的實現

【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現

【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現

【全網最全的博客美化系列教程】07.添加一個分享的按鈕吧

【全網最全的博客美化系列教程】08.自定義地址欄Logo

【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕

【全網最全的博客美化系列教程】10.小火箭置頂特效的實現

【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現

【全網最全的博客美化系列教程】12.修改鼠標圖案

【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現

【全網最全的博客美化系列教程】14.代碼高亮設置的實現

【全網最全的博客美化系列教程】15.動畫幻燈效果的實現

【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現

【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現

【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現

【全網最全的博客美化系列教程】19.旋轉立方體的實現

【全網最全的博客美化系列教程】20.給博客添加一個萌萌噠的看板娘

【全網最全的博客美化系列教程】21.給博客添加一個夜間模式吧

【全網最全的博客美化系列教程】22.添加一個文章目錄特效

【全網最全的博客美化系列教程】23.圖片水紋特效的實現

【全網最全的博客美化系列教程】24.給博客增長一個音樂播放器特效

【全網最全的博客美化系列教程】25.給博客增長一個音樂播放器特效

【全網最全的博客美化系列教程】26.評論頭像旋轉的實現

【全網最全的博客美化系列教程】27.IP地址定位及天氣預報的實現

【全網最全的博客美化系列教程】28.3D標籤雲動畫的實現

【全網最全的博客美化系列教程】29.自制HTML源碼運行Javascript特效

【全網最全的博客美化系列教程】30.博客文章實現markdown書寫機制

【全網最全的博客美化系列教程】31.用Canvas和requestAnimFrame作動畫特效

【全網最全的博客美化系列教程】32.公告欄添加本身的頭像

【全網最全的博客美化系列教程】33.添加一隻舞動的小知音

【全網最全的博客美化系列教程】34.皮膚背景的選擇與定製

添加QQ交談連接

你們把目光移至最右邊的公告欄哈，大家是否是看到了一個有事您Q個人圖標呢？就像下面這樣子

你們是否是很好奇這個玩意是怎麼弄的呢，咱們能夠嘗試控制檯F12去找找我這個控件，一樣的你也能實現這些效果，以下圖所示：

很明顯，咱們能夠看到上圖，我用紅色矩形框住的這部分語句控制着這個圖標，點擊之後會跳轉到個人QQ臨時對話的界面。而後跳轉至以下的界面。

以上語句實現以下：

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=873284962&amp;site=qq&amp;menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:873284962:13" alt="有事您Q我" title="有事您Q我">
</a>

咱們只須要替換href中的QQ號替換爲本身的QQ號爲本身的QQ號

傳入的src中的QQ號替換爲本身的QQ號

添加方式：進入本身的博客園->設置，將以上html代碼添加到「博客側邊欄公告」

添加後，效果如圖所示：

原理：學過一點前端知識的人就知道，這是一個很簡單的東西，經過href引用連接跳轉，再用img標籤裝上一個圖片的樣式。

可能大家會問了，這個href連接爲何是這個呢？其實在我探索過程當中，我發現了QQ其實提供了一個臨時會話的功能

經過傳入參數便可完成臨時會話。

那咱們怎麼會知道有臨時會話這個功能呢？

可能大家又會問了，我經過查看源碼跳轉，驚奇的發現，其實QQ平臺本身提供了一個推廣功能，而且有不少樣式能夠供咱們選擇。

QQ推廣還提供了QQ羣的推廣源碼，樣式效果以下：

還有其餘樣式的QQ推廣我就不一一展現給你們看了，須要的自取哦~~

這個推廣上面都提供了源碼，你只須要將href的QQ號改爲本身的，傳入的src參數爲本身的QQ號，複製粘貼到指定位置就好了~~~

QQ推廣網址是這個：http://shang.qq.com/v3/widget.html，上面提供了不少種風格，小夥伴們能夠根據本身的須要進行選擇便可~~