مرجع پارسی MyBB
آموزش زیباترین کد اشتراک گذاری مطالب انجمن - نسخه‌ی قابل چاپ

+- مرجع پارسی MyBB (https://community.mybbiran.com)
+-- انجمن: آرشیو (https://community.mybbiran.com/forum-128.html)
+--- انجمن: آرشیو انجمن های قدیمی (https://community.mybbiran.com/forum-129.html)
+---- انجمن: مای بی بی نسخه 1.6 (https://community.mybbiran.com/forum-83.html)
+----- انجمن: آموزش ها (https://community.mybbiran.com/forum-84.html)
+------ انجمن: سایر آموزش ها (https://community.mybbiran.com/forum-114.html)
+------ موضوع: آموزش زیباترین کد اشتراک گذاری مطالب انجمن (/thread-12094.html)

آموزش زیباترین کد اشتراک گذاری مطالب انجمن - hamidkag - ۱۳۹۱/۶/۳۱

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

[تصویر: photos.png] نمونه:
[تصویر: a3.png]

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

*ابتدا عکسهای موجود در فایل zip در لینک پایین را دانلود کنید سپس عکس ها را در پوشه images در هاست خود بریزید:
لینک [تصویر: name.png] دانلود:
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>

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

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

RE: آموزش زیباترین کد اشتراک گذاری مطالب انجمن - lab - ۱۳۹۱/۷/۱

خوب بود.
جهت متمرکز کردن اموزش،این هم تقریبا همین کار رو انجام میده
http://community.mybbiran.com/thread-9855.html

RE: آموزش زیباترین کد اشتراک گذاری مطالب انجمن - hamidkag - ۱۳۹۱/۷/۱

(۱۳۹۱/۷/۱، ۰۵:۵۸:۲۲ صبح)lab نوشته است: خوب بود.
جهت متمرکز کردن اموزش،این هم تقریبا همین کار رو انجام میده
http://community.mybbiran.com/thread-9855.html

فرق این آموزش با آموزش بنده این است که مال من اشتراک در جامعه مجازی ایرانیان(کلوب دات کام) رو داره ولی اونا فقط خارجی هستنTongueWinkCool

RE: آموزش زیباترین کد اشتراک گذاری مطالب انجمن - raminr63 - ۱۳۹۱/۱۰/۲۱

ویه فرق مهم که این اموزش شما ناقصه
چرا چون شما استایل رو معرفی کردی ولی تو کد پایینش هیچ کلاسی رو بهش ربط ندادی که ازش استفاده کنه.
در حقیقت اون استایل css‌که براش گذاشتی علا بی استفاده هستش و هیچ ارجاعی بهش تو مد پایینش نشده.
بنابراین بجز صفحه خالی چیزی نمایش داده نمیشه.

RE: آموزش زیباترین کد اشتراک گذاری مطالب انجمن - hamidkag - ۱۳۹۱/۱۰/۲۱

نمیدونم چرا اول یه چیزی رو امتحان نمیکنی بعد اشکال بگیریDodgy عزیز من این آموزش رو خودم رو انجمن خودم انجام دادم و میتونی بری انجمنمو به عنوان نمونه آنلاین ببینی...در ضمن به اون کد Css هم ربط داده شده:

کد:
<div class="sharelink">

جعبه کد آخری که گفتم جایگزین کنید...اول انجام بدین اگر نشد بعد اشکال بگیرین...من خودم Css باز قهارم...Undecided
با تشکر از ایرادگیری الکیWink

RE: آموزش زیباترین کد اشتراک گذاری مطالب انجمن - raminr63 - ۱۳۹۱/۱۰/۲۱

ببینید دوست من هم فروم کار حرفه ایم مگه مرض دارم بیام بدون تست الکی گیر بدم.

کد شما درسته ولی میتونم بگم شما یه اشتباه شاید سهوی کردید که تو ادرس دهی عکسهاتون تو css یه اسلش اضافه کردین و اینکار میاد پوشه عکسها رو از روت هاست میخونه
حالا این وسط اونی که فرومش رو تو پوشه مثلا forum‌ گداشته و از کدهای html هم سر در نمیاره قاطی میکنه.

بهتره که اسلش رو از اول ادرس هاتون بردارید تا ادرس دهی از تو ریشه خود فروم شروع بشه. تا عکسه رو بخونه.

ولی اموزشت نایس بود (فقط همین یه اسلش اذیت میکرد ).
ممنون