إضافة من أنا - profile card - للبلوجر

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


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

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

 ]]></b:skin> 

ونضيف فوقه الكود التالى :

.profile-card {
  float: right;
background: #FFB300;
width: 56px;
height: 56px;
position: fixed;
left: 1220px;
top: 50%;
    z-index: 2;
overflow: hidden;
    opacity: 0;
    margin-top: 70px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0px 3px 6px rgba(0 ,0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
    animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
    width: 179px;
    height: 280px;
    padding: 40px 20px 30px 20px;
    display: inline-block;
    float: left;
    border-right: 2px dashed #EEEEEE;
background: #FFFFFF;
    color: #000000;
    margin-top: 50px;
    opacity: 0;
    text-align: center;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-card header h1 {
    color: #FF5722;
}
.profile-card header a {
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 25px 30px;
}
.profile-card header a:after {
position: absolute;
    content: "";
bottom: 3px;
right: 3px;
width: 20px;
height: 20px;
    border: 4px solid #FFFFFF;
    -webkit-transform: scale(0);
    transform: scale(0);
    background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
    background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-animation: scaleIn 0.3s 3.5s ease forwards;
    animation: scaleIn 0.3s 3.5s ease forwards;
}
.profile-card header a > img {
    width: 120px;
    max-width: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}
.profile-card header a:hover > img {
    -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .profile-bio {
    width: 175px;      
    height: 180px;
    display: inline-block;
    float: right;
    padding: 50px 20px 30px 20px;
background: #FFFFFF;
    color: #333333;
    margin-top: 50px;
    text-align: center;
    opacity: 0;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links {
    width: 218px;      
    display: inline-block;
    float: right;
    margin: 0px;
    padding: 15px 20px;
background: #FFFFFF;
    margin-top: 50px;
    text-align: center;
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links li {
    list-style: none;
    margin: -5px 0px 0px 0px;
    padding: 0px;
    float: left;
    width: 33.3%;
    text-align: center;
}
.profile-social-links li a {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 6px;
    position: relative;
    overflow: hidden!important;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.profile-social-links li a img {
    position: relative;
    z-index: 1;
}
.profile-social-links li a:before {
    display: block;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 36px;
    height: 36px;
    opacity: 1;
    -webkit-transition: transform 0.4s ease, opacity 1s ease-out;
    transition: transform 0.4s ease, opacity 1s ease-out;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.profile-social-links li a:hover:before {
    -webkit-animation: ripple 1s ease forwards;
    animation: ripple 1s ease forwards;
}
.profile-social-links li a img,
.profile-social-links li a svg {
    width: 24px;
}

@media screen and (min-aspect-ratio: 4/3) {
    body {
        background-size: 100% auto;
    }
    body:before {
        width: 0px;
    }
    @-webkit-keyframes puff {
        0% {
            top: 100%;
            width: 0px;
            padding-bottom: 0px;
        }
    100% {
            top: 50%;
            width: 100%;
            padding-bottom: 100%;
        }     }
    @keyframes puff {
        0% {
            top: 100%;
            width: 0px;
            padding-bottom: 0px;
        }
    100% {
            top: 50%;
            width: 100%;
            padding-bottom: 100%;
        }     }
}
@media screen and (min-height: 480px) {
.profile-card {
-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
        width: auto;
        height: auto;
        padding: 30px 20px;
        display: block;
        float: none;
        border-right: none;
    }
    .profile-card .profile-bio {
        width: auto;
        height: auto;
        padding: 15px 20px 30px 20px;
        display: block;
        float: none;
margin-right: 20px;
    }
    .profile-social-links {
        width: 100%;    
        display: block;
        float: none;
    }
}
@media screen and (min-aspect-ratio: 4/3) {
    body {
        background-size: 100% auto;
    }
    body:before {
        width: 0px;
-webkit-animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
}
@-webkit-keyframes init {
    0% {
    width: 0px;
    height: 0px;
    }
100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
    } }
@keyframes init {
    0% {
    width: 0px;
    height: 0px;
    }
100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
    } }
@-webkit-keyframes puff_portrait {
    0% {
        top: 100%;
        height: 0px;
        padding: 0px;
    }
100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
    } }
@keyframes puff_portrait {
    0% {
        top: 100%;
        height: 0px;
        padding: 0px;
    }
100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
    } }
@-webkit-keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
} }
@keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
} }
@-webkit-keyframes borderRadius {
    0% {
        -webkit-border-radius: 50%;
    }
100% {
        -webkit-border-radius: 0px;
    } }
@keyframes borderRadius {
    0% {
        -webkit-border-radius: 50%;
    }
100% {
        border-radius: 0px;
    } }
@-webkit-keyframes moveDown {
    0% {
       top: 50%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 100%;
    } }
@keyframes moveDown {
    0% {
       top: 50%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 100%;
    } }
@-webkit-keyframes moveUp {
    0% {
        background: #FFB300;
        top: 100%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 50%;
       background: #E0E0E0;
    } }
@keyframes moveUp {
    0% {
        background: #FFB300;
        top: 100%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 50%;
       background: #E0E0E0;
    } }
