شريط الاخبار

قائمة

اندرويد سوفت وير

افضل مواقع

انترنت

بلوجر

برامج

كمبيوتر

فيس بوك

زيادة الباك لينك

اضافات بلوجر

المشاركات الأخيرة

الكود المثالي للتبادل الإعلاني

الاثنين، 28 مارس 2016 / لا تعليقات


معظم المدونات تعتمد على التبادل الإعلاني او الإعلانات المدفوعة لذلك من الضروري وجود كود مضبوط ليجعل من تلك الخدمة امر سهل خصوصا ان كان يتم تعديل البنرات والروابط كثيراً فيجب ان يكون الكود سهل في التعديل ولهذا الكود التالي سيكون مثالي جداً لهذا الامر حيث انه خفيف جداً ولا يحتوي على صور بل هو معتمد تماما على اكواد للـ CSS وطبعا انت يمكنك ان تضيف صور لكنك ستوفر على نفسك صناعة صورة لتخبر الزوار ان تلك مساحة إعلانية
طبعا البعض ربما يكون رأى هذا الكود في مدونات أخرى لكن هذا الكود هو من صنعي حصرياً لكن بعض معدومي الضمير استخلصوه من قالبي دون إذن ونشروه واقصد  تلك المدونات التي ستشاهدون فيها الكود بتاريخ سابق لموضوعي 
لذلك هذا تنبيه كل مدونة استخدمت هذا الكود ونشرته دون إذن ولا يضعون رابط بالموضوع الأصلي هذا في نهاية مواضيعهم هم من انتهكوا حقوق الملكية وأشخاص لا يستحقون ان تتابعوهم او تدعموهم فهم غير جديرين بثقتكم
المهم نتابع موضوعنا
قم بوضع الكود فى اداة    HTML/JavaScript
<style type="text/css">
.cnmu125ads {
  display: block;
  list-style: outside none none;
  margin: 5px auto !important;
  padding: 0;
  width: 286px;
}
.cnmu125ads li {float: right;}
.cnmu125ads a {
  background-color: #333;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px #444;
  color: #fff;
  display: block;
  height: 125px;
  line-height: 125px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  width: 125px;
}
.cnmu125ads a:hover{background-color: #446faa; color:#fff; border-color:#fc5400;}
</style>
<ul class="cnmu125ads">
<li><a href="#">مساحة إعلانية</a></li>
<li><a href="#">مساحة إعلانية</a></li>
<li><a href="#">مساحة إعلانية</a></li>
<li><a href="#">مساحة إعلانية</a></li>

</ul>

التنسيقات

 الكود #333 هو لون خلفية المساحة الإعلانية
الكود #fff هو لون الإطار
الكود #444 هو لون الخط الخارجي للإطار
الكود #fff هو لون خط الكتابة
الكود #446faa هو لو خلفية المساحة الإعلانية عند تمرير الماوس
الكود #fff  هو لون الخط عند تمرير الماوس
الكود #fc5400  هو لون الإطار عند تمرير الماوس
تعديل حجم الكود هناك مجموعة ارقام مميزه بخلفية بيضاء الثلاثة 125 عدلهم بالزيادة او النقصان كما تريد
الرقم 286 ان زدت الرقم 125 مثلا 5 درجات تزيد الرقم 286 الضعف يعني 10 كذلك لو انقصته تنقص بالضعف

إعدادات الكود

كل سطر من السطور المعلمة بالأخضر يساوي مساحة إعلانية جديدة
رمز # باللون الأحمر يستبدل بالرابط الذي تريد
في حالة أردت أن تفتح الروابط في صفحة جديدة إستخدم اضف هذا التعديل على الكود
<li><a href="#target="_blank">مساحة إعلانية</a></li>
أيضا يمكنك ان تستبدل كلمة مساحة إعلانية بما تريد أو استبدلها بالكود التالي لتصبح صورة وإجعلها بمقاس 125x125
<img src="*" />
استبدل * برابط الصورة

آداة الإحصائيات لمدونات بلوجر

/ لا تعليقات


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


أولاً قم بتركيب إضافة الإحصائيات الرسمية لبلوجر


ثانياً إجعل الإعداد المبدئي لها كالتالي ثم بعد الإنتهاء من الضبط عدل الفترة الزمنية كما تريد


بعد ذلك قم بالبحث عن الآداة في القالب واحذف جميع الاكواد التي بين الكودين المعلمان بالاحمر


بعد ذلك قم بإضافة هذا الكود بدلاً من الأكواد التي حذفتها ويمكنك تعديل الكلمات العربية

 <div class='widget-content'>
<ul class="cnmustatusw">
<li class="cnmuspos">
<i class="fa fa-files-o"></i>
<span>عدد المواضيع : </span>
<h4 id='cnmustatpost'>&amp;hellip;</h4>
</li>
<li id='cnmutc'>
<i class="fa fa-comments"></i>
<span>عدد التعليقات : </span>
<h4 id='cnmustatcommen'>&amp;hellip;</h4>
</li>
<li id='cnmutcount'>
<i class="fa fa-bar-chart"></i>
<span>عدد المشاهدات : </span>
<h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('cnmustatpost').innerHTML=json.feed.openSearch$totalResults.$t};function cnmutc(json){document.getElementById('cnmustatcommen').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=cnmutc\"><\/script>');
//]]>
</script>
</div>

وأخيراً إستخدم كود الستايل التالي

 /*إحصائيات المدونة*/
.cnmustatusw {
  list-style: outside none none;
  margin: 0 !important;
  padding: 0 !important;
}
.cnmustatusw li {
  display: block;
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  overflow: hidden;
}
.cnmustatusw i, .cnmustatusw span, .cnmustatusw h4 {
  float: right;
  line-height: 30px;
  margin-left: 4px;
}
.cnmustatusw i {color: #cc0000; font-size: 20px;}
.cnmustatusw h4 {color: #0058d2;}

تنسيق الكود

15 حجم الخط
30 إرتفاع الإحصائيات
#0058d2 لون الأرقام
#cc0000 لون الأيقونات
20 حجم الأيقونات

إضافة سلايد شو تلقائي لمدونات بلوجر

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

ستنطرق الأن إلى واحد من أكثر ال slideshows إستعمالا : سلايد شو مدونة المحترف 
و من مميزاته أنه يتناسب مع أغلبية المواقع بمختلف تصاميمها .

معاينة :
إضافة سلايد شو تلقائي لمدونات بلوجر

طريقة تركيب السلايد شو : 

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

إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)

 ]]></b:skin>



