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

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


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

معاينة الاضافة " من هنا "

شرح التركيب

نتوجه الى لوحة التحكم في بلوجر > التخطيط > اضافة اداة > جافا سكريب HTML/JavaScript ونقوم بلصق الكود التالي :

<div id='profile-wrapper'>
  <img src='https://lh5.googleusercontent.com/-1rIDCmPez7Y/AAAAAAAAAAI/AAAAAAAAABU/ehtdhP6WjeQ/s120-c/photo.jpg'/>
  <text style='background:#fff;border : 2 px dashed #000; font:14 px droid kufi;text-align:center'  class='green'><span><a href="http://ar-cher.blogspot.com">محمد ارش</a><span></span></span></text>
<p>مدون عربي مسلم , عمري 16 سنة , احب عالم التكنولوجيا والتدوين على بلوجر , اسعي للارتقاء بمدونتي بتقديم الافضل لزواري , كما احب مساعدة الاخرين و مشاركة الفائدة معهم , واتشرف بان اكون مساهما في حملة اثراء المحتوى العربي بتقديم محتوى مميز و رائع <p/>
 <div id='social-wrapper'>
    <div class='social-icons sticky-social'>
    <a class='facebook' href='https://www.facebook.com/profile.php?id=100004326226439'/>
    <a class='twitter' href='https://twitter.com/crestoo_skeer'/>
    </a></a></div>
    </div>
    </p></p></div>
    <style>
    #profile-wrapper {
    height: 450px;
    width: 280px;
    text-align: center;
    padding: 34px 20px;
    background: #FFF;
    border: 2px solid #00b4ff;
    border-radius: 15px;
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: normal !important;
    }
    #profile-wrapper img {
    border-radius: 5px;
    margin: 0 0 10px;
    height: 250px;
    width: 250px;
    float:center;
    }
    #profile-wrapper h2 {
    font: normal 25px tahoma;
    color: #F34D4D;
    text-align:center
    }
    #profile-wrapper p {
    font: normal 12px tahoma;
    color: #888;
    line-height: 2em;
    }
    #social-wrapper{padding:10px 0 0;overflow:hidden;margin-right: 65px;float:center}
.social-icons a.facebook {
    background-image: url(http://3.bp.blogspot.com/-pdQxvxA7dds/U0ieyygWJrI/AAAAAAAAAGc/3KI36bc8hno/s1600/facebook.png);
    }
    .social-icons a.facebook:hover {
    background-color: #4265b9;
    }
    .social-icons a.twitter {
    background-image: url(http://2.bp.blogspot.com/-qEwCYfxBfPM/U0ie0ZQki3I/AAAAAAAAAG8/fuhSYM5vbIQ/s1600/twitter.png);
    }
    .social-icons a.twitter:hover {
    background-color: #26d5ec;
    }
  
    .social-icons.sticky-social {
    text-align: right;
    float: right;
    }
    .social-icons {
    float: center;
    text-align: center;
    }
    .social-icons.sticky-social a {
    margin-left: 10px;
    margin-bottom: 10px;
    float: right;
    display: block;
    }
    .social-icons a {
    background-color: #dadada;
    }
    .social-icons a {
    width: 30px;
    height: 30px;
    margin: 0 3.5px !important;
    }
    .social-icons a {
    width: 30px;
    height: 30px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    }



    /* Author Bio */
    .postauthor {
    background: #F5F5F5;
    border-top: 1px solid #e1e1e0;
    border-bottom: 1px solid #e1e1e0;
    overflow: hidden;
    padding: 0.7em;
    }
    .postauthor img {
    border: 5px solid #e2dede;
    float: right;
    margin-left: 1em;
    }
    .postauthor h3 {
    color: #666;
    font-size: 1.2em;
    margin-bottom: 5px;
    margin-top: 0;
    }
    .postauthor p {
    color: #515151;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 0;
    }
.green{
background: #e2e0e0;
border: 1px dashed #2db5e8;
border-radius:5px;
  color: #333;
display: block;
padding: 5px;
color: #333;
text-align: center;
direction: rtl;
font-family:15px 'Droid Arabic Kufi', serif;
border-radius: 4px;
max-width: 800px;
margin: 5px auto;
}
    </style>

امور مهمة متعلقة بالكود السابق

🔖 استبدل الرابط الازرق برابط الصورة الخاصة بك .
🔖 استبدل الرابط الاخضر برابط مدونتك .
🔖 استبدل الاسم بالاحمر باسمك .
🔖 استبدل النص باللون + بنبذة قصيرة عنك .
🔖 استبدل الروابط باللون الاصفر بروابط صفحاتك في فيسبوك وتويتر .

ثم قم بحفظ الاداة , ومبروك عليك الاضافة 😊
مع تحيات محمد ارش 👋


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

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

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

شكرًا لك

×