6 اكواد لـ نبذه عن صاحب المدونه بالصور About blogger

مجموعه طيبه من اكواد وبرمجه خفيفه لـ نبذه عن صاحب المدونه

البحث

]]></b:skin>

ضع الكود فوقه

.authorbio {

background-color: #F8F8F8;

margin-bottom: 20px;

margin-top: 30px;

padding: 20px 10px;

}

.authorbio img {

border: 3px solid #eee;

float: right;

height: 125px;

margin: 0 0 0 10px;

outline: 1px solid #ddd;

width: 125px;

}

.authorbio h6 {

display: inline-block;

margin: 0;

font-size: 17px;

margin-bottom: 8px;

}

.authorbio h6 strong {

color: #3cafe0;

font-size: 17px;

}

.authorbio span {

color: #666;

display: block;

font: 16px/2em tahoma;

margin: 0;

}

ابحث عن

<div class='post-footer'>

ضعه تحته هذا الثاني

<b:if cond='data:blog.pageType == "item"'>

<div class='authorbio'>

<imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ9-SNCN08__EOzd6eO43twrud1K0s37X_sZQ48DhKA9jQ5qOeHfsnkP8ojByUbW4T6zvVZanLd482dF-85YNrMLyZVB_FEj5tLPQpu4Ob8SD2ocGu41VDsQhvZTpRmGcbsL1fFNa_V7fa/s223-Ic42/blank_user.jpg'/>

<h6>صاحب المدونه : <strong>اخوكم هإأيف إألكويت </strong></h6>

<span>راح تجد كل ما تبحث عنه من عالم الانترنت ومواضيع محليه وشخصيه ومعلومات
العالم فقط شاركنا</span>

<div style='clear: both;'/>

</div>

</b:if>

البحث عن

]]></b:skin>

فوقه

.swt-author {

background-color: aliceblue;

font-weight: bold;

border-top: 1px solid #321;

border-left: 2px solid #000;

border-right: 2px solid #000;

border-bottom: 1px solid #123;

overflow: auto;

}

.swt-author name {

display: inline-block;

font-size: 15px;

float: left;

text-align: center;

margin: 5px;

white-space: nowrap;

}

