المشاركات

عرض الرسائل ذات التصنيف اضافات بلوجر

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

صورة
مقدمة : السلام عليكم ورحمة الله ... اعتذر عن طول غيابى عن التدوين واعود اليكم بموضوع جديد وحصرى ، موضوعنا اليوم عبارة عن اضافة ازرار المشاركة للمواقع الاجتماعية و اضافة مواضيع ذات صلة و شكل جميل لصندوق التعليقات كل هذا فى صندوق واحد اسفل كل موضوع بشكل انسيابى وجميل ، وهذا الصندوق من فكرة عبد الله سامى مدير مدونة عرب تيم ، ومن تصميمى وتكويدى .. شاهد المثال االتالى لتتعرف اكثر مثال مباشر طريقة التركيب أولا : بالطريقة المعتادة لتحرير القالب (نتوجه الى القالب ثم تحرير html) ونبحث عن الوسم التالى :  *(بالضغط بداخل القالب على ctrl+f) ]]></b:skin> والصق قبله (فوقه) الكود التالى : /*-----الخط المستخدم---*/ @font-face { font-family: 'bouyardane'; src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot'); src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'), url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format...

انشاء وتركيب واجهة احترافية لمدونة بلوجر | شكل جديد

صورة
وصف ومميزات الواجهة :  السلام عليكم ورحمة الله .. اهلا بكم جميعا فى درس جديد وتركيب واجهة احترافية لمدونة بلوجر ، والواجهة شئ جميل فى المدونة اذ انها تعطى انطباع للزائر ان الموقع احترافى غير انها منسقة وذات الوان رائعة تعطى للمدونة منظر راقى ... اهم المميزات : الميزة الاساسية فى هذه الواجهة انها واجهة حقيقية مرتبطة بدومين المدونة الاساسى اى انها تركب فى قالب المدونة " ولن تحتاج الى مدونة اخرى كى تركب بها واجهة ويتم الانتقال الى مدونتك من خلالها" شاهد المعاينة المباشرة من الرابط التالى : مثال مباشر طريقة التركيب فكرة الواجهة من الاساس ان عندما يدخل الزائر الى الصفحة الرئيسبة تختفى كل الاضافات وتظهر الواجهة فقط لذلك يمكنك تخصيص واجهة خاصة بك اذا كنت تتقن لغات الويب ... تابع أولا : توجه الى القالب >> ثم تحرير html وابحث عن وسم :     *بالضغط على ctrl+f* </head> وضع قبله مباشرة (فوقه) هذه الاكواد : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script src='http://helplog...

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

صورة
مقدمة : السلام عليكم ورحمة الله .. موضوعنا اليوم عن اضافة التبادل الاعلانى ولكن بشكل مطور وجذاب والوان جميلة وبتاثير (hover) ، تركيب الاضافة : توجه الى بلوجر >> ثم التخطيط >> ومن ثما اضافة اداة جديدة >> ثم  HTML/JavaScript >> ثم الصق الكود التالى داخل صندق الاكواد : <style> #advertise{ margin: auto; } .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; } .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; } .adss a strong { font-weight: normal; position: absolute; left: 20px; top: -1px; color: #fff; padding: 3px; z-index: 9999; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); background-color: rgba(12, 106, 205, 0.95); -moz-border-radius: 3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius: 3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 3px; box-sh...

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

صورة
مقدمة عن الموضوع : السلام عليكم ورحمة الله ... اليوم فى موضوع جديد واضافة جد مفيدة عبارة عن زر للصعود لأعلى والنزول لاسفل لمدونات بلوجر حتى تسهل على الزائر تصفح مدونتك .. والاسهم تظهر بشكل انسيابى . مثال مباشر شرح التركيب : أولا : توجه الى القالب ثم تحرير html : واضغط بداخل القالب على ctrl+f لكى تبحث عن الوسم التالى التالى : ]]></b:skin> بعد ان تجده الصق قبله (فوقه) الكود التالى : /* ------http://hi-tech-eg.blogspot.com------- */ .button_up{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmYFMJGOgfAM_kgFuzZY-lu2jKBmmQ8h1hFTNsBe0CHVX4LWaOvn4V9c-HlOZLFjmYa0bttSYlBobXb2XVhMaldTAcbvl7qOpIpiQtt3miYFDZ0vjg_bmXFzvs1AJ56OJ0pKmOB0Txjw/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:280px; right:5px; white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; } ...

