مدوّن ويب

إضافة ازرار مشاركة الموضوع عبر مواقع التواصل مع عداد في بلوجر

2017-11-21T11:44:00.000-08:00

السلام عليكم ورحمة الله تعالى وبركاته

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

لمشاهدة العرض التوضيحي

للمعاينة

خطوات إضافة أزرار مشاركة الموضوع عبر مواقع التواصل

تابع معي ...

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة احتياطية للقالب الخاص بك منعاً لحدوث أي أخطاء
لمن لا يعرف كيفية أخد نسخة إحتياطية للقالب الخاص به من هنا

أولا - توجه الى لوحة تحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + f من لوحة المفاتيح

]]></b:skin>

4 - أضف الكود التالي قبله (فوق)

/* Jumbo Social Share Bar By El3araby Web*/
<link href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C800%2C700&ver=1.0' id='googlewebfont-css' media='all' rel='stylesheet' type='text/css'/>
#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S7Q-13g-uf9vCZRhzyfknhP8qiu8D3hZpusDGlz6JUNbxaX56vMAc1JgpB6R-dBmJNfDHPmwRZ-PBaMZEgUmMdVQzTg4rU3yRVVCOCXBIWbExUvFEg-5lDVw2HnexzHGoaM2Lp8-1bQ/s1600/diagonal.png) no-repeat 100% 50%;
);
}
.sharrre .count {
color:#7fc04c;
font-weight: bold;
display:block;
font-size:50px;
position:relative;
text-align:center;
text-decoration:none;
width:100px;
line-height: 40px;
padding: 0;
}
.sharrre .share {
color:#666;
display:block;
font-size:10px;
height:10px;
text-align:center;
text-decoration:none;
width:100px;
padding: 0;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
width: auto;
height: auto;
margin: 0 8px 0 -5px;
vertical-align:middle
}
#socialshare{
display:inline-block;
vertical-align: middle;
text-align: center;
color:#ffffff;
font-size:16px;
padding:14px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
#socialshare:active {
padding: 15px 20px 15px 20px;
margin-bottom: -1px;
}
#socialshare:hover{
opacity: 0.9;
}
.share-toggle{
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
vertical-align:middle;
}
#expand-social{
display:inline-block;
position:relative;
vertical-align:middle;
height: 53px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.expand {
box-shadow: 0px 3px 0px 0px #c5bebe;
background:#cdcccc;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 200%;
}
.expand:active {
box-shadow: 0px 1px 0px 0px #c5bebe;
height: 41px;
margin-bottom:-1px;
}
.expand:hover {
opacity:0.9;
}
.expand-minus{
display:none;
}
.socialshare2 {
width:50px;
height:50px;
display:inline-block;
}
.socialshare2:active {
height:51px;
margin-bottom:-1px;
}
.socialshare2:hover {
opacity:0.9;
}
.ubhfacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.ubhfacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.ubhtwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.ubhtwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.ubhgoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaIlljIloAB25qpvea0o0Nx-vwq3PRL8S2v_W9u4O-d5SfG2FNduf-cOcor7Xa_tljUsW6sHNKY9jG5UYEyxIgwiCs2vVC4Lk3e1j6_XiDlgzKE7yLVcxrePouS_G4L_v2qL1RSM8lkgo/s20/g+.png) no-repeat center;
}
.ubhgoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.ubhlinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznLd9ZMCpYn65t_0AB94OhzBcw2JjsuMXOma7St-V71J-hY23IZQxvmALY69PCHohrGgoOGj_sxtBEAwjOgmnW1lG0_8lmgY_tM5DDqh8WN5EmxIw0EFxwngj0a8b9oFhyphenhyphenCZD-lnbMSI/s20/in.png) no-repeat center;
}
.ubhlinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}
.ubhpinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOqm0d_WWI8fypv4rcMoy8u86MhDQDVok8UlVQQ-jqPprewTkOpPmOLc95Gv4yf7BiW74Vfd6kF_opon7H6ymCTdOReBP43p7S72NgKjWlK3QjAHWZQ5f8wPQDUljczpS9IO64NKnlDw/s20/pinterest.png) no-repeat center;
}
.ubhpinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.ubhstumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvQ5ofWvqyJu4wi2XLs1P5ZNwKgVDnBbdcgR0vHKbWQnkkpcN21FXVnzMjvb3YyXF52MFV2HdIMXzOIrojs3CcuAEZsx9KgkEczG2FYblVhPNDmU3UjKP6NLdcYYmMLsR_9rpcO-MXiw/s20/stumble.png) no-repeat center;
}
.ubhstumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}

5 - إبحث عن الشفرة التالية

<div class='post-footer-line post-footer-line-1'>

6 - وأضف الكود التالي قبلها (فوق)

<b:if cond='data:blog.pageType == "item"'>
<div class='social-div'>
<div id='sharrrrre'>
<div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-bottom: 20px;'>
<a class='ubhfacebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>
Share on Facebook
</a>
<a class='ubhtwitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>
Share on Twitter
</a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 ubhgoogle-plus' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhlinkedin' data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' target='_blank'>
</a>
<a class='socialshare2 ubhstumbleupon' data-title='Stumble-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhpinterest' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle('expand-social');'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
</div>
</b:if>

7 - وأخيرا إبحث عن هذا الوسم

</body>

8 - أضف الكود التالي قبله (فوق)

<script src='http://code.jquery.com/jquery-1.7.min.js'/>
<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
$(function(){
$('#shareme').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
stumbleupon: true,
linkedin: true,
pinterest: true
},
enableTracking: true,
enableHover: false,
});
});
</script>
<script type='text/javascript'>
function toggle(d)
{
$("#" + d).animate({width:'toggle'},400);
}
$(document).ready(function(){
$("#social-expand").click(function(){
$(".expand-plus").toggle();
$(".expand-minus").toggle();
});
});
</script>

9 - حفظ المظهر

الآن توجه لمدونتك وشاهد النتيجة

ملحوظة : قد لا تجد الشفرة <div class='post-footer-line post-footer-line-1'> في النموذج الخاص بك، لذا يرجى البحث عن أي شفرة مشابهة، كما يمكنك لصق الشفرة في أي مكان تريد عرض الأداة فيه.

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

إضافة زر التحميل بتقنية CSS3 لمدونات بلوجر بشكل أنيق

2017-11-06T07:10:00.000-08:00

السلام عليكم ورحمه الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

صورة الإضافة

لمشاهدة العرض التوضيحي

للمعاينة

خطوات إضافة زر التحميل لمدونات بلوجر

تابع معي ...

أولا توجه الى لوحة تحكم مدونتك من هنا

2 - قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي عبر الضغط على Ctrl + F