.swt-author name a {

font-style: italic;

color: #fff;

background-color: #000;

padding: 12px;

padding-top: 1px;

padding-bottom: 2px;

البحث عن

<div class='post-header-line-1'>

الثاني تحته

<div class='swt-author'><name> Author

<a expr:href='data:post.authorProfileUrl' rel='author'
title='authorprofile'><span itemprop='name'><data:post.author/>

</span></a>

</name></div>

وهذا

.swt-author {

background-color: aliceblue ;

font-weight: bold;

border-top: 1px solid #321;

border-left: 2px solid #000;

border-right: 2px solid #000;

border-bottom: 1px solid #123;

overflow: auto;

}

.swt-author profile {

font-family:"Times New Roman", Times, serif;

font-weight: normal;

padding:5px 0;

margin:0;

text-transform:auto;

line-height:24px;

word-wrap:break-word;

}

.swt-author profile info {

font-size: 18px;

text-align: justify;

font-family: 'Droid Serif', serif;

}

.swt-author profile img {

float: left;

margin: 5px;

width:125px;

border: 2px solid #666;

border-radius:25px;

opacity:0.4;

filter:alpha(opacity=40);

transition:width 1s, height 1s, transform 1s;

-webkit-transition:width 1s, height 1s, -webkit-transform 1s;

}

.swt-author profile img:hover {

border-radius:5px;

opacity:1.0;

filter:alpha(opacity=100);

transform:rotate(360deg);

-webkit-transform:rotate(360deg);

وهذا متحرك

.swt-author {

margin: 1em 0;padding: .5em .25em;

background-color: #f1f4f8;

border: 5px solid #192a3e;

border-style: groove;

overflow: auto;

-webkit-transition:all .4s ease-in-out;

-moz-transition:all .4s ease-in-out;

-ms-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

transition:all .4s ease-in-out;

}

.swt-author:hover {

color:#ffffff;background-color: #192a3e;

border: 5px solid #1ABC9C;

border-style: outset;

-webkit-transition:all .4s ease-in-out;

-moz-transition:all .4s ease-in-out;

-ms-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

transition:all .4s ease-in-out;

}

.swt-author:hover img {

border: 2px solid #1ABC9C;

border-radius:100px;

opacity:0.8;

filter:alpha(opacity=80);

-webkit-transition:all .4s ease-in-out;

-moz-transition:all .4s ease-in-out;

-ms-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

transition:all .4s ease-in-out;

}

.swt-author profile {

font-family:"Times New Roman", Times, serif;

font-weight: normal;

padding:5px 0;

margin:0;

text-transform:auto;

line-height:24px;

word-wrap:break-word;

}

.swt-author profile info {

font-size: 24px;

text-align: justify;

font-family: 'Droid Serif', serif;

}

.swt-author profile img {

float: left;

margin: 5px;

width:100px;

border: 2px solid #192a3e;

border-radius:50px 0;

opacity:1.0;

filter:alpha(opacity=100);

-webkit-transition:all .5s ease-in-out;

-moz-transition:all .5s ease-in-out;

-ms-transition:all .5s ease-in-out;

-o-transition:all .5s ease-in-out;

transition:all .5s ease-in-out;

والبحث عن

<div class='post-footer-linepost-footer-line-1'>

تحت الثاني

<b:if cond='data:blog.pageType == "item"'>

<div class='swt-author'>

<b><u>نبذه عن المدونه : </u></b>

<profile>

<img
alt='author'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDR-_qPIK12xxl1R6tistLkvvKE2DorbHV2ld7o1VuvTgb6ZN4h3Wi1d6TTs05kDiC6KvTj4u6xC12B1i08VeDUSZYEpPmc4YUehO5F7e8k3VNI-g2SNMsBuxoNHb0XoCz3iS7didLz6a0/s600-Ic42/kuwait_hayef-Hacked-by.gif'/>

<info> حياكم الله في مدونتي البسيطه صفحات هايف
<i><ahref='#'>المزيد</a></i>...</info>

</br><hr>

<a href='replace it with youtube profile url'>اليوتيوب</a> |

<a href=' replace it with Facebook profile url'>الفيس بوكس</a> |

<a href=' replace it with Twitter profile url'>التويتر</a>

</profile></div>

</b:if>

البحث عن

]]></b:skin>

فوقه حط

@font-face { font-family: 'JF-Flat-regular';
src:url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot');src:url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot?')format('embedded-opentype'),url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.woff')format('woff'),url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.ttf')format('truetype');}

.postauthor {

background: #f8f8f8;

border: 1px solid #e74c3c;

padding: 10px;

overflow: hidden;

margin: 4px 0px -7px 0px;

}

.postauthor img {

float: right;

background: #fff;

margin: 0 0 0 8px;

padding: 4px;

border: 1px solid #E0E0E0;

border-radius: 3px;

}

.postauthor h4 {

font: normal 20px JF-Flat-regular;

font-weight: bold;

color: #3D5272;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sxdeZrUBEkbA6sOtdDjHyR_EYNonX3-Hc3iAm6TqxXGUg73hyphenhypheniUT-ObJPknh9ACyr7IqPvZNWHgfXWDkOOV_z2NlRcY8NytiD9yiLN9vvASlbsLKrjjq-AFwMvVKOvC6bep7I8dOO6tW/s1600/user.png)no-repeat
84% 50%;

padding: 0 125px 0;

}

.postauthor a {

color: #5DA86C;

font-size: 20px;

padding-right: 2px;

}

.postauthor p {

font: normal 13px tahoma;

color: #34495e;

line-height: 2em;

text-shadow: 0 1px 0 #fff;

font-weight: bold;

}

#social_postauthor {

margin: 16px 0 0;

overflow: hidden;

background: #fff;

padding: 4px;

border-radius: 3px;

border: 1px solid #ddd;

}

#social_postauthor ul{margin:0;padding:0;overflow:hidden;}

#social_postauthor ul li {

float: right;

padding: 0;

margin: 3px 2px;

