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

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

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

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

طريقة اضافة الكود

1. اذهب لادارة المدونة واختار "المظهر" ثم " تعديل Html ".

2. اضغط من الكيبورد على " 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)}}

3. ابحث عن " </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>}

4. ابحث عن هذه الوسم "</head>" وانسخ الكود الاسفل وقم بلصقه اعلاه.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

كود الازرار شرح تفصيلي طريقة الاضافة والتعديل.

5. اذهب لتحرير الموضوع واختار "HTML".

6. انسخ الكود الاسفل ولصقه في الاخير.

<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>