حصريا اضافة قائمه المواقع الاجتماعية بتقنية Cs3

حصريا اضافة قائمه المواقع الاجتماعية بتقنية Cs3






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

.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrT8LJjyvpS2xTuTkf9kKFTM-RbYVGSedGW5G77dYpCBCsdIIcVwK5vv0Tp23uwtqpsPrUvB3FwA6ma7JzGvtJdqIEJX6nnyG2m2y7CXoP2Bec4HJnPMgzfZ9lGXjWfZwGVTBwWn1hySrw/s1600/facebook.png") no-repeat center center;} #jocial .twitter{width: 150px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmit_Xip7AYPs7qr-3P4F8_DK_UjfN0u3XWPV-nJzg_5tM9lCD6k_sP_rqj2AUhWO_t1YxB7e_dhhqOJXXol8ZW_K3cpIZL9TUpjUgFFrHIhuXXkRubXJW8bR7Zvepztmtbk-loTPckhM/s1600/Twitter.png") no-repeat center center;} #jocial .googleplus{width: 150px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXSrs2tah6YLhCfFjykINJU39dtX4yoqNMnOX606LPIbtjhIXfcrPo1wKyFn3rcUEiPSTdOg0XFs2ykEXuyQCnKt0Axkf8cZySRq0-BWyg1E-5awv8mw6UCYJOu5nfC-raEgyo683ZoBO/s1600/google+plus.png") no-repeat center center;} #jocial .rss{ width: 302px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0d8VOdbWz0dV6hyphenhyphenSEHDWO78_022Ia1dI4RBDG2z3_NbhYn24nKUQjKayXLozRfZSLLM_7dojCneW6G8RoLBItx5Tzu4AoQbMx9CQrgPWzluQ_NnwKgDWGDt5FLxz-RotSr2AMCadyrzbx/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmit_Xip7AYPs7qr-3P4F8_DK_UjfN0u3XWPV-nJzg_5tM9lCD6k_sP_rqj2AUhWO_t1YxB7e_dhhqOJXXol8ZW_K3cpIZL9TUpjUgFFrHIhuXXkRubXJW8bR7Zvepztmtbk-loTPckhM/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXSrs2tah6YLhCfFjykINJU39dtX4yoqNMnOX606LPIbtjhIXfcrPo1wKyFn3rcUEiPSTdOg0XFs2ykEXuyQCnKt0Axkf8cZySRq0-BWyg1E-5awv8mw6UCYJOu5nfC-raEgyo683ZoBO/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0d8VOdbWz0dV6hyphenhyphenSEHDWO78_022Ia1dI4RBDG2z3_NbhYn24nKUQjKayXLozRfZSLLM_7dojCneW6G8RoLBItx5Tzu4AoQbMx9CQrgPWzluQ_NnwKgDWGDt5FLxz-RotSr2AMCadyrzbx/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 


<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>

لو فى مشكلة انا معاكم ان شاء الله 

تحياتى تطويرى

ليست هناك تعليقات :

المرجوا إحترام حقوق صاحب المدونة © 2013-2008 مدونة تطوير الويب |