border-radius: 2px;

transition: 0.5s;

}

#social_postauthor ul li a{

display: inline-block;

float: right;

font-size: 0;

height: 30px;

line-height: 0;

text-indent: -9999em;

width: 30px;

transition:0.5s;

}

#social_postauthor ul li:hover{

transform:rotate(360deg);

-ms-transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

transition:0.5s;

}

#social_postauthor ul li span{

font: normal 13px JF-Flat-regular;

text-shadow: 0 1px 0 #fff;

padding: 4px 4px 4px 4px;

}

#social_postauthor .txt {

padding: 4px 0;

}

#social_postauthor .fb {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1iDosV_LeEmnnMpzTz9b7MLzBLTZ5RIeDth8KD-qqq_KMkI5CjuZU0Uw735ZNxchNVPWHHaYlNjsrz9q2d46TmQriI8cHu24IxXlFzw73rb4M4FYk8vZrwasHfHj4GVSeV-XRImrQqQ/s1600/fb.png)no-repeat
50% center;

background-color: #003366;

}

#social_postauthor .tw {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtPVW5DLvEpKPAb0hyrJyzh5PNxvWH7Ro7p9tyZembJPd2ealYaajA-3lFHnayd480rNG0FmlDtfTPJ-XVIhJVquppfpZw4PxSlfxCm_PPS4-9w7pkPraCPqsU2N-PwjuTbTFVqFaTCw/s1600/tw.png)no-repeat
50% center;

background-color: #0ba6f7;

}

#social_postauthor .gl {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUWS0D6uwPLLTeNVVzM04Oj4BAzMMDifKeL7e-gOdrb22LkamLMyh2mybBdkPVPM4HL3WGjXHHav6kQJLsGPFLR2ov4H8t_EIW0ZD-It0g5friKrqObmmRlFVZ_0yIgfYUWFsC3uMrFA/s1600/g.png)no-repeat
50% center;

background-color: #dc311b;

}

#social_postauthor .yt {

background:url(https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/youtube.png)no-repeat
50% center;

background-color: #dc311b;

}

.subspabox {

background:
#f8f8f8url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQSayOI7hVcik74Q0OgmU138kl6Kz0MsvQBzq92Xz4azdseOf9BRv4jc3tz5az-KJBMKMdOxMmgZk5LIuYcaL80HX3oAbz-bd9BmJv80dnDqqh_bXb03LFS6vccJ7gVL-Nm8sceVmjbgc/s1600/contact-gr.png)no-repeat
98% 50%;

font-family: JF-Flat-regular;

color: #293949;

margin: 0;

width: 55%;

text-align: right;

padding: 4px 25px 6px 0;

border: 1px solid #ddd;

border-radius: 3px;

float: right;

}

وتبحث عن

<div class='post-footer-line post-footer-line-1'>

او

<div class='post-footer'>

ونفس الشرح اخر واحد حطه تحته

<div class='postauthor'>

<img height='114'
rel='author'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqkR7mGPtODVjkinZ29MtMd1G2nlX8hLKlZc-pSrPuAWJQDLOfHMQjXcGRZrKgge6xbRbi9oQRHQgI5yT1qy8uA2H9DQwAF1pLYlKvzvd2rkSqQvEHSScyQcnOYXtaUgiiJID7H24odA/s1600/Closed-3ajmi-saefrenie.gif'
width='112'/>

<h4>

الكاتب :

<a href='http://algme3-kw.blogspot.com/' target='_blank'>

<data:post.author/>

</a>

</h4>

<p>وصف مختصر عن الكاتب </p>

<div class='rw-js-container'/>

<div id='social_postauthor'>

<ul>

<li class='txt'>

<span>

تواصل معي :

</span>

</li>

<li class='fb'>

<a href='#' rel='nofollow' target='_blank'>

fb

</a>

</li>

<li class='tw'>

<a href='#' rel='nofollow' target='_blank'>

tw

</a>

</li>

<li class='gl'>

<a href='#' rel='nofollow' target='_blank'>

gl

</a>

</li>

<li class='yt'>

