قالب ميترو الإحترافي لمدونات بلوجر 2015

قالب ميترو الإحترافي لمدونات بلوجر 2015

محمد الكناني    تعليق   

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

تحميل القالب

طريقة اضافة سلايد شو مدونة المحترف الجديد الى مدونات بلوجر

طريقة اضافة سلايد شو مدونة المحترف الجديد الى مدونات بلوجر

محمد الكناني    تعليق   

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

• نتوجه الى المدونة 
• ثم قالب ،
• تحرير HTML
• نبحث عن الكود الثالي 

</head>

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

<script>
//<![CDATA[
/* Script from:http://hukmat.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>

• ثم نضيف الكود التالي فوقه  " قبل الوسم </body> "

<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>
      featuredcontentslider.init({
        id: &quot;slider1&quot;, //id of main slider DIV
        contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
        toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
        nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; 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>

• نبحث عن الكود 

 ]]></b:skin>

• ثم نضيف الكود التالي قبله  - فوقه

 /*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(http://3.bp.blogspot.com/-F8fngEbMepA/UVydrTCbj4I/AAAAAAAAD7Q/scYhb8FHD5U/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

•   أخير مرحلة  نبحث عن 

<div id='content-wrapper'> 

أو الكود الثالي  

 <div id='main-wrapper'>

• ثم نضيف الكود الثالي تحته مباشرة  أسفل الكود السابق

<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>//<![CDATA[
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>

• ثم نضغط على حفظ .
• لا تنسوا تغيير المفكر بإسم تسميتك أو قسمك المفضلة .

تحميل الكود ومرفقاته

تحميل قالب مدونة المحترف الجديد 2015

تحميل قالب مدونة المحترف الجديد 2015

محمد الكناني    1 تعليق   

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

رابط تحميل         أو          رابط آخر

إضافة أزرار المشاركة في المواقع الإجتماعية بشكل احترافي لبلوجر

إضافة أزرار المشاركة في المواقع الإجتماعية بشكل احترافي لبلوجر

محمد الكناني    تعليق   

طريقة اضافتها الى مدونات البلوجر

• نتوجه الى المدونة ،  قالب ،
• تحرير HTML  ،  ثم نبحث عن </head>
• نضيف الكود التالي فوقه مباشرة .

<style type='text/css'>
#demo1.sharrre {
width: 100%;
display: inline-block;
}
.sharrre .box {
float: left;
}
.sharrre .count {
color: #444444;
display: block;
font-size: 17px;
line-height: 34px;
height: 34px;
padding: 4px 0;
position: relative;
text-align: center;
text-decoration: none;
width: 50px;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.sharrre .share {
color: #FFFFFF;
display: block;
font-size: 11px;
height: 16px;
line-height: 16px;
margin-top: 3px;
padding: 0;
text-align: center;
text-decoration: none;
width: 50px;
background-color: #9CCE39;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.sharrre .buttons {
display: none;
float: left;
width: 300px;
}
.sharrre .button {
float: left;
max-width: 50px;
height: 50px;
margin-left: 10px;
}
</style>
<script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
<script src='http://yourjavascript.com/27299101294/jquery-sharrre-min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/22512901748/jquery-sharrre.js' type='text/javascript'/>

• نبحث الآن عن الكود  </body>
• نضيف الكود التالي فوقه مباشرة .

<script>
$(function(){
$(&#39;#demo1&#39;).sharrre({
share: {
googlePlus: true,
facebook: true,
<a href='http://www.jqueryscript.net/tags.php?/twitter/'>twitter</a>: true,
delicious: true
},
buttons: {
googlePlus: {size: &#39;tall&#39;},
facebook: {layout: &#39;box_count&#39;},
twitter: {count: &#39;vertical&#39;},
delicious: {size: &#39;tall&#39;}
},
hover: function(api, options){
$(api.element).find(&#39;.buttons&#39;).show();
},
hide: function(api, options){
$(api.element).find(&#39;.buttons&#39;).hide();
}
});
});
</script>

ها قد انتهينا من المرحلة الأولى ، الأن نختار اللإضافة التي نريدها و نضيف الكود الخاص بها الى المدونة .

• الشكل  1 

الحصول على الكود

• الشكل 2

الحصول على الكود

• الشكل 3

الحصول على الكود

• الشكل 4

الحصول على الكود

• و أخيرا نضغط على حفظ .

المصدر

أداة البحث لمدونات بلوجر بشكل احترافي وتلقائية البحث

أداة البحث لمدونات بلوجر بشكل احترافي وتلقائية البحث

محمد الكناني    تعليق   

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

1. نتوجه الى مدونة ، قالب  ، تحرير HTML

2. نبحث عن الكود 

</head>

3. نضيف الكود التالي فوقه مباشرة 

<style>
/*-------ajax-form---------*/
/* By http://hukmat.blogspot.com  */
#ajax-search-form {
float: left;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
padding: 6px 10px 6px;
background: #f8f8f8;
margin: 2px 0 0 -5px;
font: normal 12px ges;
border: 1px solid #000;
}
#ajax-search-form .searchbtn {
background: #e74c3c ;
padding: 6px 10px;
border: 1px solid #000;
font: normal 12px GES;
color: #fff;
cursor: pointer;
}
#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 10px 0;
width: 200px;
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.3em !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}
#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}
    </style>

