السلام عليكم ورحمة الله وبركاته
اليوم سوف نتعرف على إضافة معروفه لدى الجميع ولكن عدلنا على هذه الإضافة بحيث أصبحت في قمة الإحترافية تابعوا معنا كيفية تركيب الإضافة .
- طريقة تركيب الإضافة :
1- أدخل إلى مدونتك ثم أختر تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- ضع الكود التالي فوقه .
/* All-in-one-social share widget by Home Blogger----------------------------------------------- */
.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.dhi_menu {
height: 34px;
width: 304px;
background: #b8b8bc;
background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
background: linear-gradient(top, #b8b8bc 0%,#38383a 10%);
}
.dhi_menu:hover {
height: 34px;
width: 304px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
}
.dhi_menu li {
list-style: none;
float: left;
display: block;
height: 40px;
}
.dhi_menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 25px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.dhi_menu li:first-child a {
border-left: none;
}
.dhi_menu li:last-child a {
border-right: none;
}
.dhi_menu li:hover > a {
color: #FFCC00;
}
.dhi_menu ul {
position: absolute;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.dhi_menu li:hover > ul {
opacity: 1;
}
.dhi_menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.dhi_menu li:hover > ul li {
height: 36px;
overflow: hidden;
padding: 0;
}
.dhi_menu ul li a {
width: 75px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 0px solid #353539;
}
.dhi_menu ul li:last-child a {
border: none;
}
.dhi_menu a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vceqaI-5_igZfc_WhC-8abWNCDKpBRTUHzgGJgMG1TsPNqFuTl_35TJken2xRsU37qEpwdD6kNOpI52DdqfcL0O-2W4lP9NRi9ZacuWEZhsM3hYGalmavbIIc96POgoddjInRbYH0XU/s1600/03-twitter-20.png) no-repeat 6px center;
background-color: #0ba6f7;
}
.dhi_menu a.comment {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hqGkpSRvOiECD-oGCsGLMmc3bgsyenmHXmkBns1r3zasrcjHMPyiTCI6mFnj6i5AirYzqrIiZ5uLf_HhBDbf4erkFp5QoAKakMoqfPPwEhD5i_VfOClvQd0ltHmTMbeRYfFXahmkQ20/s1600/bubble-24-20.png) no-repeat 6px center;
background-color: #999999;
}
.dhi_menu a.share {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkSlwfO2IHepM-LJpfmNmmKcUp0ufP61Ud-96fJ-WaYRapLY1fpqSxjrghS9obQfyq_kFkVLtmS5vyX31-vLklDlGMHUp65QE04qgq7L64_wcBrxzVE4y-H3SK8cJEKylBOLxbPsoqV3E/s1600/06-facebook-20.png) no-repeat 6px center;
background-color: #003366;
}
.dhi_menu a.plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHiWkXwfBnC71NMEm6oI7SoRY8uHGYRhyphenhyphentNM5Z28Pf0lURx6yHBJHeJUBtmXXtlaFEKEs6ntDfShG71_AA_4ffJErNQPRf96mmLq8BmtY7Km4RIw3aaxRwlDWIbjAttUK_DQ8N7uTl34/s1600/40-google-plus-20.png) no-repeat 6px center;
background-color: #dc311b;
}
.dhi_menu a.rss {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9KQysKLHrLC1VNbQdEjarsBCaCyRPx0TCaXU9m1iWTXOLyKyxkNadnKaHEHY8iUsQYJbswJhjHsmQm2ttr1JqsS9usYTyLEO4Q1YdEn0p5eHAbU7so582RD7O-aGHMEtM3dtjz58epQ/s1600/60-rss-20.png) no-repeat 6px center;
background-color: #FF6600;
}
.dhi_menu a.newsletter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9W2FIGzNuvzHxZDJ2Om9rVaTgY0gfneGKBbzrQ3myL9z2Hf635OCEDsETY8T-IdE4isWpueuu_bCky-6WL-wTwOc7qK80E5Diju6HLwmoLPTK-ZpprGP4DJGcUWyg9y3DO_qPXOIc8gQ/s1600/Black_Email.png) no-repeat 6px center;
background-color: #3b3c3c;
}
.dhi_menu a.faq {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCd8cBu7ZcO8AczTuWqRSKd0O1ZRuVsNZyKP411al3im7GoSBo_-FiEAicxTpMuZtu05DfqQdLk_axut0b9YRVrpveqq8JJboxwdzfm3XBhYQzDf2rF8gXPtoBoKecYoA7P1Mkqqp9x4/s1600/question-faq-128.png) no-repeat 6px center;
background-color: #CDBFAC;
}
.dhi_menu a.follow {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vceqaI-5_igZfc_WhC-8abWNCDKpBRTUHzgGJgMG1TsPNqFuTl_35TJken2xRsU37qEpwdD6kNOpI52DdqfcL0O-2W4lP9NRi9ZacuWEZhsM3hYGalmavbIIc96POgoddjInRbYH0XU/s1600/03-twitter-20.png) no-repeat 6px center;
background-color: #0ba6f7;
}
.dhi_menu a.fanpage {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkSlwfO2IHepM-LJpfmNmmKcUp0ufP61Ud-96fJ-WaYRapLY1fpqSxjrghS9obQfyq_kFkVLtmS5vyX31-vLklDlGMHUp65QE04qgq7L64_wcBrxzVE4y-H3SK8cJEKylBOLxbPsoqV3E/s1600/06-facebook-20.png) no-repeat 6px center;
background-color: #1950bf;
}
.dhi_menu a.youtube {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZ8j6F3EqVN02cG7XxXwkimNIM5ijf2eQ67RJ4io3oV6LUHJNXZwyGeV_85X3Noe1T0eyT3NYVULBeEk6c5D9zXqTfKoqxy3rzRFtVxahQSKnwwdZWs4F8cXGb4_SwGPuLerykQYmGw4/s1600/18-youtube-20.png) no-repeat 6px center;
background-color: #880000;
}
.dhi_menu a.google {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHiWkXwfBnC71NMEm6oI7SoRY8uHGYRhyphenhyphentNM5Z28Pf0lURx6yHBJHeJUBtmXXtlaFEKEs6ntDfShG71_AA_4ffJErNQPRf96mmLq8BmtY7Km4RIw3aaxRwlDWIbjAttUK_DQ8N7uTl34/s1600/40-google-plus-20.png) no-repeat 6px center;
background-color: #dc311b;
}
4- بعد ذلك إبحث عن السطر التالي موجود منه أثنان المقصود منه الثاني :
<div class='post-footer'>
5- ضع الكود التالي تحته :
<ul class='dhi_menu'> <li> <a href='#'> Share ▼ </a> <ul> <li> <a class='twitter' data-via='labstrike' expr:href='" http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'>Twitter</a> </li> <li> <a class='share' expr:href='"http://www.facebook.com/share.php? v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>Share</a> </li> <li> <a class='comment' href='#comments1' id='cmtbtn'>Comment</a> </li> <li> <a class='plus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank' title='Post on GoogleBuzz'> Google+</a> </li> </ul> </li> <li> <a href=''>Subscribe ▼ </a> <ul> <li> <a class='rss' href='http://feeds.feedburner.com/xxxxxxx' target='_blank'>RSS</a> </li> <li> <a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx' target='_blank'>Newsletter</a> </li> <li> <a class='faq' href='#faq' target='_blank'>FAQ</a> </li> </ul> </li> <li> <a href='#'>Connect ▼ </a> <ul> <li> <a class='follow' href='http://twitter.com/xxxxxxx' target='_blank'>Follow</a> </li> <li> <a class='fanpage' href='http://facebook.com/xxxxxxx' target='_blank'>Fanpage</a> </li> <li> <a class='youtube' href='https://www.youtube.com/user/xxxxxxx' target='_blank'>YouTube</a> </li> <li> <a class='google' href='https://plus.google.com/xxxxxxx/' target='_blank'>Google+</a> </li> </ul> </li> </ul>
- أخيراً إحفظ القالب .
0 Comments:
إرسال تعليق