<a href='#' rel='nofollow' target='_blank'>

yt

</a>

</li>

<form action='http://feeds.feedburner.com/blogspot/wQKqV'id='subspa'
method='post'onsubmit='window.open('http://feeds.feedburner.com/blogspot/wQKqV;,'popupwindow','scrollbars=yes,width=550,height=520');return
true'target='popupwindow'>

<input class='subspabox' onblur='if (this.value == ""){this.value =
"او ضع اميلك هنا حتى يصلك كل المواضيع برسائل...";}' onfocus='if
(this.value == "او ضع اميلك هناحتى يصلك كل المواضيع برسائل...")
{this.value = "";}'type='text' value='او ضع اميلك هنا حتى يصلك كل
المواضيع برسائل...'/>

</form>

</ul>

</div>

</div>

البحث عن

</b:skin>

فوقه

#author-box{margin:10px 0;}

#author-box a:hover{background:none!important;}

#author-box .row-1{background:#333;padding:20px;}

#author-box .row-1.avatar{float:right;line-height:1;-moz-box-shadow:0 0
10px#FFF;-webkit-box-shadow:0 0 10px #FFF;box-shadow:0 0 10px #FFF;}

#author-box .row-1 .info{margin:0 110px 0 0;}

#author-box .row-1 .info h6{color:#FFF;font-size:20px;margin:-4px 00;}

#author-box .row-1 .info
h6span{font-size:11px;font-weight:400;background:#1BA1E2;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;filter:alpha(opacity=60);opacity:0.6;margin:01em
0 0;padding:1px 9px 2px;}

#author-box .row-1 .infop{color:#DDD;font-weight:400;font-size:14px;margin:0;}

#author-box .row-2 {background:#666;}

#author-box
.row-2a.social-item{display:block;float:right;color:#FFF;text-align:center;padding:15px;}

#author-box .row-2 .social-item .icon{height:32px;width:32px;}

#author-box .row-2 .social-item
>span{display:block;text-align:center;margin:auto;}

#author-box .row-2 .social-item.label{font-weight:700;font-size:13px;}

#author-box .row-2a.social-item:hover{background:#1BA1E2!important;}

#author-box .row-2 .social-item.twitter .icon{background-position:0-32px;}

#author-box .row-2 .social-item.facebook .icon{background-position:0-64px;}

#author-box .row-2 .social-item.gplus .icon{background-position:0-96px;}

#author-box .row-2 .social-item.linkedin .icon{background-position:0-128px;}

#author-box .row-2 .social-item.youtube .icon{background-position:0-160px;}

#author-box .row-2 .social-item.pinterest.icon{background-position:0 -192px;}

#author-box
.social-item.icon{background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;background-repeat:no-repeat;}

الان اعد البحث عن الكود التالي

<div class='post-footer'>

بعد عثورك عليه ضع الكود التالي اسفله.

<div id='author-box'><div class='row row-1'><div class='avatar'>

<a href='http://xxxxx.blogspot.com/'>

<img alt='author-avatar' class='avatar avatar-90 photo'
height='90'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ9-SNCN08__EOzd6eO43twrud1K0s37X_sZQ48DhKA9jQ5qOeHfsnkP8ojByUbW4T6zvVZanLd482dF-85YNrMLyZVB_FEj5tLPQpu4Ob8SD2ocGu41VDsQhvZTpRmGcbsL1fFNa_V7fa/s223-Ic42/blank_user.jpg'width='90'/>

</a></div><div class='info'><h6><span>هنا تكتب اسمك</span></h6>

<p><strong>حياكم الله في مدونتي البسيطه</strong>

<strong> صفحات هايف</strong>

</p></div><div class='clear'/></div>

<div class='row row-2'>

<a class='social-item website' href='https://xxxxx.blogspot.com/'meta='website'
target='_blank'>

<span class='icon'/><span class='label'>الموقع</span></a>

<a class='social-item twitter' href='https://xxxxx.blogspot.com'meta='twitter'
target='_blank'>

<span class='icon'/><span class='label'>التويتر</span></a>

<a class='social-item facebook' href='https://xxxxx.blogspot.com'meta='face'
target='_blank'>

<span class='icon'/><span class='label'>الفيسبوك</span></a>

<a class='social-item gplus' href='https://xxxxx.blogspot.com'meta='gplus'
target='_blank'>

<span class='icon'/><span class='label'>جوجل +</span></a>

<a class='social-item linkedin' href='https://xxxxx.blogspot.com'meta='linkedin'
target='_blank'>

<span class='icon'/><span class='label'>لينكدين</span></a>

<a class='social-item youtube' href='https://xxxxx.blogspot.com'meta='youtube'
target='_blank'>

<span class='icon'/><span class='label'>يوتيوب</span></a>

<div class='clear'/></div></div>

البحث عن

]]></b:skin>

