اضافة أزرار المعاينة والتحميل والشراء واتصل بنا في مدونة بلوجر
أفضل الاكواد للتركيب داخل مقالات بلوجر وربط الأزرار مع الروابط الخارجية والداخلية بشكل جميل وجذاب.
- الطريقة الصحيحة لإضافة الكود:-
- اذهب لادارة المدونة واختار "المظهر" ثم " تعديل 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)}}
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>
7. قم الان بالرجوع لوضع التأليف
يجب عليك ازالة جميع النقاط الموجودة بجانب كلمات الازرار(تحميل،شراء....الخ)
8.عليك الان تغيير الروابط إما بالرجوع إلى وضع html وتغيير الروابط أو بالبقاء في وضع التأليف وتحديد الكلمة مثل (تحميل،شراء،.....)والضغط على علامة دمج رابط من لوحة تحرير بلوجر بالأعلى واستبدال الرابط بالرابط الذي تريده.
Comments: 0
(يمكنك التعليق برابط صورة او فيديو)