اضافة ازرار المشاركه الاجتماعية تحت كل تدوينه حصريا

Add social sharing buttons under each blog entry exclusively

أقدم لكم أضافه جميله ومهم وهي أزرار مشاركه الموضوع على مواقع التواصل الاجتماعي هده الإضافه احد أهم الإضافات التي يجب إن تكون موجودة في كل مدونه الاضافه هده معروفه لد الجميع وهي أزرار أسفل كل موضوع يستطيع من خلاله الزائر نشر الموضوع في موقع التواصل الاجتماعي

نضع لكم هنا شكل مميز وجدب هد الشكل يحتوي على حركات مميزه وتم تقسيم الاضافه إلى اربح أقسام كل قسم لديه حركه مختلفة عند التأشير باستخدام الماوس هده

معاينة

شرح التركيب

خط الإيقونات

يجب إن تضيف قبل كل شي خط الإيقونات أد كان موجود في مدونتك فلا داعي لتركيبه

تنسيقات الاضافه

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

كود CSS الخاص بأزرار

.viavi_share {

width:100% !important;

overflow:hidden;

margin:0px auto;

}

.viavi_share .Vbtn .viavi_bg_button div {

font-size:16px;

color:rgb(124, 124, 124);

}

/*=======================*/

/*=== MB share buttons ===*/

.viavi_share .Vbtn {

background:#DCE0E0;

position:relative;

float:left;

margin:0 0.5% 14px;

width:121px;

height:40px;

cursor:pointer;

overflow:hidden;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

}

.viavi_share .Vbtn .Vicon {

float:left;

z-index:200;

position:relative;

width:40px;

height:40px;

line-height:40px;

color:#FFF;

text-align:center;

-webkit-border-radius:3px 0px 0px 3px;

-moz-border-radius:3px 0px 0px 3px;

border-radius:3px 0px 0px 3px;

}

.viavi_share .Vbtn .viavi_bg_button {

width:79px;

height:40px;

float:left;

background:#DCE0E0 !important;

display:table;

}

.viavi_share .Vbtn .viavi_bg_button > div {

display:table-cell;

vertical-align:middle;

text-align:center;

}

.viavi_share .Vbtn .Vslide {

position:absolute;

right:0;

top:0;

z-index:100;

float:left;

width:88px;

height:40px;

transition:.2s transform linear;

-webkit-transition:.2s -webkit-transform linear;

-moz-transition:.2s -moz-transform linear;

}

.viavi_share .Vbtn .Vslide span {

color:#fff;

display:block;

cursor:default;

width:100%;

text-align:center;

margin:7px 0;

padding:2px 0;

font-size:16px;

border-left:1px solid rgba(255,255,255,0.35);

}

/* Transitions */

.viavi_share .Vbtn.Vslide_x:hover .Vslide {

-webkit-transform:translateX(110px);

-moz-transform:translateX(110px);

transform:translateX(110px);

}

.viavi_share .Vbtn.Vslide_nx:hover .Vslide {

-webkit-transform:translateX(-110px);

-moz-transform:translateX(-110px);

transform:translateX(-110px);

}

.viavi_share .Vbtn.Vslide_y:hover .Vslide {

-webkit-transform:translateY(40px);

-moz-transform:translateY(40px);

transform:translateY(40px);

}

.viavi_share .Vbtn.Vslide_ny:hover .Vslide {

-webkit-transform:translateY(-40px);

-moz-transform:translateY(-40px);

transform:translateY(-40px);

}

/*========================*/

/*=== Colors ===*/

/* FACEBOOK */

.viavi_share .Vbtn.Vfacebook a > div {

background-color:#305c99;

}

/* TWITTER */

.viavi_share .Vbtn.Vtwitter a > div {

background-color:#00cdff;

}

/* YOUTUBE */

.viavi_share .Vbtn.Vyoutube a > div {

background-color:#e22b26;

}

/* GOOGLE PLUS */

.viavi_share .Vbtn.Vgplus a > div {

background-color:#E82620;

}

/* LINKEDIN */

.viavi_share .Vbtn.Vlinkedin a > div {

background-color:#007bb6 ;

}

/* TUMBLR */

