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

اضافة كود المعاينة والتحميل وشراء الان واتصل بنا في مدونة بلوجر

من اجمل الاكواد للتركيب على مقالات بلوجر وتنسيق ازرار الكود مع الروابط الخارجية والداخلية بشكل جميل. 

بلوجر - كود المعاينة والتحميل وشراء الان واتصل بنا

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

    المعاينة الحية   

معاينة

تحميل

شراء الان

اتصل بنا

طريقة اضافة الكود اذهب لادارة المدونة واختار "المظهر" ثم " تعديل 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 لازالة النقاط 

 الى اللقاء