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

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

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

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

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

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

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

نتوجه الى لوحة التحكم في بلوجر > التخطيط > اضافة اداة > 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 هو كود الاطار المنقط حول الاسم غيره بما يناسبك .

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

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

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

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

الكاتب : Unknown

شارك المقال