</body>.

4 - أضف الكود التالي أعلاه (فوق)

<style>
.abt-button {
margin: 50px auto;
width: 200px;
}
/* Get this button at https://el3araby-web.blogspot.com */
.abt-button a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
display: block;
font: 17px/50px Helvetica,Verdana,sans-serif;
height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.abt-button:hover .up {
margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
margin: -70px 0 0 10px !important;
}
</style>

5 - إضغط حفظ المظهر

الآن عندما تقوم بكتابة موضوع وتريد إضافة زر التحميل إضغط على تبويب HTML

وأضف الكود التالي في المكان المناسب

<div class="abt-button">
<a href="#">Download</a>
<p class="up">click to begin</p>
<p class="down">1.2MB .zip</p>
</div>

للتعديل على الإضافة

إستبدل العلامة # برابط التحميل
إستبدل Download بما تريد
إستبدل click to begin بما تريد
إستبدل 1.2MB .zip بحجم وصيغة الملف

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كيفية إضافة أزرار مواقع التواصل في الشريط الجانبي تابث في بلوجر

2017-11-05T02:15:00.000-08:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

صوة الإضافة

للمشاهدة عرض توضيحي

للمعاينة

خطوات إضافة أزرار مواقع التواصل في الشريط الجانبي

تابع معي ...

أولا - توجه الى لوحة تحكم مدنوتك من هنا

2 - " التخطيط " >> إضافة أداة " Html "

3 - ألصق الرمز التالي في الأداة.

<style>
.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6qJk3DvGWFTRtYGAUwrShKhVMvBXC7CHGTZ3vJ_OnS0Pxk_muuLx_Fe1rgdfFLWiD5BrOUTXI31EJV4m1FZHc9798swIKnmbDSS2gVjOhVkWB-zrMr4k79ImO4WcBjlg6ypqe6UalrU/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnCqgyfmLVCjuEoPODj3VCaoXPu5OcuCMy5hdT53VFXJ97X047zEzo_JR_XONkbRm-hgK-GT0mZAbHXYGGBYdCx8Xhaz0A-mvqO9xfII19Co5i4l8iHJe9wXYOBAgT8ZpP22GVRk_-AU/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wr-mS7ueM6FPvOiMytlgH-u67T7R3Jjjbmhusc2gzqHv5BA8vZQ01m7g4EJMOXJZcTiZLT8zWRppnOTkgH-Ifq7rjq8tkCsA8W2DI64NEQhKYYCtMQqf-vcvlvCzLMPSou2MJEcoGgE/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDumtnlFqQ_Qby5CkPAyMU34EVKSbq7X6ID3WHMUY4_CuFTrYimt-ywyIztm_t7wF1sj-TFCYpOUhtnmWbuCJVLI2Tp1W2IO7IqxVT4ygaALtVmNj8Adg8nBsUvF2BbyEiZp5MaVsjZs/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.fixedmenutw_1{margin:0px 0 0 43px}
.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjug63AhmLTjHmE0DdJvznfKlfSUBsAanCjTlgAHah1gaz6g5xxnzZtzM_d6aNbIiHaACGa5bgeTEEGY1k22v3AXL_Wbcrt7iam-hNxc9v5Pfjc7rFBRrNrKH_OsSmHuLEetnX2PTxzkLY/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQwE0ZZtGW4-Pu7eJ1CqDMgNDUly3ZtIC8pHDOqo1dsbOYe_H5kDMQRiwykyP3f-SSS96Q8k8x9Eq9YxYPewgbVm80GZM5fv5S6cOipL7daS1gXBAHAO-mRbuHw1ibMwv2YQWahUMIY8/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.fixedmenufb_1{margin:0px 0 0 43px}
.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XJdM6NgzO4tAZsQn8Xp-O_ygKhHQ2czGG69vc1SvaAj_Cytux3fhQSUmGkilTMnGVhp6yIEqLIt-8DBPEmVE-1NHPzKWmAQ_oo4DplpRu4wqabf6eB2FSFsHHX8hJYcPz77oDHKP9Yw/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFNqcKw7hayG78ttsmywTCVT_rhxduJI-mECyMTO9mxdWTsF8XXvIFYgqswEtqii4JK9iU7qkBFPOoC-U0htwbsZIILR3AsrN0VDJ3jrBZn-VX049qxtByWWhtMkB64M-r38_bxNm4Y8/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='fixedmenu' onmouseout='this.className='fixedmenu'' onmouseover='this.className='fixedmenu1''><div class='fixedmenu_1'>
<a href='https://www.facebook.com/mahwouss2' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTbu8fXkVSQ7b6jAv4NZTIX8eoH0T3tg4MQzIl8lNskg4KZlHQNE98pA5BeeMgbV6dawEEpccDoM9vIZ3VEavBdLHxQEIK6DgAGx6RTCboY8YPgk8ruSoGTFYBXqoCjLOuKsqUQ6O0wyo/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='fixedmenutw' onmouseout='this.className='fixedmenutw'' onmouseover='this.className='fixedmenutw1''><div class='fixedmenutw_1'>
<a href='https://twitter.com/el3arabyweb' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGHFSN4gSv6EYi2ZqXZ89kJux9blL7zrRK_vU19snKHSPCh4n0dGO3s0qv2cyOjXb-T4-fWbSVh93MQuGfFkH_dpb3ay1xB04oAGU3ewyt-9FbloiQA3615GAN0GOqPB4xgKF3ApHt8E/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='fixedmenufb' onmouseout='this.className='fixedmenufb'' onmouseover='this.className='fixedmenufb1''><div class='fixedmenufb_1'>
<a href='https://plus.google.com/u/0/collection/cnSDOE' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF1FpXRvrTbBx77Rl0DQXEiY86xACKx7UcJtNBc1HaHf1Hp0S9IdD1tQDRPshD4I5HbjEnbq-xtSsRVvU6qTd14d4v6Frr99AqWfzz8GDQd5gUG8_3V1hIB-lXQGuCjXVvMykf-LeXKrA/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='fixedmenurss' onmouseout='this.className='fixedmenurss'' onmouseover='this.className='fixedmenurss1''><div class='fixedmenurss_1'>
<a href='http://feeds.feedburner.com/blogspot/ZitkW target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzp6QstovBiYXTJ0g8kZy5EZdvQl0Lk05uSu7U1xZrZIW0ZOBtSg7wSCZ-mdOX2D2JMmDFCqPqh8ZhCy8QL46miD_ruusVwIb_x19YCPeeiUf1YE4afhiY8J1m399rfQ4STk5uYFgnCeM/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

لتعديل وتخصيص الإضافة

