اهلا بيك اخوانى فى مدونة بلوجر توب
الاضافة الموقع الاجتماعه هيا من افضل الاضافات فى مدونتك والحصور على نشر تدوناتك هذا الاضافة تؤدى الى تحسين محتوى مدونتك بشكل سليم الاضافة مميزة بنشر تدوناتك وعداد
نشر من احد الزوار مثل الفيس بك وتويتر وموقع فيديورنر وهومن افضل الموقع لجلب محتويات مدونتك عن طريق rss وجوجل بلس
شاهدو هذا الاضافة
اضافة جميله جداا وتساعد فى اشهار محتويات مدونتك
وهي ان تصميمها بسيط وليس مبالغ فيه فلا تسبب شذوذ عن الإطار العام لمدونتك أيضا هي سهلة التنسيق وستتوائم مع مدونتك ومظهرها بسهولة بإذن الله أيضا هي سهلة التركيب فالكود الخاص بها ستضيفة الى آداة HTML/JavaScript
طريقة التركيب
.1 اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4. اضف اداة
6.اختار Html/Javascript
هذا هو الكود
<style>
/*BT-Style Social Subscribe Widget By Bloggertricks.biz*/
.button {
font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration: none !important; white-space: nowrap;
display: inline-block; vertical-align: baseline; position: relative;
cursor: pointer; padding: 10px 20px; background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'); /* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box; /* Applying a default border raidus of 8px */
-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
/* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 *//* Currently works only in
Safari/Chrome */ -webkit-transition: background-position 1s;
-moz-transition: background-position 1s; transition: background-position 1s;
}
.button:hover {/* The first rule is a fallback, in case the browser
does not support multiple backgrounds*/
background-position: top left;background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {/* Moving the button 1px to the bottom when clicked */
bottom: -1px;}
.button.small { font-size: 13px;}
.gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important;
background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), -moz-radial-gradient(center bottom, circle,
rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient
(#c5c7ca, #92989c); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%,
0% 100%, from(#c5c7ca), to(#92989c));float:right;margin-top:-5px;margin-right:-15px;
}
.gray.button:hover { background-color: #b6bbc0; background-image: url('http://4.bp.
blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/AAAAAAAAA1Y/TGXuHSyRQYk/s1600/
bloggertricksdotbiz+bg.png'), url('http://4.bp.blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/
AAAAAAAAA1Y/TGXuHSyRQYk/s1600/bloggertricksdotbiz+bg.png'), -moz-radial-
gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz
-linear-gradient(#d1d3d6, #9fa5a9); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_MXznP2kP5_O1trBvUIwIcdzo7S7xIr9NDf6CK-XFYz-QmdBzLQexQZTWBg7Z_jxnE3myFa96pE_QqBxGZuGrILSPQD4OQgtKZSKaVvfe951ckpNLwHbAtzebzrfsQR2Q0-JAoIu8Fo/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%,
0% 100%, from(#d1d3d6), to(#9fa5a9));}
.body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTmrr9613mOGy5HVv7yjMFV1KuYKRixGCJh69Skg9DEFDBsUz9IcmpQE26jiRNyH1CmEf3CISra3FGos-rT_Ma7mr-XceAw4xHSw9Abw2RuhV3yOhftY_LfFawDRTHDcPpvkUtZzhmlAo/s1600/bg.png) no-repeat;
width:300;height:360;padding:22px;
}
.rss-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJK8RdsNLcnFIid2UJB9_CdHnz91-d4ip5KmJGmuQA1obUkJ_2xH6aqmU38twi4yQlCpxTK4MQsZt4Eyy9x_5Tdfa-ehz0zRqKHVPdFssJ_0gOYboVMUWLa2bC9y2H2aheY6dBheOwS8/s1600/RSS.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 5px;
margin-left:-15px;
}
.twitter-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHlxWAF_H9r6JFdbsBWjsyYSl3TtlfbalcViZXqgMoaSgKwBmYSTA_TMMkWNZLAJawm_DS4zt5Vu8BCYRiHYLvYUXqQVUx5pNCSZV4HxWQPuL0fFtmcNjw2lluZM-HYiHwYQbcAuGBRs/s1600/
TWITTER.png) no-repeat; height: 68px;
padding-left:65px;
margin-top: 15px;
margin-left:-15px;
}
.facebook-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeJYpGvvVL7G97lpZgAPG6e0eb2_wPTvoJZGmtlhcbFK-IZCdQKEc3GUULNLDVZzXY-SLcuA1M9XzwndHgQagTuyufg3E5xSey0yuaX_N8IGBEPzyO9T2yzy1116UDKDXoVlVE-AhOYM/s1600/
FACEBOOK.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 25px;
margin-left:-15px;
}
.gplus-bt{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnwK8F8V-22_l5T1fymjiw0kdJMe7F0PhB7-08co8UF8pv7p4UkmS3qUqHwrhPzEt42WpcNBxQMtOuPmcNvADeVq_uJX6vCJzdZ4_WVzMKhWXu43q21mv0sdIp87KdJ7RcN7bi25ssB4/s1600/gpluss.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 15px;
margin-left:-15px;
}
.follower-rss, .follower-twitter, .follower-facebook, .follower-gplus {
font-family: Georgia, sans-serif, Times;
font-size: 1.1em;
font-style:italic;
color:#289728;
padding-top:10px;
}
.follower-rss span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#FFB93C;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#6DB6E6;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#3889BA;
}
.follower-gplus span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#3889BA;
}
</style>
<div class="body">
<div class="rss-bt">
<div class="follower-rss"> <span>515</span>readers
<a href="عنوان فيدبورنر " class="button small gray">
Subscribe</a></div> </div>
<div class="twitter-bt"><div class="follower-twitter"><span>1058</span>followers
<a href="رابط تويتر الخاص بك" class="button small gray">Follow</a></div>
</div>
<div class="facebook-bt">
<div class="follower-facebook"><span>260</span>fans
<a href="رابط الفيسبوك الخاص بك" class="button small gray">Like Us</a> </div>
</div>
<div class="gplus-bt">
<div class="follower-gplus"><span>360</span>followers <a href=" جوجل" class="button small gray">
Add Me</a></div>
</div><span style=" float:right; padding:5px; margin-right:-10px;"><a href="http://www.bloggertricks.biz/2012/06/bt-style-social-subscribe-with-css3.html">|Grab This|</a></span></div>
تعليقات
إرسال تعليق
يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"