اخر الاخبار

breaking/انترنيت/9
قوالب

6:01 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
اضافة صندوق تعريف الكاتب لمدونات بلوجر

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

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

شرح و كيفية تركيب + معاينة الاضافة من هنا  :
  1. داخل القالب تحرير html 
  2. فوق هذا الوسم  <b:skin/>  نضع الكود التالي:
    .ha1pcauthor img:nth-child(1){margin:0;padding:0} .ha1pcauthor img{float:right;height:125px;width:125px;margin-left:15px} .ha1pcauthor{background:#FCFCFC;border-left:1px solid #DDDDDD;font-family:ge_dinar_tworegular;overflow:hidden;padding:0 0 0 5px;border-bottom:1px solid #DDDDDD} .ha1pcauthor h3{background:#00ACED;color:#FFF;font-size:15px;margin:0 125px 0 -9px;padding:6px;line-height:27px} .ha1pcauthor p{color:#141823;font-size:13px;margin-bottom:0;margin-top:5px;padding-right:131px;text-align: right;Line-Height:22px} .ha1pcauthor .fa-user{margin-left:4px} .ha1pcauthor .fa-info-circle{margin-left:1px} #ha1pcaucohv{float:left;padding-left:10px;margin-top:4px} #ha1pcaucohv a{color:#fff} #ha1pcaucohv a:hover{color:#fff} #ha1pcaucohv .fa{margin-right:3px} .fa-share-alt{color:#30B7EF} .ha1pc-tooltip{position:relative;display:inline-block} .ha1pc-tooltip:before,.ha1pc-tooltip:after{position:absolute;opacity:0;z-index:1000;pointer-events:none} .ha1pc-tooltip:hover:before,.ha1pc-tooltip:hover:after{opacity:1} .ha1pc-tooltip:before{content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute} .ha1pc-tooltip:after{content:attr(data-ha1pc-tooltip)!important;background:#555;color:#fff;padding:6px 8px;font-size:11px!important;font-family:ge_dinar_tworegular;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial} .ha1pc-tooltip-top:before{bottom:140%;left:10%;margin:0 0 -9px;border-top-color:#555} .ha1pc-tooltip-top:after{bottom:125%;left:10%;margin:0 0 3px -10px !important} .ha1pc-tooltip-bottom:before{top:100%;left:50%;margin:-6px 0 0;border-bottom-color:#555} .ha1pc-tooltip-bottom:after{top:100%;left:50%;margin:6px 0 0 -10px} .ha1pc-tooltip-right:before{left:100%;bottom:50%;margin:0 0 -4px 4px;border-right-color:#555} .ha1pc-tooltip-right:after{left:100%;bottom:50%;margin:0 0 -13px 12px} .ha1pc-tooltip-left:before{right:100%;bottom:50%;margin:0 0 -4px;border-left-color:#555} .ha1pc-tooltip-left:after{right:100%;bottom:50%;margin:0 8px -18px 0}
    1. قوق هذا الوسم  <data:post.body/>  نضع الكود التالي:
      <div class='ha1pcauthor'> <img alt='الكاتب : حميد بناصر' src='http://lh5.googleusercontent.com/-OaCh5Ic0n5c/AAAAAAAAAAI/AAAAAAAAAzk/6nwr0D7Jub4/s512-c/photo.jpg'/> <h3><i class='fa fa-user'/>الكاتب : حميد بناصر<ul id='ha1pcaucohv'> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='موقعي الإلكتروني' href='http://ha1pc.com' target='_blank'><i class='fa fa-globe'/></a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة فيسبوك' href='https://www.facebook.com/' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة تويتر' href='https://www.twitter.com/' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة جوجل بلس' href='https://plus.google.com/' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> </ul> </h3> <p><i class='fa fa-info-circle'/> أنا حميد بناصر عمري 18 سنة من المغرب مدينة اكادير. خبير في مجال عالم البلوجر ومهتم بجديد أخبار التقنية والتدوين الإلكتروني. ويمكنك متابعتي عبر الروابط التالية... </p> </div> <div class='ha1pc2-3' style='border-top-color:rgb(221,221,221);border-top-style:dashed;border-width:2px 0 0;box-sizing:border-box;font-family:ge_dinar_tworegular;font-style:inherit;font-weight:inherit;margin:16px 0px 0;outline:0;padding:14px 0 0;text-align:center;vertical-align:baseline;'/> </div>
      1. موضوع جميل وصال اخي
        ممكن psd الخاص بشعار مدونتك وشكراا

        ردحذف
        الردود
        1. يسعدني انه اعجبك اخي (y)
          بالنسبة لشعار الموقع PSD ولله لم اعد اتوفر عليه لانني قمت بفرمتت الحاسوب فحدف :(
          لكن ساحاول صنع شعار مماتل ووضعه عما قريب ;)

          حذف
      2. أزال المؤلف هذا التعليق.

        ردحذف
      3. لا اخي يمكنك دلك فقط انقر مرتين على الكود

        ردحذف