اضافة مؤسس المدونة بتصميمك الخاص

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

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

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

مميزات الاضافة

🔖 خفيفة على القالب لا تؤثر على سرعته .
🔖 بساطة التصميم وروعة المشهد .
🔖 سهولة التركيب وسهولة التعديل عليها .
🔖 تعطي الزائر معلومات عن مؤسس المدونة .
🔖 نظافة الاكواد وقلتها .

طريقة التركيب

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

<div id='profile-wrapper'>
<img src='http://www.mrkzgulf.com/do.php?img=496110'/>
<text style='background:#1D1F20;border : 2 px dashed #000;color:#fff; font:14 px droid kufi;text-align:center' class='green'><span><a>محمد ارش</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: #1D1F20;
    border: 2px solid #9F3F3F;
    border-radius: 15px 0px 15px 0px;
    margin: 0 0 20px;
    font-size: 12px;
color:#fff !important ;
    font-weight: normal !important;
    }
    #profile-wrapper img {
    border: 2px solid #9F3F3F;
    border-radius: 5px;
    margin: 0 0 10px;
    height: 250px;
    width: 250px;
    float:center;
      -moz-box-shadow: 0 15px 10px -12px black;
box-shadow: 0 15px 10px -12px black;
    }
    #profile-wrapper h2 {
    font: normal 25px tahoma;
    color: #fff;
    text-align:center;


    }
    #profile-wrapper p {
    font: normal 12px tahoma;
    color: #fff;
    line-height: 2em;
    }
    #social-wrapper{padding:0px 0px 0;overflow:hidden;margin-right: 110px;float:center;}
.social-icons a.facebook {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KjedM3tn0p3G8VQssKgSelGQyJuQ-Jnxj1YbBFkZvHQRl2Kn5ilaX9oqQG3BHjMVPk-01EJbcwSegWHuWKToNYfb-SCKvuofAO6OUPa7QRw2zB3BrGdfVjq1ZsrOjCfhln-ruSarmQk/s1600/facebook.png);
background-color:#9F3F3F;
    }
    .social-icons a.facebook:hover {
    background-color: #4265b9;
    }
    .social-icons a.twitter {
        background-color:#9F3F3F;

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKvMEIhm_lWeewoKwasZKPZyI_9hxxDWtF0Tl25d2A69sGjxKe5JKnj-VeGMmfxM8SQRlgxu8G1F_Ft16u8cEvZHXqq3Ltl0e5pWxmvQbepzkcqY1OiBQedyoaGBpFfP-lZMsLCZf2yU/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{
   height: 20px;
    width: 90px;
background: #1D1F20;
-moz-box-shadow: 0 15px 10px -12px black;
box-shadow: 0 15px 10px -12px black;
border: 1px dashed #9F3F3F;
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>

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

طريقة تغيير تصميم الاضافة

🎨 الكود #9F3F3F هو كود اللون الخاص بطار اضافة غيره الى مايناسبك .
🎨 الكود #9F3F3F هو كود اللون الخاص باطار الصورة غيره بما يناسبك .
🎨 الكود المكرر #9F3F3F هو كود لون خلفية زر الفيس بوك وتويتر غيره بما يناسبك .
🎨 الكود #9F3F3F هو كود الاطار المنقط حول الاسم غيره بما يناسبك .

بعد التعديل واختيار الالوان التي تناسبك قم بحفظ الاداة ومبروك عليك الاضافة 🎉

ودمتم في حفظ الله ورعايته 👋