فور عربى

تصفح موقعنا للحصول على اضافات بلوجر وقوالب بلوجر مجانية واستمتع بتقييم روايات ومانهوا واكتشف بدائل ادسنس المثيرة للاهتمام.

بحث هذه المدونة الإلكترونية

الخميس، 19 مارس 2020

الخميس، 19 مارس 2020
إضافات بلوجر إحترافية

إضافات بلوجر إحترافية

القسم : اكواد جاهزة المشاركات بلوجر
اضافات بلوجر احترافيه

اكواد و اضافات بلوجر احترافية و المميزة
أحدث و اهم اكواد و اضافات بلوجر احترافية و المميزة تجدها هنا



.





1- مصمم ادوات بلوجر الاحترافي اضفه الان لمدونتك 

معاينة الإضافة من هنا ↓
اضغط للمعاينه


طريقة تركيب الاضافه تابع الاتي ↓

  • أذهب إلى لوحة التحكم >> التخطيط >> اضافة الاداة Html/javascript .
  • ثم اضف فوقه الكود التالي

<!doctype html>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.share43 {
position: fixed;
bottom: 20%;
left: 0px;
width: 80px;
height: 80px;
z-index: 3000;
}
.togglesh43 {
position: absolute;
top: 0;
left: -2px;
width: 100%;
height: 100%;
background: #e91e63;
transform: scale(0.95);
overflow: hidden;
border-radius: 2px;
z-index: 1000;
cursor: pointer;
}
.togglesh43:before {
content:'\f13b';
font-family:fontAwesome;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
line-height:80px;
color:#fff;
font-size:55px;
}


.togglesh43.active:before {
content:'\f00d';
}
.modal43 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow: hidden;
outline: 0;
z-index: 999;
}
</style>
<div class="share43">
<div class="togglesh43" onclick="myFunction43()" ></div>
</div>
<div id="id01sh" class="modal43">
<iframe class="far43" src="https://i4codes.blogspot.com/p/blog-page_14.html" style="
width: 100%;
height: 100%;
border: 0px;
" >
</iframe>
</div>
<script>
function myFunction43() {
var x = document.getElementById("id01sh");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('id01sh');


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
$(document).ready(function(){
$('.togglesh43').click(function(){
$('.togglesh43').toggleClass('active');
$('ul').toggleClass('active');
});
});
</script>
</!doctype>




واخيرا مبروك عليك الاضافه ♥

2- زر الصعود لاعلي


فى هذه التدوينة سوف اشارككم اضافة جديدة جميلة لمدونات البلوجر وهى اضافة زر الصعود الى اعلى على شكل صاروخ بطريقة أحترافية ومنظر جمالي جدا وتنسيق ممتاز , فهذه الاضافة مهمة لأى مدونة وبالذات المدونات التى بها محتوى التدوينة كبير كمدونات الاخبار والمقالات ... إالخ فهى تقوم بنقل الزائر من الجزء الذى هو به بالصفحة الى أعلى الصفحة وبهذا فهي توفر عناء الزائر والمتابعين وتسهل عليهم تصفح مدونتك غير أنها تضيف لمسه جمالية لمدونتك وتعطيها بريقا وتميزها عن الأخرين.

للمعاينة قبل البدء



شرح تركيب الاضافة

  • ندخل الى لوحة التحكم فى بلوجر
  • من ثم نحتار القالب
  • ونختار تحرير Html ونبحث عن ]]></b:skin> ونضيف قبله هذا الكود

/* Back to Top Roket meluncur by Eslam Tiger From Abu-iyad.com*/
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

ومن ثم نبحث عن </body> ونضيف قبله هذا الكود
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>



وقم بحفظ القالب ومبروك عليك الأضافة والشكل الرائع الجديد لمدونتك .



واخيرا مبروك عليك الاضافه ♥

ليست هناك تعليقات:

شارك مع اصدقائك:

جميع الحقوق محفوظة لــ فور عربى ©