إستبدال mahwouss2 باسم المستخدم الخاص بك الفيسبوك

إستبدال el3arabyweb بإسم المستخدم الخاص بك في تويتر

إستبدال ID بالمعرف الخاص بك في جوجل بلاص

إستبدال blogspot/ZitkW target مع معرف فيدبورنر الخاص بك

الآن حفظ الأداة

وتوجه لمدونتك لمشاهدة النتيجة

تم بحمد الله ...

أي أسئلة أوإستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

طريقة تعطيل مانع الإعلانات أدبلوك Adblock على بلوجر

2017-11-03T10:21:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب.

أدبلوك (Adblock) هو إمتداد للمتصفحات أولويته تعطيل الإعلانات على مواقع الويب لزيادة سرعة التحميل وإظهار المحتوى الحقيقي للموقع. وأصبح الكثير من الناس يستخدمون هذه الإضافة كما ذكر المصدر Adblock الموقع الرسمي أن تمديدها يستخدم من قبل أكثر من 50 مليون شخص في جميع أنحاء العالم. وأعتقد أن هذا العدد الكبير سيؤثر بطريقة أو بأخرى على مدونتك أيضا.

لهذا سنتعرف اليوم عن كيفية إجبار زوار مدونتك على تعطيل مانع الإعلانات أدبلوك Adblock للولوج الى موقعك ومشاهدة محتواه بشكل طبيعي

لمشاهدة عرض توضيحي

للمعاينة

خطوات لإضافة مانع الإعلانات Adblock الى مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - " تخطيط " >> " إضافة أداة Html " >>

3 - الصق الشفرة التالية في الأداة وإضغط على " حفظ "

<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p><span class="boldwarn">Oops تم إكتشاف مانع الإعلانات Adblock!</span><br/>مرحبا عزيزي الزائر، لمواصلة القراءة يرجى تعطيل أدبلوك مانع الإعلانات لدعم المدونة . <br/>نشكرك على تفهّمك وتسعدنا زيارتك (العربي ويب). :) </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

4 - الآن توجه إلى قالب " المظهر " >> " تخصيص " >>

5 - ضمن علامة التبويب " خيارات متقدمة "، إضغط على " ‏إضافة CSS "

6 - الصق الشفرة التالية في المربع وإضغط على " تطبيق على المدونة "

#g207{z-index:999999;position:fixed important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{ color:#000;opacity:1;filter:none;font:bold 25px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}
.boldwarn {font-size: 40px; color:red; font-family: rawy-bold,Arial,sans-serif;}

وأخيرا توجه الى مدونتك وشاهد النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

اضافة زر الاشتراك فى يوتيوب ب4 أشكال جديدة (بلوجر)

2017-10-28T08:12:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

معاينة عرض توضيحي

خطوات تركيب زر الأشتراك فى يوتيوب على مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - التخطيط >> أضافة أداة HTML >>

3 - إختار الشكل المناسب وأضفه في أداة HTML/Javasript

الشكل الأول

الكود :

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>

الشكل الثانى

الكود :

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="full" data-count="default"></div>

الشكل الثالث

الكود :

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="full" data-theme="dark" data-count="default"></div>

الشكل الرابع

الكود :

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="full" data-count="hidden"></div>

إستبدل GoogleDevelopers بمعرّف قناتك

وإضغط حفظ

تم بحمد الله ...

أي أسئلة أو استفسار حول الموضوع لا تتردد في طرحها في تعليق

باب التعليقات مفتوح للجميع

إضافة زر الصعود إلى أعلى بشكل احترافي (بلوجر)

2017-10-26T08:51:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

إضافة زر الصعود إلى أعلى بشكل احترافي (بلوجر)

خطوات إضافة زر الصعود إلى أعلى لمدونات بلوجر

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - ثم قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F

</head>

4 - أضف قبله الكود التالي (فوق)

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5 - ثم ابحث عن الوسم التالي

]]></b:skin>

6 - أضف قبله الكود التالي (فوق)

.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}

6 - وأخيرا إبحث عن هذا الوسم

</body>

7 - ثم أضف قبله الكود التالي (فوق)

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});

$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

إضغط على حفظ المظهر

الآن توجه الى مدونتك وشاهد النيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد فى طرحها

باب التعليقات مفتوح للجميع

اضافة فوتوشوب اون لاين الى موقعك أو مدونتك

2017-10-23T07:19:00.000-07:00

السلام عليكم و رحمة الله تعالى بركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

لمشاهدة عرض توضيحي

للمعاينة

خطوات إضافة فوتو شوب أون لاين لمدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - الصفحات >> صفحة جديدة >>

3 - تحويل صندوق الرسائل من وضع تأليف الى وضع HTML

4 - أنسخ كود فوتوشوب وأضفه في خانة HTML

كود فوتوشوب أون لاين :

<iframe height="600" src="http://pixlr.com/editor/" width="100%"></iframe>

5 - أضف عنوان للصفحة ( فوتوشوب أون لاين )

ثم أنشر الصفحة

الآن توجه الى مدونتك وشاهد النتيجة

لتنسيق الإضافة

إستبدل "600" بحجم يتناسب مع مدونتك

شاهد أيضا هذا الفيديو

تم بحمد الله ...

أي أسئلة أو استفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر 4 في 1

2017-10-22T06:35:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

نقدم لكم اليوم إضافة من أقوى وأفضل إضافات بلوجر بمميزاتها الأكثر من رائعة هذه الإضافة عبارة عن صندوق المتابعة والإنضمام للمدونة في بلوجر 4 في 1، اضافة رائعة تغنيك عن الكثير من الاضافات مثل : المتابعة عبر فيس بوك وتويتر وجوجل بلس والإنضمام للمدونة ...

صورة الاضافة

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

خطوات إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - قالب (المظهر) >> تحرير HTML >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F

]]></b:skin>

4 - ثم أضف الكود التالي فوقه مباشرة

/* About Me */#HTML68 .aboutind-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}.aboutind-img{position:relative;max-height:140px;overflow:hidden}.aboutind-img img {max-width:100%;width:100%;transition:all .6s;}.aboutind-img:hover img{transform:scale(1.2) rotate(-10deg)}.aboutind-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}.aboutind-img:hover:before{background:rgba(0,0,0,0.6);}.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}.aboutind-float{text-align:center;display:table;width:100%;height:100%}.aboutind-float a{background:rgba(243,156,18,.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s}.aboutind-float:hover a{background:#404040;color:#fff;}.aboutind-float a i{font-weight:normal;margin:0 0 0 5px}.aboutind-wrpicon{display:block;margin:15px auto;position:relative;}.aboutind-wrpicon .extender{width:100%;display:block;}.extender{text-align:center;font-size:16px}.extender .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}.extender .aboutind-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}.extender .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px}.aboutind-icon.fbl a{background:#3b5998}.aboutind-icon.twitt a{background:#19bfe5}.aboutind-icon.crcl a{background:#d64136}.aboutind-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040}.extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;}.aboutind-info{margin:10px 0 0 0;font-size:13px;text-align:center;}.aboutind-info p{margin:5px 0}.aboutind-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}.aboutind-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}.aboutind-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}.aboutind-info h4:before {margin-right:-50%;text-align:left;}

