زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
اليوم سوف أتطرق إلى درس جديد " كيفية إضافة زر الدانلود وز مشاهدة اليوتيوب وز الإعدادات "
وهذه الأزرار الكثير من المدونين يحتاجونها في شرحهم لبعض المواضيع من أجل توجيه الزائر إلى موقع التحميل أو من أجل مشاهدة فيديو ما أو من أجل قرأة شرح ما .
سوف أبدأ بشرح طريقة تركيب هذه الأزرار .
1- أدخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- ضع الكود التالي فوقه :
#animationcss .pure {
background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width: 80px;
line-height:80px;
margin:10px auto 0;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}
#animationcss a span {
display:none;
}
#animationcss:hover a span {
display:inline;
}
#animationcss a span {
font-size:1.4em;
}
#animationcss:hover .pure {
width:420px;
}
#animationcss .demo {
background-position:0 -80px;
}
#animationcss .info {
background-position:0 -160px;
}
#animationcss .download {
background-position:0 0;
}
- بعد ذلك أستخدم هذه الأكواد عند إعداد أي مشاركة تحتاج إي زر من هذه الأزرار ، اللصق الكود الذي تحتاجه في المشاركة في صندوق HTML :
1- كود مشاهدة اليوتيوب :
<div id="animationcss">
<a href="رابط مشاهدة اليوتيوب" class="pure demo"><span>إضغط هنا لمشاهدة اليوتيوب</span></a>
</div>
2- كود الدانلود :
<div id="animationcss">
<a href="رابط التحميل" class="pure download"><span>إضغط هنا للتحميل</span></a>
</div>
3- كود الإعدادات أو التوجيه إلى شرح ما :
<div id="animationcss">
<a href="رابط التوجيه" class="pure info"><span>إضغط هنا لمتابعة الشرح</span></a>
</div>
- شاهد طريقة التركيب عن طريق الفيديو :
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
ليست هناك تعليقات:
إرسال تعليق