اضافة صندوق تعريف الكاتب لمدونات بلوجر
بسم الله السلام عليكم تحياتى لكم جميعا فى هذا الموضوع اقدم لكم طريقة اضافة صندوق تعريف الكاتب لمدونات بلوجر, الصندوق له الكثير من المميزات لأنه يضيف لمسة من الجمال على المدونةوهو مهم لتعريف الزائر عليك من خلال وضع المعلومات الخاصة بك
- داخل القالب تحرير
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>
اضافة صندوق تعريف الكاتب لمدونات بلوجر
بسم الله السلام عليكم تحياتى لكم جميعا فى هذا الموضوع اقدم لكم طريقة اضافة صندوق تعريف الكاتب لمدونات بلوجر, الصندوق له الكثير من المميزات لأنه يضيف لمسة من الجمال على المدونةوهو مهم لتعريف الزائر عليك من خلال وضع المعلومات الخاصة بك
- داخل القالب تحرير
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>
