اقدم لكم موضوع سرع وهو اضافات اجتماعية

طريقة 1


مثال حي للاضافه


طريقة 2



مثال حي للاضافه

طريقة 3


مثال حي للاضافه
طريقة 4






مثال حي للاضافه



كالعادة قم بالذهاب إلى تصميم > عناصر الصفحة > إضافة أداة Html/JavaScript





1
رمز PHP:
<code style="white-space:nowrap"> <code>

<style>

/* Bloggertrix */
.bubblewrap
}
.
bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.
bubblewrap li img
margin
-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*http://dz-site.blogspot.com/ */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.
bubblewrap li img:hover{
-
moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-
o-transform:scale(1.8);
}</
style>

<
br />
<
center>
<
br />
<
ul class="bubblewrap">
<
li><a href="http://www.plus.google.com/*****"><img src="http://3.bp.blogspot.com/-gF6S0THkzoQ/UQ-_jEPZKZI/AAAAAAAAGmA/4_rzX1-1gfc/s1600/Google.png" title="تابعنا على google+ " /></a></li>
<
li><a href="http://www.facebook.com/*****"><img src="****"><img src="http://4.bp.blogspot.com/-IBEOdj7ijb4/UQ-_kagi3TI/AAAAAAAAGmU/F5Z4N_X4Dq4/s1600/StumbleUpon.png" title=" Digg تابعنا على" /></a></li>
<
li><a href="http://www.twitter/*****"><img src="http://1.bp.blogspot.com/-YgFSWM2-prc/UQ-_kaEqmCI/AAAAAAAAGmY/7gDjGv8fyEA/s1600/Twitter.png" title=" Twitterتابعنا على" /></a></li>
<
li><a href="http://feeds2.feedburnertitle="RSS Feed تابعنا على" /></a></li>
</ul>
</center>
</code> </code>

2

رمز PHP:
<code style="white-space:nowrap"> <code>










<style>
/*--------dz-site.blogspot.com Sharing Widget ------*/
.touchme a {
disx;
float:left;
background:transparent url(https://dz-site.googlecode.com/files/dz-site%20-me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-
moz-transition: ease-in 0.2s all;
-
o-transition: ease-in 0.2s all;
-
ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}

.
touchme a.googleplus {
background-position: 0px -58px;
}
.
touchme a.googleplus:hover {
background-position: 0px 0px;
}

.
took:hover {
background-position: 0px -348px;
}

.
touchme a.rss {
background-position: 0px -174px;
}
.
touchme a.rss:hover {
background-position: 0px -116px;
}

</
style>

<
div class='touchme'>
<!--
RSS-->
<
a class='rss' href="ربط تغذية " rel='external nofollow' target='_blank'></a>
<!--
Google Plus-->
<
a class='googleplus' href="ربط صفحتك على قوقل google بلس" rel='external nofollow' target='_blank'></a>
<!--
Facebook-->
<
a class='facebook' href="ربط صفحتك على فيس بوك" rel='external nofollow' target='_blank'></a>
<!--
Twitter -->
<
a class='twitter' href="ربط حسابك توتير" rel='external nofollow' target='_blank' ></a>

</
div
>
</code> </code>




3
رمز Code:
<div class=&quot;metro-social&quot;> <li><a class=&quot;fb&quot; href=&quot;http://www.facebook.com/ضع اسم الضفحه هنا&quot;></a></li> <li><a class=&quot;tw&quot; href=&quot;http://twitter.com/ضع اسم حسابك هنا فقط&quot;></a></li> <li><a class=&quot;gp&quot; href=&quot;https://plus.google.com/رابط صفحتك هنا&quot;></a></li> <li><a class=&quot;fd&quot; href=&quot;http://feeds.feedburner.com/ضع رابط الخلاصات الاسم فقط&quot;></a></li> </div> <style> /*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs Web link to gadget code: http://dz-site.blogspot.com/2014/03/blog-post_28.html Distributed under license CC BY-NC-ND 3.0 INT Please keep license information intact while using this widget*/ .metro-social{width:285px} .ative;cursorointer;pad


4


رمز PHP:
<code style="white-space:nowrap"> <code>





<style>
/*--------dz-site.blogspot.com Sharing Widget ------*/


/*--------dz-site.blogspot.com Sharing Widget ------*/

</style><br>
<
div id="lh-social">
<
ul>
<
li id="fb"><a href="https://www.facebook.com/DZ.SITE" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">facebook</a></li>
<
li id="twit"><a href="http://twitter.com/ya12ine" rel="nofollow"40, 214);">Twitter</a></li>
<li id="
g"><a href="https://plus.google.com/103499777490et="_blank" style="color: rgb(97, 140, 214);">DELICIOUS</a></li>
</ul>
</
div>
</code> </code>




إضافات بلوجر





©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©