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

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

شكل الصندوق كما في الصورة اعلاه.

شرح و كيفية تركيب
داخل القالب تحرير html
فوق هذا الوسم <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}

فوق هذا الوسم <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>

وقم بتغيير مايلزم اسمك ونبذة عنك بدل الموجود في الكود.

شارك الموضوع ..