‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

كيفية اضافة وحدة اعلانية لكل كاتب فى بلوجر

كيفية اضافة وحدة اعلانية لكل كاتب فى بلوجر


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


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


لقيام بهذا قم بالدخول لمنصة تحرير HTML الخاصة بقالبك، ولديك احد الخيارين، أما أظهار الوحدة اسفل العنوان أو في نهاية الموضوع، لذا قم بالبحث عن الكود المناسب وأسفل منه مباشرة ضع كود وحدتك الأعلانية
لوضع الوحدة أسفل العنوان ضعها اسفل الكود التالي
<div class='post-header'>
لوضع الوحدة أسفل الموضوع مباشرة ضعها اسفل الكود التالي
<div class='post-footer'>
ربما تجد هذة الاكواد في حالة تكرار، اذا لم تفلح مع الكود الاول جربها مع الكود الثاني وهكذا إلي ان تفلح العملية، وهكذا.
ملحوظة مهمة، يجب عليك تضمين الوحدة داخل هذا الكود حتي تظهر الوحدة داخل الموضوعات فقط وليس في الصفحة الرئيسية 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Adsense Unit code below this -->
</b:if>
يوضع كود الوحدات المستخدمة أسفل هذا السطر
<!-- Adsense Unit code below this -->

الأن كيف تحدد الوحدة لتظهر داخل موضوعات كاتب معين؟

لتقوم بذلك ما عليك هو أستخدام نفس الطريقة بالأعلي مع تضمين الوحدة داخل الكود التالي
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->

يتم أيضاً تضمين الوحدة اسفل هذا السطر

<!-- Adsense Unit code below this -->

مع أستبدال كلمة Author_Name_Here بأسم الكاتب المراد اظهار الوحدة داخل موضوعاته.

كيفية اضافة وحدة اعلانية لكل كاتب فى بلوجر


كود توضيحي


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author1_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author2_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author3_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
</b:if>

هذا الكود بالأعلي هو عبارة عن كود جاهذ للأستخدام لثلاثة وحدات أعلانية لثلاثة مؤلفين مختلفين، حيث لا تظهر الوحدات الا داخل الموضوعات ويتم تضمين كود الوحدة أسفل هذا السطر مباشرة
<!-- Adsense Unit code below this -->
اتمنى ان اكون وفيت بالشرح على قدر الأمكان وفقنا الله انا وانتم
والسلام عليكم ورحمةالله وبركاتة


الاثنين, يوليو 21, 2014

اضافة فهرس احترافى لمدونات بلوجر

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

هى بنا ننتقل الى الشرح

اولا المعاينة الحية للقهرس
معاينة

ثانيا الكود وتنسيقة وشرحة 

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css"> #toc-outer { color:black; font:normal 13px/15px font-family: 'Droid Arabic Kufi',serif; height:auto; margin:0 auto; overflow:hidden; padding:0; text-align:right; } #loadingscript { padding:0px 0px; height:37px; text-indent:-9999px; color:transparent; background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%; } .itemposts { float: right; height: auto; overflow: hidden; width: 47%; box-shadow: 1px 1px 5px #C3C3C3; background: none repeat scroll 0% 0% #F9F9F9; border: 1px solid #FFF; margin: 3px 5px 8px; padding: 0px 3px; } .itemposts h6 { border-bottom: 1px solid #CCC; color: #333; height: 30px; overflow: hidden; text-transform: none; margin: 0px 0px 5px; padding: 2px 6px !important; font:bold 13px font-family: 'Droid Arabic Kufi', serif; } .itemposts h6 a:hover { color:#38f; text-decoration:none; } .itemposts img { background-color:#fff; border:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; float:right; height:65px; margin:0 0 5px 7px; padding:3px; width:65px; z-indent:99999px; } .itemposts .iteminside {} .itemposts .itemfoot { border-top: 1px solid #CCC; clear: both; overflow: hidden; padding: 4px 5px; font:12px font-family: 'Droid Arabic Kufi', serif; } .itemposts .itemfoot a.itemrmore { color:#333; float:left; font-weight:bold; text-decoration:none; } .itemposts .itemfoot a.itemrmore:hover {text-decoration:underline} #itempager { clear:both; padding:10px 0; } #pagination, #totalposts { color:#000; display:block; font:12px font-family: 'Droid Arabic Kufi', serif; margin-bottom:10px; text-align:center; padding:0; } #pagination span, #pagination a { color: #FFF; display: inline; margin: 0px 1px; padding: 2px 5px; text-indent: 0px; background-color: #068BC9; background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%); border: 1px solid #3161C2; text-decoration: none; border-radius: 10px; } #pagination a:hover {background-color:#333} #pagination span.actual {background-color:black} #pagination span.hidden {display:none}</style> <script> var showPostDate = true, showComments = true, idMode = true, sortByLabel = false, labelSorter = "JQuery", loadingText = "Loading...", totalPostLabel = "عدد المواضيع:", jumpPageLabel = "الصفحة", commentsLabel = "التعليقات", rmoreText = "الموضوع كاملا &#9658;", prevText = "Sebelumnya", nextText = "Berikutnya", siteUrl = "http://ar-blogger-tips.blogspot.com/", postPerPage = 10, numChars = 150, imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"; </script> <script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script></div>
  • استبدل الرابط الملون بالأحمر برابط مدونتك
  • #C3C3C3 لو صندوق الظل للفهرس
  • #fff لون حدود صناديق الموضوع
  • #F9F9F9 لون خلفية الفهرس
لاتنسى عمل اعجاب بصفحة الفيس بوك من هنا
والأنضمام الينا من هنا
ارجو ان تنال الأضافة اعجباكم
اذا وجهاتك مشاكل فى الكود اطرحها علينا بالتعليق
لاتنسى ترك بصمتك




الأحد, يوليو 20, 2014

اضافة محرك بحث بتقنية Ajax لمدونات بلوجر

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


خطوات تركيب محرك البحث


الخطوة الأولى : نقوم بالبحث عن وسم </b:skin>
ونضيف قبله هذا الكود

/*-------ajax-form---------*/
.search {
overflow: hidden;
position: absolute;
left: 13%;
float: none;
z-index: 9999;
width:300px;
}
#ajax-search-form {
position:relative;
font:normal normal 13px/normal Arial,Sans-Serif;
float:right;
margin-top: 2px;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
border: none;
padding: 10px;
font: normal 12px tahoma;
border-radius: 0 3px 3px 0;
transition: 0.4s;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3V2ahDoqkW8dTnUkFSE5Uu9hrl7QZwOjqDAMoyvxMtzteYoO_cFrDJbYYUfDnY840cz8Ymm6PY1WeVwzUog92oSgIICiuhpLBpOIJTEQ4khkxfah8jTISDsKNws-GZ2QMH7pW0VKpaCMS/s1600/search.png) no-repeat 4%;
width: 216px;
margin: 0;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form .searchbtn {
width: auto;
background-color: #04BCBC;
border: none;
font: normal 12px tahoma;
cursor: pointer;
padding: 10px 20px;
margin: 0 -4px 0 0;
border-radius: 3px 0 0 3px;
color: #FFF;
}
#ajax-search-form .searchbtn:hover{background-color:#444}
#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 10px 0;
width: 278px;
height: auto;
position: relative;
top: 0;
left: 0;
max-height:310px;
overflow:auto;
z-index: 99;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: none;
}
#search-result li {
padding: 10px;
border: 1px dotted #EEE;
color: #AAA;
font-size: 0px;
line-height: 1em;
margin: 0 0 5px 5px;
overflow: hidden;
}
#search-result img {
float:right;
margin: 0 0 0 8px;
border: 3px solid #EEE;
}
#ajax-search-form a {
color: #888;
line-height: 1.9em !important;
font: normal 12px tahoma;
text-decoration: none;
padding: 0;
}
#search-result ol,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4, #search-result strong {
display: block;
margin: 0 0 10px 0;
font: normal 12px ges,tahoma;
color: #BF4247;
}
#search-result ol {margin:0;
text-align:right;
}
#search-result ol a:hover {
color: #BF4247;
text-decoration: underline;
background: none;
}
#search-result .close {
display: block;
position: absolute;
top: 0;
left: 10px;
line-height: normal;
color: #f00;
font-size: 18px;
}
#search-result strong {color:#B75252}
#blog-pager {
margin: 1em 0;
text-align: center;
overflow: hidden;
clear: both;
}
الخطوة الثانية : نقوم بالبحث عن وسم <body/>
ونضيف قبله هذا الكود

<script type='text/javascript'>
                      //<![CDATA[
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');

    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');

    // When the keyword is submitted...
    $form.on("submit", function() {
        // Get the input value
        var keyword = $input.val();
        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('جاري عملية البحث...');
        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, summary, thumbnail, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4> البحث عن مقالات حسب التصنيف  &#8220;' + keyword + '&#8221;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
                        summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
                        summary = summary.length > 100 ? summary.substring(0, 100) + '&hellip;' : summary;
                        skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>المعذرة يبدو ان ما تبحث عنه غير موجود بالموقع :(</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>خطأ في عملية البحث المرجوا المحاولة لاحقا.</strong>');
            }
        });
        return false;
    });
    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);
                      //]]>
</script>

اسبدل الرابط الملون بالأحمر برابط مدونتك
الخطوة الثالثة : نقوم بالبحث عن وسم <head>
ونضيف بعده هذا الكود 
ملحوظة : اذا كان لديك هذا الكود فلا تضيفه

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

 اذا كان لديك كود محرك بحث قديم فإبحث عنه أو إن لم تعرف الكود الخاص به إبحث عن : div id='search'>
 وحذف الكود من بداية الوسم إلى إغلاقه وضع الكود التالي مكانه

<div id='search'>
<form action='/search' id='ajax-search-form'>
<input class='searchbox' name='q' placeholder='اابحث عن قالب أو شرح...' type='text'/>
<input class='searchbtn' type='submit' value='بحث'/>
</form>
</div>

وهنا يمكنك الحفظ ومبروك عليك الاضافة ومبروك عليك محرك بحث مطور
وجميل وانيق من مدونة نصائح للمدونين

الأربعاء, يوليو 16, 2014

اضافة تابعنى على فيس بوك بشكل انيق

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

الكود وشرحة

<center>
<div style="background: #FFFFFF; padding: 7px; border: 1px dashed #000000; padding-bottom: 3px;">
<div class="so">
<a href="ضع هنا رابط الفيس بوك"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/facebook.png" /></a>
<a href="ضع رابط قناة اليوتيوب "><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/youtube.png" /></a>
<a href="ضع رابط صفحتك جوجول بلس"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/google_plus.png" /></a>
<a href="ضع رابط تويتر"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/twitter.png" /></a>
<a href="ضع رابط التغذية"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/rss.png" /></a>
</div>
</div>
</center>
ننتقل الى تنسيق الكود
اللون الأحمر لون خلفية الأضافة
اللون الأزرق لون حدود الأضافة
اللون البرتقالى روابط الصور غيرها بما تريد ولاكن نفس المقاس
ضع كل رابط مناسب كما موضح بالأضافة
وشكرا
لاتغادر قبل ترك بصمتك
الأربعاء, يوليو 16, 2014

طريقة اضافة موقعك الى اليكسا بالشكل الجديد

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

ننتقل الى الشرح بأذن الله انتبه معانا عزيزى الزائر
صورة توضيحية اليكسا الجديد
فكما تشاهدون لأضافة موقعك في اليسكا لابد ان تدفع مال لشهر او سنة .. الخ
اولاً نقوم بدخول الي alexa علي طريق الرابط التالي
ثم ندخل رابط مدونتنا او موقعنا حتي اذا لم يكن مسجل من قبل
وستظهر لنا صفحة ننزل الي اسفلها ثم نضغط علي زرEdite site inof
ثم نضغط على
بعد الضغط سنتجه الي صفحة اخري ونضغط علي Method 2 ثم بعد الضغط ستظهر لنا نافذه اخري في الاسفل نقوم بنسخ الكود الذي ظهر لنا ونضع في قالب المدونة كما فى الأتى


بعد نسخ الكود نذهب الي قالب المدونة ثم نبحث في القالب علي كود <head> ونضع الكود الذي نسخناه من اليكسا تحت الكود مباشرتاً.
بعد وضع الكود نذهب الي صفحة اليكسا ونضغط علي ( Verify my iD )
وبهذا تم اضافة الموقع
ارجو ان تكون وصلتكم المعلومة
السلام عليكم


الخميس, يوليو 10, 2014

اضافة نافذة منبثقة للأعجاب بصفحتك على الفيس بوك متحركة

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

الكود وشرح التركيب

نذهب الى لوحة التحكم>>ثم اضافة اداة>>ثم نختارhtmljava script
ثم نضع بها الكود التالى
<!-- بداية كود الاعجاب -->
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 4px;
background-color: white;
width: 150px;
visibility: hidden;
z-index: 0;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center"> <thead> <tr> <td class="tcat"> <a style="float:left" onclick="return toggle_collapse('quickregister')"></a> <strong>
<span lang="ar-sa">تابعنا على فيس بوك</span></strong> </td> </tr> </thead> <tbody id="collapseobj_quickregister" style=""> <tr> <td class="alt1" align="center"> <span class="smallfont"><script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=382"></script> <form action="http://www.shbabelyom.com/register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);"> <input type="hidden" name="s" value="c57548fc566e37c8e11103abdf95594d" /> <input type="hidden" name="securitytoken" value="guest" /> <input type="hidden" name="do" value="addmember" /> <input type="hidden" name="url" value="" /> <input type="hidden" name="agree" value="" /> <input type="hidden" name="password_md5" /> <input type="hidden" name="passwordconfirm_md5" />
اضغط على اعجبني - like ليصلك كل ما هو جديد <span lang="ar-sa"> </span><br /><br />
<img border="0" src="http://store2.up-00.com/Jan12/eKm76891.gif" />
<iframe src="http://www.facebook.com/plugins/like.php?href=ضع هنا رابط صفحتك المراد الأعجاب بها&amp;layout=button_count&amp;show_faces=true&amp;w idth=90&amp;action=like&amp;font=arial&amp;colorsc heme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowtransparency="true"></iframe>
</form> </span></td> </tr> </tbody> </table></div>
<!-- نهاية كود الاعجاب -->
ملحوظة:غير كل ماهو بالون الأحمر بما ينسبك  
ادعوكم لترك بصمتك ولاتنسى الأنضمام الينا
السبت, يوليو 05, 2014

ازرار التواصل الاجتماعي بتاثير جديد لمدونات بلوجر



السلام عليكم متابعي مدونة نصائح للمدونين ... اليوم نقدم لكم ازرار التواصل الاجتامعي بتاثير جديد ورائع لمدونات بلوجر كما انها تشمل معظم مواقع التواصل الاجتماعي (( فيس بوك - تويتر - جوجل - يوتيوب - فيد برنر )) ..


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

مميزات الاضافة :
* خفيفى التحميل لاتؤثر على سرعة تحميل القالب
* تفتح الروابط في نافذة جديدة نوفلو
* تتمتع بتاثير مميز ورائع

شرح تركيب الاضافة

نتوجه الى لوحة التحكم > التخطيط > اضافة اداة > اداة جافا سكريب ونلصق الكود التالي :

<!--CSS-Social Network-Widget By http://st-tek.blogspot.com-->
<link href='https://googledrive.com/host/0B0w6bpKSwOKUZzdaMXpSQWhIZkk/ ' rel='stylesheet'/>
<ul id="Zoomarabic-SNS">
  <li ><a href="رابط صفحتك على فيس بوك" target="_blank" class="icon fb">فيس بوك</a><span></span>
</li>
  <li ><a href="رابط حسابك على تويتر" target="_blank" class="icon twit" >تويتر</a><span></span>
</li>
<li ><a href="رابط حسابك على جوجل"target="_blank" class="icon google" >جوجل</a><span></span>
</li>
<li ><a href="رابط قناتك على اليوتيوب" target="_blank" class="icon ytube">اليوتوب</a><span></span>
</li>
<li ><a href="رابط الفيد برنر" target="_blank" class="icon rss" >خلاصة</a><span></span>
</li>
</ul>
<!--CSS-Social Network-Widget By http://st-tek.blogspot.com-->
* يجب تغيير المطلوب الى مايناسبك

ولاتاخذ بدون ان تعطي فمجرد كلمة شكر تكفي لرد الجميل

مع تحيات : حسام احمد
الجمعة, يوليو 04, 2014

3 ثلاث اضافات بلوجر بمناسبة شهر رمضان الكريم

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

طريقة تركيب الإضافات :


1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على تخطيط من القائمة الجانبية.
2- ثم اضغط على إضافة أداة و اختر HTML/JAVASCRIPT. 
3- وقم بلصق أحد أكواد الإضافات التالية حسب اختيارك :
الإضافة الأولى : (صورة رمضان مبارك متحركة + فانوسين)
3 ثلاث اضافات بلوجر بمناسبة شهر رمضان الكريم
<!-- Ramadan Mubarak By AfkarPro.Blogspot.com . START -->
<div style="float:left;position:absolute;left:0px;top:0px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Js8zn8bo2xZURVxFLssEnYUnwNHtAQW6CbN-7MjiCidcl0C1F6_zllXZ4s5lnG9pVfVVovAhvSfOHALx8TjOsUru5aeI990urbC0i62xiVNrqTFolf07Llbw154ROdTNF9KBd0bL7Cpt/s1600/Ramadan+Mubarak+-+www.afkarpro.blogspot.com.gif" alt="رمضان كريم"/>
</div>
<!-- AfkarPro END -->
<!-- AfkarPro START -->
<div style="float:left;position:absolute;left:0px;top:82px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGcm1PAyHoIIQlvNtgkqTAUm_I-HM1DeBKPXlrzcfjQwzcu1jIpFSi25bSUZ9dKT27mzcYEQEwp8kyse3Y2NwsiNmgOfpk6n4pdjSMFb-pywHlrxerTVDT8bPcN5qJa9iWft3-vRdJeo19/s1600/fan-3+-+www.afkarpro.blogspot.com.png" width="50,height="100" alt="رمضان كريم" title="رمضان مبارك سعيد" border="0"/>
</div>
<!-- AfkarPro END -->
<!-- AfkarPro START -->
<div style="float:left;position:absolute;left:0px;top:230px">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZdswyGBlUogtm91ObHtQWte58DnJGnrI9dL7JBmANfpzBaS7JDkaxMweoEL2LsrH06-Zma77afmrufHYv344aNfGC8ow9QN1cYEIGFq6CW7qyWpKYy0nO51OaZJQD12lXMvpwwrQtShR/s1600/fan-2+-+www.afkarpro.blogspot.com.png" width="50,height="100" alt="رمضان كريم" title="رمضان مبارك سعيد" border="0"/>
</div>
<!-- Ramadan Mubarak By AfkarPro.Blogspot.com . END -->
الإضافة الثانية : (فانوس متحرك + كتابة رمضان كريم على شكل هلال)

<!-- Start Code Ramadan Mubarak By AfkarPro.Blogspot.com -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="" height="">
<div style="float:top right; position:absolute; overflow:visible; left:210px; top:43px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144">
<param name="movie" value="http://im37.gulfup.com/GJv36.swf" />
<param name="quality" value="High" />
<param name="wmode" value="transparent" />
<embed src="http://im37.gulfup.com/GJv36.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed>
</object>
</div>
</td>
</tr>
</table>
</div>
<!-- End Code Ramadan Mubarak By AfkarPro.Blogspot.com -->


<a href="http://www.afkarpro.blogspot.com/"><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikSDzoGmXIpT1UlpKO4gfymPWGdYQfkKK7Yo_xjTJmnyqQcO7CQ79xwrDXNgEzMn39LQ-nOlwnrY0uHqjc9lEMzG-sWzhSBlTQDLje1bqtr4Xd7EIi0g0FljnLzV2sVoa9UHITCrjif008/s1600/best+blogger+tips+-+www.afkarpro.blogspot.com.png" /></a><div style="position: fixed; top: 80%; left: 3%;">
<a href="http://www.afkarpro.blogspot.com/" rel="nofollow" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOW30aAjX9UXFnNSClhRfwpwt_jBq-snMx9Jb0Asc7elQMLOjIrcgnmHc2bYj6cJBkU2O3SsNCkjOYYxNcLa-41iJjHJVm5_NcADNPE7DLLVE8YMTPiKg-nkR9kfkLt35rkfU34jkpwRwI/s1600/Ramadan-Karim+-+www.afkarpro.blogspot.com.png" /></a></div>

أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;) 
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و دمتم في رعاية الله وحفظة وسلامتة وارجو من الله الدعاء لى
وان تكون ايام سعيدة على الأمة العربية جميعاا
واخيرا لاتنسوا الأنضمام الينا


الجمعة, يونيو 27, 2014

كيفية وضع تعليق واعلامك بالرد علية

كيفية وضع تعليق واعلامك بالرد علية

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


السبت, يونيو 14, 2014

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

كيفية جعل مشاركات بلوجر تتناسب مع المواقع المشاركات الأجتماعية
كيفية جعل مشاركات بلوجر تتناسب مع المواقع المشاركات الأجتماعية
السلام عليكم ورحمة الله وبركاتة مرحبا
بكل متابعى نصائح للمدونين
بعد عرض الكثير من الزوار مشكلة ظهور صورة غير صورة
الموضوع اثناء نشر موضوع مدونتة على الفيس بوك او المواقع الأجتماعية
تأتى لة صورة ليس لها علاقة بالموضوع مثل ماوضح امامكم بالصورة
اليوم معانا الكود انشاء الله هو الحل الأكيد للمشكلة
ملحوظه:بعد وضع الكود سيطبق حل المشكلة على جميع مواضيعك او مشاركاتك الجديدة
ويأخذ بعد الوقت القليل لمعالجة باقى مواضيعك
شرح وضع الكود قم بالبحث عن الوسم
<head>
ونضع تحتة الكود هذا او نضعة فوقة اكودا الميتاج الخاصة بالمدونة
او بعد اضافة كود الخط الخاص بمدونتك يعنى مثل هذا

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>

ارجو انا ينال هذا الموضوع اعجابكم
اذا طبقت الطريقة على مدونتك وتم حل المشكلة اخبرنا بالرد على الموضوع 

الأربعاء, يونيو 11, 2014

كود ترتيب موقعك باليكسا والبيج رانك 3 اشكال

كود ترتيب موقعك باليكسا والبيج رانك 3 اشكال

كود ترتيب موقعك باليكسا والبيج رانك

بسم الله الرحمن الرحيم مرحبا بكم فى نصائح للمدونين
كثيرا منا يريد الجمع بين كودين البيج رانك واليكسا
واليوم وجدت كود رائع فى احد مواقع الأستضافة العربية
انا مثلا استفدت من الكود لأنى نسيت حسابى باليكسا فستخدمت هذا الكود الرائع
ملحوظة:يجب فى الأساس ان تكون انت اضفت موقعك الكود لتوضيح الترتيب عند فقدان الحساب
  1. الذهاب الى التخطيط
  2. اضافة اداة
  3. htmljava script
اليكم الكود ارجو انا ينال اعجابكم



<!-- RISEMYWEB widget code starts here -->

<div align="center">

<style type="text/css">@import url(http://www.risemyweb.com/widget/brand.css);</style>

<div id="widget"><script type="text/javascript" src="http://www.risemyweb.com/widget/widget.php"></script>

<div id="lbrand">

<div id="itex"><a href="http://www.risemyweb.com/" title="risemyweb">RiseMyWeb</a></div>

</div></div></div>


<!-- RISEMYWEB widget code ends here -->
الكود الثانى لموقع اليكسا فقط
كود ترتيب موقعك باليكسا والبيج رانك 3 اشكال
<p><SCRIPT language=JavaScript src="http://xslt.alexa.com/site_stats/js/t/a?url=رابط موقعك الخاص " type=text/javascript></SCRIPT></p>

كود ترتيب موقعك باليكسا والبيج رانك 3 اشكال
<a href="http://www.alexa.com/siteinfo/ضع رابط موقعك هنا"><script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/s/a?url=ضع رابط موقعك هنا'></script></a>


الثلاثاء, يونيو 10, 2014

كيفية الحصول على البيج رانك لموقعك بأشكال مختلفة

بسم الله الرحمن الرحيم 
السلام عليكم ورحمة الله وبركاتة
مرحبا بماتبعى نصائح للمدونين
اليوم فى اطار موضعنا
كيفية الحصول على البيج رانك لموقعك بأشكال مختلفة
سنتحدث عن كيفية جلب البيج رانك لموقعك او مدونتك بأشكال 
مختلفة غير التقليدية دعونا اولا نعرف نبذة عنة لمن لايعرف الأمر
ماهو البيج رانك PageRank
البيج رانك ببساطة هو تقييم محرك البحث GOOGLE لموقعك، ويحدد مرتبة ظهور موقعك في نتائج البحث، لكنه لا يخص الموقع بشكل عام فقط كما يعتقد الجميع، بل يمكننا مثلا أن نجد الصفحة الرئيسية للموقع لديها بيج رانك 0 ، لكن سنجد موضوع أو تدوينة له بيج رانك مرتفع.
ولأشرح ماهو البيج رانك ببساطة أكثر سأمدكم بمثال بسيط، فلنفترض مثلا أننا سنبحث عن عبارة " ولاية جيجل "، بكل تأكيد سوف تكون هناك نتائج كثيرة في محرك البحث، لكن سيكون هناك موقع في الصفحة العاشرة وآخر في الخامسة والذي يليه في الأولى، فهذا الذي جاء الأول في نتيجة البحث هو صاحب البيج رانك الأكبر من بقية المواقع الأخرى.
ماهي أهمية البيج رانك بموقعي ؟
بكل تأكيد بعد رؤية تعريف البيج رانك فإنه ستتلخص لدينا فائدته وأهميته بالنسبة للموقع، فكلما ارتفع من 1 الى 10 فإن هذا يعني تقدم موقعك في نتائج محرك البحث، وهذا مايعني جلب زوار كثر لموقعك، وحتى من الناحية المادية ستسفيد، لأن حصولك على بيج رانك مرتفع سيجلب لك معلنين كثر في موقعك، باحثين عن الإستفادة من البيج رانك الخاص بك.
مفاهيم خاطئة عن البيج رانك
في الحقيقة هناك كثير من الإخوة والأخوات يأخذون مفاهيم خاطئة عن البيج رانك، خصوصا المعلنين منهم، الباحثين عن الحصول على زوار لمواقعهم، فهم يعتقدون أن ارتفاع البيج رانك يعني أن الموقع يمتلك عدد كبير من الزوار، فهذه ليست حقيقة دائمة اذا لم نتحدث عن المواقع والمنتديات الكبرى مثل Facebook و Startimes ومواقع أخرى، لأنه يمكن في غالب الأحيان أن تجد موقع له بيج رانك مرتفع، لكن من المعقول جدا أن عدد زواره اليوميين لا يتعدون العشرات والمئات.
للحصول على كود الأضافة بموقعك تفضل هنا
اذا استفدت بالموضوع شارك معنا واترك بصمتك


الاثنين, يونيو 09, 2014

كيفية فتح جميع/روابط/نوافذ/مواضيع مدونتك (فى علامة تبويب جديدة)

كيفية فتح جميع/روابط/نوافذ/مواضيع مدونتك (فى علامة تبويب جديدة)

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

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

هام:قم بأخذ نسخة احتياطية من قالبك لأستعمالة عند وجود اخطاء فى بعض الأحيان عند الأضافات
ثانيا
اذهب الى واجهة مدونتك
قم بأختيار قالب
ثم تحرير (html)
توسيع قوالب واجهة المستخدم اى نقوم بالضغط فى صندوق الأكواد
مرة واحد بالزر الأيسر للماوس
ثم نقوم بضغط ازار الكيبورد
ctrl+f

ثم نبحث عن الكود
</head>
ثم نقوم بأضافة هذا الكود فوقة 
<base target='_blank' />
الأن احفظ القالب ولاتنسى الأنضمام الينا
والدعاء ابلغنا بالتعليق لنعرف رايك بالموضوع
مبروك عليك الأضافة 
السبت, مايو 31, 2014

كود الميتا تاج الذى يضع مدونتك فى صدارة محركات البحث فى عام 2014 لمدونتك على بلوجر

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

طريقة إضافة أكواد الميتا تاج لمدونتك على بلوجر

قم بالبحث عن الكود التالى
<head>
وقم بحذف جميع الأكواد التى بعده وقبل الكود التالى :ماعدا اكواد الخطوط او اى ملفات اخرى
<b:skin>
أى قم بحذف ما بينهماولكن هناك ما لا يجب أن تحذفه , وهو كود الخطوط على مدونتك ( إن وجد )
ثم ضع بينهما الكود التالى
<title>عنوان المدونة</title>
<meta content='حول المدونة' name='Description'/>
<meta content='الكلامات الدلالية .' name='keywords'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='width=1100' name='viewport'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='blogger' name='generator'/>
<meta content='index, follow' name='robots'/>
<meta content='اسم صاحب المدونة بالأنجليزية' name='author'/>
<meta content='بلدك بالأنجليزى' name='country'/>
<meta content='حقوك المدونة' name='copyright'/>
<meta content='IE=9' http-equiv='X-UA-Compatible'/>
<meta content='chrome=1' http-equiv='X-UA-Compatible'/>
قم بتعديل الكود عن طريق تغيير الكلمات بين القوسين بالمطلوب فيها , وراعى أن يكون وصف المدونه عباره عن جمله مفيه لا تزيد عن 150 حرف وتصف بهم حال المدونه فعلا .
سيؤدى ذلك إلى ظهور أفضل بكثير لمدونتك فى المراتب الأولى من محركات البحث وخصوصا محرك البحث العملاق جوجل .
الجمعة, مايو 30, 2014

اجبار الزائر على مشاهد الفديو بمدونتك




بسم الله الرحمن الرحيم

مرحبا بكم فى مدونة نصائح للمدونين

اليوم معكم كود مهم وقد بحث عنها الكثير من المدونين وهو وضع مقطع فديو بموقع

وعدم معرفة مصدر الفديو واليوم اتينا لك بالكود

<object height="420" width="650"><param name="movie" value="http://www.youtube.com/v/1GDrOqPI3uc"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/1GDrOqPI3uc" type="application/x-shockwave-flash" allowscriptaccess="always" allownetworking="internal" allowfullscreen="true" height="420" width="630"></object>
<img border="0" src="http://i2.ytimg.com/vi/1GDrOqPI3uc/0.jpg" height="0" width="0" /></div>
كل ماعلبك لأستحدامة هو تغير هذا الكود  1GDrOqPI3uc موجود ثلاث مرات بكود الفديو الذى تريدة

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


                          
اتمنى انا ينال اعجابكم شجعونا بالردود
الأربعاء, مايو 21, 2014

مجموعة اكواد صناديق بلوجر بتقنية css3

بسم الله الرحمن الرحيم 
مرحبا بكل متابعى نصائح للمدونين
بعض طلب الكثير والبحث والسؤال
عن
كيفية عمل صندوق اقتباس مميز للبلوجر تلقائيا
اليوم اتيت لكم بمجموعة من الأكواد الجزاء الأول
بتقنية css3
طريقة التركيب سهلة جدا نفتح القالب ثم تحرير html ثم نحرر القالب
ملحوظة:اذا لم يظهر صندوق الأقتباس قم بعمل الأتى
أبحث عن
.post blockquote
وأحذف الكود بأكملة قد تجدة بهذا الشكل
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0} 
ثم قم بالأتى 
بالضفط على ctrl+f
ونقوم بالبحث عن الكود التالى
]]></b:skin>
وتضيف قبله او فوقة اى شكل يعجبك
من الاشكال الاتية

الشكل الأول

blockquote {
border-bottom-left-radius: 6px;
-webkit-bottom-left-radius: 6px;
-moz-bottom-left-radius: 6px;
-o-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-o-border-bottom-right-radius: 6px;
margin: 0 0 20px;
border-left: 30px solid #FC4F08;
background-color: #302C2B;
color: #B8B4AA;
border-radius: 10px 20px 20px 10px;
-webkit-border-radius: 10px 20px 20px 10px;
-moz-border-radius: 10px 20px 20px 10px;
-o-border-radius: 10px 20px 20px 10px;
padding: 4% 2% 4% 3%;
font-family: 'Voces', cursive;
font-size: medium;
text-align: left !important;
direction: ltr !important;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
Pseudo ::after element

الشكل الثانى 



.post blockquote {
max-height: 400px;
clear: both;
padding: 0 10px 10px 10px;
border: 1px solid #DDD;
color: #666;
direction: ltr;
text-align: left;
border-radius: 4px;
font: 12px "Courier New", "MS Sans Serif", sans-serif, serif;
line-height: 1.6em;
-ms-overflow-x: auto;
overflow-x: auto;
position: relative;
z-index: 50;
background: #FFF;
}
.post blockquote:before {
content: " CODE --> copy/past this code and Enjoy --> ";
padding: 0px 20px;
margin: 0 -10px 5px -10px;
border-bottom: 3px solid #A4D3DF;
display: block;
background: #E5F8FD url(https://jetara.googlecode.com/files/%D8%AA%D9%86%D8%B2%D9%8A%D9%84.png) left 2px top 2px no-repeat;
color: #A4B1B8;
}

الشكل الثالث

blockquote {
width: 80%;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #FFCC00;
border: 2px solid #80D4DF;
color: #333;
position: relative;
padding: 20px 30px;
border: none;
margin: 0 auto;
margin-bottom: 15px;
font-size: 13px;
margin-right: -2px;
}
blockquote:before {
background: #99CCFF;
content: "إقتباس";
position: absolute;
left: -31px;
text-align: center;
line-height: 32px;
color: #FFF;
top: 0;
width: 50px;
height: 28px;
font-weight: bold;
}

الشكل الرابع 

.post blockquote {
background: #EFEFEF;
border: 2px dotted #000000;
box-shadow: 1px 1px 0 #000, 3px 3px 0 #fff, 4px 4px 0 #000, 6px 6px 0 #fff, 7px 7px 0 #000, 9px 9px 0 #fff, 10px 10px 0 #000;
color: #404141;
direction: ltr;
font: 14px Arial;
margin: 15px auto;
max-height: 400px;
overflow: auto;
padding: 15px;
text-align: left !important;
width: 80%;
}
.post blockquote:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDyP8k1zgmyFl2sKQ3GvM6gbA4OioFeRIyO0Eja7FS7TgN-BmSzOs7OzdxTaYicjHkWlkwdTga647DBXieBRkynIvRIpO_urEd5Wepw4ykDrt0AArApd2sngK9jVV5RkTMkjNxUSSvBXN/s172/16x16.png") no-repeat scroll 99% -97px #000000;
color: #FFFFFF;
content: "3alam-b.Blogspot.Com كود معد بواسطة";
display: block;
font: bold 12px droid arabic kufi;
height: 20px;
margin: -15px -15px 5px;
padding: 4px 30px 6px 0;
text-align: right !important;
}

