اضافة ازرار مواقع التواصل الاجتماعي بتقنية جديدة

إعلان أدسنس

آخر المواضيع

breaking/مقالات/15
بلوجر

الاثنين، 8 أغسطس، 2016

5:43:00 م

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

معاينة حية للاضافة


اضفنا الى دوائرك
تواصل معنا

شرح طريقة التركيب

  1. اذهب الى لوحة تحكم القالب
  2. ثم تخطيط
  3. ثم اداة بالسايدبار
  4. ثم اختار اداة html/javaScript
  5. ثم قم بوضع هذه الاكواد كما هي مع تغيير # بروالط حساباتكم


<style>
div#centrada a {
color: #fff;
}
div#HTML1 {
margin: 0;
}

.wrapper {
padding: 60px 0;
text-align: center;
}

.social {
display : inline-block;
font-size: 80px;
color: rgb(255, 255, 255);
height: 150px;
width : 150px;
line-height: 150px;
border-radius: 0%;
text-align: center;
}



#centrada{
margin: 15px auto 0px auto;
width : 300px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.utopix{
padding-bottom:50px;
}
a{
color:#fff;
text-decoration:none;
}

.cube {
width : 100%;
height: 50px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.default-state,.active-state {
height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.flip-to-top .active-state {
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-o-transform: rotateX(90deg) translateZ(75px);
-ms-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform: rotateX(-90deg) translateZ(-50px);
-o-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
-webkit-transform: rotateX(-89deg);
-moz-transform: rotateX(-89deg);
-o-transform: rotateX(-89deg);
-ms-transform: rotateX(-89deg);
transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state,
.active-state {
font-size: 17px;
text-transform: uppercase;
color: #fff;
line-height: 50px;
-webkit-transition: background 250ms ease;
-moz-transition: background 250ms ease;
-o-transition: background 250ms ease;
transition: background 250ms ease;
}
.cube:hover .default-state {
background: #000;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #019AD1;
}
.google-plus {
background: #D34836;
}
.linkedin {
background: #069;
}
</style>
<div id="centrada">

<div class="cube flip-to-top">
<div class="default-state facebook">
<span>
توصل بجديدنا</span>
</div>
<div class="active-state facebook">
<span><a href="#" target="_blank"><i class='fa fa-facebook'/></i> على الفيسبوك </a></span>
</div>
</div>

<div class="cube flip-to-top google-plus">
<div class="default-state">
<span>
اضفنا الى دوائرك</span>
</div>
<div class="active-state google-plus">
<span><a href="#" target="_blank"><i class='fa fa-google-plus'/></i> عبر جوجل بلس </a></span>
</div>
</div>


<div class="cube flip-to-top twitter">
<div class="default-state">
<span>
غرد معنا</span>
</div>
<div class="active-state twitter">
<span><a href="#" target="_blank"><i class='fa fa-twitter'/></i> على تويتر </a></span>
</div>
</div>

<div class="cube flip-to-top">
<div class="default-state linkedin">
<span>
تواصل معنا</span>
</div>
<div class="active-state linkedin">
<span><a href="#" target="_blank"><i class='fa fa-linkedin'/></i> عبر لينكيدن </a></span>
</div>
</div>

</div>



  1. ثم قم بعمل حفظ
  2. ومبروك عليك الاضافة
واتمنى منكم دعمنا بتعليق تحفيزي كمقابل وكتحفيز لتقديم ماهو جديد في هذا المجال
  1. هههههههههههههههههههههههههههه هل زدت لك عدد الزيارات يا حبيبي سوف أدمرك هههه

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

      حذف
    2. ههههههههه يضن نفسه ان قام بإضافة الزوار الوهميين سيقوم بتدمير حساب ادسنس الخاص بالمدونة لكنك في الحقيقة دمرت صمعتك

      حذف
  2. إن كنت رجلا لا تقم بإخفاء التعليق

    ردحذف
  3. لقد بدأت بعمل لك زيارات صديقي
    لا تنسى شكري هههههههههههههههههههههههههههههه
    نصيحة قم بإغلاق المدونة و ضعها إلى لقراء مدعوين
    أخوك ضياء بوراسي يا حبيبي
    10000000000000000000000000000000000000000 الزيارات

    ردحذف
    الردود
    1. تبا لك :( تحسدني لأني عندي مدونة احسن منك ومدونة ناجحة وتريد ان تدمرها بزيارات وهمية لكن الله هو المنتقم

      حذف

أخبار الانترنيت