.viavi_share .Vbtn.Vtumblr a > div {

background-color:#2c4762;

}

/* GITHUB */

.viavi_share .Vbtn.Vgithub a > div {

background-color:#42c0fb;

}

/* PINTEREST */

.viavi_share .Vbtn.Vpinterest a > div {

background-color:#dc0d0a;

}

/*==============*/

.Vicon i:before, .fa-facebook:before {

line-height: 40px;

}

الحركه ألثانيه: تتحرك إلى اليسار

معاينة

<b:if cond='data:blog.url == "item"'>

<div class="Vslide"> <span> facebook </span> </div>

<div> facebook </div>

</div>

</a>

</div>

<div class="Vslide"> <span> twitter </span> </div>

<div>twitter </div>

</div>

</a>

</div>

<div class="Vslide"> <span> google </span> </div>

<div>google</div>

</div>

</a>

</div>

<div class="Vslide"> <span> linkedin </span> </div>

<div>linkedin</div>

</div>

</a>

</div>

<div class="Vslide"> <span> pinterest </span> </div>

<div>pinterest</div>

</div>

</a>

</div>

</b:if>

الحركه ألثانيه: تتحرك إلى اليسار

معاينة

<b:if cond='data:blog.url == "item"'>

<div class="Vslide"> <span> facebook </span> </div>

<div> facebook </div>

</div>

</a>

</div>

<div class="Vslide"> <span> twitter </span> </div>

<div>twitter </div>

</div>

</a>

</div>

<div class="Vslide"> <span> google </span> </div>

<div>google</div>

</div>

</a>

</div>

<div class="Vslide"> <span> linkedin </span> </div>

<div>linkedin</div>

</div>

</a>

</div>

<div class="Vslide"> <span> pinterest </span> </div>

<div>pinterest</div>

</div>

</a>

</div>

</b:if>

الحركه ألثالثه: تتحرك إلى أعلى

معاينة

<b:if cond='data:blog.url == "item"'>

<div class="Vslide"> <span> facebook </span> </div>

<div> facebook </div>

</div>

</a>

</div>

<div class="Vslide"> <span> twitter </span> </div>

<div>twitter </div>

</div>

</a>

</div>

<div class="Vslide"> <span> google </span> </div>

<div>google</div>

</div>

</a>

</div>

<div class="Vslide"> <span> linkedin </span> </div>

<div>linkedin</div>

</div>

</a>

</div>

<div class="Vslide"> <span> pinterest </span> </div>

<div>pinterest</div>

</div>

</a>

</div>

</b:if>

الحركه ألربعه: تتحرك إلى أسفل

معاينة

<b:if cond='data:blog.url == "item"'>

<div class="Vslide"> <span> facebook </span> </div>

<div> facebook </div>

</div>

</a>

</div>

<div class="Vslide"> <span> twitter </span> </div>

<div>twitter </div>

</div>

</a>

</div>

<div class="Vslide"> <span> google </span> </div>

<div>google</div>

</div>

</a>

</div>

<div class="Vslide"> <span> linkedin </span> </div>

<div>linkedin</div>

</div>

</a>

</div>

<div class="Vslide"> <span> pinterest </span> </div>

<div>pinterest</div>

</div>

</a>

</div>

</b:if>

هده الاضافه تعتبر من أهم الإضافات الذي يجب أن تكون موجوده في كل مدونة فهيا تعمل على كسب زوار وإشهار المدونة ومن خلاله يستطيع الزائر نشر الموضوع في جميع مواقع التواصل الاجتماعي تقريباً

اضافة ازرار المشاركه الاجتماعية تحت كل تدوينه حصريا

شرح التركيب

خط الإيقونات

تنسيقات الاضافه

الحركه ألثانيه: تتحرك إلى اليسار

الحركه ألثانيه: تتحرك إلى اليسار

الحركه ألثالثه: تتحرك إلى أعلى

الحركه ألربعه: تتحرك إلى أسفل

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

إرسال تعليق

تابعونا على الفيس بوك

المتابعون

الاكثر مشاهده

مدونات صديقة

المواضيع الاكتر تعليق

اقسام المدونة

نموذج الاتصال