5 - إبحث عن هذا الوسم

<div id='sidebar-wrapper'>

6 - وأضف الكود التالي أسفله

<b:widget id='HTML68' locked='false' mobile='no' title='إنضم إلينا' type='HTML'> <b:includable id='main'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'><div class='sidebar_about_author'><div class='inner_wrapper'><div class='aboutind-img'><img alt='العربي ويب' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-IzP56Cz5h2jKyTZAKtqtCZ6O4O7J3apD82SRoafJ1fw-UpTPhT8jwmE0_J8EI98eLaRIMWHwCcR1VsWZ40LmgE65qH4PzoHwlnrcDSB3Fpui6V_bg1Ox7BlGlExzHSyTckm2EjAIMI/s1600/florian-de-looij-4+%25281%2529.gif' title='Indzign' width='300'/><div class='aboutfloat-img'><span class='aboutind-float'><a href='https://www.blogger.com/follow-blog.g?blogID=8827414525251920223' rel='nofollow' target='_blank' title='انضم لأصدقاء الموقع'><i class='fa fa-user'/> انضم لأصدقاء الموقع</a></span></div></div></div><div class='aboutind-info'><h4><span>العربي ويب</span></h4><p>مدونة تهتم بكل ما هو جديد في عالم التقنية وأخبار الويب</p><p>انضم الينا لمتابعة جديدنا</p></div><div class='aboutind-wrpicon'><ul class='extender'><li class='aboutind-icon fbl'><a href='//www.facebook.com/mahwouss2' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook fa-fw'/> أعجبني</a></li><li class='aboutind-icon twitt'><a href='//twitter.com/el3arabyweb' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter fa-fw'/> متابعة</a></li><li class='aboutind-icon crcl'><a href='//plus.google.com/u/0/+Mohamedkhan1' rel='nofollow' target='_blank' title='انضم لنا على جوجل+'><i class='fa fa-google-plus fa-fw'/> إنضمام</a></li></ul></div></div></div></b:includable> </b:widget>

خطوات لتعديل وتخصيص الاضافة

إستبدل الرابط الملون بالبنفسجي برابط صورة تناسبك

إستبدل الرابط الملون بالاخضر بالـ ID الخاص بمدونتك

إستبدل الرابط الملون بالأزرق برابط صفحتك في فيس بوك

إستبدل الرابط الملون بالأزرق الفاتح برابط صفحتك في تويتر

إستبدل الرابط الملون بالأحمر برابط صفحتك في جوجل بلس

إستبدل الجملة الملونة بالبرتقالي بما يناسبك

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كيفية إخفاء مشاركة او رابط التحميل في مدونة بلوجر

2017-10-21T05:12:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم عن كيفية إخفاء مشاركة أو رابط التحميل في مدونة بلوجر بطريقة بسيطة وإحترافية، هذه الإضافة تجبر زوار مدونتك على مشاركة المحتوى الخاص بك عبر مواقع التواصل مثل facebook و twitter أو في + Google للوصول إلى المحتوى الكامل أو للحصول على رابط تحميل ملف معين.

لمعاينة الاضافة

الخطوة رقم 1 :

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة إحتياطية للقالب الخاص بك لتفادي الأخطاء فيما بعد.

لمن لا يعرف طريقة أخد نسخة إحتياطية للقالب الخاص به من هنا

لإخفاء مشاركة أو رابط التحميل في موقع بلوجر الخاص بك، يرجى إتباع الخطوات التالية بشكل صحيح

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - قالب (المظهر) >> تحرير HTML >>.

3 - تأكد من أن النموذج يحتوي على إصدار محدث من ملف jquery.min.js .

4 - إذا كان النموذج الخاص بك لا يحتوي على هذا الملف إبحث عن الوسم <head> وأضف فوقه مباشرة الكود التالي:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

5 - الآن إبحث عن الوسم التالي

</body>

6 - وأضف فوقه مباشرة الكود التالي:

<script type='text/javascript'>
//<![CDATA[
/* Facebook */
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
/* Twitter */
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
/* Google Plus */
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".secret").show();
$(".secret-share").hide();
}
});
//]]>
</script>
<style>
.secret {
text-align:center;
display:none
}

