‏إظهار الرسائل ذات التسميات هاكات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات هاكات بلوجر. إظهار كافة الرسائل

هاك إضافة 3 أعمدة في الفوتر لمدونات بلوجر Blogger

بسم الله الرحمن الرحيم

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

ملحوظة هامة : لا تنس بأخذ نسخة أحتياطية من قالبك

  •  ادخل الى لوحة تحكم مدونتك ثم الى التصميم ثم تحرير ال html ثم قم بتوسيع القالب .
قم بالبحث عن هذا الكود
</body>
ثم أضف هذا الكود بعده مباشرة 
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
ثم ابحث عن ]]></b:skin>
 ثم أضف هذا الكود قبل الكود السابق مباشرة
/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#dde9f3;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: right;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: right;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 13px Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

ثم بعد ذلك قم بحفظ القالب وادخل الى عناصر الصفحة .. ستجد الإضافة كما بالشكل إن شاء الله

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

اكمل القراءة...

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

بسم الله الرحمن الرحيم


الحمد لله وكفى وصلاة وسلاما على خير الخلق , سيد ولد آدم , وعلى هدي التابعين بإحسان الى يوم الدين , اما بعد , شرح تمييز تعليق الكاتب عن بقية التعليقات في مدونات بلوجر , جملة هي عنوان تدوينتنا اليوم , فقد يحتاج بعض المدونين , الى شيء يميز تعليقهم في مدونات بلوجر عن بقية التعليقات في مدونات بلوجر , وقد جائتني استفسارات بخصوص هذا الهاك في مدونات بلوجر , واليوم بإذن الله أضع بين يديكم الهاك , فكما تعرفون أن معي كل شيء مجاني , وليس للإبداع حدود بإذن الله , هيا بنا لنبدأ
 * من لوحة تحكم مدونتك انتقل إلى صفحة التخطيط ثم " تحرير HTML "
* لا تنسى أن تحفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
* قم بالحث عن هذا الكود
]]></b:skin>

* ثم أضف قبله أو فوقه هذا الكود :
/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: right;
margin: 0 0 10px 10px;padding: 4px;
border: 1px solid #E6E6E6;
}

* ثم قم بالبحث عن هذا الكود
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

* ثم قم باستبداله بهذا الكود :
<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
الآن قم بحفظ القالب..
تم بحمد الله ..

اكمل القراءة...

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

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

 * لا تنسى أخذ نسخة احتياطية من قالب .
* قم بالدخول الى لوحة التحكم ثم تحرير ال html ثم قم بتوسيع القالب .
* قم بالبحث عن هذا الكود
]]></b:skin>
* ثم أضف قبله هذا الكود 
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
 يمكنك تخصيص شكل الكود السابق بما يناسب لون مدونتك كما يلي :
أكواد ال CSS

  1. Style 1
  2. Style 2
  3. Style 3
  4. Style 4
  5. Style 5
  6. Style 6
شكل الإضافة على الطبيعة :
  1. Style 1
  2. Style 2
  3. Style 3
  4. Style 4
  5. Style 5
  6. Style 6

* ثم قم بالبحث عن هذا الكود
</body>
* ثم قم بإضافة هذا الكود قبل الكود السابق مباشر
&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
ثم اضغط حفظ . ثم قم مشاهدة القالب .
تم بحمد الله ,, أخوكم : باســـم .

اكمل القراءة...

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

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

- قم بالدخول الى لوحة التحكم >> ثم تحرير html >> ثم قم بالبحث عن هذا الكود 
]]></b:skin>
- وقم بوضع هذا الكود قبله ( فوقه ) مباشرة
.post img {
max-width: 510px;
width: expression(this.width > 510 ? 510: true);
}
 - احفظ القالب ,,
تم بحمد الله , تحياتي أخوكم : باســم .

اكمل القراءة...

شرح تقسيم التصنيفات الى عمودين في مدونات بلوجر blogger


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

  • قل معي : سبحان الله وبحمده , سبحان الله العظيم , عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته .
  • حدد التصنيف الذي تريد تقسيمه الى عمودين , بمعنى أن عندي في مدونتي , تصنيف بعدد الأعمدة , وتصنيف آخر للون , وتصنيف عام للمحتويات , لذلك قبل البدأ قم بتحدد التصنيف الذي تريده , في مدونتك .
  • مثلا انا قمت بتحديد تصنيف اسمه " تصنيفات عامة " .. تمام .. تابع معي .. قم بحديد التصنيف الذي تريده .
  • ادخل الى لوحة تحكم مدونتك >> ثم الى التصميم >> ثم تحرير html .
  • كما قلنا سابقا انا قمت بتحديد التصنيف " تصنيفات عامة " وهذا ما سأقوم بتقسيمه الى عمودين .
  • ابحث في قالبك عن التصنيف الذي حددته أنت , وانا قد حددت تصنيف " تصنيفات عامة " لذلك سأبحث عنه .
تابع معي الصورة 


