اضف زر تحميل احترافي متحرك الى مواضيع مدونتك

السلام عليكم ورحمة الله وبركاته, في هذه التدوينة اردت ان اقدم لكم طريقة سهلة وجميلة جدا لاضافة زر داونلود او زر تحميل لمواضيع المدونة, لذلك لن تحتاج الكثير من الجهد في هذه الطريقة.

بالبداية يجب عليك فتح مدونتك والذهاب الى قالب المدونة, ثم تضغط على تحرير HTML

ثم تقوم بالبحث عن الوسم التالي

</head>

ثم نقوم بلصق هذا الكود قبل الوسم هيد الذي بحثنا عنه

<style>/* Download Button */ .downloadbutton {margin:20px auto;padding:20px 0;width:200px;} .downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700; font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center; text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;} .downloadbutton a:hover {background:#ddd;} .downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal; padding:8px;margin-left:-12px;margin-right:6px;} .downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase; font-weight:bold;} .downloadbutton .up {background:#8493A0;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;} .downloadbutton .down {margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;} .downloadbutton .down:before {content:"\f14a";font-family:FontAwesome;font-weight:normal; margin-right:6px;color:#aaa;} .downloadbutton:hover .up {opacity:1;transform: translate(0,0);} .downloadbutton:hover .down {opacity:1;transform: translate(0,-90px);} .demobutton {margin:20px auto;padding:20px 0;width:200px;} </style>

ثم نقوم بعمل حفظ للقالب, ونذهب الى البوست او الموضوع الذي نريد كتابته, وبعد كتابة الموضوع او التدوينة نقوم بالتحويل من محرر الكتابة من " مؤلف أو Compose " إلي HTML .

ونلصق الكود التالي في المكان الذي تريد ان يظهر به زر التحميل 

<div class="downloadbutton"><a href="http://www.ismoothblog.com/p/download.html" rel="nofollow" target="_blank">Download</a><br /><span class="up">Download Section</span><br /><span class="down">Click Here</span></div>

هكذا يمكنك اضافة زر جميل ومتحرك بتقنة CSS الى مواضيع مدونتك, لتفهم الموضوع بشكل اكبر يجب عليك مشاهدة هذا الفيديو

          

By mvp

Similiar tagsبلوجر