اضافة ازرار المشاركة اسفل الموضوع بشكل احترافى لبلوجر

صورة
مقدمة عن الاضافة : السلام عليكم ورحمة الله ... اهلا بكم جميعا فى موضوع جديد واضافة جديدة ومفيدة حيث من خلالها تسمح للزائر بمشاركة موضوعك مع اصدقائه عبر شبكات التواصل الاجتماعى مثل الفيس بوك وتويتر وجوجل بلس والجميع يعرف قيمة المواقع الاجتماعية فى الارتقاء بالمدونات المبتدئة وكسب عدد كبير من الزوار ..تابع مع طريقة التركيب . طريقة التركيب : اولا : توجه الى القالب ثم تحرير HTML : واضغط  ctrl+f لكى تبحث عن الوسم التالى : ]]></b:skin> وضع قبله (فوقه) الكود التالى (كود css style) : .tips { background: #9FDF4F url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bvVIZK1_uINOp2CvwPkydrDoAcdoMDDetBgz-7UCPtxj6ctOojT19G8N7xEEhCvP2VThuj_poGmlcjnELlkXyDeSJ2mpwiEkEKvD9vRJp5vfFykf51D9ZBpmvFFsBIx29G_phvKVveE/s1600/gh.png') no-repeat right; color: #fff;} .dhi_menu { float: left; margin: 0 0 0 8px; padding: 0; position: relative; z-index: 9999; margin-top: 26px;} .dhi_menu ul { float: left; list-style: none; margin: 0 !important; padd...

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

صورة
وصف المشكلة : السلام عليكم ورحمة الله اهلا بكم جميعا فى موضوع جديد وحل مشكلة اختلاف صورة اللوجو الخاص بالمدونة عند مشاركة الرابط على موقع التواصل الاجتماعى فيس بوك وهذه المشكلة ربما يعانى منها الكثير من المدونين وانا منهم .. تابع معى طريقة الحل حل المشكلة توجه الى القالب ثم تحرير html : بعد ذلك اضغط بداخل القالب  ctrl+f لكى تبخث عن الوسم التالى : </head> وضع قبله (فوقه) الكود التالى : <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='"https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&amp;gadget=a&amp;rewriteMime=image&amp;resize_h=200&amp;resize_w=200&amp;url=" + data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content=' رابط صورة اللوجو ' property='og:image'/> </b:if> وغير  رابط صورة اللوجو  برابط لوجو المدونة ، ثم احفظ القالب ... ولا تنسى انت تضغط مشاركة للموضوع اذا اعجيك

اضافة لوحة تحكم تظهر فى صفحة المدونة للمدير فقط [بلوجر]

صورة
مقدمة عن الموضوع : السلام عليكم ورحمة الله .. اهلا بكم جميعا واتمنى لكم الصحة والعافية ، اليوم فى موضوع جديد وحصرى اتطرق الى شرح اضافة لوحة تحكم تظهر فى المدونة وتظهر للمدير فقط ، ولها فائدة كبيرة حيث تسهل عليك انشاء تدوينة جديدة من داخل المدونة وايضا تحرير القالب ،، بدلا من الدخول الى بلوجر ، كما يمكنك تخصيص الوانها حسب رغبتك لكى تتماشى مع القالب .. تابع طريقة التركيب الخطوة الاولى : فى البداية سوف نحتاج الى معرف الاى دى (ID) الخاص بمدونتك ، وهو الرقم الذى يظهر فى رابط تحرير المدونة فى بلوجر، كما بالصورة التالية ، ثم انسخه واحتفظ به : الخطوة الثانية : توجه الى بلوجر ثم القالب ثم تحرير Html : واضغط بداخل القالب ctrl+f لكى تبحث عن الوسم التالى : <body> وفى بعض القوالب يكون على هذا الشكل : <body expr:class= بعد ان تجده الصق الكود التالى بعده (تحته) مع تغيير XXXXXXXXXXXXX برقم الاى دى (ID) الذى حصلت عليه سابقا فى بداية الموضوع : <span class='item-control blog-admin'> <style> @font-face { font-family: "JF Flat Regular...

اضافة ازرار المشاركة والاعجاب وجوجل بلس بجانب الموضوع عائمة لبلوجر

صورة
مقدمة ومعلومات عن الاضافة السلام عليكم ورحمة الله...  اليوم فى موضوع جديد واضافة رائعة جدا وهى ازرار مواقع التواصل الاجتماعى مثل الفيس بوك وتويتر و بينتريست وجوجل بلس بالاضافة الى ازرار المشاركة لكثير من مواقع التواصل الاجتماعى الاخرى ..والاضافة تظهر بشكل عائم داخل الموضوع فقط ولا تظهر فى الصفحة الرئيسية ، شاهد المثال التالى لتتعرف اكثر : مثال مباشر طريقة التركيب توجه الى بلوجر ثم القالب ثم تحرير html واضغط  ctrl+f بداخل القالب لكى تبحث عن الكود التالى : <b:includable id='post' var='post'> ثم ضع بعده (اسفله) هذا الكود : <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style> .mbt_social_floating{ position: fixed; bottom: 10%; margin-right: -78px; float: right; width: 60px; background-color: #f7f7f7; padding: 5px 0 0px 0px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #dd...

ازرار فلات احترافية لمدونات بلوجر Flat UI beautiful buttons css

صورة
وصف للموضوع : السلام عليكم ورحمة الله .. تكلمنا فى الموضوع السابق عن تغيير شكل القوائم المرقمة داخل المشاركات ، واليوم فى موضوع جديد حول اضافة  ازرار فلات احترافية بخمسة ألوان وثلاثة احجام كما يمكنك تخصيصها كزر تحميل او زر معاينة ، ولهذه الاضافات فوائد عديدة فيكفى انها تعطى شكل انسيابى ورائع للمواضيع ، مما يجعل الزائر معجب بمواضيعك :) لان اهم شئ فى كتابة الموضوع ان يكون منسق كما ترى فى مدونتى ههههـ مثال مباشر طريقة التركيب أولا : أكواد css ، وهى خاصة بمظهر الازرار والتأثير الخاص بمرور الماوس على الزر (Hover) توجه الى القالب ثم تحرير Html وبالضغط على ctrl+F ابحث عن : ]]></b:skin> والصق الكود التالى قبله (فوقه) : @font-face { font-family: 'ges'; src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot'); src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'), url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') fo...

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

