الخميس، سبتمبر 06، 2012
اضافة اجمل ايقونات متابعة لمدونات البلوجر بأسهل الطرق
اضافة اجمل ايقونات متابعة لمدونات البلوجر بأسهل الطرق |
اليكم قائمة جميلة ومتحركة عند الضغط عليها عبارة عن ايقونات لمتابعة مدونتك على الشبكات الاجتماعية اضافة الى انها سهلة التركيب وتضم 4 ايقونات لقوقل بلس Googl plus و تويتر twitter والفيس بوك Facebook والتغذية rss وكمثال على ذلك يمكنكم مشاهدتها كما في الصورة في الاعلى او على الصفحة الرئيسية لمدونة كيفي والان نأتي الى طريقة اضافة الايقونات فقط اذهب الى لوحة تحكم مدونتك ثم الى التصميم ثم اضافة اداة ثم اداة الجافا سكربت وقم بإلصاق الكود التالي فيه والف مبروك .
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:right;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6mC0cZgug3xj9ui99liYMwm9wUxvLvZVlEnVepTyj9QwoNZApnK5mjO8Z4X1DcfMuGpmSdVPrpE0SL7mHNelQGX8aqV_W0TY9BLCgJEyDck97HI8wRqCSg8vpMWppRz4kHjbyc6PdLI/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:right;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6mC0cZgug3xj9ui99liYMwm9wUxvLvZVlEnVepTyj9QwoNZApnK5mjO8Z4X1DcfMuGpmSdVPrpE0SL7mHNelQGX8aqV_W0TY9BLCgJEyDck97HI8wRqCSg8vpMWppRz4kHjbyc6PdLI/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="ضع رابط تغذية ال rss هنا " rel='external nofollow' target='_blank'></a>
<a class='rss' href="ضع رابط تغذية ال rss هنا " rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="ضع رابط بروفايلك في قوقل بلس هنا" rel='external nofollow' target='_blank'></a>
<a class='googleplus' href="ضع رابط بروفايلك في قوقل بلس هنا" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="ضع رابط صفحتك على الفيس بوك هنا " rel='external nofollow' target='_blank'></a>
<a class='facebook' href="ضع رابط صفحتك على الفيس بوك هنا " rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="ضع رابط صفحتك على تويتر هنا " rel='external nofollow' target='_blank' ></a>
<a class='twitter' href="ضع رابط صفحتك على تويتر هنا " rel='external nofollow' target='_blank' ></a>
</div>
واخيرا لا تنسى ان تدخل الروابط الخاصة بك في المكان المشار اليها في اخر الكود
1 التعليقات:
شكرااا اضافة روعة
إرسال تعليق