قالب المدونة الحالي متاح للتحميل مجانا

| | Libellés : بلوجر, قالب, قوالب بلوجر

مميزات القالب :

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

صورة القالب من الصفحة الرئيسية :

قالب فورويب الاحترافي مجاني

صورة القالب من داخل المواضيع :

قالب فورويب الاحترافي مجاني

لتحميل القالب المرجو التوجه الى هاته الصفحة وشكرا :

قالب فورويب الاحترافي مجاني

تابع القراءة

شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة

| | Libellés : أخبار تقنية, بلوجر, دروس البلوجر, كل

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

بالنسبة للبحث عن الأكواد داخل القالب يجب ان تضغط داخل إطار التحرير ضغطة بحيث يتم تنشيطة ثم تضغط زري Ctrl+F لكي يظهر شريط البحث المخصص للنموذج الجديد تكتب ما تريد البحث عنه ثم تضغط Enter
أيضا بالنسبة لاكواد الستايل وهي الاكواد التي تقع بين الوسمين <b:skin> و </b:skin>
يجب أن يتم توسيع العناصر الخاصة بها إن اردنا أن نضيف كود مثلا فوق <b:skin>

إمكانية الإستبدال

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

Ctrl+Shift+F شاهد الصورة التالية للتوضيح

أيضا إمكانية إستبدال الكل إن أردت أن تستبدل كلمة او كود متكررة في القالب يمكنك إستبدالها مرة واحده بنفس الطريقة السابقة لكن بالضغط على أزرار Ctrl+Shift+R ولن تظهر Yes , No بل سيتم الإستبدال مباشرة

أزرار إضافية

تحتوي التحسينات الجديدة على زر

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

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

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

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

منقول من مدونة : كن مدون (للإفادة)

تابع القراءة

صندوق الإشتراك عن طريق البريد الإلكتروني لمدونات بلوجر (شكل احترافي)

| | Libellés : اضافة بلوجر, بلوجر, كل, blogger

السلام عليكم ورحمة الله تعالى وبركاته، هل لاحظت في تصفحك لبعظ المدونات والمنتديات العربية كانت أو الأجنبية كثرة المواضيع التي تأكد على أن القوائم البريدية هي السبيل إلى ربح زوار مهتمين وحقيقين (Tragic traffic) حيث تعد من أهم الأدوات التي يأكد عليها المتقدمين لاسيما في مجال التجارة الإلكترونة وكذا مجال التدوين . لذلك في هذا الدرس سنتطرق واياكم الى طريقة اضافة أداة الاشتراك في القوائم البريدية لمدونات البلوجر . الاضافة تعتمد على كود يتم وضعه في أداة javascript/Html .

لمشاهدة مثال مباشر لهذه الأداة عبر الرابط التالي : مثال مياشر . (يوجد المثال في الأسفل)

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

توجه الى لوحة تحكم المدونة ;
توجه الى تخطيط ;
اضغط على اضافة أداة Javascript/Html في أي مكان يحلو لك ;
ثم الصق الكود الموجود في الأسفل في صندوق الكتابة ثم اضغط حفظ .

الكود :

