آموزش زیباترین کد اشتراک گذاری مطالب انجمن

[hamidkag]

درود
در اینجا میخوام برای شما دوستان عزیزم یه آموزش برای قرار دادن اشتراک مطالب بسیار زیبا که قابلیت حرکت دارند و با بردن موس روی آنها آیکونشان به بالا می آید را قرار دهم.

نمونه:

برای اینکه همچین چیز خوشگلی داشته باشید کافیه مراحل زیر رو مووو به مووو دنبال کنید و دقت داشته باشید که بعدا الکی سوال نکنید:

*ابتدا عکسهای موجود در فایل zip در لینک پایین را دانلود کنید سپس عکس ها را در پوشه images در هاست خود بریزید:
لینک دانلود:
http://s3.picofile.com/file/7507042468/shar.zip.html

*سپس به قسمت کنترل پنل>>قالب ها و پوسته ها>>پوسته ها>>پوسته قالبتان را انتخاب کنید>>یه قالب جدید به نام shar.css ایجاد کنید و کدهای زیر را در آنها قرار دهید:

کد:

/*  Share Code CSS   */

.sharelink {
width: 385px;
}
.face {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-2.png) bottom;
}
div.face:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-2.png) top;
}
.bala {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-4.png) bottom;
}
div.bala:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-4.png) top;
}
.ff {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-3.png) bottom;
}
div.ff:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-3.png) top;
}
.dg {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-6.png) bottom;
}
div.dg:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-6.png) top;
}
.tu {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-1.png) bottom;
}
div.tu:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-1.png) top;
}
.ad {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-7.png) bottom;
}
div.ad:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-7.png) top;
}
.da {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-5.png) bottom;
}
div.da:hover {
width: 55px;
height: 35px;
display: block;
float: right;
background: url(/images/share-5.png) top;
}
/* End Code Css Share */

*سپس به قسمت کنترل پنل>>قالب ها و پوسته ها>>قالب ها>>قالب انجمنتان>>قسمت Showthread Template>>قسمت showthread رفته و کد زیر را بیابید و پاک کنید:

کد:

