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

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

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

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

شرح التركيب

نتوجه الى لوحة التحكم في بلوجر > التخطيط > اضافة اداة > جافا سكريب 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0ArN_qjiZcn0HoHFyHAp58LnpBFYAHGrdakAdHnaD2OeQ84Sn3E6oOGAn42duk08omMIDpolNTdKo4RZM8m9m2Krpd6-2PHPgWDF2GqrN6nHAVgjUGEuujpsDW-Cxq58Mrqpsdv7UZo/s1600/facebook.png);
    }
    .social-icons a.facebook:hover {
    background-color: #4265b9;
    }
    .social-icons a.twitter {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vZK8eowzERR32fRF_XMf2wbaCEl60yu_XoHZ_j5rbr40su1oTnRqKCfbtZsErLCAEF0H0rpCCHaMvcf3sNfc3f0h3V52NZJY0aTPT7Fi3grIj-s7xwgCRaAh5NmH3MsLUy0HD4NOgEk/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>

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

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

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

مع تحيات محمد ارش 👋

By glok

Similiar tagsبلوجر