رفتن به مطلب

ساخت نوار اشتراک گذاری متحرک با پست


پست های پیشنهاد شده

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

post-412-0-98114100-1345186038_thumb.jpg

لینک به ارسال

باید پس از ساخت باکس و تعیین موقعیت باکس به آن خاصیت


Position: fixed;

دهید.

افزونه های زیر نیز می توانند کمکتان کنند...#


http://wordpress.org/extend/plugins/wp-float/screenshots


http://wordpress.org/extend/plugins/floating-social-media-links/screenshots/


http://wordpress.org/extend/plugins/floating-social-media-icon/screenshots/

لینک به ارسال

خاصیت


Position: fixed;

را کجا باید گذاشت؟

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

لینک به ارسال

خاصیت


Position: fixed;

را کجا باید گذاشت؟

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

در ابتدا باید نوار را بسازید و به آن استایل دهید و پس از تعیین موقعیت آن در جایی که مد نظر دارید به استایل های آن خاصیتی را که اعلام کردم اضافه کنید تا با اسکرول کردن نوار ثابت بماند.

شاید سورس زیر کمکتان کند...#

نوار شناور با css3

لینک به ارسال

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


<ul class="sshare">
<div id="bottom-soc">
<div class="shortlink">
<form>
<a href="<?php echo get_bloginfo('url')."/?p=".$post->ID; ?>" target="_blank"><?php _e( 'shortlink', 'woothemes' ); ?></a>
</form>
</div>
<ul>
<li id="g"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="nofollow"><?php _e( 'Google+', 'woothemes' ); ?></a></li>
<li id="sub"><a href="http://www.feedburner.com/fb/a/emailFlare?itemTitle=<?php the_title(); ?>&uri=<?php the_permalink(); ?>&loc=$loc"><?php _e( 'Subscribe', 'woothemes' ); ?></a></li>
<li id="fb"><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>"><?php _e( 'Facebook', 'woothemes' ); ?></a></li>
<li id="twit"><a href="http://twitter.com/home/?status=<?php the_title(); ?>+<?php the_permalink(); ?>"><?php _e( 'Twitter', 'woothemes' ); ?></a></li>
<li id="li"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><?php _e( 'LinkedIn', 'woothemes' ); ?></a></li>
</ul>
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
</div>
</ul>

نوار اشتراک گذاری این سایت را ببنید

http://mashable.com/2012/08/14/google-plus-vanity-urls/

می خواهم چیزی مانند این داشته باشم

لینک به ارسال

سلام

پیشنهاد میکنم برای حل مشکلات اینچنینی دست بکار بشید و در حد اولیه css و html رو یاد بگیرید.

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

موفق باشید

لینک به ارسال

این کار به نظر بنده با جاوا انجام میشود و نه توسط css و html

شما به نوار اشتراک گذاری این سایت نگاهی بندازید متوجه می شوید http://mashable.com/2012/08/14/google-plus-vanity-urls

لینک به ارسال

چه نیازی به جاوااسکریپت است تا وقتی می توان با استفاده از css3 این کار را انجام داد؟

این آموزش دقیقا چیزی که مد نظر شما می باشد را توضیح داده.خواهشا این بار به خودتان زحمت امتحان کردن آن را دهید...#


http://www.jesararts.net/news/create-a-floating-social-bar

لینک به ارسال

دوستان این نوار اشتراک گذاری هایی که شما گذاشتید و گفتید همگی فیکس هستند یعنی یک در موقعیت خودشان حرکت نمی کنند حتی اگر صفحه بیش از حد طولانی باشد. من به دنبال این خصوصیت نیستم شما اگر نگاهی به سایت http://mashable.com/...us-vanity-urls/ بیندازید می بینید که نوار اشتراک گذاری در ابتدای پست قرار دارد و زمانی که صفحه به ابتدای پست می رسد نوار اشتراک گذاری نیز فیکس می شود و این کار فقط تا انتهای پست ادامه دارد و پس از انتهای پست دیگر نوار اشتراک گذاری حرکت نمی کند و پایین پست باقی می ماند.

شاید این کار توسط jQuery قابل اجرا باشد؟

ویرایش شده توسط dnojir
لینک به ارسال

هم با جی کوئری هم با css قابل اجراست.

شما نوار حمایتی در بالا - سمت راست همین انجمن رو ببینید با cs هست.

لینک به ارسال

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

لینک به ارسال

برای ثابت بودن به تناسب پست می توانید به پست position:relative بدید و به نوار position:absolute و نوار را در داخل پست بگذارید و با منفی نمودن عدد left اونرو از کادر پست دور کنید البته باید چک کنید که در استایل بندی به لایه ی پست overflow:hidden داده نشده باشه و برای اینکه در ie هم خوب دیده بشه به استایل جفت لایه ها zoom:1; رو هم اضافه کنید

لینک به ارسال
  • 4 هفته بعد...

این روش مشکلی که دارد این می باشد که زمانی که عرض صفحه کوچک یا بزرگ می شود نوار اشتراک گذاری حرکت می کند و اگر طول صفحه کم شود بر روی مطالب می آید و اگر صفحه بزرگتر شود از حاشیه مطالب دور می شود چگونه می توان این مشکل را برطرف کرد؟

لینک به ارسال

یک راه برای اینکه با کم و زاد شدن عرض مرورگر حدکت نکنه، شما نوار رو توی عرض خود پوسته تعریف کنید و بعد با مقدار margin منفی از کادر اصل بیرون ببرید.

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...