« »

SexyBookmarks - một ứng dụng cực kì phổ biến và hữu ích để chia sẻ các tài nguyên URL trên website (nếu vẫn chưa biết về nó, bạn vui lòng vào trang chủ để xem thêm). Nhưng hiện tại, SexyBookmarks chỉ hỗ trợ các nền tảng phổ biến, và bạn chỉ có thể sử dụng được khi dùng Wordpress, Joomla, bbPress và rộng hơn nữa là trình duyệt Firefox.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tích hợp SexyBookmarks vào trang các nhân của mình chỉ với HTML, CSS và JavaScript; không cần đến các xử lí phía máy chủ.

Nhãn: tích hợp, SexyBookmarks, trang cá nhân, phổ biến, hữu ích, chia sẻ, tài nguyên URL, nền tảng, hỗ trợ, Wordpress, Joomla, bbPress, Firefox, phía máy chủ

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

SexyBookmarks - a small plugin for sharing the useful & helpful links on the famous social bookmark services (if you still don't know about it or you want to learn more, please go to its homepage). The advantages of this plug-in are:

- super easy to install and use, just upload necessary files then setup
- very beautiful design & icons
- easy to custom the layout
- 50+ social sites to choose
- Admin Control Panel

Now, SexyBookmarks only supports some popular flatforms, and you only use this plug-in if you're using Wordpress, Joomla, bbPress and further more is Firefox (information from SexyBookmarks's homepage).

In this post, I'll show you how to add SexyBookmarks into your personal page, only with HTML, CSS and JavaScript; no server-side requirement. Obviously, you (and your visitors) can have some little limits without PHP; but this release still satisfy most of the circumstances. With different platforms, please query the search engines for the installation guides.

1. Preparation

a) Download the lastest package at the homepage of SexyBookmarks if you want. In this package, we need the files:

js/sexy-bookmarks-public.js
css/style.css
images/sexy-sprite.png

b) Download the core file of jQuery framework, then place it into js directory

2. Programming some JavaScript code lines

Open your js/sexy-bookmarks-public.js file, place JavaScript code lines below after autocentering feature

