السلام عليكم و رحمة الله تعالى و بركاته معكم امين من أفكار التقنية العالية في هذا الدرس الحصري الذي سأطرح فيه ثلاثة أشكال مختلفة لتعريف الكاتب التي توضع أسفل التدوينة و هي أداة مه
مة جدا تحتاجها أية مدونة إذن نبدأ على بركة الله
الشكل الأول
هو شكل جميل و يمنحك زوار للمواقع الإجتماعية و أيضا الإنضمام لفريق العمل
طريقة الإضافة
تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :
]]></b:skin>
و تضيف قبلها مباشرة الكود التالي
.mblautbox { width:610px;}
.authorinfoname { padding-bottom:8px;padding-right:35px;width:180px;display: inline-block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGcV8yBvoHCrP6s5PH5kYvKbB1b6p7e8TxJpFH5TVKjZ1899OQGW5N7rUmIgoIfAdiuIV9ujFK2hBNjYwr4pLinn6xPmrLbx4ohkrPFraPR4qFmIEz61z2D9qNNKWMEEuJ7S8XtxITdc/s1600/line.png) no-repeat 50% bottom;}
.authorinfodescription {}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #afafaf;
text-decoration: none;
outline: none;
}
.mblautinfo {
background: #f5f5f5;
margin-left:20px;
-webkit-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
-moz-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
float:right; padding:2px;margin-right: 0px;height:110px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.Author-Effects {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 173, 255, 0.43);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.mblautbox{
direction: rtl;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0jR-TZx3uqrV26q4WsYUWhoKsudqoNizbBu4Wc5iJwXs6t3YquFTq3ILsVuftTziXL-66GGXQzdCWIL6vXykDgWRXUrxKve6JeujmbIukY2Aqx7u_Xtd8iEnVy9jqI4fQDvXcz7Wcus/s1600/bk_header.png);
border-right: 3px solid #00C2FF;
border-left: 3px solid #00C2FF;
border-top: 3px solid #00C2FF;
float: center;
padding: 10px 10px 10px 10px;
margin: 5px 7px 5px 0px;
color: #FFFFFF;
font-size: 14px;
line-height: 26px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px;
}
#socialcontact {
direction: rtl;
float: right;
background: #12bde9;
border-bottom: 3px solid;
border-right: 3px solid;
width: 400px;
margin: -5px 7px 0 0;
}
#socialcontact img {
float:right;
margin: 0 8px 0;
}
#joinus {
background: #0c96ba;
float: right;
width: 230px;
border-bottom: 3px solid;
border-left: 3px solid;
height: 48px;
margin-top: -5px;
}
.joinus-img {
width: 230px;
}
.my-stumpleuop:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-pinterest:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-youtube:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-facebook:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-twitter:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-gplus:hover {
background: rgba(255, 255, 255, 0.56);
}
و بعدها تبحث عن الكود التالي :
<data:post.body>
ستجد أكثر من وحده " يمكن خمس او اربع " ضع الكود اسفل الأخيرة , واذا لم تنجح , جرب التي قبلها وهكذا الى ان تنجح معك.
أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :
هذا هو الكود مع تعديل :
<b:if cond='data:blog.pageType == "item"'>
<div class='mblautbox'>
<div class='Author-Effects'>
<a class='authorinfolink' href='https://plus.google.com/' title='bouzadi'>
<img border='1' class='mblautinfo' src='http://im58.gulfup.com/8vM82M.jpg' title='Hamza Bouzadi'/>
</a><br/>
<div>
<div class='mblautobox'>
<span class='authorinfoname'>إسم الكاتب</span></div>
<div class='authorinfodescription'>اكتب هنا نبذه قصيره عن الكاتب
<br/>
</div>
</div>
<div style='clear: both;'>
</div>
</div>
</div>
<div id='socialcontact'>
<a href='https://facebook.com/'><img alt='تابعنا على facebook' class='my-facebook' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png' title='تابعنى على فيس بوك'/></a>
<a href='https://twitter.com'><img alt='تابعنا على twitter' class='my-twitter' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png' title='تابعنى على تويتر'/>
</a>
<a href='https://plus.google.com/'><img alt='تابعنا على google+' class='my-gplus' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png' title='تابعنى على جوجل بلس'/></a>
<a href='https://youtube.com/'><img alt='تابعنا على youtube' class='my-youtube' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-youtube.png' title='تابعنى على يوتيوب'/>
</a>
<a href='https://stumbleupon.com/'><img alt='تابعنا على stumbleuop' class='my-stumpleuop' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-stumbleupon.png' title='تابعنى على stumbleupon'/>
</a>
<a href='https://pinterest.com/'><img alt='تابعنا على pinterest' class='my-pinterest' src='http://img01.arabsh.com/uploads/image/2013/08/19/0c34434c6df406.png' title='تابعنى على pinterest'/>
</a>
</div>
<div id='joinus'>
<a href='اكتب ما يناسبك هنا'><img alt='انضم الى فريق العمل' class='joinus-img' src='http://img02.arabsh.com/uploads/image/2013/08/19/0c34434d66f101.png' title='انضم الى فريق العمل'/>
</a>
</div>
</b:if>
=استبدله برابط حسابك على الفيسبوك.
=استبدله برابط حسابك على التويتر.
=استبدله برابط حسابك على جوجل بليس.
=استبدله برابط قناتك على اليوتوب.
=استبدله برابط حسابك على ستامبليون.
=استبدله برابط حسابك على بانتريست.
=استبدله بما يناسبك(رابط طلب الانظمام الى فريق العمل).
=استبدله بإسمك أو اسم الكاتب. =استبدله بتعريف الكاتب.
و قم بحفط القالب
----------------------------------------------------------------
الشكل الثاني
شكل جميل و أكثر من رائح + ألوان جذابة و جميلة جدا + أستخدمه أنا شخصيا على مدونتي
طريقة الإضافة :
كما العادة تبحث عن الكود التاليفي تحرير القالب :
]]></b:skin>
و أضف قبله هذا الكود :
#mblrib {
width: 111px;
height: 111px;
margin-right: -15px;
margin-top: -15px;
background: url(http://im33.gulfup.com/CspXz.png) no-repeat;
z-index: 7;
position: absolute;
}
.mblautbox {border: #4f5966 solid 3px; width:100%;}
.authorinfoname { text-decoration:underline;}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #000;
text-decoration: none;
outline: none;
}
.mblautinfo {
border: #000000 solid 4px;
-moz-border-radius: 74px;
-webkit-border-radius: 85px;
border-radius: 85px;
margin-left: 20px;
float: right;
padding: 4px;
margin-right: 0px;
height: 100px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.mblautbox{
direction: rtl;
background: #59D1E2;
line-height: 1.7em;
float: center;
padding: 10px 5px 10px 1px;
margin: 21px 1px 6px 0;
color: #000000;
font-family: GE SS Two Light;
font-size: 15px;
line-height: 24px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px; }
و إبحث عن هذا الكود التالي :
<div class='post-footer'>
ضغ فوقه أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :
<!-- تعريف الكاتب الأول -->
<b:if cond='data:blog.pageType == "item"'>
<div class='mblautbox'>
<div id='mblrib'>
</div>
<a class='authorinfolink' href='رابط حسابه على الفيسبوك أو الجيميل' title='bouzadi'>
<img border='1' class='mblautinfo' src='رابط صورة الكاتب' title='bouzadi'/>
</a><br/>
<div>
<div class='mblautobox'>
<b>بقلم:</b>
<span class='authorinfoname'>إسم الكاتب</span></div>
<div class='authorinfodescription'>
نبذة عن الكاتب "يوميات بوزادي للمعلوميات"هنا
<br/>
<b>يمكنك متابعتي على:</b>
<a href='http://facebook.com/hamza.bouzadi'>فيس بوك</a> | <a href='https://twitter.com/bouzadi1'>تويتر</a> | <a href='https://plus.google.com/+hamzabouzadihamzabouzadi'>جوجل بلس</a> | <a href='http://www.youtube.com/user/hamzabouzadi/'>يوتيوب</a> | <a href='http://www.bouzadi.com/'>الموقع</a>.</div>
</div>
<div style='clear: both;'>
</div>
</div>
</b:if>
</b:if>
</div>
<!-- تعريف الكاتب الأول -->
و قم بتغيير ما هو محاط بلون و إعمل حفظ القالب
-----------------------------------------------------------------
الشكل الثالث
و هو شكل جميل أيضا و جيد و خفيف و هو من تصميم حلول بلوجر و يستعمله الكثير في مدوناتهم
طريقة الإضافة
تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :
]]></b:skin>
و تضيف قبلها مباشرة الكود التالي :
<!-- design by : bouzadi.com -->
<div class='bouzadi'>
<img src='http://www.gravatar.com/avatar/92e1beaa140f01b72d6566db567330a0.png'/>
<a href='http://www.رابط-موقعك.com'>حمزة بوزادي</a>
<p>اسمي عبدالله : من المملكة العربيه السعوديه , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..</p>
<div id='bouzadi-icons'>
<a href='http://www.رابط-الفيسبوك.com'><img src='https://jetara.googlecode.com/files/facebook34.png'/></a>
<a href='http://www.رابط-تويتر.com'><img src='https://jetara.googlecode.com/files/twitter342.png'/></a>
<a href='http://www.رابط-جوجل-بلس.com'><img src='https://jetara.googlecode.com/files/google_plus421.png'/></a>
</div>
</div>
<!-- design by : bouzadi.com -->
<style>
/* design by : bouzadi.com */
.bouzadi{height:120px;width:620px;overflow:hidden;float:right;background:url(https://jetara.googlecode.com/files/124124124.png);}.bouzadi img{height:80px;width:80px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;overflow:hidden;float:right;border-radius:100px;margin-right:47px;margin-top:21px;margin-left:0;margin-bottom:0;padding:0;border:0;}.bouzadi a{float:right;text-shadow:1px 1px 5px #111;font:700 23px arial,tahoma;color:#EEE;text-decoration:none;padding:4px;width:200px;margin:0;text-align:right;}.bouzadi p{margin:0;text-shadow:1px 1px #000;height:75px;margin-bottom:0;margin-left:0;width:355px;color:#E9E8E8;border-bottom:2px solid #222;-webkit-box-shadow:0 1px #555;box-shadow:0 1px #555;overflow:hidden;font:13px tahoma,arial;float:right;direction:rtl;margin-right:30px;margin-top:3px;text-align:right;}#bouzadi-icons{float:left;width:108px;height:32px;margin-top:-4px;}#bouzadi-icons a{padding:0;float:left;width:auto;}#bouzadi-icons img{width:36px;height:32px;-webkit-box-shadow:none;box-shadow:none;border-radius:0;float:left;margin:0;padding:0;background:rgba(0, 0, 0, 0);}
/* design by : bouzadi.com */
</style>
و تعمل حفظ القالب و يكون هذا هو آخر شكل أقدمه لكم
إذن هذا هو درسنا إخواني إلى درس قادم إن شاء الله و مع إضافات أخرى و حصرية و الآن دوركم إخواني لكي تضعوا بصمتكم في التعليق و السلام عليكم و رحمة الله و إلى اللقاء "حمزة بوزادي"
مة جدا تحتاجها أية مدونة إذن نبدأ على بركة الله
الشكل الأول
هو شكل جميل و يمنحك زوار للمواقع الإجتماعية و أيضا الإنضمام لفريق العمل
طريقة الإضافة
تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :
]]></b:skin>
و تضيف قبلها مباشرة الكود التالي
.mblautbox { width:610px;}
.authorinfoname { padding-bottom:8px;padding-right:35px;width:180px;display: inline-block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGcV8yBvoHCrP6s5PH5kYvKbB1b6p7e8TxJpFH5TVKjZ1899OQGW5N7rUmIgoIfAdiuIV9ujFK2hBNjYwr4pLinn6xPmrLbx4ohkrPFraPR4qFmIEz61z2D9qNNKWMEEuJ7S8XtxITdc/s1600/line.png) no-repeat 50% bottom;}
.authorinfodescription {}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #afafaf;
text-decoration: none;
outline: none;
}
.mblautinfo {
background: #f5f5f5;
margin-left:20px;
-webkit-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
-moz-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
float:right; padding:2px;margin-right: 0px;height:110px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.Author-Effects {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 173, 255, 0.43);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.mblautbox{
direction: rtl;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0jR-TZx3uqrV26q4WsYUWhoKsudqoNizbBu4Wc5iJwXs6t3YquFTq3ILsVuftTziXL-66GGXQzdCWIL6vXykDgWRXUrxKve6JeujmbIukY2Aqx7u_Xtd8iEnVy9jqI4fQDvXcz7Wcus/s1600/bk_header.png);
border-right: 3px solid #00C2FF;
border-left: 3px solid #00C2FF;
border-top: 3px solid #00C2FF;
float: center;
padding: 10px 10px 10px 10px;
margin: 5px 7px 5px 0px;
color: #FFFFFF;
font-size: 14px;
line-height: 26px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px;
}
#socialcontact {
direction: rtl;
float: right;
background: #12bde9;
border-bottom: 3px solid;
border-right: 3px solid;
width: 400px;
margin: -5px 7px 0 0;
}
#socialcontact img {
float:right;
margin: 0 8px 0;
}
#joinus {
background: #0c96ba;
float: right;
width: 230px;
border-bottom: 3px solid;
border-left: 3px solid;
height: 48px;
margin-top: -5px;
}
.joinus-img {
width: 230px;
}
.my-stumpleuop:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-pinterest:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-youtube:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-facebook:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-twitter:hover {
background: rgba(255, 255, 255, 0.56);
}
.my-gplus:hover {
background: rgba(255, 255, 255, 0.56);
}
و بعدها تبحث عن الكود التالي :
<data:post.body>
ستجد أكثر من وحده " يمكن خمس او اربع " ضع الكود اسفل الأخيرة , واذا لم تنجح , جرب التي قبلها وهكذا الى ان تنجح معك.
أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :
هذا هو الكود مع تعديل :
<b:if cond='data:blog.pageType == "item"'>
<div class='mblautbox'>
<div class='Author-Effects'>
<a class='authorinfolink' href='https://plus.google.com/' title='bouzadi'>
<img border='1' class='mblautinfo' src='http://im58.gulfup.com/8vM82M.jpg' title='Hamza Bouzadi'/>
</a><br/>
<div>
<div class='mblautobox'>
<span class='authorinfoname'>إسم الكاتب</span></div>
<div class='authorinfodescription'>اكتب هنا نبذه قصيره عن الكاتب
<br/>
</div>
</div>
<div style='clear: both;'>
</div>
</div>
</div>
<div id='socialcontact'>
<a href='https://facebook.com/'><img alt='تابعنا على facebook' class='my-facebook' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png' title='تابعنى على فيس بوك'/></a>
<a href='https://twitter.com'><img alt='تابعنا على twitter' class='my-twitter' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png' title='تابعنى على تويتر'/>
</a>
<a href='https://plus.google.com/'><img alt='تابعنا على google+' class='my-gplus' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png' title='تابعنى على جوجل بلس'/></a>
<a href='https://youtube.com/'><img alt='تابعنا على youtube' class='my-youtube' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-youtube.png' title='تابعنى على يوتيوب'/>
</a>
<a href='https://stumbleupon.com/'><img alt='تابعنا على stumbleuop' class='my-stumpleuop' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-stumbleupon.png' title='تابعنى على stumbleupon'/>
</a>
<a href='https://pinterest.com/'><img alt='تابعنا على pinterest' class='my-pinterest' src='http://img01.arabsh.com/uploads/image/2013/08/19/0c34434c6df406.png' title='تابعنى على pinterest'/>
</a>
</div>
<div id='joinus'>
<a href='اكتب ما يناسبك هنا'><img alt='انضم الى فريق العمل' class='joinus-img' src='http://img02.arabsh.com/uploads/image/2013/08/19/0c34434d66f101.png' title='انضم الى فريق العمل'/>
</a>
</div>
</b:if>
=استبدله برابط حسابك على الفيسبوك.
=استبدله برابط حسابك على التويتر.
=استبدله برابط حسابك على جوجل بليس.
=استبدله برابط قناتك على اليوتوب.
=استبدله برابط حسابك على ستامبليون.
=استبدله برابط حسابك على بانتريست.
=استبدله بما يناسبك(رابط طلب الانظمام الى فريق العمل).
=استبدله بإسمك أو اسم الكاتب. =استبدله بتعريف الكاتب.
و قم بحفط القالب
----------------------------------------------------------------
الشكل الثاني
شكل جميل و أكثر من رائح + ألوان جذابة و جميلة جدا + أستخدمه أنا شخصيا على مدونتي
طريقة الإضافة :
كما العادة تبحث عن الكود التاليفي تحرير القالب :
]]></b:skin>
و أضف قبله هذا الكود :
#mblrib {
width: 111px;
height: 111px;
margin-right: -15px;
margin-top: -15px;
background: url(http://im33.gulfup.com/CspXz.png) no-repeat;
z-index: 7;
position: absolute;
}
.mblautbox {border: #4f5966 solid 3px; width:100%;}
.authorinfoname { text-decoration:underline;}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #000;
text-decoration: none;
outline: none;
}
.mblautinfo {
border: #000000 solid 4px;
-moz-border-radius: 74px;
-webkit-border-radius: 85px;
border-radius: 85px;
margin-left: 20px;
float: right;
padding: 4px;
margin-right: 0px;
height: 100px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.mblautbox{
direction: rtl;
background: #59D1E2;
line-height: 1.7em;
float: center;
padding: 10px 5px 10px 1px;
margin: 21px 1px 6px 0;
color: #000000;
font-family: GE SS Two Light;
font-size: 15px;
line-height: 24px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px; }
و إبحث عن هذا الكود التالي :
<div class='post-footer'>
ضغ فوقه أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :
<!-- تعريف الكاتب الأول -->
<b:if cond='data:blog.pageType == "item"'>
<div class='mblautbox'>
<div id='mblrib'>
</div>
<a class='authorinfolink' href='رابط حسابه على الفيسبوك أو الجيميل' title='bouzadi'>
<img border='1' class='mblautinfo' src='رابط صورة الكاتب' title='bouzadi'/>
</a><br/>
<div>
<div class='mblautobox'>
<b>بقلم:</b>
<span class='authorinfoname'>إسم الكاتب</span></div>
<div class='authorinfodescription'>
نبذة عن الكاتب "يوميات بوزادي للمعلوميات"هنا
<br/>
<b>يمكنك متابعتي على:</b>
<a href='http://facebook.com/hamza.bouzadi'>فيس بوك</a> | <a href='https://twitter.com/bouzadi1'>تويتر</a> | <a href='https://plus.google.com/+hamzabouzadihamzabouzadi'>جوجل بلس</a> | <a href='http://www.youtube.com/user/hamzabouzadi/'>يوتيوب</a> | <a href='http://www.bouzadi.com/'>الموقع</a>.</div>
</div>
<div style='clear: both;'>
</div>
</div>
</b:if>
</b:if>
</div>
<!-- تعريف الكاتب الأول -->
و قم بتغيير ما هو محاط بلون و إعمل حفظ القالب
-----------------------------------------------------------------
الشكل الثالث
و هو شكل جميل أيضا و جيد و خفيف و هو من تصميم حلول بلوجر و يستعمله الكثير في مدوناتهم
طريقة الإضافة
تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :
]]></b:skin>
و تضيف قبلها مباشرة الكود التالي :
<!-- design by : bouzadi.com -->
<div class='bouzadi'>
<img src='http://www.gravatar.com/avatar/92e1beaa140f01b72d6566db567330a0.png'/>
<a href='http://www.رابط-موقعك.com'>حمزة بوزادي</a>
<p>اسمي عبدالله : من المملكة العربيه السعوديه , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..</p>
<div id='bouzadi-icons'>
<a href='http://www.رابط-الفيسبوك.com'><img src='https://jetara.googlecode.com/files/facebook34.png'/></a>
<a href='http://www.رابط-تويتر.com'><img src='https://jetara.googlecode.com/files/twitter342.png'/></a>
<a href='http://www.رابط-جوجل-بلس.com'><img src='https://jetara.googlecode.com/files/google_plus421.png'/></a>
</div>
</div>
<!-- design by : bouzadi.com -->
<style>
/* design by : bouzadi.com */
.bouzadi{height:120px;width:620px;overflow:hidden;float:right;background:url(https://jetara.googlecode.com/files/124124124.png);}.bouzadi img{height:80px;width:80px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;overflow:hidden;float:right;border-radius:100px;margin-right:47px;margin-top:21px;margin-left:0;margin-bottom:0;padding:0;border:0;}.bouzadi a{float:right;text-shadow:1px 1px 5px #111;font:700 23px arial,tahoma;color:#EEE;text-decoration:none;padding:4px;width:200px;margin:0;text-align:right;}.bouzadi p{margin:0;text-shadow:1px 1px #000;height:75px;margin-bottom:0;margin-left:0;width:355px;color:#E9E8E8;border-bottom:2px solid #222;-webkit-box-shadow:0 1px #555;box-shadow:0 1px #555;overflow:hidden;font:13px tahoma,arial;float:right;direction:rtl;margin-right:30px;margin-top:3px;text-align:right;}#bouzadi-icons{float:left;width:108px;height:32px;margin-top:-4px;}#bouzadi-icons a{padding:0;float:left;width:auto;}#bouzadi-icons img{width:36px;height:32px;-webkit-box-shadow:none;box-shadow:none;border-radius:0;float:left;margin:0;padding:0;background:rgba(0, 0, 0, 0);}
/* design by : bouzadi.com */
</style>
و تعمل حفظ القالب و يكون هذا هو آخر شكل أقدمه لكم
إذن هذا هو درسنا إخواني إلى درس قادم إن شاء الله و مع إضافات أخرى و حصرية و الآن دوركم إخواني لكي تضعوا بصمتكم في التعليق و السلام عليكم و رحمة الله و إلى اللقاء "حمزة بوزادي"
0 التعليقات:
إرسال تعليق