زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
اليوم سوف أتطرق إلى إضافة يبحث عنها الجميع وقد صممتها بطريقة إحترافية
- صورة الإضافة قبل الضغط على السهم
- صورة التأثير بعد الضغط على السهم
الإضافة شباب في قمة الروعة والإحترافية ، نأتي الآن إلى طريقة التركيب :
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>
- ملاحظة : إذا أردت تركيب الإضافة تحت كل تدوينة ضع تعليقك هنا .
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
ليست هناك تعليقات:
إرسال تعليق