.secret-share {
padding: 20px;
text-align: center;
border: 3px solid #ddd;
background: #f8f8f8;
}
a.download-btn {
text-transform: uppercase;
font-size: 22px;
background: #7b7b7b;
padding: 10px 20px;
display: inline-block;
border: 1px solid #000000;
text-decoration: none;
color: #fff;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style>

اضغط على زر " حفظ المظهر ".

الخطوة رقم 2:

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - المشاركات >> مشاركة جديدة >>.

3 - تحويل صندوق الرسائل من وضع تأليف الى وضع HTML

4 - والصق الكود التالي :

<div class="secret">
<a class="download-btn" href="#">Download</a></div>
<div class="secret-share">
<p>شارك المقالة عبر مواقع التواصل التالية للحصول على رابط التحميل</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

5 - إستبدل # برابط التحميل.

الآن لن يظهر رابط التحميل إلا عندما يشارك المستخدمون المحتوى التابع لك عبر facebook أو Google+ أو twitter.

إذا كان لديك بعض المعرفة الترميز يمكنك تخصيصه أكثر من ذلك وفقا لإحتياجاتك.

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

طريقة إضافة محول الأكواد وأكواد آدسنس لمدونة بلوجر

2017-09-09T08:31:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

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

لمشاهدة العرض التوضيحي

للمعاينة

خطوات إضافة محول الأكواد الى مدونتك

يمكنك إضافته في صفحة ثابتة أو في أداة جديدة عبر التخطيط أو في الموضوع
لكن يفضل إضافته في صفحة ثابتة

إضافة محول الأكواد في صفحة ثابتة

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - الصفحات >> صفحة جديدة >>

3 - تحويل صندوق الرسائل من وضع تأليف الى وضع Html

4 - أضف الكود التالي

<style type="text/css">.cbt{text-align:center;display:block; Width:250px; margin-top:10px;color:#000;background: #DAD8D9;background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 );background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 );font-size:14px;line-height:16px;text-decoration:none;border:1px solid #BEBEBE;padding:4px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} .cbtn{margin-top:10px;color:#f9fcfc;background: #f74646;background: -moz-linear-gradient(top,#f74545,#F74545);background: -webkit-linear-gradient(top,#f74646,#F74545);text-decoration:none;border:1px solid #BEBEBE;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} </style> <br />
<div align="center">
<div dir="ltr" style="float: center;" trbidi="on">
<span class="google-src-text" style="direction: ltr; text-align: left;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="font-family: "israr-syria"; font-size: 15px; line-height: 20px;"><script type="text/javascript">function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;} </script></span></span></span><br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody>
<tr> <td valign="top" width="500"><div align="center">
<textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input class="cbt" onclick="convert();" onmouseout="this.className='cbt'" onmouseover="this.className='cbt cbtn'" type="button" value="إضغط هنا لتحويل الكود" /></div>
</td></tr>
</tbody></table>
</div>
</div>

5 - أضف عنوان للصفحة مثال : محول أكواد آدسنس
ثم نشر

لتنسيق الإضافة إستبدل أكواد الألوان التالية

المشار اليها بالأزرق >> أكواد لون الزر

المشار اليها بالأحمر >> أكواد لون الزر عند تمرير الماوس

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

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لاتتردد في طرحها
باب التعليقات مفتوح للجميع

إضافة المزيد من المشاركات أو التمرير اللانهائي إلى بلوجر

2017-09-07T11:59:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب.

سنتعرف اليوم على طريقة إضافة المزيد من المشاركات أو التمرير اللانهائي إلى بلوجر بطريقة سهلة وبسيطة جدا

المزيد من المشاركات أو التمرير اللانهائي هي أداة تتيح للزائرين رؤية مشاركاتك في الصفحة الرئيسية فقط عن طريق التمرير لأسفل. يعني كلما نزلت أسفل كلما ظهرت مشاركات أخرى تلقائيا .

لمعاينة الاضافة من أجل فهم أفضل

للمعاينة

الخطوات التي يجب اتباعها لتركيب الاضافة

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - ' التخطيط ' >> ' إضافة أداة Html " >>

3 - نسخ ولصق الرمز التالي في الأداة Html وانقر على حفظ

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>

الآن، توجه الى الموقع الخاص بك وشاهد النتيجة.

ملحوظة : لإزالة التمرير لانهائي فقط قم بإزالة الأداة التي أضفتها

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

تخصيص أداة التسميات ب4 أشكال أكثر إحترافية

2017-09-06T17:20:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم عن كيفية تخصيص وتغيير أداة التسميات من الشكل الإفتراضي الى أشكال أكثر أناقة وإحترافية مع شرح مفصل لطريقة تركيب الإضافة

خطوات تخصيص أداة التسميات

تابع معي ...

أولا توجه الى لوحة تحكم مدونتك من هنا

2 - قالب (المظهر) >> تحرير HTML >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl+F

]]></b:skin>

4 - أضف كود الشكل المناسب لموقعك فوقه مباشرة

الشكل الأول

/* cloud label by el3araby-web.blogspot.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

الشكل الثاني

/* cloud label by el3araby-web.blogspot.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

الشكل الثالث

/* cloud label by el3araby-web.blogspot.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#08A2FA;
border-radius: 30px;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

الشكل الرابع

/* cloud label by el3araby-web.blogspot.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

إضغط على حفظ المظهر

الآن توجه إلى التخطيط >> ثم إضافة أداة التسميات >> ثم إختار عرض سحابة

وأخيرا توجه الى مدونتك وشاهد النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

إضافة أداة إتصل بنا منبثقة احترافية 2017

2017-09-06T05:43:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

نقدم لكم اليوم إضافة من أهم إضافات بلوجر التي يحتاجها كل مدون وهي أداة إتصل بنا بحيث تساعد زوار مدونتك أو موقعك من مراسلتك والتواصل معك بسهولة تامة وذلك عبر بريدك الإلكتروني

لمعاينة أداة إتصل بنا

للمعاينة

خطوات تركيب أداة إتصل بنا منبثقة

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - التخطيط >> إضافة نموذج إتصل بنا >>

3 - قالب (المظهر) >> تحرير HTML >>

4 - إبحث عن الوسم التالي بالضغط Ctrl+F

]]></b:skin>

أو

</style>

5 - أضف الكود التالي أعلاه (فوق)

/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.floating-ai-head a:hover{background:#2588ca;color:#fff}
.floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

6 - الآن إبحث عن هذا الوسم

</body>

7 - أضف الكود التالي فوقه مباشرة

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

8 - إستبدل العبارة Contact Form بـ إتصل بنا أو تواصل معنا

9 - إضغط حفظ المظهر

الآن توجه لمدونتك وشاهد النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

اضافة سلايدر شو تلقائي احترافي بالسيدبار لمدونة بلوجر

2017-09-05T08:56:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا في هذه التدوينة على مدونتكم العربي ويب

نقدم لكم اليوم إضافة إحترافية جميلة جدا عبارة عن سلايدر جانبي بالسيدبار سهل التركيب والتعديل عليه

معاينة الإضافة

خطوات تركيب سلايدر شو بالسيدبار

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - التخطيط >> إضافة أداة Html >>

3 - أضف الكود التالي في الأداة Html

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggf9iHwhjkJUvYOpuqjoLbF8b551vb6f_5Y8qZoUGiPcpQAiogof-VfNIcB17RRyVLv3Lp-vpCzklQhyphenhyphenj9jiDRwhq50zIP15diWgOxlpqdD3E6CbklFgkZ0tt2B58vkWXK8LtWTvjqREc/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "https://el3araby-web.blogspot.com",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>

أستبدل https://el3araby-web.blogspot.com بالرابط الخاص بك

ثم إضغط حفظ الأداة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

طريقة تغيير شكل شريط التمرير الجانبي scrollbar لمدونة بلوجر

2017-09-04T12:08:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم زوار و متتبعي شروحات العربي ويب.
سنتعرف اليوم على طريقة تغيير شكل شريط تمرير الإفتراضي وما يسمى بـ scrollbar إلى شكل جميل وإحترافي وطريقة تنسيقه ليتناسب مع شكل وألوان مدونتك.

شريط تمرير الإفتراضي وما يسمى بـ scrollbar يكون على هذا الشكل

سوف نستبدل الشكل الأول بهذا الشكل

طريقة تغيير شكل شريط التمرير الجانبي scrollbar لمدونة بلوجر

تابع معي ...

أولا توجه الى لوحة التحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl+f

</head>

4 - أضف الكود التالي قبله (فوق)

<style>
::-webkit-scrollbar{width:7px;height:7px;background:#fff;}
::-webkit-scrollbar-thumb{background:#f74646;}
</style>

ثم حفظ المظهر

لتغير لون شريط التمرير
إستبدل كود اللون #f74646 بما يناسبك .

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

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

2017-08-31T18:29:00.000-07:00

السلام عليكم ورحمه الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

نقدم لكم اليوم إضافة جميلة جدا بسيطة وسهلة التركيب والتنسيق هذه الإضافة عبارة عن أزرار الويب المعاينة والتحميل بتصميم أنيق وبأشكال أكثر إحترافية بتقنية css (لجزء الثاني)

للمعــــــاينـة

خطوات تركيب أزرار الويب المعاينة والتحميل

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك من هنا

2 - قالب ( المظهر ) >> تحرير HTML >>

3 - إبحث عن الوسم التالي باستخدام الكيبورد CTRL + F

]]></b:skin>

4 - أضف الكود التالي قبله مباشرة (فوق)

#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

وإضغط حفظ المظهر

الآن عندما تقوم بكتابة موضوع وتريد إضافة أزرار المعاينة والتحميل إضغط على تبويب HTML

وأضف الكود التالي في المكان الذي تريد

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">اضغط هنا</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>

لا تنسى إستبدال # بالروابط الخاصة بك

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

طريقة تغير وتنسيق عناوين المواضيع بشكل إحترافي

2017-08-31T18:03:00.000-07:00

السلام عليكم و رحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

للمعاينة

خطوات تركيب الإضافة على مدونتك

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخد نسخة إحتياطية للقالب الخاص بك لتفادي الأخطاء في ما بعد
لمن لا يعرف طريقة تحميل نسخة احتياطية للقالب الخاص به إضغط هنا

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - قالب ( المظهر ) >> تحرير HTML >>

3 - إبحث عن الوسم التالي باستخدام الكيبورد CTRL+F

]]></b:skin>

4 - أضف قبله مباشرة الكود التالي

/*----Widget Heading Tag----*/
h3{
font-family:arial !important;
font-style:arial !important;
}
.post h3 {
color:#FFFF00;
border-left:10px solid #FFFF00;
border-right:10px solid #FFFF00;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #0000FF;
-webkit-box-shadow:0px 0px 13px #0000FF;
-moz-box-shadow:0px 0px 13px #0000FF;
}
.post h3:hover {
color:#FF0000;
border-left:10px solid #FF0000;
border-right:10px solid #FF0000;
box-shadow:0px 0px 13px #00FF00;
-webkit-box-shadow:0px 0px 13px #00FF00;
-moz-box-shadow:0px 0px 13px #00FF00;
}

