اضافة كتابة المدونة لمدونتك مع صورة الكاتب واخر مقاله

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


بسم الله على بركة الله

عليك الدخول الى لوحة التحكم  تم تصميم 

بعد تصميم اظغط على عناصر الصفحة 


 اضافة اداة


اضافة اداة جافا سكريبت


وضع الكود التالي 

<style style='text'>
.component {
    clear: both;
    float: right;
    margin-bottom: 10px;
    width: 100%;
}
.component blockquote {
    color: #3A3A3A;
    display: block;
    margin: 0;
    padding-right: 5px;
}
blockquote {
    border: 0px solid #CADAE7;
    color: #666666;
    font-style: italic;
    overflow: hidden;
    padding: 0px;
}
.homeWriter {
    border-bottom: 2px solid #FFFFFF;
    float: right;
    padding: 10px 0 15px;
    width: 50%;
}
.homeWriterImg {
    background: url("images/graphics/writerImgBg.gif") repeat-x scroll 0 0 transparent;
    display: inline;
    float: right;
    margin: 0 12px 0 5px;
    width: 60px;
}
.homeWriterImg img {
    border: 1px solid #989896;
    height: 60px;
    margin: 4px;
    width: 50px;
}
.homeWriterData {
    float: right;
    width: 110px;
}
.homeWriterData span {
    color: #DF2829;
    display: block;
    font-size: 11px;
    margin-bottom: 3px;
}
.homeWriterData span A {
    border-bottom: 1px solid #CCCCCC;
    color: #DF2829;
    display: block;
    text-decoration: none;
    font-style: normal;
}
.homeWriterData h3 {
    display: block;
    font-family: tahoma,Arial,Helvetica,sans-serif;
    font-size: 14px;
    margin: 0 0 0 -7px;
    font-style: normal;
}
.homeWriterData h3 A {
    color: #5D5D5D;
    text-decoration: none;
}

.compList {
    display: block;
    margin: 0;
    padding: 0;
}
.compList li {
    border-bottom: 1px solid #FFFFFF;
    display: block;
    list-style: none outside none;
    margin: 0;
}
.compList li A {
    border-right: 10px solid #F6F6F6;
    color: #3A3A3A;
    display: block;
    margin: 0 0 0 10px;
    padding: 5px 5px 5px 10px;
    text-align: justify;
    text-decoration: none;
}
.compList li A:hover {
    border-right: 10px solid #DEDEDE;
    color: #DD2020;
    margin: 0 0 0 10px;
    padding: 5px 5px 5px 10px;
}
.homeWriterData h3 A:hover {
    text-decoration: underline;
}
.homeWriterData span A:hover {
    border-bottom: 1px solid #DF2829;
}

</style>


<div class="component">
<blockquote>

<div class="homeWriter">
<div class="homeWriterImg">
<img src="رابط الصورة"/>
</div>
<div class="homeWriterData">
<span><a href="رابط الكاتب">الكاتب</a></span>
<h3><a href="رابط الموضوع">عنوان المقال</a></h3>
</div>
</div>

<div class="homeWriter">
<div class="homeWriterImg">
<img src="رابط الصوة"/>
</div>
<div class="homeWriterData">
<span><a href="رابط الكاتب">الكاتب</a></span>
<h3><a href="رابط الموضوع">عنوان المقال</a></h3>
</div>
</div>

<div class="homeWriter">
<div class="homeWriterImg">
<img src="رابط الصورة"/>
</div>
<div class="homeWriterData">
<span><a href="رابط الكاتب">الكاتب</a></span>
<h3><a href="رابط الموضوع">عنوان المقال</a></h3>
</div>
</div>

<div class="homeWriter">
<div class="homeWriterImg">
<img src="رابط الصورة"/>
</div>
<div class="homeWriterData">
<span><a href="رابط الكاتب">الكاتب</a></span>
<h3><a href="رابط الموضوع">عنوان المقال</a></h3>
</div>
</div>

</blockquote>
</div>

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

<div class="homeWriter">
<div class="homeWriterImg">
<img src="رابط الصورة"/>
</div>
<div class="homeWriterData">
<span><a href="رابط الكاتب">الكاتب</a></span>
<h3><a href="رابط الموضوع">عنوان المقال</a></h3>
</div>
</div>

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

</blockquote>

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

حياكم الله

ليست هناك تعليقات:

إرسال تعليق

..{ مَا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ }..

تواصل معي

تويتر

حسابي الشخصي على موقع تويتر.

تويتر

يوتيوب

قناتي الخاصة بالشروحات على موقع يوتيوب.

يوتيوب

فايس بوك

صفحتي الشخصية على موقع فايس بوك.

فايس بوك