الارتقاء للبلوجر | دروس شروحات قوالب مسابقات اضافات

اضافة مجموعه ازرار احترافية وحصري | الجزء الاول

عبدالله منقوش

Add-a-total-of-buttons-Blogger-Collection

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

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

شرح التركيب وطريقة الاستخدام

الأزرار مقسمه إلى أربع أقسام لكل شكل قسم لتركيب أي قسم اذهب إلى قالب تحرير HTML وبحث عن </head> وأضف كود CSS للقسم الذي تريده فوقها مباشرتاً

القسم الأول من الأزرار

<link href="https://googledrive.com/host/0BypzyVeh7C0YS0lGclBwbk1sTjQ" rel="stylesheet" />

معاينة / أكواد مفصلة

القسم الثاني من الأزرار

<link href="https://googledrive.com/host/0BypzyVeh7C0YN1N6MFlYZ01hMWM" rel="stylesheet" />

معاينة / أكواد مفصلة

القسم الثالث من الأزرار

<link href="https://googledrive.com/host/0BypzyVeh7C0YVmlvaXJYa01HTVU" rel="stylesheet" />

معاينة / أكواد مفصلة

القسم الرابع من الأزرار

<link href="https://googledrive.com/host/0BypzyVeh7C0YSzFkUk01c0tYOHc" rel="stylesheet" />

معاينة / أكواد مفصلة

تركيب الخط

مجموعه الأزرار تستخدم خط Droid Arabic Kufi لوضع الخط ضمن خطوط مدونتك توجه إلى قالب تحرير HTML تم ابحث عن ]]></b:skin> وأضف الكود التالي فوقه مباشرتاً

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

آدا قمت بتركيب الخط سابقاً فلا داعي لتضيفه

شرح التعامل مع الإضافة بتفصيل

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

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>

التعديلات تكون على التالي
الارتقاء للبلوجر : غيرها بل اسم الذي تريده ان يظهر في الزر
"#" : قم بتغير علامة (#) برابط الصفحة

تركيب الزر داخل الموضوع

أولان توجه إلى الموضوع الذي تريد وضع الزر فيه تم اكتب نص مثل "معاينة" تم انسخها تم انتقل من تأليف إلى HTML وبحث عن "معاينة" باستخدام Ctrl + F
ستجدها بالشكل التالي
معاينة
قم باستبدال "معاينة" بكود الزر

تغيير اتجاه الزر داخل الموضوع

ملاحظ: آدا أردت جعل اتجاه الزر في الوسط أضف هده الكود
style="float: none;max-width: 127px;margin-left: auto; margin-right: auto;"
أضف الكود في نهاية كود الدف ضعه بين قبل ناهاية div وعلامة التنصيص( في الوسط )

<div class="-------"هنا > --------

مثال هده كود الزر

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" ><span>الارتقاء للبلوجر</span></div></a>

بعد إضافة الكود أصبح

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: none;max-width: 127px;margin-left: auto; margin-right: auto;" ><span>الارتقاء للبلوجر</span></div></a>

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

مثال إنا لدي زران واحد بلون الأحمر والأخر بلون بالأخضر

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>

لو نريد إضافة واحد في اليمين والأخر في اليسار نستخدم الكود التالي

style="float: right; margin-right: 0;margin:10px;"

هده الكود نضعه في كود الزر بنفس الطريقة السابقة

right : يعني سيتم وضعه الزر في اليمين لو أردنا وضعه في اليسار نضع بدله left

المثال السابق يرجع بهذه الشكل

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: right; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>

<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: left; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>

نلاحظ الزر الذي بلون الأحمر أضفنا له right يعني سيكون في اليمين بينما الزر الذي بلون الأخضر أضفنا له left يعني سيكون في اليسار

إن شاء الله تكون أعجبتكم الإضافة وفهمت الشرح وطريقه تركيبه انتظرونا في الجزء الثاني من الإضافة, أد كان لديك إي سؤال أو استفسار ضعه في تعليق. وشكراً

تغيير شكل التسميات الى شكل احترافي وحصري

عبدالله منقوش

Change-the-format-of-labels-to-professional-and-exclusive-form-in-Blogger

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

معاينة

شرح التعامل مع الإضافة

قبل كل شيء يجب عليك عمل نسخه احتياطيه لو قدر الله وحدت خطا معك ستستطيع إصلاح واسترجاع القالب الخاص بك

قبل ما ندخل إلى الشرح أود إن أقول لك أد كان لديك شكل سابق لتسميات يجب حذفه حذف كود التنسيق css الخاص بتسميات

كيف يمكنك أزلته

نذهب إلى قالب تحرير HTML

بعد دالك نبحت عن الكود التالي list. او . list-label-widget-content نمسح جميع الاكواد المرفقة معه حتى يحذف الشكل يعني نمسح الاكواد كلها التي ظهر هات أتناء البحث وغالب تجد الكود في ]]></b:skin> للبحت نستخدم F +Ctrl