لتنسيق الاضافة و تغيير الالوان لتتناسب مع مدونتك

اللون الأصفر : لون الاطار عند وقوف مؤشر الماوس

اللون الأزرق : لون حدود الاطار عند وقوف مؤشر الماوس

اللون الأحمر : لون حدود الاطار بعدم وقوف مؤشر الماوس

اللون الأخضر : لون جوانب الاطار بعدم وقوف موشر الماوس

تابع شرح تركيب وتنسيق الإضافة بالفيديو

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

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

2017-08-31T08:10:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسقد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

اليوم سوف نشرح لكم طريقة تركيب أزرار المعاينة والتحميل بشكل أنيق وإحترافي (الجزء الأول) 2017

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

خطوات تركيب أزرار العاينة والتحميل

تابع معي ...

أولا - توجه الى لوحة التحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F

]]></b:skin>

4 - ثم أضف الكود التالي أعلاه (فوق)

/* Widget by : http://el3arabi-web.blogspot.com */
================== ==================
.btn-btn2{display:table;margin:0 auto}
#wrap{margin:20px auto;text-align:center}
a.btn{display:inline-block;position:relative;text-decoration:none;font-weight:100;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#ff5722;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;border:1px solid #ff5722;line-height:25px}
a.btn:hover{background:rgb(236, 154, 128);color:#fff;box-shadow:inset 0 -50px 0 #ff5722}
a.btn::before{color:#ff5722;display:-webkit-inline-box;content:"\f06e";font-family:fontawesome;margin:0 0 0 5px}
a.btn:hover::before{color:#fff}
a.btn2{display:inline-block;position:relative;text-decoration:none;font-weight:500;background:#ff5722;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #ff5722;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;line-height:25px}
a.btn2:hover{background:#cc4014;color:#fff;box-shadow:inset 0 -50px 0 #2a4057}
a.btn2::before{color:#FFFFFF;display:-webkit-inline-box;content:"\f090";font-family:fontawesome;margin:0 0 0 5px}

5 - إضغط حفظ المظهر

الآن عندما تقوم بكتابة موضوع وتريد إضافة أزرار المعاينة والتحميل إضغط على تبويب HTML

وأضف الكود التالي في المكان المناسب

<a class="btn" href="#" rel="nofollow" target="_blank">للمعاينة</a>
<a class="btn2" href="#" rel="nofollow" target="_blank">للتحميل</a>

لا تنسى إستبدال # بالروابط الخاصة بك

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

إضافة أزرار مواقع التواصل إحترافية أسفل المشاركات في بلوجر

2017-08-29T09:58:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب.

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

خطوات إضافة أزرار مواقع التواصل أسفل عناوين المشاركات

تابع معي ...

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة احتياطية للقالب الخاص بك منعاً لحدوث أي أخطاء
لمن لا يعرف كيفية أخد نسخة إحتياطية للقالب الخاص به من هنا

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - قالب ' المظهر ' >> ' تحرير Html " >>

3 - إضغط Ctrl + F وإبحث عن الوسم التالي

]]></b:skin>

4 - ألصق الرمز التالي مباشرة قبل </b:skin>

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 25px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}
.floating-social-buttons .facebook {
background-color:#003471;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .twitter {
background-color: #00BFF3;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .googleplus {
background-color: #EA4D29;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .pinterest {
background-color:#C6393D;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}

5 - إبحث الآن عن الوسم التالي

</head>

6 - الصق هذا الرمز مباشرة قبله

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

7 - الآن إبحث عن هذا الوسم

<div class='post-header'>

8 - الصق الرمز التالي بعده

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span> Facebook</span></a></li>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span> Twitter</span></a></li>
<li><a class='googleplus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span> Google+</span></a></li>

<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/><span> Pinterest</span></a></li>
</ul>
</div>
</div>
</b:if>

تخصيص الإضافة

إذا كنت تريد الأزرار في نهاية المشاركات. قم بلصق الرمز الأخير بعد هذا الوسم (أسفل)

<div class='post-footer'>

إذا كنت ترغب في تغيير حجم الأزرار قم بتغيير القيمة 12 المشار إليها باللون الأزرق.

font: normal 700 12px/1 "Calibri", sans-serif;

إذا كنت ترغب في تغيير لون خلفية الأزرار عند مرور الماوس فوقها.
أضف الرمز التالي أسفل الرمز الأول الذي وضعناه قبل ]]></b:skin> مباشرة

.floating-social-buttons .facebook:hover {
background-color: #fff;
color: #003471;
}
.floating-social-buttons .twitter:hover {
background-color: #fff;
color: #00BFF3;
}
.floating-social-buttons .googleplus:hover {
background-color: #fff;
color: #EA4D29;
}
.floating-social-buttons .pinterest:hover {
background-color: #fff;
color: #C6393D;
}

إحفظ النموذج وانتقل إلى مدونتك لمشاهدة النتيجة.

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

طريقة اضافة اعلانات ادسنس داخل الموضوع فى مدونات بلوجر

2017-08-28T13:00:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب.

سنتعرف اليوم على أفضل طريقة لإضافة إعلانات جوجل آدسنس داخل الموضوع في أول وآخر التدوينة كما على مدونتنا

للمعاينة شاهد أول وآخر هذه التدوينة

كيفية إضافة إعلانات آدسنس داخل الموضوع

الخطوة الأولى

أولا - توجه الى لوحة التحكم الخاصة بك في جوجل آدسنس من هنا
2 - إضغط على إعلاناتي >> وحدة أعلانية جديدة >>

3- إختر الإعلانات داخل المقالة

4- ستظهر لك صفحة على هذا الشكل

5 - أضف إسم للوحدة الاعلانية >> حفظ والحصول على الشفرة >>
عند حصولك على كود الاعلان يتوجب عليك تحويله ليشتغل بشكل جيد

لتحويل شفرة إعلان آدسنس إضغط هنا

طريقة تحويل كود إعلان آدسنس سهلة جدا

فقط أضف كود الإعلان فى المربع ثم إضغط على تحويل الكود

الخطوة الثانية

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة احتياطية للقالب الخاص بك منعاً لحدوث أي أخطاء
لمن لا يعرف كيفية أخد نسخة إحتياطية للقالب الخاص به من هنا

تابع معي ...

أولا - توجه الى لوحة التحكم مدونتك من هنا

2 - قالب (المظهر) >> تحرير HTML >>

3 - إبحث عن الكود التالي عبر الضغط على Ctrl+F

<data:post.body/>

4 - ستجده عدّة مرات الأخير هو المقصود

5 - أضف الكود التالي أسفله أو فوقه

6 - أنسخ الكود الذي قمت بتحوله وأضفه في المكان المشار إليه بالأصفر

<b:if cond='data:blog.pageType == "item"'>
<div style='float:center;padding:5px;'>
<table align='center'><tr><td>
أضف كود إعلان ادسنس هنا
</td></tr></table></div>
</b:if>

7 - لإظهار الإعلان فى أول التدوينة أسفل العنوان أضف الكود في الأعلى (قبل) على هذا الشكل

<b:if cond='data:blog.pageType == "item"'>
<div style='float:center;padding:5px;'>
<table align='center'><tr><td>
أضف كود إعلان ادسنس هنا
</td></tr></table></div>
</b:if>
<data:post.body/>

8 - لإظهار الإعلان فى آخر التدوينة أضف الكود أسفل (بعد) على هذا الشكل

<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:center;padding:5px;'>
<table align='center'><tr><td>
أضف كود إعلان ادسنس هنا
</td></tr></table></div>
</b:if>

9 - لإظهار الإعلان فى أول وأخرالتدوينة أضف الكود على هذا الشكل

<b:if cond='data:blog.pageType == "item"'>
<div style='float:center;padding:5px;'>
<table align='center'><tr><td>
أضف كود إعلان ادسنس هنا
</td></tr></table></div>
</b:if>
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:center;padding:5px;'>
<table align='center'><tr><td>
أضف كود إعلان ادسنس هنا
</td></tr></table></div>
</b:if>

إحفظ التغيرات ثم توجه الى مدونتك لمشاهد النتيجة .

تم حمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

كيفية محاذاة الصور جنبا إلى جنب داخل الموضوع في بلوجر

2017-08-27T20:20:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

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

معاينة

كيفية محاذاة الصور جنبا إلى جنب داخل الموضوع في بلوجر

تابع معي ...

أولا - توجه الى لوحة التحكم مدونتك من هنا
2 - المشاركات >> مشاركة جديدة >>

3 - أنسخ الكود التالي والصقه في وضع Html في محرر المشاركات.

<table>
<tr>
<td><img border="0" width="120px" height="120px" src="IMAGE 1 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 2 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 3 LINK HERE" /></td>
</tr>
</table>

للتعديل على الاضافة

تغيير IMAGE 1 LINK HERE برابط صورة

تغيير حجم الصورة الارتفاع والعرض عن طريق تغيير القيمة 120.

إذا كنت تريد إضافة المزيد من الصور في سطر واحد، أنسخ وألصق أسفل الرمز <td> .

<table>
<tr>
<td><img border="0" width="120px" height="120px" src="IMAGE 1 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 2 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 3 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 4 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 5 LINK HERE" /></td>
<td><img border="0" width="120px" height="120px" src="IMAGE 6 LINK HERE" /></td>
</tr>
</table>

تم بحمد الله ...

أي أسئلة أوإستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي

2017-08-27T11:20:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم عن كيفية إضافة زر المتابعة منزلق على مدونتك بشكل احترافي 2017
إذا كنت تبحث عن فكرة أو أداة لزيادة متابعيك، أنت في المكان الصحيح زر المتابعة سوف يوفر لك فرصة كبيرة لتحويل زوار مدونتك إلى متابعين.

مشاهدة عرض توضيحي

للمعاينة

خطوات تركيب زر المتابعة منزلق على مدونتك :

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير HTML >>

3 - إضغط Ctrl+F وإبحث عن الوسم التالي

]]></b:skin>

4 - أضف فوقه مباشرة الكود التالي.

#arlinafollowSubscribe {
background-color: #464646;
width: 220px;
color: #fff;
position: fixed;
z-index: 999;
right: 10px;
bottom: 0
}
.arlinafollowButton {
background: #464646;
color: #fff;
font-size: 13px;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
position: absolute;
top: -28px;
right: 0;
display: block;
border-radius: 2px 2px 0 0;
height: 28px;
font-weight: 700
}
.arlinafollowButton span {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPt64etcgAQpXIcoDdeN8KNPrDFaOvZQgBcInTEQF3BTzTK02U0o6liBP3kE368AGvib2hIT7Afx-7XGJF2rJCrY9yj2r6DBiLwMP0wRr4W6mCKeZd7PHZBd8N4KvL9egekUU-tbtz0wf/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;
padding-left: 15px
}
.arlinafollowButton:hover,
.arlinafollowButton:focus,
.followActive,
.followActive:hover {
color: #fff
}
.arlinafollowButton:hover span,
.followActive span {
background-position: 0 -37px!important
}
.followactive {
background-color: #333
}
.arlinafollowForm {
padding: 15px;
margin: auto;
text-align: center;
font-size: 12px
}
.arlinafollowForm p {
margin: 10px 0
}
.arlinaFollowFooter {
text-align: center;
font-size: 11px;
padding: 7px 0;
margin: 0 0 -15px;
border-top: 1px solid #3c3c3c
}
.arlinaFollowFooter a {
color: #aaa;
background: none;
text-decoration: none
}
.arlinaFollowFooter a:hover {
color: #fff;
background: none
}