@-webkit-keyframes materia_landscape {
    0% {
        background: #E0E0E0;
    }
    50% {
        -webkit-border-radius: 4px;
    }
    100% {
        width: 440px;
        height: 280px;
        background: #FFFFFF;
        -webkit-border-radius: 4px;
    }
}
@keyframes materia_landscape {
    0% {
        background: #E0E0E0;
    }
    50% {
        border-radius: 4px;
    }
    100% {
        width: 440px;
        height: 280px;
        background: #FFFFFF;
        border-radius: 4px;
    }
}
@-webkit-keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
border-radius: 4px;
}
}
@-webkit-keyframes moveIn {
    0% {
        margin-top: 50px;
        opacity: 0;
    }
100% {
        opacity: 1;
        margin-top: -20px;
    } }
@keyframes moveIn {
    0% {
        margin-top: 50px;
        opacity: 0;
    }
100% {
        opacity: 1;
        margin-top: -20px;
    } }
@-webkit-keyframes scaleIn {
    0% {
        -webkit-transform: scale(0);
    }
100% {
        -webkit-transform: scale(1);
    } }
@keyframes scaleIn {
    0% {
        transform: scale(0);
    }
100% {
        transform: scale(1);
    } }
@-webkit-keyframes ripple {
    0% {
        transform: scale3d(0, 0, 0);
    }
    50%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
    }
}
@keyframes ripple {
    0% {
        transform: scale3d(0, 0, 0);
    }
    50%, 100% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
                   }

ثم نبحث عن الوسم

    </header>


ثم نضيف فوقه هذا الكود

<aside class='profile-card'>
<header>
<!-- here&#8217;s the avatar -->
<a href='https://www.facebook.com/essameldien20'>
<img src='https://4.bp.blogspot.com/-uQlow4p1tqU/V7t9_rmKX2I/AAAAAAAAAFU/AjL92rcOE1I34_04KnnlZyzHmQj5lKP5wCLcB/s1600/Untitled-1%2Bcopy.png'/>
</a>
<!-- the username -->
<h1>من أنا&#1567;</h1>
<!-- and role or location -->
<h2>عصام الدين</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class='profile-bio'>
<p>خبير بلوجر ووردبريس.مطور ويب </p>
<p>مصر / قنا</p>
<p>واتساب 0201129692448</p>
</div>


</aside>
<!-- that&#8217;s all folks! -->
    </div> 

 والنتيجة تظهر فى مدونتكم فقط قم بتغيير ما باللون الاحمر لمعلوماتكم الخاصة .
بالتوفيق لكم ..

شرح اضافة السيو للبلوجر All in One SEO Pack

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


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

<meta content=’GOOGLE VERIFICATION CODE‘ name=’google-site-verification’/><meta content=’BING VERIFICATION CODE‘ name=’msvalidate.01’/><meta content=’ALEXA VERIFICATION CODE‘ name=’alexaVerifyID’/><meta content=’global’ name=’distribution’/><meta content=’1 days’ name=’revisit’/><meta content=’1 days’ name=’revisit-after’/><meta content=’document’ name=’resource-type’/><meta content=’all’ name=’audience’/><meta content=’general’ name=’rating’/><meta content=’all’ name=’robots’/><meta content=’ar-ar’ name=’language’/><meta content=’Egypt’ name=’country’/><meta content=’@Facebook’ property=’fb:admins’/><meta content=’@Twitter’ name=’twitter:site’/><link href=’#’ rel=’author’/><link href=’#’ rel=’publisher’/>


هذا الجزء السفلى من الكود الذى سأقوم بشرح طريقة تعديله بالتفصيل :
1- الكود  GOOGLE VERIFICATION CODE 
للحصول على هذا الكود اذهب الى ادوات مشرفى المواقع من هنا  ثم قم بإضافة رابط مدونتك وايضا اضغط اضافة موقع او اضافة خاصية بعد الاضافة يطلب منك التحقق من ملكية الموقع او المدونة انت تختار :
علامة HTML
إضافة علامة وصفية إلى الصفحة الرئيسية لموقعك على الويب
سيظهر امامك كود مثل 
<meta name="google-site-verification" content="xxxxxxxxxx-xxxxxxxxx" />
وما باللون الاحمر هو الكود المطلوب قم بنسخة واضفه بدلا من   GOOGLE VERIFICATION CODE  ..
2- الكود BING VERIFICATION CODE 
نفس الطريقة السابقة لكن مع محرك البحث bing وليس google وانا شخصيا لا استخدم الا الاولى فهى تكفى .
3- الكود ALEXA VERIFICATION CODE 
أولا عليك التسجيل فى موقع اليكسا من هنا 
ثم تختار كما بالصورة تأكيد الملكية بالضغط على ما يشير اليه السهم الاصفر بالصورة .




















ثم تختار الطريقة رقم 2 ( Method 2 ) 



وستحصل على الكود كما ترى
<meta name=”alexaVerifyID” content=”xxxxxxxxxxxxxxxxx” />

 وما باللون الاحمر هو الكود المطلوب قم بنسخة واضفه بدلا من ALEXA VERIFICATION CODE  ..
