معهد خبراء بلوجر - اضافة ازرار المشاركة الاجتماعية بتقنية css3 مطورة من مدونة رضا لبلوجر

لمشاهدة الموضوع بشكل افضل في المدونة: هنا

ان كنت من متابعي المدونة فلابد من انك رائيت التدوينة التي اتحدث عنها، وان لم تكن فتفضل الرابط لتزورها: هنا، كما ترى، لقد كانت بسيطة جدا، اقصد في المظهر، كما انها لا تملك اي اطار او ما شابه يميزها عن بدن المدونة، لكن كل هذا قد ولى، لانني احضرت لكم نفس الاضافة، لكن مع تعديلات جذرية، ستعجبكم باذن الله.
http://1.bp.blogspot.com/-yQY_Qw-n9N...or-blogger.jpg
+ كما اسلفت الذكر، لقد اجريت العديد من التعديلات لتظهر بهذا الشكل :)
+ كان بالنسخة السابقة العديد من المشاكل التي و في الغالب هي التي منعتكم من استخدامها، و اهمها :

شكل بسيط جدا و غير مميز.
ايقونات ذات جودة متوسطة.
غياب Google Plus.
و المشكل الاكثر اهمية، ان بعد الضغط على ايقونة موقع اجتماعي ما لم يكن تفتح في نافذة جديدة.

- المعاينة ؟، يمكنك مشاهدتها في اسفل التدوينة :)، كما ان هذه هي صورة لكيف تبدو ( في حالة استبدلتها ) :
http://3.bp.blogspot.com/--OVNiaJg0h...-blogger-1.jpg
+ لكنني و بعون الله، وبعض البحث، حللت كل المشاكل، جعلتها تبدو اجمل بكثير، كما تمت اضافة 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(&quot;http://i.imgur.com/uoKjU.png&quot;) 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(&quot;https://lh3.googleusercontent.com/-Go0YEGKKgRM/UECkQ_4X85I/AAAAAAAAAfs/LwoktCldbwU/s48/facebook.png&quot;); }

ul.social li.twitter { background-image:url(&quot;https://lh4.googleusercontent.com/-ZiKWE_BV9fQ/UECkSbkOj4I/AAAAAAAAAgI/TdmRTY-ece8/s48/twitter.png&quot;); }  

ul.social li.googlebuzz { background-image:url(&quot;https://lh3.googleusercontent.com/-leSwB-HHao0/UECkRdLxSCI/AAAAAAAAAfk/j-8ILcwc8gQ/s48/google%252B.png&quot;); }

ul.social li.stumbleupon { background-image:url(&quot;https://lh3.googleusercontent.com/-oNCLXQh8zXk/UECkR0-fNEI/AAAAAAAAAf4/O0xiqTLJ1Po/s48/stumbleupon.png&quot;); }

ul.social li.digg { background-image:url(&quot;https://lh3.googleusercontent.com/-N4T3Gv1SGDo/UECkQ_7TO4I/AAAAAAAAAfo/kzrzqCxsCR0/s48/digg.png&quot;); }

ul.social li.delicious { background-image:url(&quot;https://lh6.googleusercontent.com/-Jck0zYd-Ep8/UECkQ1nGnsI/AAAAAAAAAfc/IzF5rA5BaTE/s48/delicious.png&quot;); }

ul.social li.linkedin { background-image:url(&quot;https://lh6.googleusercontent.com/-tSk0GtFoMeU/UECkRwX6HkI/AAAAAAAAAf8/vrFSmj0nEXs/s48/linkedin.png&quot;); }

ul.social li.reddit { background-image:url(&quot;https://lh4.googleusercontent.com/-Q6rNe7_LjA0/UECkRyCgiMI/AAAAAAAAAgA/zJ5nobNhYR4/s48/reddit.png&quot;); }

ul.social li.technorati { background-image:url(&quot;https://lh4.googleusercontent.com/-D6m-H54D9Lg/UECkSROmY3I/AAAAAAAAAgQ/OJ55CLwW1_s/s48/technorati.png&quot;); }

#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 == &quot;item&quot;'>

<ul class='social' id='cssanime'>

<li class='facebook'>

<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>

</li>

<li class='twitter'>

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false; ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>

</li>

<li class='googlebuzz'>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Plus</strong></a>

</li>

<li class='stumbleupon'>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>

</li>

<li class='digg'>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>

</li>

<li class='delicious'>

<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>

</li>

<li class='linkedin'>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>

</li>

<li class='reddit'>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>

</li>

<li class='technorati'>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url 'onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>

</li>

</ul>

</b:if>

- لتكون قد انتهيت، اتمنى ان تعمل بشكل جيد كما اشتغلت لدي.
شكرا لمروركم الرائع و الى اللقاء :) .

لمشاهدة الموضوع بشكل افضل في المدونة: هنا