فوقه حط

.postauthor {

background: #F5F5F5;

border-top: 1px solid #e1e1e0;

border-bottom: 1px solid #e1e1e0;

overflow: hidden;

padding: 0.7em;

}

.postauthor img {

border: 5px solid #e2dede;

float: right;

margin-left: 1em;

}

.postauthor h3 {

color: #666;

font-size: 1.2em;

margin-bottom: 5px;

margin-top: 0;

}

.postauthor p {

color: #515151;

font-size: 12px;

margin-bottom: 10px;

margin-top: 0;

}

البحث عن

<data:post.body/>

وجدت ثنتين فالثانية هي المقصودة) ثم مباشرة بعدها ضع الكود الآتي تحته

[او بتحديد تحت ]

<b:if cond='data:blog.pageType
=="static_page"'><data:post.body/></b:if>

وتعيده مرتين : تنبيه هذا التطبيق على قوالب المدونه الاصلي فقط وغيرالمعربه او من
تصميم شخصي ملخبط " واذا وجدت واحد او اثنين اضف تحته

<b:if cond='data:blog.pageType == "item"'>

<div class='postauthor'>

<img alt='' height='80'src='http://ser1.almlf.com/i/00016/r63hwfye8uou.png'
width='80'/>

<h3>بقلم <a href='Blog Link'> اسم الكاتب </a></h3>

<p> هايف السفراني : يسميكم بالخير ويصبحكم بالخير - kuwaiT </p>

</div>

</b:if>

البحث عن

]]></b:skin>

فوقه

.author-nak1ha h3 span{ color:#465769;}

.author-nak1ha h3{ color: #fff; font-size: 23px;

font-weight: 100;}

.author-nak1ha p{color: #fff}

.author-nak1ha img{ width: 100px;

height: 100px;

text-align: center;

border: 2px solid #ffffff;

border-radius: 90px;

position: absolute;

right: 0;

left: 0;

top: -50px;

margin: auto;}

.author-nak1ha{

border:1px solid #2a4057;

border-left: 0;

text-align: center;

position: relative;

border-right: 0;

padding: 20px 0;

background: rgb(36, 55,
80)url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_Ia333Ga5JfFWlnR0L3u1HoJLihD4vs_BYTZ9DC2lordT7hY7n5RuvON1zoy0Pz8YdyssX8GyqWLuTGZ53iM63arDA384K21PLTBhHYHokyr18lCwLM4mV2f8kU0v4ZY-mUs74Unafc/s1600/Nature_Persian-Star.png);

padding-top: 64px;

color: #fff;

margin: 42px auto;

margin-bottom: 12PX;

width: 100%;

}

.author-nak1ha a {

color: #fff;

}

البحث عن

</body>

فوقه

او البحث

<div class='post-footer'>

تحته

<b:if cond='data:blog.pageType == "item"'>

<div class="author-nak1ha">

<img alt="هايف السفراني" class="author_avatar"expr:alt='data:post.author'
expr:src='data:post.authorPhoto.url'width='100%'/>

<h3>

الكاتب : <span>

<a href="#" rel="author"><data:post.author/></a>

</span>

</h3>

<p>

اكتب الصيغه هنا </p>

</div>

</b:if>

وتمتع : صفحات هايف

6 اكواد لـ نبذه عن صاحب المدونه بالصور About blogger

إرسال تعليق

نموذج الاتصال