اكرر امسح css الخاص به يعني التنسيقات

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

ألان نأتي إلى الخطوة المهمة وهي استبدال كود التسميات القديم بكود جديد حتى يتناسب مع الشكل نبحت عن الكود التالي id='Label1'

تجده بهده الشكل نقوم بفتحه

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

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h3><data:title/></h3>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=6"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='rtl'><data:label.count/></span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&amp;max-results=6"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='rtl'><data:label.count/></span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>

أخر خطوه تركيب الشكل نذهب إلى قالب تحرير HTML ونبحث عن ]]></b:skin> ونظيف الكود التالي فوق مباشره

/* CSS التسميات */
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:right;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .label-size{position:relative;display:block;float:right;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;left:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;left:-15px}
#sidebar-wrapper .label-size a:hover{color:#444;border-color:#4fafe9}

.list-label-widget-content ul li span {
float: right;
width: 3em;
height: 3em;
text-align: center;
line-height: 35px;
margin: -34.5px -2px 0px 4px;
border-radius: 100%;
color: #FFF;
font-weight: bold;
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
border: 0.3em solid #FFF;
font-family: time;
}
.list-label-widget-content li a {
text-decoration: none;
color: #272B35;
-webkit-transition: all 0.3s ease-in-out;
transition: all 1s;
display: block;
margin: 0 40px 0 0;
padding: 6px 0.4px;
}
.list-label-widget-content li a:hover {
color: #FFFFFF;
transition: all 1s;
}
.list-label-widget-content ul li:hover {
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
transition: all 1s;
}
.list-label-widget-content ul li {
border: solid 1px #E0E0E0;
background: #F0F0F0;
color: #444;
text-decoration: none;
border-radius: 0.3em 1.3em 1.3em 0.3em;
transition: all 1.0s ease-out 0s;
font-family: droid arabic kufi;
list-style: none;
font-size: 12px;
margin: 5px 3px;
transition: all 1s;
}
/* CSS نهاية التسميات */

اللون الأخطر يعني الخط ونلاحظ الخط المستخدم هو خط droid arabic kufi استبدله بخط مدونتك أو يمكنك تضمين الخط من خلال إضافة الكود التالي فوق ]]></b:skin>

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

الكود ما يحتاج شرح ولأكن تبسيط مني الذي بل لوان الأحمر والأزرق هو ألون نفس كود اللون #ea0c31 وهو اللون الأحمر أد حببت تغير اللون غيرهم معاً الفرق بينهم بسيط الأحمر لون أرقام عدد المواضيع والأزرق هو لون عند التأشير على قسم

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

تحميل قالب بلوجر مايكرو ماج معرب متجاوب مع جميع الاجهزة

عبدالله منقوش

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

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

معاينة

تحميل

ملاحظ هامه : قبل تركيب القالب استخدام قالب التنظيف حتى تتمكن من تركيبه بشكل صحيح الكود

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><b:skin><![CDATA[/*-----------------------------------------------Name : CNMU Cleaning TemplateDesigner URL : http://cnmu.blogspot.comyear : 2015----------------------------------------------- */]]></b:skin></head><body><b:section class='main' id='main' showaddelement='yes'><b:widget id="Blog1" locked="true" type="Blog" /></b:section></body></html>

التعديل على القالب

لتعديل على القائمة الأولى التي في الإعلاء أتوجه إلى قالب > تحرير HTML > استخدام Ctrl + F للبحث عن <ul class='menu' id='menu-top-menu'>
ستجد القائمة كتالي

<li class='menu-item'><a href='#'>الرئيسية</a></li>

