أزرار الشبكات الإجتماعيه بشكل جديد ومقاسات مختلفه 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlhWhsirUHmXA999u7mem0ZnmMl0lmPKrVTDf0JU4K16ItD11VMyudruREP4yYS8SkHQ5GHOALFp5tMcH8MpapiJfoWsIUJRKKl-U4hnd661Hjqi5NHBI0bQ0m9uTKUh5qTlLFvpiAO8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6lGNf6HAZ7civlE-9cC_T4rmcbWoT1ykhfTUBkxy9PDlNJXjbworPjedWjfB5yTyGeih_oFqbzl99thbREujcBrbj6gyPk5oXs3BpRqgHSxvX5kxTni7tmFw9ADdwUsT3pNuWK7LlijE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkovhJYvwSujWdE3sKVaoxUlPAotcDdSBBObtQTpYBh4fGuZgYNuhO80KG0iOKDRZDW4DQKHmOHRAob_7Z7g7DJ6VzNWKZVD7dT-xTPSizSUuw_9pC5PxATL5Bvg0XpcAy2Rz8g7VW9fk/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwtf4uUsC-BgmDyMp5_oDFwO0BOpf2YkvPbrEgOkY0BPmlG_h7u1J3YBJhWJDghS-wd3KZMOqWrVfRZmIm3aaCntyw4tC3QcNiO8_Wn4zReMzJiHI9lHCXiAkAB4si84I7a5rt4zZ3dI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP_ax-8zk85buACiZRUe4Mrl9q0fN9g3pzr58t2EEsFoY88ZHQ9TXX7wa9aMgbULQvKblgyP1fOBQqo9vK_OnoICPeqScrBeREEQDq0GxdTV85jLIl9b-yqZjbfCNN5-zklaFrsKCcbkM/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfTOGLVZByzeYwQteFmnjxEcVBeMF6rkiz2KFK3_UNsBgvJhiIRvTrm6CHc-DNtWq4k3dC20R_u1ZgYiR_UJTc2wlkhGDFduUs5Li026zbKO2PPf2Ad8ew14jDRx30AmkF_qGx1RuWmc/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>
 

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

Share

Tweet abuiyad