4. نبحث عن الكود 

</body>

5. نضيف الكود التالي فوقه  ثم نضغط على حفظ .

<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: 'http://www.hukmat.blogspot.com/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>

6.  نتوجه الى التخطيط ، اضافة اداة ، JavaScript/HTML

7.  ثم نضيف الكود الخاص بالاضافة البحث 

<form action='/search' id='ajax-search-form'>
<input class='searchbox' name='q' placeholder='ابحث في ثنايا الموقع' type='text'/>
<input class='searchbtn' type='submit' value='بحث'/>
</form>

8. تم

المصدر

طريقة اضافة تأثير على صور في بلوجر

طريقة اضافة تأثير على صور في بلوجر

محمد الكناني    تعليق   

شرح طريقة الإضافة

1. نتوجه الى المدونة .

2. قالب 

3. تحرير HTML

4. نبحث عن الكود 

</head>

5. نضيف الكود الثالي فوقه مباشرة 

  <style>
<!--- hukmat.blogspot.com --->
.post-body img {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* IE 6-9 */
  filter: gray;
  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(100%);
}
.post-body img {
  -webkit-transition: -webkit-filter .5s;
}
.post-body img:hover {
  -webkit-filter: grayscale(0%);
  filter: none;
}
.post-body img svg {
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}
.post-body img:hover svg {
  opacity: 0;
}
  </style>

6. ثم أخيرا نضغط على حفظ .

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

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

محمد الكناني    تعليق   

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

أيضا هذه الطريقة غير مخالفة لسياسة الأدسنس ، فلا خوف على مدونتك .

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

طريقة اضافة الإضافة :

1. نتوجه الى المدونة 

2. قالب

3. تحرير HTML

4. نبحث عن الكود الثالي 

<data:post.body/>

ستجد أكثر من كود  الكود الثاني هو المطلوب

5. استبدله بالكود التالي 

<div id='jobmiddlenew'>

 <data:post.body/>
          </div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#addcodemiddle{display: none;}
</style>
<div id='addcodemiddle'>

ضع الإعلان هنا
    </div>
 <script type='text/javascript'>

var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML;
var str2=str1.length;
var str3=str2/2;
var substr = str1.substring(str3, str2);
var n = substr.search(&quot;&lt;br&gt;&quot;);
if(n&lt;0)
{
n = substr.indexOf(&#39;.&#39;);
if(n&lt;0)
{
n=0;
}
var firsthalf = str1.substring(0, str3+n+1);
var secondhalf = str1.substring(str3+n+1, str2);
}
else
{
var firsthalf = str1.substring(0, str3+n+4);
var secondhalf = str1.substring(str3+n+4, str2);
}
var addcode=&quot;<center>&quot;+document.getElementById(&quot;addcodemiddle&quot;).innerHTML+&quot;</center><br/>&quot;;
var newbody=firsthalf+addcode+secondhalf;

var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;);
strnew[0].innerHTML=newbody;
document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;;
   
</script>
  </b:if>

6. لا تنسى وضع الإعلان مكانه الخاص .

7. نضغط حفظ .

ملاحظة : لابد من تحويل الإعلان قبل اضافته الى HTML.

قالب مدونة حوحو للمعلومات

قالب مدونة حوحو للمعلومات

محمد الكناني    تعليق   

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

للتشغيل السلايدر شو ابحث عن كلمة "مواضيع" و غيرها بأحد اقسام موقعك 

للتغير الشعار ابحث عن العنوان التالي : 

http://3.bp.blogspot.com/-bQLhat1Sl2c/UIQxKB9dsQI/AAAAAAAABzM/TgTqijw8AXI/s1600/small-logo.png

التحميل