5 - إبحث الآن عن الوسم

</head>

6 - أضف الكود التالي فوقه مباشرة

<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>

7 - اضغط على زر حفظ المظهر.

8 - الآن توجه الى التخطيط >> إضافة أداة HTML >>

9 - وألصق الكود التالي في مربع HTML.

<div id="arlinafollowSubscribe" style="bottom: -971px;">
<div class="arlinafollowForm">
<a class="arlinafollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<br />
<a href="http://www.Blogger.com/follow-blog.g?blogID=5984441404945568808" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_SMXaZoptJvaL_sNC5d_kuPrgnctI9M_Z9JyNJC3SnJ1JoXiRobltoT-bIv6BrV4zmmNoHeKqeWY2cBeApMJwCPOab7YgKDyWYUIa-dbXRSsAoKRI9d3IlnDqaKvkdm1UlblQJHkdge1r/s1600/Follower.png" alt="Join on this site" /></a>
<br />
<p>with Google Friend Connect</p>
</div>
</div>

إستبدل المعرف 5984441404945568808 بمعرف مدونتك
إستبدل العبارة with Google Friend Connect

إحفظ الأداة وتوجه لمدونتك لمشاهدة النتيجة.

تم بحمد الله ...

أي أسئلة أو إستفسار لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كيفية إضافة صندوق صفحة فيس بوك منبثق مع زر الإغلاق في بلوجر