عندما بحثت في القالب عن كلمة تصنيفات عامة وجدت يقابلها كلمة Label1 , وهنا مربط الكود ,

شرح التقسيم
ابحث في مدونتك عن 
]]></b:skin>
ثم أضف قبله " فوقه " هذا الكود مباشرة
#Label1 ul li{
float:right;
width: 40%;
}
علما بأن كلمة  Label1 تحل محل كلمة تصنيفات عامة كما شرحت سابقا .
كما بالصورة
نرجع للصورة تاني
 

 إذن لو أردنا تقسيم اي تصنيف آخر , فسنبحث عنه , ونجد ما يقابله , فمثلا لو أردنا تقسيم " تصنيف حسب اللون " سنجد أن ما يقابلها هو كلمة " Label4 " وتستبدل كلمة Label1 بالكود السابق الذي هو

 #Label1 ul li{
float:right;
width: 40%;
}
بكملة Label4 , وهكذا بقية التصنيفات التي تريد تقسيمها , ثم إضغط حفظ .
إن لم يتم تقسيم التصنيفات , قم بتغيير القيمة 40 في الكود السابق الى 35 , وسيتم إضافة الكود بنجاح إن شاء الله , وتنجح الطريقة .

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



اكمل القراءة...

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

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


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

ثانيا لتركيب الإضافة .. تابع معي

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

<data:post.body/>
ثم قم بإضافة الأكواد التالية قبلها . بما يناسب اختيارك منها .

  • الكود الأول .
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
وهذا سيكون شكل الإضافة.
 
  •  الكود الثاني .
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
وهذا سيكون  شكل الإضافة
 
  • الكود الثالث .
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
وهذا سيكون شكل الإضافة 
 
  •  الآن احفظ القالب .. 
تم بحمد الله  .. سبحان الله وبحمده .. سبحان الله العظيم .. عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته ..

اكمل القراءة...

حذف عنوان المدونة من جانب عنوان الموضوع في مدونات بلوجر blogger


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

حذف عنوان المدونة من جانب عنوان الموضوع في مدونات بلوجر blogger

نعم فمثلا لو أن عنوان التدوينة في محركات البحث هو " باسم - قوالب بلوجر " فسيكون العنوان " باسم " فقط وذلك لتسهيل العثور على مواضيعك من قبل محركات البحث ..

لكثير يبحث عن تلك الطريقة المميزة , وهى لها فوائد كثيرة جدا وبتفيد فى البحث .

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

كود:


<title><data:blog.pageTitle/></title>

ستجد الكود تحت <head> ليس تحتها مباشرة ولكن قريبة بعض الشىء .
بعد أن وجدت الكود السابق قم بأستبدالة بالكود التالى :


كود:
<!-- arab-bloggertemplates.blogspot.com SEO Blog Title -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if><!-- end arab-bloggertemplates.blogspot.com SEO Blog Title -->


وبكدا بأذن الله هيكون كلة تمام وأول لما تكتب موضوع ويتأرشف فى جوجل هتشوف النتيجة بأذن الله .

اكمل القراءة...

هاك جعل الصورة بارزة عن التدوينة في مدونات بلوجر blogger

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




أما الصورة الموجود بها حدود أو تكون بارزة عن التدوينة تكون كما يلي


ولمعرفة كيفية إضافة هذه الخاصية الى مدونتك أتبع الآتي :
  • القاعدة الماسية .. احتفظ بنسخة من قالب مدونتك .
  • من لوحة التحكم ثم تحرير html ابحث عن هذا الكود 
.post img {
padding: 5px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px #CFCFCF;
-webkit-box-shadow: 1px 1px 5px #CFCFCF;
box-shadow: 1px 1px 5px #CFCFCF;
}
  • ملحوظة : هذا الكود لن تجده في مدونتك بالتفصيل ولكن ابحث عن أول جزء منه وهو
.post img {
 الى هذه العلامة }
  • ثم قد باستبداله بهذا الكود 
.post img {
padding: 5px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px #CFCFCF;
-webkit-box-shadow: 1px 1px 5px #CFCFCF;
box-shadow: 1px 1px 5px #CFCFCF;
}
  •  ثم احفظ القالب .
تحديث : بالنسبة للأشخاص الذين لم يتمكنوا من إضافة الهاك , أولا عليههم البحث عن 
</head>
ثم إضافة الكود هذا الكود قبل " فوق " الكود السابق مباشرة
.post img {
padding: 5px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px #CFCFCF;
-webkit-box-shadow: 1px 1px 5px #CFCFCF;
box-shadow: 1px 1px 5px #CFCFCF;
}
    أرجو أن يكون قد استطعت بأبسط شرح توضيح الهاك .. بطريقة مبسطة ..
    وعند وجود أي مشكلة في التركيب يرجى وضعها في التعليقات .. تحياتي أخوكم : باسم ..
    لا تنسونا ممن صالح دعائكم ..

    اكمل القراءة...