شرح لكيفية اضافة ايقونات المواقع الاجتماعية بطريقة جديدة

شرح لكيفية اضافة ايقونات المواقع الاجتماعية بطريقة جديدة

اليوم اقدم لكم شرح لكيفية اضافة ايقونات المواقع الاجتماعية فيس بوك,تويتر,جوجا,rss بطريقة جديدة يمكنك تركيب الاداة بخطوات سهلة جدا 

الان مع شرح لكيفية تركيب الاضافة بطريقة سهلة

طرقة اضافة الأداة

1. لوحة التحكم

2. تخطيط

3. اضافة اداة

4. اداة HTML

5. أنسخ الكود و اضغط حفظ

<div class="container">

<ul class="action-bar clearfix">

<li>

<a href="http://twitter.com/rkthonweb" class="like">

<span class="zocial-twitter"></span>

<span class="tooltip">Follow</span>

</a>

</li>

<li>

<a href="https://plus.google.com/rkthonweb" class="favourite">

<span class="zocial-googleplus"></span>

<span class="tooltip">Circle us</span>

</a>

</li>

<li>

<a href="https://www.facebook.com/rkthonweb" class="comment">

<span class="zocial-facebook"></span>

<span class="tooltip">Like us</span>

</a>

</li>

<li>

<a href="http://rkthonweb.blogspot.com/feeds/posts/default" class="share">

<span class="zocial-rss"></span>

<span class="tooltip">Subscribe</span>

</a>

</li>

</ul>

</div>

<style>

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */

[class*="zocial-"]:before {

  font-family: 'zocial', sans-serif;

}

/* ---------- GENERAL ---------- */

a { text-decoration: none; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after {

content: "";

display: table; }

.clearfix:after { clear: both; }

.container {

display: block;

height: 64px;

position: relative;

width: 256px;

}

/* ---------- Action Bar ---------- */

.action-bar li {

float: left;

}

.action-bar a {

-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

color: #e7e7e7;

display: block;

font-size: 32px;

height: 64px;

line-height: 64px;

position: relative;

text-align: center;

-webkit-transition: background .3s;

-moz-transition: background .3s;

-ms-transition: background .3s;

-o-transition: background .3s;

transition: background .3s;

width: 64px;

}

.action-bar a:hover .tooltip {

margin-top: 16px;

opacity: 1;

}

.tooltip {

border-radius: 3px;

font-size: 14px;

height: 28px;

left: 50%;

line-height: 28px;

margin: 0 0 0 -50px;

opacity: 0;

position: absolute;

top: 100%;

-webkit-transition: margin-top .3s, opacity .3s;

-moz-transition: margin-top .3s, opacity .3s;

-ms-transition: margin-top .3s, opacity .3s;

-o-transition: margin-top .3s, opacity .3s;

transition: margin-top .3s, opacity .3s;

width: 100px;

}

.tooltip:before {

content: "";

height: 8px;

left: 50%;

margin: -4px 0 0 -4px;

position: absolute;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

width: 8px;

}

.like,

.like .tooltip,

.like .tooltip:before { background: #65B1F8; }

.like:hover { background: #65B1F8; }

.favourite,

.favourite .tooltip,

.favourite .tooltip:before { background: #c93037; }

.favourite:hover { background: #b02b32; }

.comment,

.comment .tooltip,

.comment .tooltip:before { background: #43438e; }

.comment:hover { background: #393978; }

.share,

.share .tooltip,

.share .tooltip:before { background: #FF8000; }

.share:hover { background: #FF8000; }

</style>

___________________________________________________

كل ما هو عليك ان تبحث عن rkthonweb وتغيرها بما يناسب موقعك