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

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

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

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

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