السلام عليكم ورحمة الله وبركاته
اعزائي متابعي مدونة تكنولوجيا المعلومات . اليوم جئت لكم بإضافة مهمة وجميله لمدونات بلوجر
اضافة اليوم مهمة لكل مدونة وهي اداة التواصل الاجتماعي فيس بوك وتويتر وجوجل بلس
 |
| صورة من اداة التواصل الاجتماعي |
لمشاهدة الاداة موجودة علي المدونة
انضم الينا لتحصل علي كل جديد
طريقة تركيب الاداة سهلة وبسيطة
اذهب الي لوحة التحكم واختر تخطيط واضافة اداة واختار اضافة HTML/Javascript
وضع الكود بعد التعديل علية
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
<style type="text/css">
.container {
margin: 0px auto;
width: 270px;
text-align: center;
float: center;
}
.btn-sbm {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.btn-sbm:active {
margin-top: 3px;
}
.btn-sbm:active .btn-sbm-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.btn-sbm:active .btn-sbm-action:after {
bottom: 3px;
}
.btn-sbm-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 20px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.btn-sbm-count:before, .btn-sbm-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}
.btn-sbm-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}
.btn-sbm-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 18px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}
.btn-sbm-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}
.btn-sbm-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.btn-sbm-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.btn-sbm-tweet + .btn-sbm-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.btn-sbm-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.btn-sbm-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
</style>
<br/>
<div class="container">
<a href=https://twitter.com/https://twitter.com/hamdystar101 rel="nofollow" target="_blank"rel="author" title="تابعنا عبر التويتر" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-tweet">تويتر</span>
<span class="btn-sbm-count">104+</span>
</a>
<a href=https://www.facebook.com/3gyptnews rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-like">فايسبوك</span>
<span class="btn-sbm-count">180+</span>
</a>
<a href="https://plus.google.com/105435059962119899780/posts?utm_source=chrome_ntp_icon&utm_medium=chrome_app&utm_campaign=chrome" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+">
<span class="btn-sbm-action btn-sbm-plus">جوجل+</span>
<span class="btn-sbm-count">120+</span>
</a><br/>
</div>
انضم الينا لتحصل علي كل جديد
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
للتعديل علي الكود عدل علي كل ماهو باللون الاحمر واللي اللقاء في اضافات جديدة ان شاء الله