<li class='menu-item'><a href='#'>اتصال بنا</a></li>

<li class='menu-item'><a href='#'>سياية الخصوصية</a></li>

<li class='menu-item'><a href='#'>كن معناء</a></li>

<li class='menu-item'><a href='#'>تابعوناء</a></li>

</ul>

علامة # ضع الرابط وما في اللون غيره إلى الاسم الذي تريده

لتعديل القائمة التأني التي في الإعلاء > ابحث عن <nav id='menu'>
ستجدها بهده الشكل

<ul>

<li class='homers'><a href='/'><i class='fa fa-home'/> الرئيسية</a></li>

<li><a href='#'>قائمة منسدلة <i class='fa fa-chevron-down'/></a>

</ul>

</li>

<li><a href='#'>قائمة منسدلة <i class='fa fa-chevron-down'/></a>

</ul>

</li>

</ul>

</nav>

علامة # ضع الرابط وما في اللون غيره إلى الاسم الذي تريده

كود اعلانات 728*90

</div>

كود الاعلان في السيد بار 300*250

</div>

لتشغيل السلايد شو إضافة كلمة recent في HTML/JavaScript في التخطيط ستلاحظ وجود العديد من الأدوات الجاهزة أضاف كلمة recent إلى أداة باسم السلايد شو.
لإظهار قسم معين في الصفحة الرئيسية إضافة اسم التسمية في HTML/JavaScript في التخطيط (برامج) أو (العاب).
لإظهار ( مواضيع جميلة ) أضف اسم التسميات إلى الأداة الموجود في التخطيط باسم (مواضيع جميلة) وهي HTML/JavaScript.
لإضافة البحث في المدونة أضف كلمة <span style="font-style:italic;"></span> في التخطيط (البحث في المدونة) وهي أداة HTML/JavaScript .

كود تابعونا عبر موقع التواصل الاجتماعي أضف في التخطيط باسم (تابعونا عبر موقع التواصل الاجتماعي) HTML/JavaScript

<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a>
</div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a>
</div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a>
</div>
<div class="app_social google">
<a href="https://www.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a>
</div>
</div>

قم بتعديل الروابط إلى روابط صفحك في مواقع التواصل الاجتماعي

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

اضافة اتصل بنا في صفحة خاصة مستقلة بلوجر

عبدالله منقوش

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

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

معاينة

ملاحظه هامه: يجب قبل كل شيء تفعيل اتصال بنا من خلال التخطيط (ولن تظهر في التخطيط بعد تركيب الاكواد) بعد ذالك تابع الطريقة ألتاليه

ابحث عن ]]></b:skin> اضف الكود التالي فوقة مباشره

#ContactForm1{display: none;}

هذا كود نموذج اتصل بنا سوف نستخدمه لاحقاً

طريقة تركيبه

نتوجه إلى لوحة التحكم الخاصة بالمدونة

تم نضغط على الصفحات الموجدة في القائمة العمودية كم في ألصوره

ألان إنشاء صفحة جديدة وسميها اتصال بنا

قم بتحويل من تأليف إلى HTML حتى يشتغل الكود بشكل الصحيح

قم بحذف جميع الاكواد الموجودة

1- ضع الكواد السابق كواد اتصال بناء

2-اضغط خيارات

3-تعليقات خليها عدم السماح

4- اعمل العنوان الدي تريده

5- نشر

اضافات

اخر مواضيع المدونة

اضافة مجموعه ازرار احترافية وحصري | الجزء الاول

شرح التركيب وطريقة الاستخدام

القسم الأول من الأزرار

القسم الثاني من الأزرار

القسم الثالث من الأزرار

القسم الرابع من الأزرار

تركيب الخط

شرح التعامل مع الإضافة بتفصيل

تركيب الزر داخل الموضوع

تغيير اتجاه الزر داخل الموضوع

تغيير شكل التسميات الى شكل احترافي وحصري

شرح التعامل مع الإضافة

كيف يمكنك أزلته

تحميل قالب بلوجر مايكرو ماج معرب متجاوب مع جميع الاجهزة

اضافة اتصل بنا في صفحة خاصة مستقلة بلوجر

طريقة تركيبه

اضافات التواصل الاجتماعي

سيو

اضافات