كن بلوجر

بعض الطرق المفيدة فى اشهار وزيادة الزوار لموقعك ومدونتك ..

- محركات البحث
 يمكن أن تحصل على عدد هائل من الزيارات لموقعك من خلال محركات البحث .  و ذلك بتحسين السيو SEO الخاص بموقعك .

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

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

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

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

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="###" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="###" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="###" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="###" rel='external nofollow' target='_blank' ></a>
</div>

وبالطبع لا تنسي استبدال ال ### بروابط صفحاتك الخاصة على جوجل والفيس بوك وتويتر .

دمتم بخير :)

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

<div class="post hentry">
<a name="8811546607569798962"></a>
<span itemprop="itemreviewed"><span itemprop="description">
<h3 class="post-title entry-title">
HTML Editor
</h3>
</span></span>
<div class="post-header">
<div class="post-header-line-1" style="padding:0 15px;margin-bottom:10px;">
<div class="authordata"><span class="post-author vcard">
</span>, <span class="post-timestamp">
</span>
</div>
<div class="commentsdata"><span class="post-comment-link">
</span>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="post-body entry-content">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br></div>
<table style="width: 330px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border-radius: 3px; border: solid 1px #cccccc; color: #a3a3a3; font-family: arial; font-size: 12px; font-weight: bold; height: 500px; margin: 0px; padding: 5px; scroll: auto; width: 200px;">&lt;style&gt;
Add CSS Code Here
&lt;/style&gt;

Add HTML Code Here</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border-radius: 3px; border: solid 1px #cccccc; height: 500px; padding: 5px; width: 315px;">
</iframe>
</td>
</tr>
</tbody></table>
<br>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
 Preview</button>
<button id="#send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
<br>
 
 



<br>
<br>
<br>
<br></div>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-icons">
<span class="item-control blog-admin pid-527409205">
<a href="https://www.blogger.com/page-edit.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;from=pencil" title="Edit Page" target="_blank">
<img alt="" class="icon-action" height="18" src="http://img2.blogblog.com/img/icon18_edit_allbkg.gif" width="18">
</a>
</span>
</span>
<div class="post-share-buttons">
<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=email" target="_blank" title="Email This">
<span class="share-button-link-text">Email This</span>
</a><a class="goog-inline-block share-button sb-blog" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=blog" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;" target="_blank" title="BlogThis!">
<span class="share-button-link-text">BlogThis!</span>
</a><a class="goog-inline-block share-button sb-twitter" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=twitter" target="_blank" title="Share to Twitter">
<span class="share-button-link-text">Share to Twitter</span>
</a><a class="goog-inline-block share-button sb-facebook" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=facebook" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;" target="_blank" title="Share to Facebook">
<span class="share-button-link-text">Share to Facebook</span>
</a>
<div class="goog-inline-block dummy-container"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 20px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1485616993910" name="I0_1485616993910" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;source=blogger%3Ablog%3Aplusone&amp;size=medium&amp;width=300&amp;annotation=inline&amp;hl=en&amp;origin=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;url=http%3A%2F%2Fbbloggertutorials.blogspot.com%2Fp%2Fhtml-editor_23.html&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.fRV-S-MQ0dQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCOoopkHr5NM_cofk4696iiBjgghQw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I0_1485616993910&amp;parent=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;pfname=&amp;rpctoken=34415339" data-gapiattached="true" title="+1"></iframe></div></div>
</div>
</div>
<div class="post-footer-line post-footer-line-2"><span class="post-labels">
</span>
</div>
<div class="post-footer-line post-footer-line-3"><span class="post-location">
</span>
</div>
</div>
</div>

البعض يجد صعوبة فى ضبط الكاميرا الخاصة به وقد لا تتوفر كاميرا الويب عند الجميع , لذالك قمت بتجربة بسيطة اتمنى ان تفيدكم ان شاء الله .
سنعتمد على برنامج على الويندوز وضبط اعدادات التطبيق الذي نضعه على الهاتف الأندرويد ..
أولا نقوم بتحمل البرنامج على الويندوزمن هنا  ونقوم بتثبيته ثم فتح البرنامج كما بالصورة ثم نضغط على رمز الويفي wifi  فقط سنحتاج الى ال ip الذي يظهر لنا ( سنجده في التطبيق على الهاتف الاندرويد )..

الآن نقوم بتحميل التطبيق من جوجل بلاى من هنا  وتثبيته ثم نقل ال ip الموجود به الى البرنامج ثم نضغط start ..
ونتمنى لكم الاستمتاع بتطبيق الشرح البسيط :) دمتم بخير 

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

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

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

.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> 

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