إضافة أزرار المشاهدة بتقنية CSS و HTML 5 لمدونات بلوجر

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

اليوم سوف أقوم بشرح طريقة تركيب أزرار المشاهدة بتقنية CSS و HTML 5  بناء على طلب الأخوة والأخوات 

تابعوا معي طريقة التركيب .

لمشاهدة الإضافة

- طريقة التركيب : 

1- ادخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع كود الإضافة فوقه .

1- الزر الأول :

الكود

.homeblogger {
width: 110px;
height: 25px;
background: #990000;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.homeblogger:hover {
background: #cc0000;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.homeblogger a {
color: #fcfcfc;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

4- عندما تريد أن تستخدم الزر في مشاركة معينة أستخدم الكود التالي في وضعية HTML كما بالصورة التالي :

الكود

<div class="homeblogger"><a href="رابط صفحة المشاهدة" target="blank" rel="nofollow">&#9776; مشاهدة مباشرة</a></div>

2- الزر الثاني :

الكود

.homebloggera {
width: 110px;
height: 25px;
background: #9dea4f;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.homebloggera:hover {
background: #BBFD12;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.homebloggera a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

- الكود المستخدم بالمشاركة بوضعية HTML :

<div class="homebloggera"><a href="رابط صفحة المشاهدة" target="blank" rel="nofollow">&#9776; مشاهدة مباشرة</a></div>

3- الزر الثالث :

الكود

.homebloggerb {
width: 110px;
height: 25px;
background: #176ee8;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.homebloggerb:hover {
background: #458bed;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.homebloggerb a {
color: #f7f8fa;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

- الكود المستخدم بالمشاركة بوضعية HTML :

<div class="homebloggerb"><a href="رابط صفحة المشاهدة" target="blank" rel="nofollow">&#9776; مشاهدة مباشرة</a></div>

4- الزر الرابع :

الكود

 .homebloggerc {
width: 110px;
height: 25px;
background: #0b9e2d;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.homebloggerc:hover {
background: #10e641;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.homebloggerc a {
color: #ffffff;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

- الكود المستخدم بالمشاركة بوضعية HTML :

<div class="homebloggerc"><a href="رابط مشاهدة الصفحة" target="blank" rel="nofollow">&#9776; مشاهدة مباشرة</a></div>

5- الزر الخامس :

الكود

 .homebloggerd {
width: 110px;
height: 25px;
background: #090909;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.homebloggerd:hover {
background: #3a3a3a;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.homebloggerd a {
color: #990000;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

- الكود المستخدم بالمشاركة بوضعية HTML :

<div class="homebloggerd"><a href="رابط صفحة المشاهدة" target="blank" rel="nofollow">&#9776; مشاهدة مباشرة</a></div>

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