فوقه مباشرة (قبله)  أضف الكود التالي :

 #alwansd{
height: 428px;
margin: 0 0 0px 0px;
padding: 15px 28px 15px 16px;
width: 672px;
background: #373737;
}
.alwanw{
position: relative;
height:385px;
}
.alwanw .contentdiv{
visibility: hidden;
position: absolute;
opacity: 1;
}
.alwan-ps{
text-align: right;
float: left;
width: 670px;
height: 11px;
margin-left:-43px;
}
.alwan-ps .toc{
font-size: 0px;
width: 102px;
height: 11px;
float: right;
background: #5b5b5b;
margin-left: 1px;
}
.alwan-ps a.selected{
background:#dfdfdf;
}
.alwan-ps .prev, .alwan-ps .next {display:none; }
.alwanip{
width: 618px;
padding: 10px !important;
bottom: 0;
float: left !important;
position: absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03QoBiBzFr2cqIQpWKRY4fMKDWbrjDyKUxl6bxtIK1VFmPvpMhyphenhyphenC8iFGJ5pQMd5j2ovov7_EukZA8o1dxDbmJZJdIAZrYn7XXgwvfYKXJ6c7-Bs7jm6e1ZRHG7pzegGhtJdEIwT_bkUc/s1600/backslide.png);
}
.alwanip a{
color:#dcdcdc;
font: 12px droidkufi-bold;
margin:0;
padding:0;
line-height: 19px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#c2df00;}
.alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; }
.alwanip p{font-size: 13px;
margin: 0;
color: #a5a5a5;
line-height: 23px;
}
.alwansf a img{float: right !important; }
.alwansf {float: right !important; width:680px!important;}
.column-center-outer {
width: 680px;
}

ابحث من جديد  عن :
</head>
قبله مباشرة أضف الكود التالي : (غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو) 

 <script> 
/* Script from:http://computer-for-security.blogspot.com */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150; 

numposts1 = 6; 
label1 = "كل";
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
       
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv">
<div class="alwansf">
<a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo">
</div>
</div>
<div class="alwanip">
<h6>
<a href="'+posturl+'">'+posttitle+'</a></h6>
<div class="alwand" >
'+daystr+'</div>
<p>
'
+removeHtmlTag(postcontent,summaryPost)+'...</p>
</div>
</div>
';    
document.write(trtd);      
j++;
}}
</script>

إبحث الأن عن :

 </body>


فوقه مباشرة أضف هذا الكود :

 <script src='http://albaadani.googlecode.com/files/contentslider.js'></script> 
<script> 
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

أخر خطوة : إبحث عن 
 <div id='main-wrapper'>


(ربما لا تجده , يمكنك وضع رابط مدونتك في تعليق و مشكلتك و سيتم الرد عليك) (ضع تعليقا ضمن تعاليق بلوجر و ليس تعليقات الفيسبوك حتى يصلني إشعار بذلك و أجيب عليك في أقرب وقت) بعده / أسفله مباشرة , أضف هذا الكود

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)

محول الأكواد Blogger Code Converter

/ لا تعليقات

محول الأكواد Blogger Code Converter

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

فوتوشوب Photoshop اون لاين

/ لا تعليقات
يمكنك استخدام هذه الاداة فى تصميم لوجو logo لموقعك او مدونتك بدون استخدام برامج
شرح الاستخدام :
قم بالضغط على عمل صورة جديدة create a new image ثم قم بتحديد مقاس الصورة واضغط موافق ok ثم قم باختيار الصورة التى تريدها ان تكون لوجو لمدونتك او موقعك من خلال القائمة الافقية بالاعلى اختار file ثم اختار open image وقم بفتح الصورة ثم قم بتعديل حجم او مقاس الصورة التى قمت بفتحها من خلال القائمة الافقية بالاعلى قم باختيار image ثم اختار image size وقم بتحديد حجم الصورة وقم بالتعديل عليها كما تريد مثل الكتابة عليها فهذا التطبيق هو مشابة للفوتوشوب يمكنك استخدامة مجانا على مدونة سوفت ترايد ولكن اذا واجهتك اى مشكلة راسلنا من خلال التعليقات لحلها

فوتوشوب Photoshop