اضافة ازرارالتحميل و المعاينة بشكل احترافي

اليوم اتينا لكم باضافة تعتبر من افضل الاضافات و التي هي اضافة ازرارالتحميل و المعاينة  بشكل احترافي

اذن بدون اطالة 

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

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://almojtahid159753.blogspot.com/">معاينة</a><span class="up">انقر للعرض</span></div>
<div class="whitebutton"><a href="http://almojtahid159753.blogspot.com/">تحميل</a><span class="up">انقر للعرض</span><span class="down"> 1.6MB .rar </span></div></div>

 و استبدل رابط المدونة بالرابط الذي ترغب بالانتقال اليه

المصدر المجتهد للمعلوميات