مرحبًا بكم في مقال اليوم من رؤيا للتقنيات، حيث نقدم إضافة حصرية واحترافية لأزرار المشاركة الاجتماعية المخصصة لمدونات بلوجر. تتيح هذه الأداة سهولة التركيب وإمكانية التخصيص الكامل، ما يجعلها خيارًا مثاليًا لتعزيز تجربة المستخدم وزيادة التفاعل على مدونتك.
.png) |
إضافة احترافية لأزرار المشاركة الاجتماعية بشكل رائع في مدونات بلوجر |
مميزات إضافة أزرار المشاركة الاجتماعية
توفر إضافة أزرار المشاركة الاجتماعية العديد من الخصائص المميزة، التي تجعلها ملائمة لجميع أنواع المدونات على منصة بلوجر:
- إمكانية التعديل الكامل: يمكنك تخصيص الأداة بكل سهولة وفقًا لاحتياجاتك.
- ألوان جذابة: تحتوي الإضافة على ألوان وتصميمات عصرية لجذب انتباه الزوار.
- تغيير اللون والحجم: يمكنك ضبط الألوان والحجم لتناسب تصميم مدونتك.
- إضافة أو حذف برامج التواصل الاجتماعي: تتيح لك الأداة إضافة أو إزالة أي منصة تواصل اجتماعي حسب رغبتك.
طريقة تركيب الإضافة في مدونة بلوجر
لتركيب إضافة أزرار المشاركة الاجتماعية في مدونتك، اتبع الخطوات التالية:
- فتح قالب المدونة: توجه إلى إعدادات مدونتك في بلوجر.
- الانتقال إلى التخطيط: اختر خيار "التخطيط" من القائمة الجانبية.
- إضافة أداة جديدة: اضغط على "إضافة أداة" واختر نوع الأداة HTML/JavaScript.
- نسخ ولصق الكود: قم بنسخ كود الأداة من الموقع الرسمي للصدى مكس، ثم الصقه في الحقل المخصص واضغط "حفظ".
تهانينا على الإضافة الجديدة
بمجرد اتباع الخطوات السابقة، ستحصل على أزرار المشاركة الاجتماعية في مدونتك بنجاح. تأكد من تجربة التأثيرات المتاحة وتخصيص الألوان لتتناسب مع تصميمك الخاص، ما سيعزز من جاذبية مدونتك ويساعد في زيادة تفاعل الزوار ومشاركة المحتوى.
سورة الإضافة التالية
<div id="nfs_social_count-2" class="nfs-social-counter">
<div class="sc-wrapper clearfix">
<!-- Facebook -->
<div class="fb-like-button sc-item">
<div class="sc-item-inner">
<a href="Your url" title="Facebook" target="_blank">
<span class="fa fa-facebook sc-icon"></span>
<span class="like-count">31758</span>
</a>
</div>
</div>
<!-- RSS -->
<div class="rss-button sc-item">
<div class="sc-item-inner">
<a href="Your url" title="comments" target="_blank">
<span class="fa fa-comments sc-icon"></span>
<span class="like-count">4445</span>
</a>
</div>
</div>
<!-- Twitter -->
<div class="twitter-like-button sc-item">
<div class="sc-item-inner">
<a href="Your url" title="twitter" target="_blank">
<span class="fa fa-twitter sc-icon"></span>
<span class="like-count">739</span>
</a>
</div>
</div>
<!-- Linkedin -->
<!-- Vimeo -->
<div class="vimeo-linke-button sc-item ">
<div class="sc-item-inner">
<a href="Your url" title="pinterest" target="_blank">
<span class="fa fa-pinterest sc-icon"></span>
<span class="like-count">83</span>
</a>
</div>
</div>
<!-- Google Plus -->
<div class="gplus-like-button sc-item">
<div class="sc-item-inner">
<a href="Your url" title="Google plus" target="_blank">
<span class="fa fa-google-plus sc-icon"></span>
<span class="like-count">76</span>
</a>
</div>
</div>
<!-- Instagram -->
<!-- Sound Cloud -->
<div class="dribbble-like-button sc-item ">
<div class="sc-item-inner">
<a href="Your url" title="youtube" target="_blank">
<span class="fa fa-youtube sc-icon"></span>
<span class="like-count">9000</span>
</a>
</div>
</div>
</div>
</div>
<style>
.nfs-social-counter{
clear: both;
text-decoration:none;
}
.nfs-social-counter .sc-wrapper{
margin: 0 -7px;
}
.nfs-social-counter .sc-wrapper .sc-item{
padding: 0 7px;
float: left;
margin-bottom: 22px;
width: 44.8%;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner{
text-align: center;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon{
display: block;
background: #4968a9;
margin: 0;
padding: 12px 0;
font-size: 24px;
color: #fff;
position: relative;
transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .sc-icon{
opacity: 0.9;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon:after{
content: "";
border-top: 7px solid #4968a9;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -7px;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .like-count{
color: #333;
padding: 6px;
display: block;
clear: both;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
position: relative;
letter-spacing: 0px;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .like-count:after{
content: "";
position: absolute;
bottom: -3px;
border-width: 0 1px 1px;
border-style: solid;
border-color: #ddd;
left: 2px;
right: 1px;
height: 3px;
}
.sc-item-inner a{
text-decoration:none
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .like-count{
color: #eb6b56;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss{
background: #fd9f13;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss:after{
border-top-color: #fd9f13;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter{
background: #24e0f1;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter:after{
border-top-color: #24e0f1;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin{
background: #0097BD;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin:after{
border-top-color: #0097BD;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube{
background: #ce322e;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube:after{
border-top-color: #ce322e;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-pinterest {
background:#D44E55;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-vimeo{
background: #5BC8FF;
min-height: 60px;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-comments {
background:#46CAB2;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-comments:after {
border-top-color: #46CAB2;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-pinterest:after{
border-top-color: #D44E55;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus:after{ border-top-color: #ec3939; }
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus{
background: #ec3939;
}
.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus:after{
border-top-color: #ec3939;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble{
background: #eb4c89;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble:after{
border-top-color: #eb4c89;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram{
background: #2f689b;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram:after{
border-top-color: #2f689b;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-soundcloud{
background: url(../images/fa-sound.png) no-repeat center center #FE7C00;
min-height: 25px;
}
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-soundcloud:after{
border-top-color: #FE7C00;
}
</style>
صورة الإضافة التالية
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="twitr">تويتر</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="face">فيس بوك</a></li>
</ul>
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="you">يوتيوب</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="khamsat">خمسات</a></li>
<li> <a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="rss">rss</a></li>
</ul>
<style>
.pro-ayoub_nav {
float: left;
width: 300px;
}
ol, ul {
list-style: none;
}
.pro-ayoub_nav li {
float: right;
margin-left: 5px;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #0ED6CE;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ED5029;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 28px -151px #5157DF;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
a#you {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 26px -397px #ff0000;
}
a#you:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -67px -397px #ffffff;
}
a#khamsat {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -318px #f2bb12;
}
a#khamsat:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -318px #ffffff;
}
a#rss {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -480px #ff5a00;
}
a#rss:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -480px #ffffff;
}
.pro-ayoub_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.pro-ayoub_nav li .pro-ayoub_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}
@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>خاتمة المقالة
في ختام مقالنا، نأمل أن تكون قد استفدت من المعلومات حول إضافة أزرار المشاركة الاجتماعية لمدونات بلوجر. تعتبر هذه الإضافة أداة قوية لتعزيز التفاعل مع المحتوى وزيادة ظهورك على مواقع التواصل الاجتماعي. لا تتردد في تخصيص الأزرار بما يتناسب مع تصميم مدونتك، وشارك أفكارك وتجاربك في التعليقات أدناه. شكرًا لزيارتك مدونة رؤيا للتقنيات، ونتطلع إلى رؤيتك دائمًا في عالم الإبداع والمحتوى المتميز!