بسم الله الرحمن الرحيم
أزرار المتابعة لمدونات بلوجر تعطى شكل أنيق
لمدونتك وتظهرها إحترافية أكثر الكود يضم
لوحة التحكم - القالب - إستخدم f3 وإبحث عن هذا الكود
]]></b:skin>
وضع الكود التالى قبلة مباشرة
.socialw {
width: 236px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: 100%;
}
#social1 {
border: 1px solid #292929;
width: 37px;
height: 62px;
margin-left: 1px;
float: left;
overflow: hidden;
}
#social2,#social3,#social4,#social5 {
border: 1px solid #292929;
width: 37px;
height: 62px;
float: left;
margin-left: 10px;
overflow: hidden;
}
/* ANIMATIONS */
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate.queue {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.animate.queue2s {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.animate.queue3s {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.animate.queue4s {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-100px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-100px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
الخطوة الثانية والأخيرة
من التخطيط وإختر إضافة اداة جافاسكريبت وضع بها الكود التالى
<!-- http://mdwanblog.blogspot.com/ !-->
<div>
<!-- Dribbble !-->
<a href="http://dribbble.com/إسم الحساب" target="_blank">
<div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
</a>
<!-- Dribbble !-->
<!-- Behance !-->
<a href="http://behance.com/ إسم الحساب " target="_blank">
<div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
</a>
<!-- Behance !-->
<!-- Facebook !-->
<a href="http://facebook.com/ إسم الحساب " target="_blank">
<div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
</a>
<!-- Facebook !-->
<!-- Twitter !-->
<a href="http://twitter.com/إسم الحساب" target="_blank">
<div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
</a>
<!-- Twitter !-->
<!-- Intagram !-->
<a href="http://instagram.com/ إسم الحساب " target="_blank">
<div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
</a>
<!-- Instagram !-->
</div>
<!-- http://mdwanblog.blogspot.com/ !-->
مع تغيير اللون الأحمر بروابط حساباتك
