إضافة نوافذ المفضلات الاجتماعية أسفل كل تدوينة لمدونات بلوجر بشكل أحترافي

زوار ومتابعي المدونة

السلام عليكم ورحمة الله وبركاته

اليوم سوف أتطرق إلى إضافة يبحث عنها الجميع وقد صممتها بطريقة إحترافية

- صورة الإضافة قبل الضغط على السهم

- صورة التأثير بعد الضغط على السهم

معاينة الإضافة

الإضافة شباب في قمة الروعة والإحترافية ، نأتي الآن إلى طريقة التركيب :

1- إدخل إلى مدونتك | ثم أختر تخطيط | ثم أختر إضافة أداة " HTML/JavaScript " :

2- اللصق الكود التالي في صندوق الإضافة :

<style type="text/css">
.homeblog7-box {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:right;
/* CSS3 Browser */
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
/* IE only */
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.homeblog7-box:before,
.homeblog7-box:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
left:5px;
z-index:4;
}
.homeblog7-box:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.homeblog7-box input {
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.homeblog7-box label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.homeblog7-box label:before {
content:attr(data-default);
}
.homeblog7-box label:after {
content:"";
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
width:15px;
border-right:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.homeblog7-box input:hover + label {
color:white;
}
.homeblog7-box input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.homeblog7-box ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
right:14px;
left:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.homeblog7-box li {
margin:0 0;
padding:0 0;
list-style:none;
float:right;
width:50%;
display:inline;
}
.homeblog7-box a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-left:1px solid #111;
padding:0 32px 0 15px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.homeblog7-box a:nth-child(even) {
border-left-width:0;
}
.homeblog7-box a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
right:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.homeblog7-box a:hover:before {
background-position:50% 100%;
}
.homeblog7-box .social-rss:before {background-image:url('img/social_rss.png');}
.homeblog7-box .social-facebook:before {background-image:url('img/social_facebook.png');}
.homeblog7-box .social-twitter:before {background-image:url('img/social_twitter.png');}
.homeblog7-box .social-google:before {background-image:url('img/social_google.png');}
.homeblog7-box a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.homeblog7-box input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.homeblog7-box input:checked + label:before {
content:attr(data-focus);
}
.homeblog7-box input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.homeblog7-box input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>
<div class="homeblog7-box">
<input type="checkbox" />
<label data-default="شارك هذه التدوينة!" data-focus="كن على تواصل معنا ليصلك جديد المدونة..."></label>
<ul>
<li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
<li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="social-google" href="#" target="_blank">Google+</a> <a href='http://homeblog7.blogspot.com' title='تصميم| هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a></li>
</ul>
</div>

- ملاحظة : إذا أردت تركيب الإضافة تحت كل تدوينة ضع تعليقك هنا .

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .