أضغط هنا للمعاينة الاضافة

]]></b:skin>

   .post-body img {        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");     /* Firefox 3.5+ */        filter: gray;     /* IE6-9 */        -webkit-filter: grayscale(100%);     /* Chrome 19+ & Safari 6+ */;    }    .post-body img:hover {        filter: none;        -webkit-filter: grayscale(0%);    }

.post-body img {    max-width:100%;    max-height:auto;}

 .imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 14px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    right: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    left: 0;
    right: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-right: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    right: 0;
    bottom: auto;
  /* reset from default */
    padding-right: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

<center><div class="imagepluscontainer" style="width:263px;">
<img src="هنا ضع رابط الصورة">
<div class="desc downslide">
هنا ضع وصف للصورة
</div>
</div></center>

<style type="text/css">
/*<![CDATA[*/

.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
   
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}


.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
   
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmV
yc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG
5zPSJodHRwOi8vd3d3LnczLm9yZy'
8yMDAwL3N2ZyIgd2lkdGg9IjEwM
CUiIGhlaWdodD0iMTAwJSIgdmlld0
JveD0iMCAwIDEgMSIgcHJlc2VydmV
Bc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGl
kPSJncmFkLXVjZ2ctZ2VuZXJhdGV
kIiBncmFkaWVudFVuaXRzPSJ1c2V
yU3BhY2VPblVzZSIgeDE9IjAlIiB5M
T0iMCUiIHgyPSIwJSIgeTI9IjEwMCUi
PgogICAgPHN0b3Agb2Zmc2V0PSIw
JSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc
3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c
3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3A
tY29sb3I9IiNjYzkxMmQiIHN0b3Atb3Bh
Y2l0eT0iMSIvPgogIDw

vbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lk
dGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id
XJsKCNncmFkLXVjZ2ctZ2VuZ
XJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-left: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
   
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
    text-decoration: none;
   
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHR

wOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwM

CUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2Vy

dmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW5
0IGlkPSJncmFkLXVjZ2ctZ2VuZX
JhdGVkIiBncmFkaWVudFVuaXRz
PSJ1c2VyU3BhY2VPblVzZSIgeD
E9IjAlIiB5MT0iMCUiIHgyPSIwJSI

geTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1
jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFj
aXR5PSIxIi8+CiAgICA8c3RvcCBvZ
mZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3A
tb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbn

Q+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIg

ZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}
/*]]>*/
</style>

أعمل حفظ للأداة

ثم بعد ذلك أختار أضافة أداة >>التسميات

وعدل الخيارات كما هو موضح في الصورة 

أضافة التسميات في قائمة منسدلة لمدونات البلوجر 

أما هذا الدرس فمختلف من ناحية الشكل والمظهر بحيث تجعل كل قسم في داخل مربعات بأستخدام الخصائص css  ممايضيف مظهر جذاب وراقي

صورة للشكل الأضافة

دعونا الأن نرى في كيفية تطبيق هذه الأضافة في مدونات البلوجر

علينا أولا تعديل بعض الأعدادات في التسميات وهذه صورة في كيفية التعديل

بعد ذلك نتوجه تصميم >> تحرير htm

توسيع للقالب

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

]]></b:skin>

ثم نضيف فوقه مباشرة

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

قم بتظليله إلى أن تصل للكود 

</b:widget>

وسوف تجد الكود السابق بعد 5-10 أسطر

قم بتحديدها كاملا وأستبدلها بالكود

ثم أعمل حفظ للقالب

وسلام عليكم ورحمة الله وبركاته

]]></b:skin>

#stickey_footer { /* This will make your footer stay where it is */
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 right: 50%;
 margin:0 -490px 0 auto;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}
