معهد خبراء بلوجر - اضافة قائمه للموقع الاجتماعيه بتقنيه cc3 لمدونات البلوجر

http://2.bp.blogspot.com/-X1yrJ2tjp6...8%B3%D8%B3.jpg

http://3.bp.blogspot.com/-A8d2_z-typ...ist+widget.png

للتركيب الاضافه

اذهب الي لوحه التحكم ثم الي صفحه القالب >> ثم تحرير >> ثم ابحث عن]]></b:skin> ثم قبله مباشره الصق الكود التالي

كود بلغة HTML:

.widget-item-control a{display:none;}



#jocial{width: 305px;



float: left;margin-top: 10px;}



#jocial li{position:relative; cursor:pointer; padding: 0 !important;}



#jocial .facebook, .googleplus, .rss, .twitter{



position: relative;



-moz-transition: all 0.4s ease-in-out;



-webkit-transition: all 0.4s ease-in-out;



-o-transition: all 0.4s ease-in-out;



transition: all 0.4s ease-in-out;



z-index: 5;



display: block;



float: left;



margin: 1px;}



#jocial .icon{overflow:hidden;}



#jocial .facebook{width: 150px;



height: 150px;



background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-BGOX3zdOF4s/UQNU_PFl3oI/AAAAAAAAFL0/_5nRgCuxHrc/s1600/facebook.png") no-repeat center center;}



#jocial .twitter{width: 150px;



height: 74px;



background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}



#jocial .googleplus{width: 150px;



height: 74px;



background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}



#jocial .rss{ width: 302px;



height: 74px;



background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;}



#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;



-webkit-transition: all 0.1s ease-in-out;}



#jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;



-webkit-transition: all 0.1s ease-in-out;}



#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;



-webkit-transition: all 0.1s ease-in-out;}



#jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;



-webkit-transition: all 0.1s ease-in-out;}

ثم قم بحفض القالب.

توجه الان الي تخطيط >> اضافه اداه>>ضع الكود التالي في اداه HTML/JavaScript :

كود بلغة HTML:

<ul id='jocial'>



<li><a class='icon facebook' href='http://www.facebook.com/*******/'/></li>



<li><a class='icon twitter' href='http://twitter.com/*******'/></li>



<li><a class='icon googleplus' href='https://plus.google.com/*******/'/></li>



<li><a class='icon rss' href='http://feeds.feedburner.com/*******'/></li>



</ul>

وهذا كل شئ اذا واجهتك مشكله لا تتردد في وضعها والسلام عليكم ورحمه الله وركاته.

المصدر : http://face-alarab.blogspot.com/2013/01/cc3.html

تابعونا على المدونه http://face-alarab.blogspot.com