اهلا وسهلا بكم متابعين مدونة البداية ويب اليوم سوف اقدم لكم اضافة رائعة تعرف الزوار من صاحب المدونة او الموقع اما بعد لن اطيل عليكم هيا بنا لنتعلم كيفية الاضافة ^^^^^^^ ولا تنسو أن هذه الإضافة الإصدار الثاني الإصدار الأول
الكود المقصود
<div class="widget-content"><div class="iuauthor-item"><div class="image-wrap"><img class="img-circle author_avatar img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixX629tiPIqUlruKi5wxCLYmQUN1b22FLC1pK-9P_eZ-eArNUu-2zezDbaZV2StLpLPYKLSKE2BzQdulcQlSRue-MbLk-s3NqOJTKrdjPJjHDZF1pYW6b9pPjxa94LbdJ3VABT2aYdnj_e/s180-no/imohamed.png" /></div><h4 class="iuauthor-name"><a href="http://start1web.blogspot.com/" target="_blank">عماد حدوش</a><p>مدون ومصمم ومطور بلوجر مواليد 2000 مدير مدونة البداية ويب لدي خبرتي المتوسطة في الويب بدأت في شهر 7 من 2014 وفي فترة وجيزة قطعت مسافة كبيرة ^_^</p></h4></div><style>/*------------------------------------------------------Iuauthor-Item------------------------------------------------------*/img.img-circle.author_avatar.img-responsive { width: 100%;}.iuauthor-item {padding: 15px 10px;text-align: center;margin-top: -20px;}.iuauthor-item .image-wrap { position: relative; overflow: hidden; border: 7px double #609DFF; width: 230px; margin: 0 auto; height: 230px; margin-bottom: 15px;}.iuauthor-item h4.iuauthor-name a { font-size: 18px; margin-bottom: 10px; display: block; background-color: #609DFF; color: #FFFFFF; border-radius: 2px; padding-bottom: 9px; padding-top: 6px;}.iuauthor-name p { color: #609DFF; font-size: 14px; margin-top: -11px; border: 1px double #609DFF; line-height: 24px; font-weight: 100; margin-bottom: -25px;}.iuauthor-item .image-wrap:before {content: '';display: block;position: absolute;border-radius: 50%;border: 10px solid #609DFF;border-image-source: initial;border-image-slice: initial;border-image-width: initial;border-image-outset: initial;border-image-repeat: initial;opacity: .7;margin: auto;top: 0;right: 0;bottom: 0;left: 0;-webkit-transition: all .4s linear;transition: all .4s linear;}</style></div>
نضف الكود في HTML/JAVASCRIPT
الي هنا وانتهينا ونلقاكم في تدوينة جديدة
تجربة
ردحذفعماد
ردحذف