صورة
مقدمة : بسم الله والصلاة والسلام على اشرف خلق الله سيدنا محمد رسول الله .. اما بعد موضوعنا اليوم هو اضافة صندوق متابعين جوجل بلس الى مدونات بلوجر بعد التحديث الجديد ، فاصبح بشكل رائع واحترافى على عكس الشكل القديم ، ولهذا الصندوق فوائد عديدة لكل مدون فهو يتيح للزوار متابعة مدونتك على جوجل بلس لانه يعتبر من منافسى موقع التواصل الاجتماعى فيس بوك ... طريقة التركيب اولا ندخل الى هذا الرابط : developers ثم تحدد الشكل الانسب لمدونتك وهذه بعض المفاهيم : بعد تحديد الشكل نتوجه الى الكود اسفل معاينة الاضافة ونقوم بنسخه : ونتوجه الى بلوجر ثم >> التخطيط ثم >> اضافة اداة >> HTML/JavaScript والصق الكود ثم اضغط حفظ وبهذا قد تم اضافة الصندوق

كيفية انشاء نص وعند الضغط عليه يظهر باقى الموضوع داخل التدوينات باستخدام css

صورة
وصف الاضافة السلام عليكم ورحمة الله .. فى البداية العنوان ليس دقيقا جدا لانى لم اجد عنوانا مناسبا ههههـ ...  على سبيل المثال ان كنت تريد ان تكتب موضوع طويل وتريد تخصيص نصوص عند الضغط عليها تظهر مجموعة نصوص اخرى او (فقرة) شاهد المثال التالى لتعرف كيف . اضغط هنا لمشاهدة الموضوع هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله هذا النص هو مثال لنص يمكنك استبداله اعتقد الان انك تعرفت اكثر على الاضافة وما فائدتها ناتى الان لطريقة الاستخدام توجه الى انشاء مشاركة جديدة او صفحة وعن كتابتك للموضوع غير وضع التأليف الى HTML كما بالصورة : والصق الكود التالى : <style> .checked-selector {display: none;} :checked ~ .checked-selector {display: block;} input.hidden[type=checkbox] {position: absolute;left: 888em;} </style> <label for="toggle-hidden"> هنا تضع النص المراد الضغط علي...