|
|
|
أدوات الموضوع | انواع عرض الموضوع |
08-31-2012, 07:55 PM | #1 |
مدون جديد
تاريخ التسجيل: Aug 2012
المشاركات: 33
|
اضافة ازرار المشاركة الاجتماعية بتقنية css3 مطورة من مدونة رضا لبلوجر
لمشاهدة الموضوع بشكل افضل في المدونة: هنا ان كنت من متابعي المدونة فلابد من انك رائيت التدوينة التي اتحدث عنها، وان لم تكن فتفضل الرابط لتزورها: هنا، كما ترى، لقد كانت بسيطة جدا، اقصد في المظهر، كما انها لا تملك اي اطار او ما شابه يميزها عن بدن المدونة، لكن كل هذا قد ولى، لانني احضرت لكم نفس الاضافة، لكن مع تعديلات جذرية، ستعجبكم باذن الله. + كما اسلفت الذكر، لقد اجريت العديد من التعديلات لتظهر بهذا الشكل :) + كان بالنسخة السابقة العديد من المشاكل التي و في الغالب هي التي منعتكم من استخدامها، و اهمها :
+ لكنني و بعون الله، وبعض البحث، حللت كل المشاكل، جعلتها تبدو اجمل بكثير، كما تمت اضافة Google Plus، تم تغيير الايقونات لايقونات اخرى افضل جودة و اخف في التحميل، وتم حل المشكل الاكثر اهمية و هو انه بعد الضغط على ايقونة اي موقع اجتماعي، تفتح نافذة صغيرة لتستطيع مشاركتها دون مشاكل :) . - لكن السؤال يبقى، من اين احصل عليها ؟ + ستحصل عليها من هذه الصفحة، والان باذن الله، فقط تابع الشرح. - اولا اذهب الى لوحة التحكم، ثم الى قالب، ثم احفظ نسخة من القالب، ثم الى تحرير HTML: - ثم حدد توسيع قوالب عناصر واجهة المستخدم. - ثم ابحث عن هذا الكود : كود بلغة HTML:
</head>
كود:
<style type='text/css'> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org & Modified By Rida @ www.ridasail.blogspot.com */ ul.social { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url("http://i.imgur.com/uoKjU.png") no-repeat scroll 3px 1px #202020; border-color: #000000 #333333 #333333 #000000; border-radius: 6px 6px 6px 6px; border-style: solid; border-width: 1px; display: inline-block; line-height: 18px; list-style-position: outside; list-style-type: none; margin: 10px 10px 0 0; padding-bottom: 10px; padding-left: 110px; padding-right: 10px; padding-top: 9px;} ul.social { list-style:none; margin:1px auto;display:inline-block; } ul.social li { display:inline; float:left; background-repeat:no-repeat; } ul.social li a { display:block; width:48px; height:48px; padding-right:5px; position:relative; text-decoration:none; } ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff;padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0,0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0,0.5);} ul.social li.facebook { background-image:url("https://lh3.googleusercontent.com/-Go0YEGKKgRM/UECkQ_4X85I/AAAAAAAAAfs/LwoktCldbwU/s48/facebook.png"); } ul.social li.twitter { background-image:url("https://lh4.googleusercontent.com/-ZiKWE_BV9fQ/UECkSbkOj4I/AAAAAAAAAgI/TdmRTY-ece8/s48/twitter.png"); } ul.social li.googlebuzz { background-image:url("https://lh3.googleusercontent.com/-leSwB-HHao0/UECkRdLxSCI/AAAAAAAAAfk/j-8ILcwc8gQ/s48/google%252B.png"); } ul.social li.stumbleupon { background-image:url("https://lh3.googleusercontent.com/-oNCLXQh8zXk/UECkR0-fNEI/AAAAAAAAAf4/O0xiqTLJ1Po/s48/stumbleupon.png"); } ul.social li.digg { background-image:url("https://lh3.googleusercontent.com/-N4T3Gv1SGDo/UECkQ_7TO4I/AAAAAAAAAfo/kzrzqCxsCR0/s48/digg.png"); } ul.social li.delicious { background-image:url("https://lh6.googleusercontent.com/-Jck0zYd-Ep8/UECkQ1nGnsI/AAAAAAAAAfc/IzF5rA5BaTE/s48/delicious.png"); } ul.social li.linkedin { background-image:url("https://lh6.googleusercontent.com/-tSk0GtFoMeU/UECkRwX6HkI/AAAAAAAAAf8/vrFSmj0nEXs/s48/linkedin.png"); } ul.social li.reddit { background-image:url("https://lh4.googleusercontent.com/-Q6rNe7_LjA0/UECkRyCgiMI/AAAAAAAAAgA/zJ5nobNhYR4/s48/reddit.png"); } ul.social li.technorati { background-image:url("https://lh4.googleusercontent.com/-D6m-H54D9Lg/UECkSROmY3I/AAAAAAAAAgQ/OJ55CLwW1_s/s48/technorati.png"); } #cssanime:hover li { opacity:0.2; } #cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #cssanime li:hover { opacity:1; } #cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org & Modified By Rida @ www.ridasail.blogspot.com */ </style> كود:
<data:post.body/> كود:
<b:if cond='data:blog.pageType == "item"'> <ul class='social' id='cssanime'> <li class='facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false; ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='googlebuzz'> <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Plus</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> شكرا لمروركم الرائع و الى اللقاء :) . لمشاهدة الموضوع بشكل افضل في المدونة: هنا
__________________
|
08-31-2012, 08:29 PM | #2 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: اضافة ازرار المشاركة الاجتماعية بتقنية css3 مطورة من مدونة رضا لبلوجر
إضافة جميلة أخي رضا
وتمت معاينتها لك مني طمعا في المزيد من خبراتك
__________________
|
08-31-2012, 08:44 PM | #3 |
مدون جديد
تاريخ التسجيل: Aug 2012
المشاركات: 33
|
رد: اضافة ازرار المشاركة الاجتماعية بتقنية css3 مطورة من مدونة رضا لبلوجر
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
المشاركة, الاجتماعية, ازرار, اضافة, بتقنية |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
اضافة جميع ازرار المواقع الاجتماعية في مدونتك | saheralialy | إضافات وأدوات بلوجر | 8 | 06-25-2013 06:08 AM |
كود اضافة ازرار المواقع الإجتماعية في مدونة بلوجر بتقنية css3 | ilyass kéng | إضافات وأدوات بلوجر | 0 | 01-31-2013 05:02 PM |
اضافة اقرء المزيد بتقنية css3 لمدونات بلوجر | بلال حمدان | إضافات وأدوات بلوجر | 0 | 01-23-2013 02:29 PM |
طلب ازرار المشاركة الاجتماعية | princess of egypt | طلبات الدعم الفني | 2 | 09-24-2012 06:28 PM |
اضافة ازرار الموقع الاجتماعية بتقنية css4 | mostafa alwin | إضافات وأدوات بلوجر | 3 | 07-09-2012 04:18 PM |
الساعة الآن 11:19 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |