12:33 متحميل لعبة Watch Dogs الاصلية مجاناً لفترة محدودة

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

طريقة تركيب ازرار التحميل والمعاينة:

الشكل الأول:

1- قم بالدخول الى المظهر ثم تحرير HTML.
2-  بمساعدة الكيبورد اضعط على Ctrl + f وقم بالبحث عن الوسم  ]]>  وضع الاكواد التالية فوقه مباشرة.

/* ------ Buttons ------ */ .post-body a.sq-button{text-decoration:none;line-height:1.5em;color:#ffffff;background:linear-gradient(45deg,#0088ff,#9e44c9)} .post-body a.sq-button.sm{padding:2px 15px} .post-body a.sq-button.md{padding:5px 15px;font-size:16px} .post-body a.sq-button.lg{padding:5px 15px;font-size:20px} .post-body a.sq-button.xl{padding:10px 30px;font-size:22px} .post-body a.sq-button:hover{-webkit-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);-moz-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)}

3- بعد وضع الكود قم بضغط على حفظ المظهر.

4- الآن عند كاتابتك موضوع جديد او مشاركة جديدة تريد ان تضع عليها زر التحميل و المعاينة ماعيك سوي نسخ الكود التالي ووضعه في HTML  وتحدد المكان الذي تريد ان تظهر فيه الازرار كما في الصورة التالية.

زر صغير: <a href="#" class="sq-button sm">عنوان الزر</a>زر متوسط: <a href="#" class="sq-button md">عنوان الزر</a>زر كبير: <a href="#" class="sq-button lg">عنوان الزر</a>

5- غير # برابط الذي تريد

الشكل الثاني:

1- قم بالدخول الى المظهر ثم تحرير HTML.
2-  بمساعدة الكيبورد اضعط على Ctrl + f وقم بالبحث عن الوسم  ]]>  وضع الاكواد التالية فوقه مباشرة.

#wrap { margin: 20px auto; text-align: center; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { b

3- بعد وضع الكود قم بضغط على حفظ المظهر.

4- الآن عند كاتابتك موضوع جديد او مشاركة جديدة تريد ان تضع عليها زر التحميل و المعاينة ماعيك سوي نسخ الكود التالي ووضعه في HTML  وتحدد المكان الذي تريد ان تظهر فيه الازرار.

<div id="wrap"><a href="#" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span></a><a href="#" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span></a></div>

الشكل لثالث:

1- قم بالدخول الى المظهر ثم تحرير HTML.
2-  بمساعدة الكيبورد اضعط على Ctrl + f وقم بالبحث عن الوسم  وضع الاكواد التالية فوقه مباشرة.

<style>/* Button ----------------------------------------------- */ .button-group, .text-center, .center { text-align: center; margin:15px 0; font-size:13px; letter-spacing:0px; } newbutton, input[type="newbutton"], input[type="reset"], input[type="submit"], .newbutton, a.newbutton { position: relative; width: auto; font-weight: normal; line-height: normal; color: #fff !important; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.2); background-color: #78cd51; border-color: #78cd51; box-shadow: 0 4px #5da13f; border-radius:5px; padding:8px 18px; cursor: pointer; margin-right:15px; font-family: DroidKufi-Bold; font-size: 12px; } .newbutton.download:hover, .newbutton.demo:hover, .newbutton.link:hover { background:#6dbb4a; } .newbutton.download:active, .newbutton.demo:active, .newbutton.link:active { background-color:#69b646; box-shadow: 0 -2px #5da13f; padding:6px 18px 12px !important; } .newbutton.download:before {content:"\f019"} .newbutton.demo:before {content:"\f06e"} .newbutton.link:before {content:"\f074"} .newbutton.link:before, .newbutton.demo:before, .newbutton.download:before{font-family:'FontAwesome';font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 6px;font-size:16px;color:#529534;text-shadow:0 1px 0 rgba(255,255,255,.1)}

3- بعد وضع الكود قم بضغط على حفظ المظهر.
4- الآن عند كاتابتك موضوع جديد او مشاركة جديدة تريد ان تضع عليها زر التحميل و المعاينة ماعيك سوي نسخ الكود التالي ووضعه في HTML  وتحدد المكان الذي تريد ان تظهر فيه الازرار.

<a class="newbutton demo" href="http://lmnol.blogspot.com" target="_blank">معاينة</a> <a class="newbutton download" href="http://lmnol.blogspot.com" target="_blank">تحميل</a>

الشكل الرابع:

1- قم بالدخول الى المظهر ثم تحرير HTML.
2-  بمساعدة الكيبورد اضعط على Ctrl + f وقم بالبحث عن الوسم    وضع الاكواد التالية فوقه مباشرة.

<style>.TIMbutton{padding:15px;margin:15px;width:100%;text-align:center} .TIMdownload{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background:linear-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)} .TIMdownload:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards} .TIMdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px} .TIMdemo{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background:linear-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)} .TIMdemo:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards} .TIMdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-left:10px} @keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}} </style>

3- بعد وضع الكود قم بضغط على حفظ المظهر.
4- الآن عند كاتابتك موضوع جديد او مشاركة جديدة تريد ان تضع عليها زر التحميل و المعاينة ماعيك سوي نسخ الكود التالي ووضعه في HTML  وتحدد المكان الذي تريد ان تظهر فيه الازرار.

<div class="TIMbutton"> <a class="TIMdemo" href="#" target="_blank">معاينة</a> <a class="TIMdownload" href="#" target="_blank">تحميل</a></div>

وبهذا نكون اكملنا شرح اليوم اتمني ان ينال أعجابكم ولاتنسوآ ترك تعليق تحفيزي لنا لما نبذلة من جهد في تقديم محتوي يفيدكم واتمني منكم مشاركة الموضوع لكي يستفيد الجميع ان شاء الله واذا واجهتك اي مشكلة فلاتتردد بترك تعليق لنا وسيتم الرد عليك في اقرب وقت ان شاء الله .