صندوق التنبيهات أو للإعلان

هذه المدونة بها محتوى تجريبي ’غير مؤرشفة‘ مخصصة لعرض القالب وتجربته فقط، راجع مدونة عربي كاش2

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

تقسيم الفوتر الى ثلاثة خانات لمدونات بلوقر

تعليق واحد5:34 م, مرسلة بواسطة jamaa alhiane

تحت تسيمة: فوتر,فوتر البلوقر,تقسيم فوتر البلوقر,التحكم في فوتر البلوقر,تقسيم خانتان الى ثلاث لمدونات البلوقر

تقسيم الفوتر الى ثلاثة خانات

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


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

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

#footer-columns {

border-top:1px solid #999999;

clear:both;

margin:0 auto;

background: #ffffff;

}

#footer-columns h2 {

margin: 1.6em 0 .5em;

font: bold 16px Arial;

padding:10px;

background: #ffffff url(http://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;

color: #9b2d15;

}

.column1 {

padding: 0px 5px 3px 5px;

width: 30%;

float: left;

margin:3px;

text-align: right;

}

.column2 {

padding: 0px 5px 3px 5px;

width: 31%;

float: left;

margin:3px 3px 3px 5px;

text-align: right;

}

.column3 {

padding: 0px 5px 3px 5px;

width: 30%;

float: right;

margin:3px;

text-align: right;

}

.addwidget {

padding: 0 0 0 0;

}

#footer-columns ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

#footer-columns li {

margin:0;

padding-top:0;

padding-left:0;

padding-bottom:.25em;

padding-right:15px;

text-indent:-15px;

line-height:1.5em;

}

body#layout #footer-columns {

width: 100%;

margin-left: auto;

margin-right: auto;

}

body#layout .column1 {

width: 32%;

float: left;

}

body#layout .column2 {

width: 32%;

float: left;

}

body#layout .column3 {

width: 32%;

float: right;

}

السطر الملون هو ستايل لخلفية الادوات التي ستضعها في الفوتر .

بعد دلك ابحث عن الكود التالي:

<b:section class='footer' id='footer'/>

واستبدله بالكود التالي:

<div id='footer-columns'>

<div class='column1'>

<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column2'>

<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column3'>

<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>

</b:section>

</div>

<div style='clear:both;'/>

</div>

<b:section class='footer' id='footer'/>

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

المصدر




كيفية التحكم وتغيير هيدر المدونة

أضف تعليق4:39 م, مرسلة بواسطة jamaa alhiane

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


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

سأقوم بشرح كيفية تغيير هيدر المدونة والتي يسميها البعض Logo المدونة :

هناك خطوتان لتغيير وتركيب الهيدر اما عن طريق لوحة التحكم بلوقر او عن طريق تحرير القالب واضافة كود الهيدر .

·        تركيب هيدر المدونة عن طريق لوحة تحكم البلوقر
ادهب الى لوحة تحكم مدونتك|| تصميم || تحرير عناصر الصفحة

 ادهب الى تصميم || في اعلى الصفحة اظغط على تحرير|| رأس الصفحة|| ستظهر نافدة  مع عدة خيارات.
الخيار الاول :

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

 الخيار الثاني:

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

يلزمك الان وضع علامة صح على الخيارات التالية :

·        اما ان تكون الصورة فوق عنوان المدونة
·        او تكون صورة الهيدر تحت العنوان والوصف
 وانا انصحك بالخيار الاول لكي لايؤثر دلك على مظهر تناسق الهيدر مع العنوان والوصف
في الأخير اضغط على حفظ .

·        تركيب الهيدر عن طريق تحرير Html
ابحث عن الكود التالي:

#header-wrapper {
هدا نمودج لكود الهيدر:

background: url(http://yourblog.com/image.png) ;

و استبدل وصلة الصورة بمكان الصورة التي صممتها.
ان قمنا بتركيب هيدر المدونة في بعض الاحيان تكون الصورة صغيرة ,لدا يتوجب علينا اضافة خلفية للهيدر  ودلك عن طريق الكود التالي:
background: #000000 url(http://www.site.com/image.png) no-repeat top right;

حيث تمثل الرموز التالية في الكود اعلاه ما يلي:

#000000 لون خلفية الهيدر
http://www.site.com/image.jpeg رابط صورة الهيدر
no-repeat لعدم تكرار الصورة في الهيدر
top right لتحديد مكان الصورة يمين او يسار 
وفي الاخر يمكنك  || حفظ القالب ||

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

المصدر



,

سلايدر شو رائع JQuery

8 تعليق2:43 م, مرسلة بواسطة jamaa alhiane




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

  /*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNHxOUZzRUtblgWAKBIrgwwUYjycTW3rL9ctf7pMQRWtj5Jw_5YUfYdvr5z7FALHBvppOsYATbx3_oQyObI72E77NQPvMeoEeDiMpXMpMhRXJ8ab_nkPuOxMiaFDmaU0tS0EsZGoSNPbKb/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}




الخطوة الثانية ابحث عن الكود التالي:  </head>

 ثم قبله اضف الكود التالي :



 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>


الخطوة الثالثة :
قم بأضافة اداة جديدة ثم اضافة اداة جافا سكريبت



ثم انسخ الكود التالي




<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">



<a href="http://arabicash2.blogspot.com/2011/09/readbud.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239821.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/08/blooger.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239983.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/09/blog-post_29.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239392.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/08/blog-post_1018.html
"><img src=" http://im13.gulfup.com/2011-11-22/1321982239314.jpg
" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/09/blogger_09.html
"><img src="http://im11.gulfup.com/2011-11-22/1321987176421.jpg
" alt="" />
</a>


< ="http://arabicash2.blogspot.com/2011/11/blog-post_27.html"><img src="http://im13.gulfup.com/2011-11-29/1322600610541.jpg" alt="" />



</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>






مع تغيير روابط الصور وروابط المواضيع الى ما تختاره انت بحسب رغبتك.
لأسهل عليك الامر .قم بنسخ الكود التالي الى برنامج" مايكروسوفت ورد " لديك على الحاسوب وانسخ الكود التالي اليه وقم بالتعديل على الكود .قم ايضا برفع الصور التي تريده عبر موقع لرفع الصور وحدد المواضيع التي تريد ان تظهر على السلايدر بنسخ روابطه الى برنامج" الورد " .



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