2017-08-27T10:15:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

سنتعرف اليوم عن كيفية إضافة صندوق صفحة فيس بوك منبثق مع زر الإغلاق في بلوجر جديد 2017.

هذه الاضافة تظهر فقط عند التمرير إلى نهاية صفحة ويب.
صورة توضيحية للإضافة

عندما يصل المستخدم إلى نهاية صفحة ويب، يظهر له صندوق صفحة فيس بوك منبثق أسفل يمين الشاشة. يمكنه إبقاء صندوق الصفحة منبثق أو إغلاقه باستخدام العلامة (X) .

مشاهدة عرض توضيحي

للمعاينة

كيفية إضافة صفحة فيس بوك بادج منبثقة مع زر الغلق في بلوجر

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير HTML>>

3 - إضغط Ctrl+F وإبحث عن الوسم التالي

</body>

4 - أضف هذا الكود فوقه مباشرة

<link href='http://mybloggerlab.com/StyleSheet/MBL_FBPOP.css' rel='stylesheet'/>
<script src='http://mybloggerlab.com/Scripts/MBL_FBPOP.js'/>
<script type='text/javascript'>
$('body').popscroll({
channel:'https://www.facebook.com/mahwouss2',
msg:'تابعنا عبر صفحتنا',
bgcolor:'#f64c3b',
textcolor:'#ffffff',
triggerpoint:6000,
network: 'facebook',
fb_hide_cover : false,
fb_show_posts : false,
});
</script>

لتخصيص الإضافة

إستبدل https://www.facebook.com/mahwouss2 برابط صفحتك.
إستبدل العبارة تابعنا عبر صفحتنا بأي عبارة

لون الخلفية #f64c3b إستبدله بأي لون تريد.

لون النص#ffffff إستبدله بأي لون تريد.

إضغط على زر "حفظ المظهر"

وتوجه الى مدونتك لمشاهدة النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

إضافة صندوق المعجبين فيس بوك الجديد ب3 أشكال لمدونات بلوجر

2017-08-27T09:58:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد االه اوقاتكم بكا خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

لإضافة الأداة تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك من هنا

2 - التخطيط >> إضافة أداة HTML >>

3 - إضغط على أداة HTML/JavaScript >> ثم أضف الكود الذي اخترته >> ثم حفظ >>

- الشكل الأول

<div class="fb-page" data-href="https://www.facebook.com/mahwouss2" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
</div>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <br>

- الشكل الثاني

<div class="fb-page" data-href="https://www.facebook.com/mahwouss2" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="false">
</div>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

- الشكل الثالث

<div class="fb-page" data-href="https://www.facebook.com/mahwouss2" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="true">
</div>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

للتعديل على الاضافة وتخصيصها

إستبدال ما باللون الأزرق برابط صفحتك على فيس بوك

الرقم المحدد باللون الأحمر 300 هو عرض الاضافة

الرقم المحدد باللون الأخضر 250 هو طول الإضافة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

كيفية أخذ نسخة احتياطية لقالب المدونة

2017-08-27T09:10:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب
فى هذا الموضوع سنتعرف على كيفية أخد نسخة إحتياطية من قالب مدونة بلوجر Blogger Template (درس للمبتدئين)
وجود نسخة إحتياطية من قالب مدونتك هو شيء ضروري وذلك يمنحك حرية التعديل دون الخوف من حدوث أية مشاكل فى مدونتك، حيث أنه إن حدثت مشكلة ما بسبب التعديلات التى قمت بها فلا تقلق ما دمت قد إحتفظت بنسخة إحتياطية من قالب مدونتك مسبقاً وكل ما عليك هو إستعادة النسخة الإحتياطية والتي بدورها تقوم بإستعادة مدونتك كما كانت قبل التعديلات.

كيفية أخذ نسخة احتياطية من قالب المدونة الخاص بك

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك من هنا
2 - إضغط على قالب ( المظهر ) >> نسخ احتياطى / استعادة >>

3 - إضغط على أيقونة نسخ احتياطى / استعادة

4 - الآن ستنبثق لك نافذة جديدة

5 - إضغط على أيقونة تنزيل المظهر
سيتم تحميل ملف القالب تلقائيا وبسرعة
بعد الإنتهاء من تحميل ملف القالب يفضل أن تحتفظ به في مكان آمن لإستعادته عند الضرورة

شاهد أيضا هذا الفيديو

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع