اضافة كود المعاينة والتحميل وشراء الان واتصل بنا في مدونة بلوجر
من اجمل الاكواد للتركيب على مقالات بلوجر وتنسيق ازرار الكود مع الروابط الخارجية والداخلية بشكل جميل.
 |
| بلوجر - كود المعاينة والتحميل وشراء الان واتصل بنا |
تابع كيفية اضافة كود زر التحميل وزر المعاينة في بلوجر بطريقة احترافية..
المعاينة الحية
طريقة اضافة الكود اذهب لادارة المدونة واختار "المظهر" ثم " تعديل Html " الان اضغط من الكيبورد على " Ctrl+F " وابحث عن " ]]></b:skin> " انسخ الكود الاسفل وقم بلصقه اعلاه.
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demobtn {display:inline-block;position:relative;font-family:'Droid Arabic Kufi', sans-serif;font-size:15px;margin:0 3px;background:#3498db;color:#fff!important;padding:9px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.demobtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.demobtn:before {content:'\f1d8';display:inline-block;vertical-align:top;margin-right:10px;margin-top:5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;float: left;}
.downloadbtn {display:inline-block;position:relative;font-family:'Droid Arabic Kufi', sans-serif;font-size:15px;margin:0 3px;background:#4cacee;color:#fff!important;padding:9px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.downloadbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.downloadbtn:before {content:'\f019';display:inline-block;vertical-align:top;margin-right:10px;margin-top:5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;float: left;}
.buynowbtn {display:inline-block;position:relative;font-family:'Droid Arabic Kufi', sans-serif;font-size:15px;margin:0 3px;background:#71DB00;color:#fff!important;padding:9px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.buynowbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.buynowbtn:before {content:'\f07a';display:inline-block;vertical-align:top;margin-right:10px;margin-top:5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;float: left;}
.contactbtn {display:inline-block;position:relative;font-family:'Droid Arabic Kufi', sans-serif;font-size:15px;margin:0 3px;background:#ecac00;color:#fff!important;padding:9px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.contactbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.contactbtn:before {content:'\f003';display:inline-block;vertical-align:top;margin-right:10px;margin-top:5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;float: left;}
.ripplelink{position:relative;overflow:hidden;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.animate{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}
@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
اضافة الكود الثاني ابحث عن " </body> " وانسخ الكود الاسفل وقم بلصقه اعلاه.
<script type='text/javascript'>
//<![CDATA[
$(function(){var t,i,s,e;$(".ripplelink").click(function(h){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(i=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:i,width:i})),s=h.pageX-$(this).offset().left-t.width()/2,e=h.pageY-$(this).offset().top-t.height()/2,t.css({top:e+"px",left:s+"px"}).addClass("animate")})});
//]]>
</script>}
اضافة الكود الثالث ابحث عن هذه الوسم " </head> " وانسخ الكود الاسفل وقم بلصقه اعلاه.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
الكود الرابع والاخير شرح تفصيلي طريقة الاضافة والتعديل.
اذهب لتحرير الموضوع واختار " HTML "
قم بنسخ الكود الاسفل ولصقه في الاخير.
<div style="text-align: center;">
<ul class="button">
<li><a class="demobtn ripplelink" href="https://cnetjo.blogspot.com/">معاينة</a></li>
<li><a class="downloadbtn ripplelink" href="https://cnetjo.blogspot.com/">تحميل</a></li>
<li><a class="buynowbtn ripplelink" href="https://cnetjo.blogspot.com/">شراء الان</a></li>
<li><a class="contactbtn ripplelink" href="https://cnetjo.blogspot.com/">اتصل بنا</a></li>
</ul>
</div>
<div class="clear"></div>
الان نقوم بالرجوع للتحرير
يجب عليك ازالة جميع النقاط الموجودة بجانب رقم 1 تابع..
حدد على الكلمة الموجودة بجانب رقم 2
اضغط على هذه الايقونة رقم 3 لازالة النقاط
الى اللقاء
لا تقرأ وترحل .. شارك قول رأيك
0 تعليقات:
لتضمين -رابط- نص قابل للنقر إستعمل:
لتضمين شريحة صور إستعمل:
لتضمين إقتباس فقرة إستعمل:
لتضمين فيديو من يوتيوب إستعمل: