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

الثلاثاء، 4 فبراير 2014

اضافة قائمة للاقسام CSS

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


 طريقة التركيب
1 - قم بالذهاب الى لوحة التحكم
2 - قم بالدخول الى التخطيط
3 - قم باضافة اداة HTML/JAVASRCIPT

4 - وقم باضافة هذا الكود بها

<style>#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar a{text-decoration:none;color:#2D2D2D;}#vbar a:hover{text-decoration:none;color:#037DFF;}#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi', Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar .widget { border: 1px solid #ddd; background-color: #fff; margin-bottom: 10px; box-shadow:inset 0 0 4px #eee; }.menu a img {float:right;padding-left:10px;}</style> <div id="vbar"><ul><li class="menu"><a href="http://blogger/"><img src="http://im38.gulfup.com/jFpV7.png" />الرئيسية</a></li><li class="menu"><a href="http://blogger/2013/08/add-comment-facebook.html"><img src="http://im38.gulfup.com/U00k5.png" />من نحن</a></li><li forclass="menu"><a href="http://blogger/2013/08/You-Might-Also-Like.html"><img src="http://im38.gulfup.com/SrrEm.png" />سجل الزوار</a></li><li class="menu"><a href="http://blogger/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD"><img src="http://im35.gulfup.com/V9qDM.png" />الربح</a></li><li class="menu"><a href="http://blogger/">
<img src="http://im38.gulfup.com/LmV2W.png" />اتصل بنا</a></li></ul></div>

الذى ملون باللون الاحمر قم بتعديله بما يناسبك

ام المكتوب بالعربى فهو واضح بالنسبة لك الرئيسية وهكذا


دمتم بخير واتمنى ان تنال الاضافة رضائكم 
إقرأ المزيد.. bloggeradsenseo

الأربعاء، 29 يناير 2014

كيفية وضع مشغل mp3 فى مدونتك بالملف الصوتى الذى تختاره

فى هذا الموضوع المميز من مدونة كلفين للبلوجر سنتطرق لشرح اضافة غاية فى الروعة والجمال وهى كيفية وضع مشغل mp3 فى مدونتك بالملف الصوتى الذى تختاره و الاضافة بسيطة جدا ولا تحتاج لجهد والان نذهب الى الشرح لذلك
مميزات الاضافة 
(1) تقوم بالتحميل مرة واحدة 
(2) متناسبة مع جميع القوالب والمتصفحات
(3) يمكنك التحكم فى مستوى الصوت وايقاف وتشغيل الصوت
(4) سريعة التحميل  

معاينـــــــــة الاضافــــة
اذهب للموقع الخاص بها من  هنا 


أولا : قم باختيار الشكل المناسب للاضافة

ثانيا قم باضافة اسماء وروابط مباشرة للملفات الصوتية التى تريدها

ثالثا قم بالتعديل على بعض خصائص الاضافة

 رابعا احصل على الكود الخاص بك بالضغط على DONE
انســـــــخ الكود ثم 

اذهب الى لوحة تحكم مدونتك >> التخطيط >> اضافة أداة >> Html/javascript 
ثم ضع بها  الكود قمت بنسخه من الموقع اعلاه
وليكن هذا الكود كتجربة للاضافة 
<script type="text/javascript" src="http://scmplayer.net/script.js" 
data-config="{'skin':'skins/aquaBlue/skin.css','volume':12,'autoplay':true,'shuffle':true,'repeat':2,'placement':'top','showplaylist':false,'playlist':[{'title':'%u064A%u0627 %u0646%u0628%u0649 %u0633%u0644%u0627%u0645 %u0639%u0644%u064A%u0643 %u0645%u0627%u0647%u0631 %u0632%u064A%u0646 ','url':'http://k006.kiwi6.com/hotlink/tvlf4w54oa/messnger_of_allah.mp3'}]}" ></script>
ثم قم بتغيير الرابط باللون الأزرق برابط الملف الصوتى المباشر المراد تشغيله بمجرد فتح المدونة 


محمد العجاوي
إقرأ المزيد.. bloggeradsenseo

الخميس، 2 يناير 2014

إضافة أداة مواضيع عشوائيه لمدونة بلوجر - شرح كامل



بسم الله الرحمن الحريم
والصلاة والسلام على خير خلق الله , سيدنا محمد عليه الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .




إضافة اداة مواضيع عشوائيه لمدونة بلوجر 

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


مثال مباشر : من هنا 



صورة من الأداة : 





طريقة التركيب : 
  1. اذهب الى التخطيط .
  2. ثم إضافة اداة HTML/javascript .
  3. الصق هذا الكود داخلها : 









<style scoped="" type="text/css">
ul.rdmrcpostag{text-align:right;font:normal normal 11px Arial,Geneva,sans-serif}
ul.rdmrcpostag,ul.rdmrcpostag li{margin:0;padding:0;list-style:none;overflow:hidden}
ul.rdmrcpostag{background:aliceBlue}
ul.rdmrcpostag li{padding:5px;font: 12px tahoma,arial;}
ul.rdmrcpostag b a{color:#00699B}
ul.rdmrcpostag .thumbp{float:right;margin:0 0 3px 5px}
ul.rdmrcpostag img{padding:3px;border:1px solid #B1B1B1;background:#F3F3F3}
ul.rdmrcpostag .datex{font-size:8px;margin:3px 0 0}
ul.rdmrcpostag .dt{margin:0 0 0 5px;padding:0 0 0 5px;border-right:1px solid #7A7A7A;display:none;}
ul.rdmrcpostag p{margin:5px 0 0}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">function RandomRecenTag(b){(function(m){var j={blogURL:"",MaxPost:5,RandompostActive:true,idcontaint:"#randompost",thumbSize:100,jumlahhuruf:100,cmtext:"comments",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgicjZB52cJnn4YHvoPCCCDB9glIK1IOsD7Am7M8QV6qxNpkpplifRAdA7efq4VhXNVzSxkJ92y6vGm6XuDQxOvj6am0lBKPbCGPM_5JeBgkYWMGzOYMOvq-H8eFc99ZUIZ__aP2ZYto/s1600/noimage.jpg",NoCmtext:"No Comment",tagName:false};j=m.extend({},j,b);var k=m(j.idcontaint);if(j.blogURL==""){var a=window.location.protocol+"//"+window.location.host}else{var a=j.blogURL}var o=k.append('<ul class="rdmrcpostag"/>');var l=function(y){var D,i,c,h,B,z,C,f="",A=y.feed.entry;for(var d=0;d<A.length;d++){for(var e=0;e<A[d].link.length;e++){if(A[d].link[e].rel=="alternate"){D=A[d].link[e].href;break}}for(var g=0;g<A[d].link.length;g++){if(A[d].link[g].rel=="replies"&&A[d].link[g].type=="text/html"){c=A[d].link[g].title.split(" ")[0];break}}if(c!=0){h='<span class="cm">'+c+" "+j.cmtext+"</span>"}else{h='<span class="cm">'+j.NoCmtext+"</span>"}if("content" in A[d]){B=A[d].content.$t}else{if("summary" in A[d]){B=A[d].summary.$t}else{B=""}}if("media$thumbnail" in A[d]){z=A[d].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+j.thumbSize+"-c")}else{z=j.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+j.thumbSize+"$1")}B=B.replace(/<\S[^>]*>/g,"");if(B.length>j.jumlahhuruf){B=B.substring(0,j.jumlahhuruf)+"..."}i=A[d].title.$t;C=A[d].published.$t.substring(0,10),C=C.replace(/-/g,"/");f+='<li><a class="thumbp" href="'+D+'" target="_blank"><img width="'+j.thumbSize+'" height="'+j.thumbSize+'" alt="'+i+'"src="'+z+'"/></a><b><a href="'+D+'" target="_blank">'+i+'</a></b><div class="datex"><span class="dt">'+C+"</span>"+h+'</div><p class="contxisi">'+B+"</p></li>"}m("ul",k).append(f)};var p=function(h){Total_Posts_Number=h.feed.openSearch$totalResults.$t;if(Total_Posts_Number<=j.MaxPost){j.MaxPost=Total_Posts_Number}var e=[];while(e.length<j.MaxPost){var f=Math.ceil(Math.random()*Total_Posts_Number);var g=false;for(var i=0;i<e.length;i++){if(e[i]==f){g=true;break}}if(!g){e[e.length]=f}}if(j.tagName==false){var c=""}else{var c="/-/"+j.tagName}if(j.RandompostActive==true){for(var d=0;d<j.MaxPost;d++){m.ajax({url:a+"/feeds/posts/default"+c+"?start-index="+e[d]+"&max-results=1&orderby=published&alt=json-in-script",success:l,dataType:"jsonp",cache:true})}}else{m.ajax({url:a+"/feeds/posts/default"+c+"?max-results="+j.MaxPost+"&orderby=published&alt=json-in-script",success:l,dataType:"jsonp",cache:true})}};var n=function(){if(j.tagName==false){m.ajax({url:a+"/feeds/posts/default?max-results=0&alt=json-in-script",success:p,dataType:"jsonp",cache:true})}else{m.ajax({url:a+"/feeds/posts/default/-/"+j.tagName+"?max-results=0&alt=json-in-script",success:p,dataType:"jsonp",cache:true})}};m(document).ready(n)})(jQuery)};</script>
<a style='display: none;' href='http://infokelvin.com'></a>
<div id="randomcecent_posts_id">
</div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
RandomRecenTag({
blogURL: "http://infokelvin.com",
MaxPost: 6,
RandompostActive: true,
thumbSize:55,
jumlahhuruf:100,
cmtext:"تعليق",
NoCmtext:"لا يوجد تعليقات",
tagName:false,
idcontaint: "#randomcecent_posts_id"
});
});
//]]>
</script>

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

الاثنين، 30 ديسمبر 2013

شرح ربط إسم نطاق من Name.Com بخدمة Blogger

السلام عليكم … كانت ولا تزال شركة Name.Com لحجز النطاقات المفضلة لدي في حجز النطاقات اليوم إن شاء الله سأشرح طريقة ربط إسم نطاق ( دومين ) بخدمة المدونات المجانية بلوجر Blogger التابعة لـ Google ربط تام، المسألة بسيطة جداً و سهلة جداُ ولا تحتاج إلى جهد بسم الله

 نقوم بالدخول إلى حسابنا في موقع Name.Com و نختار إسم النطاق المراد العمل عليه من قائمة النطاقات الخاصة بنا و نضغط عليه مثل الصورة التالية

بعدها سننتقل الى لوحة تحكم إسم النطاق ثم نضغط على



الأن سيطلب منا النطاق تفعيل الـ DNS التابع لموقع Name.Com نوافق و نضغط تفعيل .. بعدها سيتم نقلنا لهذه اللوحة نعدل الإعدادات مثل ماهي موجودة في هذه الصورة


الإعدادات المهمة هي :

الخطوة الأولى
إذا كنا سنقوم بربط مدونة بلوجر على إسم نطاق فرعي مثلاً en.morocco.im نقوم
في خانة Record Type نضع CNAME
في خانة Record Host نضع en
في خانة Record Answer نضع ghs.google.com
في خانة TTL نضع 1800
الخطوة الثانية
نقوم بإنشاء أربع سجلات من نوع A في كل سجل نضع في خانة Record Type نضع A وفي خانة Record Host نضع نجمة * و في خانة Record Answer نضع واحد من الـ IP التالية
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21
وفي خانة TTL نضع 1800
نكرر هذه العملية 4 مرات بعدد الـ IP الموجود لدينا هنا نكون قد هيئنا إسم النطاق تهيئ كامل و أصبح جاهزاً للربط بمدونات بلوجر المجانية
ملاحظة : يوجد في موقع Name.Com خدمة لتفعيل إعدادات Google Apps المهمة بشكل تلقائي يمكن لنا الإستعانة بهذه الخدمة و أنصح بالإستعانة بها لكن تفعيلها لن يغنينا عن الإعدادات المهمة السابق ذكرها في الخطوتين الأولى و الثانية
الأن إنتهبنا من تهيئة إسم النطاق بشكل كامل وجاء دور المدونة ننتقل للوحة تحكم المدونة عن طريق موقع Blogger ثم نتجه إلى  إعدادات + أساسي + النشر + عنوان المدونة + إضافة نطاق مخصص + تبديل إلى الإعدادات المتقدمة + ثم نضع إسم النطاق الخاص بنا كما في هذه الصورة

ثم نحفظ عملنا في الغالب يحتاج النطاق من ساعة إلى 48 ساعة ليعمل بشكل كامل شخصياً  عمل معي في 5 ساعات تقريباً أتمنى ان يكون الشرح واضح و مفهوم و أي إستفسارات تستطعيون تركها في التعليقات و سأقوم بالإجابة عليها إن شاء الله . 
_______________________________________________________________________

بقلم نوفل شرامط 
إقرأ المزيد.. bloggeradsenseo

الأحد، 29 ديسمبر 2013

اضافة احصائيات المدونة

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



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

اولا اذهب الى "التخطيط" واضغط على "اضافة جديدة" واختر  "HTML/JavaScript"

ثم ضع هذا الكود وغير الرابط الاحمر برابط مدونتك

<ul><li><div><a href="http://pro-xs.blogspot.com">المتواجدون الآن في المدونة: <script src="http://fastonlineusers.com/on2.php?d=tajribi-xs.blogspot.com+ data:blog.id + " type="text/javascript"></script></a></div></li>
<li><div><a href="http://tajribi-xs.blogspot.com">المتواجدون الآن في هذه الصفحة: <script src="http://fastonlineusers.com/on2.php?d=tajribi-xs.blogspot.com/+ data:post.id + " type="text/javascript"></script></a></div></li><ul></ul></ul>
<script style="text/javascript">
function numberOfPosts(json) {
document.write('عدد التدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('عدد التعليقات : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://tajribi-xs.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://tajribi-xs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
<span style="font-size:75%;"></span>
<div dir="rtl" style="text-align: right;" trbidi="on">
<script>
function numberOfPosts(json) {
document.write('عددالتدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
function numberOfComments(json) {
document.write('عدد التعليقات: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
</script></div>

الموضوع من طرف : محمد المعاشي
إقرأ المزيد.. bloggeradsenseo

الجمعة، 27 ديسمبر 2013

اضافة اضغط لايك ليظهر الموضوع


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

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

اولا اذهب الى "قالب" ثم اضغط على "تحرير HTML"ثم إبحث عن"</head>"
ثم ضع قبلها هذا الكود:
     <link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>

 ثم ضع هذا الكود في المشاركات التي تريد اجبار الزائر على ضغط لايك قبل قرائة الموضوع
ملحوظة:عليك وضع الكود هو الاول ثم ضع الموضوع الذي تريد

    <article id="default-usage">
    <div class="to-lock" style="display: none;">
           
    <!--Hidden Content Starts (You can Use HTML BELOW)-->

    <div style="text-align: center; margin-bottom: 20px;">
    <img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
    </div>
<div style="text-align: justify">
    Add Your Hidden Text Here
    </div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
    </article>
    </div>
<div id="mblunlocker">
 </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
    <script>
    jQuery(document).ready(function ($) {
    $("#default-usage .to-lock").socialLock({
    text: {
    header: "Share it To Unlock This Content",
    message: "Yes, this is Social Locker. Just try it, click on one of buttons."
    },
    style: "ui-social-locker-secrets",
    buttons: {
    order: ["twitter", "facebook", "google"]
    },
    // twitter options
    twitter: {
    url: "http://pro-xs.blogspot.com/",
    text: "Upgrade your social buttons to get more social traffic!"
    },
    // facebook options
    facebook: {
    url: "https://www.facebook.com/",
    appId: "418044881593120"
    },
    google: {
    url: "http://pro-xs.blogspot.com/"
    }
    });
    });;;;
           
    </script>

-غير http://pro-xs.blogspot.com/ برابط مدونتك

-غير https://www.facebook.com بصفحتك على الفيس بوك

-
غير 
Add_Hidden_Image_Here 
بصورة

-غير  Add Your Hidden Text Here بموضوعك

إقرأ المزيد.. bloggeradsenseo

الخميس، 26 ديسمبر 2013

إضافات بلوجر: تابعني على الفايسبوك+تابعني على اليوتوب+ كم تبقى لرمضان+مواقب الصلاة


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



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







قم بإستبدال
www.facebook.com/infobouzadi
برابط صفحتك على الفيس بوك






الإضافة الثانية
هي إضافة "تابعني على اليوتوب"
و هي تفيد في جلب المتابعين لقناتك على اليوتوب






إستبدل
hamzabouzadi

برابط قناتك على اليوتوب





إضافة أداة كم تبقى لرمضان






إضافة أداة مواقب الصلاة





هذا ما لذي إخواني أتمنى أن تعجبكم هذه الإضافات لا تبخلوا علينا بالضغط على زر أعجبني

المصدر
إقرأ المزيد.. bloggeradsenseo

قائمة ادارة المدونة للبلوجر

السلام عليكم ورحمة الله وبركاته اليوم في كلفين للبلوجر اقدم لكم هذه الاضافة المميزة الا وهي قائمة ادارة المدونة لمدونات البلوجر.

المميزات:

1- تضم أزرار إدارة المدونة للمنصة الجيدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin) 

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

اولا اذهب الى الى "قالب" ثم اضغط على "تحرير HTML" وابحث عن "]]></b:skin>"
ثم قم بوضع الكود التالي قبله :
.bloggermenu {
position: fixed;
top: 200px;
left: 10px;
width: 24px;
overflow: hidden;
padding: 5px;
background: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #ccc;
-moz-box-shadow: 1px 1px 3px #666666;
-webkit-box-shadow: 1px 1px 3px #666666;
box-shadow: 1px 1px 3px #666666;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
الآن قم بالبحث عن الكود التالي :
<b:include name='feedLinks'/>
 فإن لم تجده ،قم بالبحث عن هذا الكود :
<b:include name='nextprev'/>
ثم قوم بوضع هذا الكود تحت أحد الأكواد السابقة :
<b:include name='ButtonsbloggerFix'/>
3-قم بالبحث عن هذا الكود :
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
ثم ضع الكود التالي بعده مباشرة :

<b:includable id='ButtonsbloggerFix'><span class='item-control blog-admin'><b:if cond='data:blog.pageType != &quot;error_page&quot;'><div class='bloggermenu'><a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik37i22KVcpGPyn4Q8lRQbubW1ucmR1m4POph0h-tkCE8B-p9nt8bHuRHVmfQAhyfT02qT3oPlvYfb2_0VYkXM4qq3J1OcPY86jzEbxKK4M2rHPjTpa8T-TgHL_wdCbqT4Il7r13RmlFs/s1600/blogger.gif' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgojorcBQZuEbnpH8tAIbCipgmfPhLBzEhd6Qc8q5aFL_sveYBN_JQicPUvm2pmbl9r0ToPyNBR5Yynaim-OBvZ6iMARkqZBdmzf8Pt1c7nN85LpcpD5poVYGD0AUnEioLBjFgZvRPPFEI/s1600/general+orange.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-TkqSdAM_GsGPWqBicb1MSm3KKEckmuOIM_7LCXN-IjN1_z5Owpe25Yydznaqg0jlHanh5j7Y_GD02GMdZWuF_9-aJB93SgUaRGjGge1oBBdGrvf4dDZBnIGO7XCBwqpHQXEzhb9pZ4/s1600/new+message.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4-oKGLTWnqJXNQNVFiccVFtH132ICLrf_vtV0yp-VG8ag8mxTLqc0uA1AqXqHy6A8tkMYoTrc70R4iDgk-jxvKhyZOH_oQK_MZYyM9RNTEsble9pm6luYPGQqrxJPC6jeYQZV1AAm5I/s1600/MOCHARAKAT.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Kkx111iu1BpYWT8IMpo-hAreOesXHrEPMPJL_JDbeICqaloytKH_0Eot7l8q4HLqee5pw8oexDjO-V-pZvRtFFzriagjDntkBWdxIImjiyYbsJTNgD819iy00h_KEXuG2xK_MVZolwQ/s1600/PAGES.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05xJNsiRDyvZDxH_Pln5HM1EAwdVq6kGucqCCieR56IMSTnzZ16Ednod86mS5T6seyaIHGHSgKPBsWoSRYnxQVN1CC93krnctx_XJhS4_0aC8AijYx-OZKlmwf3Z9UQBcVKloF_OoBQg/s1600/COMMENTS.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9YSuALM2gHyYrTaMudjXrLuDb7BePdcoZY9VTvhceK7n6Env-DVDLOpWTta0Zzjy-tdt5FurMyLASVTr7tseYAeF00VREnXPyOzxmGisGpt9oXO5TaCC9cP1QLifIPLxNzACCcYV1eAw/s1600/google+plus.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ZjqrDRowALP79Tf6Y8DYiyeZganZirUYCbsqne4yJ8xzeGgfJriSgn9f7bYUWChHPzair2_Mi1QWZAZwXjF1J2A0NsTlRbOE89cT_gbhYUQrImRas86B_CS_SUftfuvvPI7Bhvi7ww4/s1600/STATISTIC.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9WNkWp4wH1TjxQIe5ADWTk2-q_xyA-Jh1AjTOxww0yOmpOsisqQa3WIVQXId8-Gmd_ZdMfj3xjuLKSCWD-eQKuYdnuhL6qpvk9PAX0VSJAnq_npZN3GzPVC8cEiOOKGwaTQQT9ql3_M/s1600/adsense.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnVa6EPt6JTpZOGTw6gP1r2WX4-ah80jw_V5rFkVJzPLuW8Q-XsTCPvkRg5c3UxOaeht5vaIEO3YixVJCvBjrSSOw_n9F2iorZ7ANogttYWFDNoE8W7OnC8aRw-pWgpn4OgmmJnO2oPw/s1600/TAKHTIT.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiAEA_lQv2Am4v_iRDikroTjFpOznZ9SK3GTDN5o2eSSim3x0XEXgXs41qyrUNJFhnSO6FKspcsfTikxXhzJOin94mG2oFLbmxlY602MhNxrtZmqzKuHSGYN8_FhdID6HSsKwG6vHI28/s1600/TASMIM.png' title=''/></a><a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGlVqUV4GOc0T4_XvG9LExcG3SrZWCdt9wha1rcgaD59iaO3pdK9wgzOPxzII0UeFATprn6W_k9GImeDrIwJ47z6hCY8Nul8SlLE9oRPuBygcZenYkdl3HcMb4DnYyC6nH64Wul1IY8iw/s1600/PARAMETRE.png' title=''/></a></div></b:if></span></b:includable>
 قم بتعدي xxxxxxxxxxx بالID الخاص بالمدونة
 إضغط على إسم مدونتك من قائمة مدوناتك ثم قم بنسخ كود التعريف كما هو موضح في الصورة أسفله
2-كما ذكرنا سابقا فإن هذه إضافة تمكنك من التنقل في قائمة الإدارة على حسابك الخاص على موقع بلوجر ،حيث يمكنك إخفاء الإضافة على الزوار وإظهارها لك أنت فقط عند دخولك على حسابك في موقع بلوجر،كما هو شأن أزرار التحرير السريع المعتمدة لدى بلوجر،ولذلك إذا أردت إظهار الإضافة للزوار ،قم بحذف السطرين من الكود الأخير ،أي ما لون باللون الأحمر (السطر الثاني والسطر قبل الأخير)فلا مشكلة في ذلك لأن لو أحد الزوار قام بالضغط على أحد الأزرار سوف يقوم بفتح حسابه هو(كما فعلت أنا بمدونتي ) .
وإذا تركتهما ،سوف تظهر الإضافة لك أنت فقط عند دخولك على حسابك بموقع بلوجر،


إقرأ المزيد.. bloggeradsenseo

الثلاثاء، 24 ديسمبر 2013

حصريا قالب المحترف بشكل جديد


السلام عليكم ورحمة الله تعالى وبركاته

اخواني اعضاء وزوار كلفين للبلوجر

اليوم وفي تدوينة جديدة نقدم لكم قالب المحترف بشكل جديد احترافى بمساحات اعلانية على الجانبين و امكانية وضع اعلانات على الجانبين 160X600

لوضع الاعلانات الجانبية ابحث عن كلمة adds و addsright
--------------------------------
صورة للقالب 







إقرأ المزيد.. bloggeradsenseo

الأحد، 22 ديسمبر 2013

شريط اخر المواضيع بشكل انسيابي


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

معاينة مباشرة

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

اولا اذهب الى قالب ثم اضغط على تحرير HTML

وابحث عن </head>

واضف هذا الكود قبله :


<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 0px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#f88c00;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style>

 ثم ضع هذا الكود في اي مكان تريد مثلا : اذهب الى التخطيط وضع الكود فوق المشاركات او اي مكان اخر مناسب

<div id='beakingnews'><span class='tulisbreaking' style='height: 74px; width: 100px; padding-right: 20px;'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://pro-xs.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";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"){ posturl = entry[i].link[j].href;  break;  }              }            
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); });
//]]>
</script>

 غير الرابط الملون بالازرق برابط مدونتك

إقرأ المزيد.. bloggeradsenseo

الخميس، 19 ديسمبر 2013

إضافة إبتسامات متحركة للتعليقات في مدونة بلوجر

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



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

اولا ندخل الى القالب 
تم تحرير 

تم نضيف الكود التالى قبل الوسم </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"إضغط على الابتسامة لظهور الكود الخاص بها",
emoMessage:"لإدراج تعبيرات الوجه يجب إضافة ما لا يقل عن مسافة واحدة قبل الرمز."
})
});
//]]>
</script>
<script src='https://arblab.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

تم نضيف الكود التالي قبل الوسم ]]></b:skin>


.emoWrap {
position:relative;
padding:10px;
margin-bottom:7px;
background:#fff;
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
border:3px solid #860000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
font-weight:normal;
color:#333;
}
.emoWrap:after {
content:"";
position:absolute;
bottom:-10px;
right:10px;
border-top:10px solid #860000;
border-left:20px solid transparent;
width:0;
height:0;
line-height:0;
}

نضيف هدا الكود قبل الوسم </head>


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

إقرأ المزيد.. bloggeradsenseo

الأحد، 15 ديسمبر 2013

اضافة اخر المواضيع بشكل سلايد شو


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

معاينة مباشرة: اضغط هنا

الكود:

نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة اداة جديدة HTML/JavaScript
ونضع هذا الكود

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/><div id="slider-rotator" class="slider-rotator loading"></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script><script type="text/javascript">makeSlider({    url: "http://pro-xs.blogspot.com/" // Add your blog URL});</script>
 غير اللون البرتقالي الى رابط مدونتك.


إقرأ المزيد.. bloggeradsenseo

الجمعة، 6 ديسمبر 2013

آداة آخر التعليقات

السلام عليكم ورحمة الله وبركاته

مرحبا بكل زوار كلفين للبلوجر

أقدم لكم أداة أخر التعليقات مع الصورة الرمزية للمعلقين



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

.1 اذهب للوحة التحكم 
2. تخطيط او تصميم
3.عناصر الصفحة
4. اضف اداة
6.اختار Html/Javascript



هدا هو الكود

كود HTML:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 3,
showAvatar = true,
avatarSize = 50,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "إقرأ المزيد »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>

</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogkelvn.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script
طبعا يمكنك تغيير عدد التعليقات المراد عرضها

وتغيير رابط المدونة الذي بالأحمر برابط مدونتك

إقرأ المزيد.. bloggeradsenseo

الأربعاء، 4 ديسمبر 2013

طريقت تغيير خطوط المدونة بابسط الطرق



السلام عليكم ورحمت الله وبركاته اليوم اقدم لكم طريقة تغيير خط المدونة.





طريقة التركيب : 
1-ندخل للمدونة .
2-القالب تم تحريرhtml
     3-ابحث عن
]]></b:skin>
وفوقها مباشرتا ضع كود احد الخطوط  

     اكواد الخطوط:

 DroidKufi-Bold



@font-face {
font-family: 'DroidKufi-Bold';
src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.eot');
src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.ttf') format('truetype'); }


DroidKufi-Regular




@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.ttf') format('truetype'); }



DroidNaskh-Bold




@font-face {
font-family: 'DroidNaskh-Bold';
src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot');
src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype'); }

DroidNaskh-Regular




@font-face {
font-family: 'DroidNaskh-Regular';
src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.eot');
src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.ttf') format('truetype'); } 



بعد وضعك للكود الخاص بالخط غير الخط القديم بالخط الجديد ولعمل ذالك عليك البحث عن كلمة 
Font أو font-family وذالك لمعرفة نوع الخط لديك ولتبديله بالخط الذي ركبته
في أغلب الاحوال نجد هذه الخطوط
Arial
Tahoma 
Georgia

لاكن الطرريقة تختلف من قالب لاخر ولاكن اهم الخطوط هم
Font أو font-famil 
وعندما تجد الكلمة غيرها باسم الخط الذي اخترته.
                                                                                                                            
                                                                                                          بتوفيق



إقرأ المزيد.. bloggeradsenseo
جميع حقوق القالب محفوظة لمدونة الامل للمعلوميات ©2013- 2014 تصميم و تكويد : حسام
>