5 يونيو 2016

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

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

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

شرح و كيفية تركيب + معاينة الاضافة من هنا  :
  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>

      5 التعليقات

      موضوع جميل وصال اخي
      ممكن psd الخاص بشعار مدونتك وشكراا

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

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

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