مـدونــة مـدينـة الاحـلام

الأربعاء، 10 ديسمبر 2014

حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان احترافيه

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

۞ معاينة الاضافه▼

كيفية اضافة هذا الارشيف لمدوناتكم

1-من لوحة التحكم >>> الصفحات

2- اضغط على صفحة جديدة واختر صفحة فارغة

3- الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

اللون الاحمر

<style type="text/css">  #bp_toc {  margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}  .toc-note {  padding: 5px 10px;  position: relative;  top: -13px;  }.toc-header-col1, .toc-header-col2, .toc-header-col3 {  background: #eee;  border: 1px solid #ddd;  color: #666;  padding: 2px 5px;  font-weight: bold;}  /*------عناوين المواضيع------*/  .toc-header-col1 { width:58%;}  .toc-entry-col1 {  background: #FFFFFF;  border: 1px solid #ddd;  padding-right: 8px;  line-height: 30px;  font-size: 14px;}  .toc-entry-col1 a {  color: #E75139;}  /*------التاريخ------*/  .toc-header-col2 {width: 11%;text-align: center; }  .toc-entry-col2 {  background: #222;border: 1px solid #111;color: #fff;  text-align: center;font-size: 14px;}  /*------الأقسام-------*/  .toc-header-col3 {width:31%;}  .toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;  color: #fff;padding-right: 8px;  font-size: 14px;}.toc-entry-col3 a { color: #fff; }  .post-header,.post-title.entry-title,.bvd,#menu2{display: none;}  .post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>  <script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>  <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>  </div>

اللون الازرق

<style type="text/css">  #bp_toc {  margin-bottom: 10px;margin-top: 28px;  text-align: right;width: 100%;}  #bp_toc a {text-decoration: none;}  .toc-note {padding: 5px 10px;  position: relative;top: -13px;  }.toc-header-col1, .toc-header-col2, .toc-header-col3 {  background: #eee;border: 1px solid #ddd;  color: #006BFF;padding: 2px 5px;  font-weight: bold;}  /*------عناوين المواضيع------*/  .toc-header-col1 { width:58%;}  .toc-entry-col1 {  background: #FFFFFF;border: 1px solid #ddd;  padding-right: 8px;line-height: 30px;font-size: 14px;}  .toc-entry-col1 a {color: #018EC5;  }  /*------التاريخ------*/  .toc-header-col2 {width: 11%;text-align: center; }  .toc-entry-col2 {  background: #222;  border: 1px solid #111;  color: #fff;text-align: center;font-size: 14px;}  /*------الأقسام-------*/  .toc-header-col3 {width:31%;}  .toc-entry-col3 {  background: #018EC5;  border: 1px solid #0086B7;color: #fff;  padding-right: 8px;  font-size: 14px;}  .toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}  .post-body {border-bottom: 20px ridge #E4E4E4;}</style>  <br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>  <script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>  <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>    </div>

اللون الرمادي

<style type="text/css">  #bp_toc {border: 0px solid #000;  background: none repeat scroll 0% 0% #FFF;  padding: 5px;margin-top: 10px;width: 100%;}  .toc-note {padding: 5px 10px;position: relative;top: -13px;}  .toc-header-col1, .toc-header-col2, .toc-header-col3 {  text-align: center;  background: none repeat scroll 0% 0% #E6E6E6;  box-shadow: 2px 2px 5px 5px #CCC inset;  color: #000;  padding-left: 2px;width: 58%;}  .toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}  .toc-header-col3 {width: 31%;}  .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%;text-decoration:none;}  .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}  .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {  padding-left: 5px;font-size:70%;  border: 2px solid white !important;background: #F6F6F6;  white-space:nowrap;}</style><br />  <div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>  </div>

وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,, هذا كل شئ .... بالتوفيق للجميع

اضافة قطعة ازرار المواقع الاجتماعيه بالوان زاهيه وخلابه

اضافة قطعة ازرار المواقع الاجتماعيه بالوان زاهيه وخلابه

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

كيفية اضافة هذه الاداه الى مدونتك

انتقل إلى لوحة تحكم مدونتك

HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر

والآن الصق داخل المستطيل الكود التالي

<li><a class="rss" href="http://feeds.feedburner.com/albaadani">اشترك عبر البريد</a></li>