/* border curves */
#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: right;
 font-size:13px;
 padding:12px 14px 14px 14px;
 border-left:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 14px 3px 8px;
 float:right;
 background:url("“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTeW6UO8wGKdy4Y_nPElqmNYhFJws7XBWs7lQU_d88YqjvwbkWOWGh5ERdGd45rr7HfgV5c_BQ2a9ZOIG5TxddA1CQg7YUTgrDj5xULB_uHFifDdd5yNF0IZOYGKxMkGJf_71hzpNVnug/s1600/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-left:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020; /* Fallback color for old browsers */
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-dDwzfo1S_a-bG2npsrJ7O4jooi0JBbiYYOnbD8l5boJgRcDJkuiL7kqT7rWYW9dSWazdQ6OBKR9CX0itNvSTmaJXpPJvIybqQC0yUc2jgguJiAcZUVt6vN7OuK8jYdI9G-z3VAQXGwc/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:left; /* social icons positions */
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-left:12px; /* 12px is the space between each one of them */
 float:right;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-left:0px; /* this is for IE6 only */
}

تهيئة HTML/JavaScript

وأضف الكود التالي داخل الصندوق

<div id="stickey_footer">
 <!– begin footer menu –>
<ul id="footer_menu">
 <li><a href="#"><span>الرئيسية</span></a></li>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 </li></li></li></li></li></ul>


 <ul id="social_icons">
 <!–social icons –>
 <li><a href="http://twitter.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAZbG0A3WlnandqZYEfuSZ0blz0KXI558ZkUR_SANeDjCx1VGtBgpsiAfaNLo_MaA7SVxfJCWTpFw-IQzMtNsd74F0nZUnLQeI8GjcwDBAMBAW__3XO2oXLY3oY3pVtbwYHQOXgcZ06Q/s1600/twitter.png' alt="تويتر" /><span>Twitter</span></a></li>
 <li><a href="http://digg.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Hw4CyoTvAC7mRKCE1MpauYbmaXQTMf8IOeU85ZF3Ytv3PgWOHuLcdFikDUIbmxSwNBljZRGftOWiHrkaG0p8jpfVhTK0iPldeSoIj22bZdsxxETzBP1V0SgMvXk3qfiVS49eK6qBXW4/s1600/digg.png' alt="digg" /><span>Digg</span></a></li>
 <li><a href="http://flickr.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLGW4c8RX2arWu8vvmuC3nDwc_Xub7Z0TE686fHfBTBOS4qN6joj6jjYEOfIHevPCGeozBy01L-AcilkEzpW6YWkJAyEcY_OTMHfUMI5xJTJU96CjmmzaSj9YdKUzefN9w6aW-edPFM8/s1600/flickr.png' alt="فلكر" /><span>Flickr</span></a></li>
<li><a href="https://plus.google.com/u/0/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe9m8G9Nv9zYRJQZcZx1UAMBl2y9aWoRzjZ25k9_e00Vc1Uus1jjkOwXQyrAWf9xlC5wXms6YiqO42DpVOOrgPtqo9Uy7ZKxeER_ZxUopXws6tDeL4I2EaoquwtHda7CjCKFHYcmOmg/s1600/g-plus-icon-32x32.png' alt="قوقل بلس" /><span>Flickr</span></a></li>
 <li><a href="http://fb.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7W1zbO111ji8R7hUluNa3le7WcfJOKQtTCQ9FnILtjjiL-pH9PRSDuqzfYWCoXH3ViCwWSF0rfP6F66CaCN_F0TcN1reITDm12Z6V7LPVqR2Hb6RTcif7955IZc-7z0LapiD_RrLaybA/s1600/facebook.png' alt="فيس بوك" /><span>Facebook</span></a></li>
 </!–social></ul></!–></div>

الأسماء المشار له بتضليل الأصفر هي أسماء وأقسام المدونة (عدلها بما يتوافق مع تسميات مدونتك)

# المشار له بلون الأزرق ضع مكانه روابط لاقسام التي تضيفها

username المشار له بلون الأحمر هي أسماء صفحتك في فيس بوك .قوقل بلس. تويتر.فلكر

وسلام عليكم ورحمة الله وبركاته