<style> .subscriptionboc { border-style:solid; border-width:2px; border-color:#000; padding:20px; width:250px; background:#fff; transition: box-shadow .777s; -webkit-transition: box-shadow .777s; -moz-transition: box-shadow .777s; -o-transition: box-shadow .777s; -ms-transition: box-shadow .777s; } .paratraf { font-size:20px; font-family:"Helvetica"; text-align:center; color:#000; } .feed-links{display:none;} .enteremail { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; color: #8B8B8B; padding: 10px 40px; border-style:solid; border-width:2px; border-color:#CACACA; } .forspace { padding:15px; } .button45 { background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #000000; cursor: pointer; font-family: "Helvetica","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); background:#29A3DB; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); } </style> <div class="subscriptionboc"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=***', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">اشترك معنا و كن السباق في التوصل بمستجداتنا.</div><p> <div class="forspace"> <center> <input class="enteremail" type="text" style="width:140px" name="email" value="بريدك الإلكتروني..." onfocus="if (this.value == "بريدك الإلكتروني...") {this.value = ""}"/></center></div> </p> <input type="hidden" value="***" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <center> <input class="button45" type="submit" value="اشترك الآن" /></center></form> </div>

تخصيص الكود :

*** : غير هذه النجوم باسم المستخدم الخاص برابط التغذية (الخلاصات) .
250 : لتغيير حجم الأداة .
اشترك معنا و كن السباق في التوصل بمستجداتنا. غيره بما يحلوا لك

اضغط زر الاعجاب اسفل ان أعجبتك الإضافة .

الكود مأخوذ من: مدونة محمد

تابع القراءة

أداة Firebug السحرية للتعديل على قوالب البلوجر

| | Libellés : بلوجر, دروس البلوجر, كل, Firebug

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

نبذة عن الأداة :

هى عبارة عن اضافة سحرية يتم تركيبها على المتصفـح (Google Chrome, Firefox) تسهل لك عملية التعديل فى القوالب او صفحات الويب .

معلومات عن الأداة :

حجم الآداة : 2 ميجابايت .

تتوافق مع :

متصفح Google Chrom .

متصفح Firefox .

مميزات الاداة :

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

تحميل الاداة :

لتحميل اداة فاير بيج للفايرفوكس : من هنا
لتحميل اداة فاير لايت لجوجل كرومى : من هنا

تابع القراءة

صندوق اعجابات الفيسبوك بشكل جميل لمدونات بلوجر (كــود Css)

| | Libellés : بلوجر, دروس البلوجر, كل, CSS

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

وللمعاينة المباشرة المرجو التوجه الى المدونة التجريبية التالية : هــــــنـــا أو يمكنك مشاهدتها عن طريق الصورة التالية :-

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

اتجه الى لوحة تحكم مدونتك
اذهب الى قسم " تصميم "
اضغط على اضافة أداة في المكان الذي تريد اضافت الأداة فـــيه
اختر أداة HTML/JAVASCRIPT

ثــم الصق الكود التــالى :

الكـــود :

<center><style>.helperbloggerFB { width: 300px; height: 150px; border-radius: 3px; position: relative; background-color:#f4f4f4; padding:5px 10px 15px 0; } .helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after { background: #f4f4f4; border: 1px solid #ccc; } .helperbloggerFB:before, .helperbloggerFB:after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .helperbloggerFB:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #ccc; } </style> <div class="helperbloggerFB"> <div style="height:155px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/4weeb" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2F4weeb&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box> </div> </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/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script></center>

تعديل الكود بما يناسبك :

غير 4weeb بإسم صفحتك على الفيسبوك ( يوجد اثنان )

تابع القراءة

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

| | Libellés : اضافة بلوجر, بلوجر, تقنيات, جوجل, دروس البلوجر, كل

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

بالنسبة للمعاينة المباشرة، زر الصفحة التالية : هـــنـــا

إذا أعجبتك الاضافة وتريد اضافتها المرجو منــك متابعة الطريقة التالية :

الطريقة :

اتجه الى لوحة تحكم مدونتك
اذهب الى قسم " تصميم "
اضغط على اضافة أداة في المكان الذي تريد اضافت الأداة فـــيه
اختر أداة HTML/JAVASCRIPT

ثــم الصق الكود التــالى :

الكـــود :

<style type='text/css'> .a51 a{ color: #6e6e6e; font: bold 13px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .a51 a:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .a51 a:active { color: #000; border-color: #444; } .a51bar{ width:280px; float: right; margin-right:3px; margin-top:5px; padding:0;} .a51bar .emailsub{border-bottom: 0px solid #e6e6e6; padding:0px 0 15px 0; float: right; width: 100%; font-family: Helvetica, Arial;} .a51bar .emailsub .emailupdatesform{width: 100%; float: left; padding:0px;} .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px; width: 130px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;} .a51bar .emailsub .emailupdatesform input.emailupdatesinput:hover{ border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .a51bar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer; } .a51bar .emailsub .emailupdatesform input.joinemailupdates{ border: solid 1px #dcdcdc; background: #F3F3F3; font-family:Helvetica, Arial; text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px; width: 145px; height:28px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;} .a51bar .emailsub .emailupdatesform input.joinemailupdates{ border: solid 1px #dcdcdc; background: #F3F3F3; font-family:Helvetica, Arial; text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } </style>  <div class="a51" style="padding:0pt 5px 0pt 0pt;"> <table><tbody><tr> <td> <a href="http://4we-eb.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijA2L-V1dnCB06XColA0Uk7m-ik6FHN5mbV8654mzQeckTA8oB_NxAK1sGZmMprzoDu2DvDKbCqyJolle0UgCXYMPI_NKZy6YHmc1-PT9CHZp1UqmNmWMxNqdW5_YfIrVy79xHgeKDQyE/s1600/rss.png" border="0" /></a> </td> <td> <a style="margin-right:5px;"href="http://www.twitter.com/4weeb" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltl0_rp2mNMmBSgOj28HE2ZIP9k9gElwnbdMaRBPh_ieOg75G2VWAKQASkxbOqJ2YKceFJHkup0wh8LyuVydqWztgb6zFjRu2UEvY3WKFGn9JVFZ6yo3RUHmylHHlWMxWxvxy9PkIjiw/s1600/twitter.png" border="0" /></a> </td> <td> <a style="margin-right:5px;"href="http://www.facebook.com/4weeb" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88QHCceRQKs1WVjp4-v-DiHCobS2LiOwlPDw528hYOMBt85xz544ol91326xhb88NthfLBVP5smQKfUfvR-pQeEG081mkEC8VqtOm00FMEXTzt_DS-6lpbfovn9d03fjRhTGtSAhkwdY/s1600/facebook.png" border="0" /></a> </td> </tr></tbody></table> <div class="a51bar"> <div class="emailsub"> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hamedblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="بريدك الإلكتروني..." onblur="if (this.value == '') {this.value = ' بريدك الإلكتروني...';}" onfocus="if (this.value == 'بريدك الإلكتروني...') {this.value = '';}" type="text" /><input value="hamedblog" name="uri" type="hidden" /><input value="اشترك معنا لآن" class="joinemailupdates" type="submit" /></form></div></div></div></div>

تعديل الكود بما يناسبك :

http://4we-eb.blogspot.com/feeds/posts/default غيره برابط التغذية (الخلاصات) الخاص بك .
4weeb غيره باسم حسابك على التويتر .
http://www.facebook.com/4weeb غيره برابط صفحتك على الفيسبوك. وبهذه المناسبة أدعوكم بالإشتراك بصفحتي

يمكنك أيضا التعديل على الكتابات الظاهرة في الإضافة عن طريق تغيير مايلي :

بريدك الإلكتروني...
اشترك معنا لآن

الكود مأخوذ من: مدونة محمد

تابع القراءة