/*
	click handler for SexyBookmarks
	Credit: Phong Thai Cao - http://www.JavaScriptBank.com
	Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
	// get the current URL & encode it into the standard URI
	var url = encodeURIComponent(window.location.href), desc = '';
	
	// parse the description for the above URL by the text() method of jQuery
	// the text must be placed in the P tag with ID="sexy-bookmarks-content"
	// so you can change the container of description with another tag and/or another ID
	if( jQuery('p.sexy-bookmarks-content').length ) {
		desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
	}
	
	// detect the social bookmark site user want to share your URL
	// by checking the className of site that we'll declare in the HTML code
	// and assign the URL & description we got into the current anchor
	// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
	switch(this.parentNode.className) {
		case 'sexy-twittley':
			this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags=';
			break;
		case 'sexy-digg':
			this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-twitter':
			this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
			break;
		case 'sexy-scriptstyle':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-reddit':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-delicious':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-stumbleupon':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-mixx':
			this.href += '?title=' + document.title + '&page_url=' + url + '&desc=' + desc;
			break;
		case 'sexy-technorati':
			this.href += '?add=' + url;
			break;
		case 'sexy-blinklist':
			this.href += '?Action=Blink/addblink.php&Title=' + document.title + '&Url=' + url;
			break;
		case 'sexy-diigo':
			this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-yahoobuzz':
			this.href += '?submitHeadline=' + document.title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text';
			break;
		case 'sexy-myspace':
			this.href += '?t=' + document.title + '&u=' + url;
			break;
		case 'sexy-facebook':
			this.href += '?t=' + document.title + '&u=' + url;
			break;
		case 'sexy-designfloat':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-devmarks':
			this.href += '?posttitle=' + document.title + '&posturl=' + url + '&posttext=' + desc;
			break;
		case 'sexy-newsvine':
			this.href += '?h=' + document.title + '&u=' + url;
			break;
		case 'sexy-google':
			this.href += '?op=add&title=' + document.title + '&bkmk=' + url;
			break;
	}
})

3. Declaring

Open your web page then place the 3 code lines below into HEAD section; the SexyBookmarks needs these files to work properly.

<script type="text/javascript" src="path/to/directory/js/jquery.js"></script>
<script type="text/javascript" src="path/to/directory/js/sexy-bookmarks-public.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/directory/css/style.css" media="screen" />

4. Setup HTML code

Go to position you want to show SexyBookmarks, then copy & paste the HTML code below, you can change the titles and anchor text as you want, but you must keep the class names of LI and Anchor tags.

<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
     <ul class="socials">
    	<li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
    	<li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
    	<li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
    	<li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script &amp; Style">Submit this to Script &amp; Style</a></li>
    	<li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
    	<li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>
    	<li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
    	<li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>
    	<li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
    	<li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
    	<li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li>
    	<li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
    	<li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>
    	<li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
    	<li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
    	<li class="sexy-devmarks"><a href="http://devmarks.com/index.php" rel="nofollow" class="external" title="Share this on Devmarks">Share this on Devmarks</a></li>
    	<li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&amp;save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
    	<li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>
    </ul>
</div>

5. Done

Please try a live demo below

Live demo by JavaScriptBank.com

Conclusion

- If you need the complete package of this JavaScript code, just go to Integrate SexyBookmarks into your Personal page with JavaScript for downloading.
- With this JavaScript code, you'll able to change/update SexyBookmarks easily by editing codes above.
- Easy to change the slogan of SexyBookmarks: Sharing is Caring, Sharing is Sexy, Share the Love, Share the Wealth, Share and Enjoy. Just edit the CSS style, or you can make it appear randomly by using JavaScript, contact me if you need.

Hope you like this post and find some helpful things in this, leave me any comment/thought if you want. Hope see you in the next post soon.

-->

Author: Phong Thai Cao
Admin of JavaScriptBank.com: provide you thousands of free JavaScript code, DHTML, tutorials, examples, reference and help.

Mã nguồn
Files
JavaScript
HTML
In

Copy All x2

<script type="text/javascript">
/*
	click handler for SexyBookmarks
	Credit: Phong Thai Cao - http://www.JavaScriptBank.com
	Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
	// get the current URL & encode it into the standard URI
	var url = encodeURIComponent(window.location.href), desc = '';
	
	// parse the description for the above URL by the text() method of jQuery
	// the text must be placed in the P tag with ID="sexy-bookmarks-content"
	// so you can change the container of description with another tag and/or another ID
	if( jQuery('p.sexy-bookmarks-content').length ) {
		desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
	}
	
	// detect the social bookmark site user want to share your URL
	// by checking the className of site that we'll declare in the HTML code
	// and assign the URL & description we got into the current anchor
	// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
	switch(this.parentNode.className) {
		case 'sexy-twittley':
			this.href += '?title=' + document.title + '&amp;url=' + url + '&amp;desc=' + desc + '&amp;pcat=Internet&amp;tags=';
			break;
		case 'sexy-digg':
			this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-twitter':
			this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
			break;
		case 'sexy-scriptstyle':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-reddit':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-delicious':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-stumbleupon':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-mixx':
			this.href += '?title=' + document.title + '&amp;page_url=' + url + '&amp;desc=' + desc;
			break;
		case 'sexy-technorati':
			this.href += '?add=' + url;
			break;
		case 'sexy-blinklist':
			this.href += '?Action=Blink/addblink.php&amp;Title=' + document.title + '&amp;Url=' + url;
			break;
		case 'sexy-diigo':
			this.href += '?title=' + document.title + '&amp;url=' + url + '&amp;desc=' + desc;
			break;
		case 'sexy-yahoobuzz':
			this.href += '?submitHeadline=' + document.title + '&amp;submitUrl=' + url + '&amp;submitSummary=' + desc + '&amp;submitCategory=science&amp;submitAssetType=text';
			break;
		case 'sexy-myspace':
			this.href += '?t=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-facebook':
			this.href += '?t=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-designfloat':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-devmarks':
			this.href += '?posttitle=' + document.title + '&amp;posturl=' + url + '&amp;posttext=' + desc;
			break;
		case 'sexy-newsvine':
			this.href += '?h=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-google':
			this.href += '?op=add&amp;title=' + document.title + '&amp;bkmk=' + url;
			break;
	}
})
</script>

Copy All x2

<script type="text/javascript" src="path/to/directory/js/jquery.js"></script>
<script type="text/javascript" src="path/to/directory/js/sexy-bookmarks-public.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/directory/css/style.css" media="screen" />

<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
     <ul class="socials">
    	<li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
    	<li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
    	<li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
    	<li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script &amp; Style">Submit this to Script &amp; Style</a></li>
    	<li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
    	<li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>
    	<li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
    	<li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>
    	<li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
    	<li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
    	<li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li>
    	<li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
    	<li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>
    	<li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
    	<li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
    	<li class="sexy-devmarks"><a href="http://devmarks.com/index.php" rel="nofollow" class="external" title="Share this on Devmarks">Share this on Devmarks</a></li>
    	<li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&amp;save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
    	<li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>
    </ul>
</div>

Lời bình (6)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ứng dụng AI Video.com
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản

chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn

Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI

chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn

Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ

GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án

iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới

Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la

Cool Domains for Sale!

index.services ApexBTC.com war.money CryptoKD.com gomy.mobi Dall-E-OpenAI.com hearf.com AI-Trading-Bot.com chatGPT4.win system.money ChatTotal.com ChainTutor.com AIvideo-app.com CreditCard.rip Card.rip chatGPTaz.com gomymobi.com ZWVQ.com CTRCoin.com XMQV.com gomy.mobi eChainBank.com MetaTru.com chatGPT2.fun gomymobi.com javascriptON.com JavaScriptBank.com ABP3.com GrokUN.com lend.services pornID.net

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

08/02/2010
Phong Thai [more]
88,127
6
4
0
0.21 KBytes

Tích hợp SexyBookmarks vào trang cá nhân với JavaScript - JID: 2333 - Ngôn ngữ: tiếng Việt

2.8/5 4 lượt đánh giá / 88,127 lượt xem / 6 lời bình 08/02/2010 SexyBookmarks - một ứng dụn...Tích hợp SexyBookmarks vào trang cá nhân với JavaScript - JID: 2333 - Tích hợp SexyBookmarks vào trang cá nhân với JavaScript - Ngôn ngữ: tiếng Việt

zerokenda JegeDuemluddy[2] VOLKERMORD[2] phungtvct xorgz[4] thaihoa Cao Phong[6]

Hãy là thành viên đầu tiên làm điều này

Cao Phong

JavaScript theo ngày

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Tích hợp SexyBookmarks vào trang cá nhân với JavaScript

Nhãn: tích hợp, SexyBookmarks, trang cá nhân, phổ biến, hữu ích, chia sẻ, tài nguyên URL, nền tảng, hỗ trợ, Wordpress, Joomla, bbPress, Firefox, phía máy chủ (adsbygoogle = window.adsbygoogle || []).push({});