4- الكود ar-ar 
هذا كود تعريف لغة الموقع او المدونة وهو للغه العربية اما اذا كانت مدونتك بلغة انجليزية استخدم هذا الكود en-us
5- الكود Egypt
هذا اسم البلد باللغة الانجليزيه ممكن تغييره حسب البلد .
6- الكود @Facebook  
7- الكود @Twitter
هذا هو اسم المستخدم الخاص بك بالفيس بوك وتويتر .
8- الكود # الاول 
رابط حساب المؤلف فى جوجل بلس .
9- الكود #  الثانى 
رابط صفحة الموقع او المدونة بجوجل بلس .

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

قالب إبداع ويب

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

قالب إبداع ويب - هو قالب قمت بتعريبه بالكامل وهو تقنى بدرجة أولى ويمكن استخدامه لأغراض متعدده 

معاينة

مميزات القالب

  1. القالب متجاوب مع السيو
  2. القالب يتمتع بخاصية العرض علي جميع الاجهزة بطرق مناسبه جدًأ
  3. القالب يضم محرك بحث أحترافيـــ
  4. القالب يضم قائمة علوية منسدلة
  5. القالب يضم أزرار المتابعة الأجتماعية 
  6. القالب صديق محركات البحث وسريع التصفح
  7. القالب مهيئ لمحركات البحث باشكل أحترافي 
  8. والمزيد من الإضافات ... أكتشفها بنفسك

للحصول علي القالب اتبع الخطوات التالية

أنضم اليــ متابعي المدونة عبر بلوجر
أنضم الي معجبي المدونة عبر فيس بوك 
بعد أتمام الخطوات أعلي ضع بريدك الألكتروني ليتم ارسال القالب لك

الله المستعان

اضافة بلوجر All in One SEO Pack

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



اليوم فكرت نشوف اضافة للبلوجر تساوى عمل اضافة 

 All in One SEO Pack الشهيره فى منصة الووردبريس 

وبالفعل يوجد كود بسيط وسهل بمجرد تعديله يكون متوافق مع محركات البحث والمواقع الاجتماعية ويساعد على ارشفة ونشر مدونة البلوجر بسهولة ويجعلها اكثر صداقة لمحركات البحث ...

كيفية تركيب الاضافة للبلوجر : 

1- نذهب الى تحرير القالب الخاص بمدونة البلوجر.
2- نبحث عن هذا الكود 
 <head> 
3- ثم نضع اسفله مباشرة هذا الكود 




<!– All In One SEO  2016  by cn3u.blogspot.com Start –>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<meta content=’noindex, nofollow’ name=’robots’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta expr:content=’data:blog.title’ name=’keywords’/>
<meta content=’index, follow’ name=’robots’/>
</b:if>
<b:else/>
<b:if cond=’data:blog.pageTitle != data:blog.title’>
<meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if>
</b:if>
<meta content=’GOOGLE VERIFICATION CODE‘ name=’google-site-verification’/>
<meta content=’BING VERIFICATION CODE‘ name=’msvalidate.01’/>
<meta content=’ALEXA VERIFICATION CODE‘ name=’alexaVerifyID’/>
<meta content=’global’ name=’distribution’/>
<meta content=’1 days’ name=’revisit’/>
<meta content=’1 days’ name=’revisit-after’/>
<meta content=’document’ name=’resource-type’/>
<meta content=’all’ name=’audience’/>
<meta content=’general’ name=’rating’/>
<meta content=’all’ name=’robots’/>
<meta content=’ar-ar’ name=’language’/>
<meta content=’Egypt’ name=’country’/>
<meta content=’@Facebook’ property=’fb:admins’/>
<meta content=’@Twitter’ name=’twitter:site’/>
<link href=’#’ rel=’author’/>
<link href=’#’ rel=’publisher’/>
</b:if>  <!– All In One SEO 2016 v2.0 by cn3u.blogspot.com End –>




 4- نقوم بتغيير ما باللون الاحمر فقط . لكيفية التغيير بالتفصيل اضغط هنا

بالتوفيق للجميع 

الحل : مشكلة الصورة والوصف الغير ملائم أثناء مشاركة تدوينات بلوجر على الفيس بوك

هناك تعليق واحد:



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


أولًا حل مشكلة الصورة

                  تذهب إلى القالب ثم تحرير القالب


لتبحث عن هذا الكود


</head>
ثم تقوم بلصق الكود التالى فوق الكود السابق مباشرةً

<b:if cond='data:blog.postImageUrl'> <meta expr:content='"" + data:blog.postImageUrl' property='og:image'/> <b:else/> <meta content='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s200-c/default.png' property='og:image'/> </b:if>

الرابط الموجود باللون الأحمر هو رابط لصوره تظهر فى حالة لم يجد الفيس بوك صور داخل التدوينة التى تشاركها لذالك يمكنك تعديلها كما تحب .


ثانيًا حل مشكلة الوصف

كل ما عليك فعله أثناء تحرير التدوينة تحرير وصف البحث داخل محرر التدوينات كما فى الصورة لأن الفيس بوك يقوم بإستدعاء الوصف منها .



 في أمان الله