الشكل الخامس 



.post blockquote {
margin: 15px 35px 15px 15px;
padding: 10px;
clear: both;
list-style-type: none;
background: #FFFBC6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQABA-Vz7mhqplKtiIOYjHzgMcRB14qv70t0IAWmlL0uPXl687jplg_1Fz9I4jZuI93TUfSzkF3DBG9CmUhvMbg4ymJnXmEPJ0o7e-0nOkAb4qT8ifvh22KR4XAdPyJNEC43LgPGmzAx_/s320/cv-1.png) no-repeat right bottom;
border-top: 1px solid #4977FF;
border-right: 1px solid #5686FF;
border-bottom: 1px solid #475FFF;
border-left: 1px solid #5686FF;
border-radius: 10px;
box-shadow: 2px 3px 3px 1px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(255, 255, 255, 0.5) inset;
height: 380px;
overflow: scroll;
overflow-x: hidden;
direction: ltr;
}


اتمنى ان تكون الاشكال اعجبتكم
وانتظرونا مع مجموعة جديدة من اكواد الاقتباس للبلوجر
نرجو كلمة فقط او تعليق يعنى تقيمك للموضوع
الاثنين, مايو 12, 2014

اضافة اتصل بنا للبلوجر مستقلة

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


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

من خلال هذا الشرح المبسط سنتعلم افضل طريقة لأستغلال مميزات تلك الأداة، وفي البداية سنجاوب علي سؤال ما هي صفحات بلوجر؟ هي عبارة عن صفحات ثابته تستطيع المدونة الواحدة امتلاك 20 واحدة منها فقط ومن امثلها (أتصل بنا، من نحن، سياسية الخصوصية) وغيرها أذاً كيف نقوم بتجهيز صفحة أتصل بنا؟

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

في الخطوة التالية وبعد التأكد من ظهور نموذج الأتصال في مدونتك قم بالدخول منطقة القالب الخاصة بك ومن ثم اضغط علي تعديل HTML وقم بالبحث عن الكود التالي <head> وقم بأضافة الكود التالي اسفل منه مباشرة
<style>
#ContactForm1 {display: none;}

</style>
بعد القيام بتلك العملية ستجد ان نموذج الأتصال قد اختفي من مدونتك الأن قم بالدخول لمنطقة الصفحات في مدونتك وقم بأضافة صفحة جديدة "فارغة" أعطي للصفحة عنوان ما وليكن "أتصل بنا" و في نفس الصفحة قم بالدخول لمنطقة تعديل الاكواد المعروفة ب "HTML" ثم قم بمسح جميع الاكواد بها وقم بلصق الاكواد التالية بها مباشرة 
  <!-- contact us page by bloggeram.com -->
<div class="bloggeram-contact-page">
<p>هنا قم بكتابة رسالة توضحية للزائر</p>
<center>
<div class="contact-us-page">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p>
</p>
<span class="contact-us-text">الاسم</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" autocomplete="off">
<p>
</p>
<span class="contact-us-text">بريد إلكتروني <span style="font-weight: bolder;">*</span></span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p>
</p>
<span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال">
<p>
</p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</p>
</div>
</form>
</div>
</div>
</div>
<br />
<p>تأكد من ظهور "تم أرسال رسالتلك"</p>
</center>
</div>

<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<style>
.bloggeram-contact-page {
direction: rtl;
text-align: center;
}
.contact-us-page {
width:98%; max-width:400px;
}
.contact-us-text {
float: right;
}
.contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi';
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: none !important;
width: 95% !important;
min-height: 40px !important;
font-family: 'Droid Arabic Kufi' !important;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
box-shadow: none;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
box-shadow: none;
outline: none;
}


.contact-form-widget {
width: inherit;
max-width: none !important;
padding: 10px 12px 5px 0px;
font-size: .90em;
}
#ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi', Voces;
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}
#ContactForm1_contact-form-submit:hover {
background: #FFA200;
border: #FFA200;
}
</style>
الجزء المحدد بالون الأحمر ضع به اى رسالة تريدها
الأن قم بالدخول لصفحتك ستجد انها اصبحت جاهزة للعمل بشكل جيد، يمكنك أيضاً أضافة رسالة توضحية في بداية النموذج، ثم قم بتجربتها ستجدها تعمل بشكل جيد.
ملوحظة: لا تقوم بأزالة الاداة الخاصة بنموذج المشاركة الموجودة في الادوات بدونها لن تعمل الاداة
الخميس, مايو 01, 2014