-->

الأحد، 3 يوليو، 2011

أزرار الشبكات الإجتماعيه بشكل جديد ومقاسات مختلفه Mouse Hover Effect

بسم الله والحمد لله
الشبكات الإجتماعيه , يظل يستخدمها أى مدون فى مدونته لأنها لها مفعول السحر فى نشر المدونه فى عالم الإنترنت وإضافة اليوم عباره عن تصميم رائع وجديد بأشكال جميله وأحجام مختلفه بتقنية Mouse Hover Effect
عند إشارة الماوس عليها
للمعاينه إضغط هنا 


تابع الشرح

** إذهب إلى مدونتك بلوجر 
** إنتقل إلى التصميم -->> تحرير HTML
** خذ نسخه إحتياطيه من القالب
** ضع علامه فى خانة توسيع القالب
إبحث عن الكود التالى

]]></b:skin>
** ثم فوقه مباشرة ضع الكود التالى 

/*------------ MBT Image Opacity--------------*/
.Fadein img { 
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0; 
border:0; 
} 
.Fadein:hover img { 
filter:alpha(opacity=30); 
-moz-opacity: 0.30; 
opacity: 0.30; 
border:0; 
}


** ثم إبحث عن الكود التالى

<data:post.body/>

** ثم تحته مباشرة ( أسفله ) ضع الكود التالى

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/> 
<a class='Fadein' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png ' width='64px'/></a> 
<!--DIGG--> 
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png ' width='80px'/></a> 
<!--Stumble--> 
<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/Ssnw2ChIPXI/AAAAAAAAB5U/bgiT3bu2_xo/s400/stumble1.png' width='100px'/></a> 
<!--Reddit--> 
<a class='Fadein' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png' width='100px'/></a> 
<!--Facebook--> 
<a class='Fadein' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png ' width='80px'/></a> 
<!-- Twitter --> 
<a class='Fadein' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>
 
** إحفظ قالبك وشاهد بنفسك التغيير الجميل مع إمكانية تغيير ما هو بالأحمر بالنص الذى تريده
abuiyad

2 التعليقات:

جــروح يقول...

أشكرك من أعماق قلبي


عندي سؤال كيف أضيف صوت على المدونه يعمل مباشره عند فتح المدونه..؟؟


مشكوره على مجهودك؟؟

أختك

Hend يقول...

أختى جروح السلام عليكم
والشكر لله و أنا بإذن الله سوف أعمل على موضوع بخصوص سؤالك إنتظرينى . سعدت بزيارتك وتعليقك

أضف تعليق

عبر عن رأيك بدون تسجيل دخول

كن على إتصال

Best Blogger Tips
Blogger Gadgets