<div>
<div style="padding-top:3px; border-bottom: 1px #2A4956 solid; float: right;">
<a rel="nofollow" style="text-decoration:none;" href="http://www.mister-wong.com/" onclick="window.open('http://www.mister-wong.com/index.php?action=addurl&amp;bm_url='+encodeURIComponent(location.href)+'&amp;bm_notice=&amp;bm_description='+encodeURIComponent(document.title)+'&amp;bm_tags=');return false;" title="افزودن به: Mr. Wong"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/wong.gif" alt="افزودن به: Mr. Wong" name="wong" border="0" id="wong"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.linkarena.com/" onclick="window.open('http://linkarena.com/bookmarks/addlink/?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)+'&amp;desc=&amp;tags=');return false;" title="افزودن به: Linkarena"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/linkarena.gif" alt="افزودن به: Linkarena" name="Linkarena" border="0" id="Linkarena"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://digg.com/" onclick="window.open('http://digg.com/submit?phase=2&amp;url='+encodeURIComponent(location.href)+'&amp;bodytext=&amp;tags=&amp;title='+encodeURIComponent(document.title));return false;" title="افزودن به: Digg"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/digg.gif" alt="افزودن به: Digg" name="Digg" border="0" id="Digg"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://del.icio.us/" onclick="window.open('http://del.icio.us/post?v=2&amp;url='+encodeURIComponent(location.href)+'&amp;notes=&amp;tags=&amp;title='+encodeURIComponent(document.title));return false;" title="افزودن به: Del.icio.us"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/del.gif" alt="افزودن به: Del.icio.us" name="Delicious" border="0" id="Delicious"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.facebook.com/" onclick="window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href)+'&amp;t='+encodeURIComponent(document.title));return false;" title="افزودن به: Facebook"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/facebook.gif" alt="افزودن به: Facebook" name="Facebook" border="0" id="Facebook"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.furl.net/" onclick="window.open('http://www.furl.net/storeIt.jsp?u='+encodeURIComponent(location.href)+'&amp;keywords=&amp;t='+encodeURIComponent(document.title));return false;" title="افزودن به: Furl"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/furl.gif" alt="افزودن به: Furl" name="Furl" border="0" id="Furl"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.yahoo.com/" onclick="window.open('http://myweb2.search.yahoo.com/myresults/bookmarklet?t='+encodeURIComponent(document.title)+'&amp;d=&amp;tag=&amp;u='+encodeURIComponent(location.href));return false;" title="افزودن به: Yahoo"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/yahoo.gif" alt="افزودن به: Yahoo" name="Yahoo" border="0" id="Yahoo"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.spurl.net/" onclick="window.open('http://www.spurl.net/spurl.php?v=3&amp;tags=&amp;title='+encodeURIComponent(document.title)+'&amp;url='+encodeURIComponent(document.location.href));return false;" title="افزودن به: Spurl"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/spurl.gif" alt="افزودن به: Spurl" name="Spurl" border="0" id="Spurl"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.google.com/" onclick="window.open('http://www.google.com/bookmarks/mark?op=add&amp;hl=fa&amp;bkmk='+encodeURIComponent(location.href)+'&amp;annotation=&amp;labels=&amp;title='+encodeURIComponent(document.title));return false;" title="افزودن به: Google"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/google.gif" alt="افزودن به: Google" name="Google" border="0" id="Google"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.blinklist.com/" onclick="window.open('http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Tag=&amp;Url='+encodeURIComponent(location.href)+'&amp;Title='+encodeURIComponent(document.title));return false;" title="افزودن به: Blinklist"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/blinklist.gif" alt="افزودن به: Blinklist" name="Blinklist" border="0" id="Blinklist"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://blogmarks.net/" onclick="window.open('http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url='+encodeURIComponent(location.href)+'&amp;content=&amp;public-tags=&amp;title='+encodeURIComponent(document.title));return false;" title="افزودن به: Blogmarks"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/blogmarks.gif" alt="افزودن به: Blogmarks" name="Blogmarks" border="0" id="Blogmarks"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.diigo.com/" onclick="window.open('http://www.diigo.com/post?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)+'&amp;tag=&amp;comments='); return false;" title="افزودن به: Diigo"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/diigo.gif" alt="افزودن به: Diigo" name="Diigo" border="0" id="Diigo"> </a>
        <a rel="nofollow" style="text-decoration:none;" href="http://www.cloob.com/" onclick="window.open('http://www.cloob.com/share/link/add?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: 100 درجه کلوب"> <img style="padding-bottom:1px;" src="http://www.vafadownload.gigfa.com/images/100c.gif" alt="افزودن به: 100 درجه کلوب" name="Information" border="0" id="Information"> </a>

</div>
</div>

بعد از پاک کردن کدهای بالا کد زیر را جایگزین آنها کنید:

کد:

<table border="0" cellpadding="0" width="385"><tbody><tr><td>
<div class="sharelink">
<a href="http://www.google.com/" onclick="window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: google" target="_blank"><div class="face"></div></a>
<a href="http://www.facebook.com/" onclick="window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: facebook" target="_blank"><div class="bala"></div></a>
<a href="http://balatarin.com/" onclick="window.open('http://balatarin.com/links/submit?phase=2&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: balatarin" target="_blank"><div class="ff"></div></a>
<a href="http://www.google.com/" onclick="window.open('http://www.google.com/buzz/post?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: buzz" &imageurl=" target="_blank"><div class="dg"></div></a>
<a href="http://friendfeed.com/" onclick="window.open('http://friendfeed.com/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: friendfeed" target="_blank"><div class="tu"></div></a>
<a href="http://twitter.com/" onclick="window.open('http://twitter.com/home?status='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: twitter" target="_blank"><div class="ad"></div></a>
<a href="http://www.cloob.com/" onclick="window.open('http://www.cloob.com/share/link/add?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" title="افزودن به: 100 درجه کلوب" target="_blank"><div class="da"></div></a>
</div></td></tr></tbody></table>

حالا شما یه اشتراک به مطلب متحرک و زیبا دارید
به همین راحتی به همین خوشمزگی

دوستان تشکر و اعتبار در راه خدا یادتون نره