اضافة ازرار معاينة وتحميل بشكل احترافي
بسم الله الرحمن الرحيم
و
سلام عليكم ورحمت الله وباركاتو
هذا ازرار معاينة وتحميل
اضافة ازرار معاينة وتحميل الاحترافية - اليوم معنا درس من اجمل دروس بلوجر
والذي يحتاج كثير من المدونين
و
يمكن ان تستخدم في اكثر من شيء في المدونة مثل معاينة قوالب بلوجر و اضافة روابط التحميل بدلا من وضعها كلمة مثل
(اضغط هنا لتحميل) ليس جميل لمدونتك
و
تجعل مدونتك اجمل من قبل بكثير
طريقة التركيب
1- قم بذهاب الى لوحة تحكم المدونة
2- اختر قالب
3- ثم انقر على تحرير HTML
ابحث عن كلمة </head> واضف كود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
ثم ابحث عن كلمة ]]></b:skin> واضف كود التالي فوقه
/* Custom Button */
.whitebutton {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebutton a {
background: #fff;
color: #666;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Droid Arabic Kufi',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
}
.whitebutton a:before {
content: '\f019';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -90px;
margin-right: 30px;
}
.whitebutton span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebutton .up {
background: #e25734;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down {
margin: -30px auto;
opacity: 0;
border-radius: 5px 5px 0 0;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down:before {
content:'\f14a';
font-family: FontAwesome;
font-weight: normal;
margin-left: -6px;
color: #aaa;
}
.whitebutton:hover .up {
opacity: 1;
transform: translate(0,0);
}
.whitebutton:hover .down {
opacity: 1;
transform: translate(0,-90px);
}
.whitebuttondemo {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebuttondemo a {
background: #e25734;
color: #fff;
display: block;
font-size: 17px;
font-weight: 700;
font-family:'Droid Arabic Kufi',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
transition: 350ms;
}
.whitebuttondemo a:before {
content:'\f002';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -90px;
margin-right: 30px;
}
.whitebuttondemo a:hover {
color: #fff;
}
.whitebuttondemo span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebuttondemo .up {
background: #444;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebuttondemo:hover .up {
opacity: 1;
transform: translate(0,0);
}
كيفية اضافة الازرار في الموضوع
عند كتابة موضوع نتقل الى HTML و وضع كود التالي مثل (وضح في صورة)
هذا كود معاينة
<div class="whitebuttondemo">
<a href="http://omarcom0.blogspot.com//">معاينة</a>
<span class="up">انقر للعرض</span></div>
وهذا كود تحميل
<div class="whitebutton">
<a href="http://omarcom0.blogspot.com/">تحميل</a>
<span class="up">انقر للعرض</span>
<span class="down"> 1.6MB .rar </span></div>
</div>
الاستخدام كود
استبدل رابط مدونتي بالرابط الذي تريده اليه عند الضغط
استبدل كلمة معاينة بالكلمة التي تريدها
استبدل كلمة تحميل بالكلمة التي تريدها
استبدل كلمة انقر للعرض بالكلمة التي تريدها
استبدل حجم 1.6MB.rar بحجم الملف التي تريدها