<li><a class="twitter" href="https://twitter.com/albaadani1">تابعني على تويتر</a></li>
<li><a class="google" href="https://plus.google.com/103499777490414306950">Google+تابعني </a></li>
<li><a class="linkedin" href="albaadani">تواصل معي عبر لينكيدن</a></li>
</ul>
</div>

الان قم باستبدال ما بالالوان باسماء حساباتك في فيس بوك وتويتر وجوجل ولينكدين

* استبدل alb33dani باسم حسابك في فيس بوك

* استبدل albaadani باسم حسابك في فيد برنر

* استبدل albaadani1 باسم حسابك في تويتر

* استبدل 103499777490414306950 رقم الاي دي الخاص بحسابك في جوجل

* استبدل albaadani باسم حسابك في موقع لينكيدن

وبالاخير قم بحفظ الاداه ومبروك عليك الاضافه

الاثنين، 19 مارس 2012

تطبيق التعريب على قالب لمدونات بلوجر - الجزء الأول

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثالث دروسنا في دروة التعريب وسيكون عبارة عن تطبيق التعريب على قالب مدونات بلوجر , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .والدرس الثاني وكان تحت عنوان [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه . , وبإذن الله اليوم سنقوم بشرح التعريب على قالب يسمى Poligon , قالب من تصميم Klodian صاحب مدونة Deluxetemplates.net والآن هذا لينك لتحميل القالب من هنـــا , ثم قم بإنشاء مدونة تجريبية نقوم بها بتجريب والتطبيق لدرس التعريب على هذه المدونة , قم برفع القالب الى المدونة التجريبية التي قمت بإنشائها سابقاً , وتابع معي الشرح

ادخل الى لوحة التحكم الخاصة بالمدونة التجريبية التي أنشأناها , وسنقوم بتطبيق درس التعريب عليها .
ادخل الى التصميم ثم تحرير html الخاص بالقالب . ثم قم بتوسيع القالب .

الآن أمامك أكواد قالبك الخاص الغير معرب , وهيا بنا لنبدأ أول خطوة في تعريب القالب ,
أولا لابد أن تعلم انا تعريب قوالب البلوجر هو تعديل في أكواد CSS فقط .

1. ابحث عن هذا الكود

<Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">

قم بتغير الكود السابق الى هذا الكود

<Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="right" value="right">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="left" value="left">

طبعاً لو نظرت الى الكود بالأعلى والكود الذي فوقه مباشرة , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

2. قم بالبحث عن هذا الكود

#header-inner {

ستجده على الشكل

#header-inner {
    background-position: center center;
    margin-left: auto;
    margin-right: auto;
height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: left;
}

قم باستبداله بهذا الكود

#header-inner {
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: right;
}

وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

3. قم بالبحث عن هذا الكود

#outer-wrapper {

ستجده على هذه الهيئة

#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

قم بتغييره الى هذا الكود

#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: right;
    width: 960px;
}

4. قم بالبحث عن هذا الكود

#main-wrapper {

ستجده على هذه الهيئة

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

قم بتغييره الى هذا الكود

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

5. قم بالبحث عن هذا الكود

#sidebar-wrapper {

ستجده على هذه الهيئة

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIU0WkhyphenhyphenwOCk7zz_5VUzgpYPlzZFzBH_cuaPiGrXPpacFp5kn6GPKZtVimLU1WJQjDTSrpBGaScm6xCu_5u96n5MyICP8LLGLfNzsasYMgPZSLYUskWc_rzAJw0UY_ifrMlxM3cx4C_HI/s1600/content-top.png") repeat-x scroll right top transparent;
    float: right;
    margin-right: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

قم بتغييره الى هذا الكود

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIU0WkhyphenhyphenwOCk7zz_5VUzgpYPlzZFzBH_cuaPiGrXPpacFp5kn6GPKZtVimLU1WJQjDTSrpBGaScm6xCu_5u96n5MyICP8LLGLfNzsasYMgPZSLYUskWc_rzAJw0UY_ifrMlxM3cx4C_HI/s1600/content-top.png") repeat-x scroll right top transparent;
    float: left;
    margin-left: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

والآن تم الانتهاء من الجزء الأول من الدرس الثالث من دورة تعريب القوالب .
انتظروا قريباً الجزء الثاني بإذن الله .