منقول: مجموعة أكواد ترشدك الى مكان وضع أدواتك فى قوالب مدونات بلوجر2018

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

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

أولا: الكود الذي نبحث عنه لوضع أداة - إعلان جوجل أدسنس مثلا - أسفل عنوان الموضوع

<div class='post-header-line-1'/>

فقط ادخل على تحرير HTML وابحث عن الكود السابق (Ctrl+F) وضع بعده أو أسفله كود الأداة.

ثانيا: الكود الذي نبحث عنه لوضع أداة - إعلان حسوب مثلا - أسفل محتوي الموضوع

<data:post.body/>

فقط ادخل على تحرير HTML وابحث عن الكود السابق (Ctrl+F) وضع بعده أو أسفله كود الأداة.

ثالثا: الكود الذي نبحث عنه لوضع أداة - صورة أو تنبية - فوق صندوق التعليقات

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

فقط ادخل على تحرير HTML وابحث عن الكود السابق (Ctrl+F) وضع قبله أو فوقه كود الأداة.

رابعا: الكود الذي نبحث عنه لوضع أداة فوق فوتر Footer المدونة وهو الجزء السفلى بالمدونة

<div class='post-footer'>

فقط ادخل على تحرير HTML وابحث عن الكود السابق (Ctrl+F) وضع قبله أو فوقه كود الأداة.

خامسا: الكود الذي نبحث عنه لوضع أداة بجانب فوتر Footer المدونة وهو الجزء السفلى بالمدونة

<div class='post-footer-line post-footer-line-1'>

فقط ادخل على تحرير HTML وابحث عن الكود السابق (Ctrl+F) وضع بعده أو أسفله كود الأداة

قائمة أفقية مزدوجة بشكل راقي مصممة بواسطة الCSS

لاضافة القائمة نقوم بالذهاب الى القالب ثم تحرير HTML ثم البحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

معاينة

 #navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
background: #ddd;
color: #333;
font-family: Verdana, arial;
font-size: 12px;
margin: 0 auto 0;
padding: 0;
}

#Main-Menu {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdopQKLzVaNY8VtBR84HkMVTeuAJWxWp0JNNmGdv7EWrcacSaY6JRQS8JZtr3l6BWWWrBMgQwuq5SfupKh3KUi7Vto6BiFudiB_QM8hsvTqQV5j7be2fBr48NTBWMIQuLXkQ0j-ITSiM/s1600/Menu_bg-op.png) no-repeat;
width : 1018px;
height : 70px;
margin : 0 auto;
padding : 0px 0px 0px 0px;
}
#Main-nav {
margin : 0px 0px 10px 15px;
padding : 10px;
}
#Main-nav ul {
float: right;
list-style: none;
margin: 10px auto;
padding: 0;
}
#Main-nav li {
list-style: none;
margin: 17px -10px 0px 0px;
padding: 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfW3-oEnLNVdlVKLkIhHE4usGdcPobGbAHO49uIJZtRYZw3CUlmbRO5a9AA87rcRYA3triCObt8gPveQldHFd-mjabClxhovXLKCsqno2CGcLZ2CGd5-KW0QqVcG3qjoaDKs6Ghs1M8DQ/s400/menu_button_grey.png) no-repeat;
width:169px;
height:42px;
float:right;
}
#Main-nav li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCdGhYz7xp3UAAYHKgJIeki4ajjKI-iq1I13GDjQ8i81qgA-smFRNTKVR2JQhxIvgzrxS9Im9nLqduG74OUI0T43DYcIhTdtrx2Lq4HMTEi85UWAYDxGf7NS4D-hCeQkCirA4ezJDrTo/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCdGhYz7xp3UAAYHKgJIeki4ajjKI-iq1I13GDjQ8i81qgA-smFRNTKVR2JQhxIvgzrxS9Im9nLqduG74OUI0T43DYcIhTdtrx2Lq4HMTEi85UWAYDxGf7NS4D-hCeQkCirA4ezJDrTo/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight a {
color: rgb(51, 51, 51) !important;
text-shadow: 1px 2px 1px #9E9E9E !important;
font-size: 12px !important;
font-family: arial;
font-weight: bold;
text-transform: none;
}
#Main-nav li a{
color: #FFF;
display: block;
font-size: 12px;
font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 15px 0px 9px 60px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
letter-spacing:0.09em;
}
#Main-nav li a:hover {
color: #333;
text-shadow:1px 2px 1px #9E9E9E;
}
#home-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4nz2UFfPPgcv5bXAUDegEsQ1JxYRWy_A7LCTy8BqlEYBdA7E_ySTNQyiHgD-oJ4Ne1ACSB8ppYj7OYrOlhT5ul0gW4nWWDnP5w4Woyk5D4T8xe_tBZ7nHkoFFXDtZBuGI-ZOUJvYshVk/s400/home_ico.png) no-repeat 30px 14px;
}
#mm-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcq5nbSMygbGE4E0svea7cF77EQy8VFRdgMBwLFz3UwevVclI5A6gCiGk4IU_9MaMFjMfX0eE0I8rrnSBxRLlTrTnNd-qmhis-pRiAxEilpcuef-2CcJd-uYhATum1E3Kf2E8GOHlhUZg/s400/make_money_ico.png") no-repeat 30px 14px;
}
#seo-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHELz6VRgOe2sFoms8FtpiVQnVZ6eKLXmd_Fyi1zkoBgWLMeG-iLPFn-X9Cp-yl0hh5n3D837xDgkHU0Yg5XieFiPlWOKmoYDmLu2GzYuQys-MYD0UPhyphenhyphend8QkEcenTm5rMjVgrSVBKyLw/s400/SEO_ico.png") no-repeat  30px 14px;
}
#hosting-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2m2JsvgUhhM14CaCG25jquzEBcpwOrsR59F9p8Azct9hvBSboUauDDvsdeoys-T5DH5zazb4ADw4jbdqn0aj6SKkvyPCWYjn4U94LlX-1XwpU_cYJGli71OgDXJp6aEStceRpuwOgeBw/s400/web_hosting_ico.png) no-repeat  30px 14px;
}
#blogging-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJ_egHffcC41AZ0TCFZgGcA5rhlyTQyjODrWFlSxw_jbp17WiABep3fQ11kPKR5xtrGkGS0w-qnqh_nAzFh_zh4NcOYcUKndWcaNlb3nqZ6xDUQFJ3i5O_R3xbMR3z1XSH9RSg_mwXKs/s400/blogging_ico.png) no-repeat  30px 14px;
}
#widgets-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTmgpB1SMITQxbOrGl0glQGCEN-F2FqdZaxcPJJt63x5Maen7OKiJv4iQOqlsHgQAoMAWQwZvuylt7b6eIehRqxjB_3BelkDC4McXrZlPAij0BZfO9ZGtEAoAtrMTRA2X1bGBI71svHQ/s400/templates_ico.png) no-repeat  30px 14px;
}
/*-----SECONDARY MENU-----*/
#secondary-Menu {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikW8XOHKfP8f219Nxj1r3nswF8n7VkMIkmScH3xjTLRh4Jr-qsA0pRiK8W7FMzKbHCuc7MLJKG3HCYWfoq2mxtARBFT183A8mr-xfd4gb3oMIA-WUT2LaddA37QmNQSN7fHZlnc6sZx-I/s1600/Sub_menu_bg-optimized2.png") no-repeat scroll 0% 0% transparent;
width: 1015px;
height: 128px;
margin: 0px auto;
padding: 0px 0px 0px 17px;
position: relative;
right: 0px;
}
#secondary-nav {
margin: 10px auto;
padding: 0px;
}
#secondary-nav ul {
float: right;
list-style: none;
margin: 5px auto;
padding: 0;
}
#secondary-nav li {
list-style : none;
margin : 5px 0px 0px 0px;
padding : 0;
float : right;
}
#secondary-nav li a, #secondary-nav li a:link {
color: #B8B8B8;
display: block;
font-size: 12px; font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0 0 0 20px;
padding: 0px 0px 17px 20px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
}
#secondary-nav li a:hover {
color: #ddd;
text-shadow:1px 2px 1px #000;
}
#secondary-nav li ul {
position: absolute;
right: -999em;
width: 190px;
margin: 0 0 0 0px;
padding: 0;  z-index:99999; display:block;
}
#secondary-nav li:hover ul {
right: auto;
}
#secondary-nav li li {
margin:0px;
padding:0px;
border-bottom:1px dotted #3B3D3E;
background: #242729;
width: 190px;
}
#secondary-nav li li:hover {
background: #343637;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#secondary-nav li li a {
color: #B8B8B8;
display: block;
margin: 0;
padding: 7px 0px !important;
text-decoration: none;
}
#secondary-nav li li a:hover {
color: #FFF;
text-decoration: none;
}

الان لاضافة اكواد الHTML نذهب الى التخطيط ثم اضافة أداة ثم HTML/JavaScript
ثم نقوم بلصق كود الHTML التالي ونغير المسميات كما نشاء ونغير الروابط بما نشاء

 /*-----القائمة الرئيسية-----*/
<div id="Main-Menu">
<ul id="Main-nav">
<li><a href="#" id="home-icon">  الرئيسية</a></li>
<li><a href="#" id="mm-icon">الربح من الانترنت</a></li>
<li><a href="#" id="seo-icon">سيو</a></li>
<li><a href="#" id="hosting-icon">خدع</a></li>
<li><a href="#" id='blogging-icon'>بلوجر</a></li>
<li><a href="#" id="widgets-icon">اضافات</a></li>
</ul>
</div>
/*-----القائمة السفلية-----*/
<div id="secondary-Menu">
<div style="float:right; margin-right:40px;">
<ul id="secondary-nav">
<li><a href="#">خدمات</a></li>
<li><a href="#">تحميلات</a>
</li>
<li><a href="#">قوالب</a></li>
<li>
<a href="#">اسئلة شائعة</a>
</li>
<li>
<a href="#">نبذة عني</a>
</li>
<li>
<a href="#">تواصل معي</a>
</li>
<li><a href="#">أعلن لدينا</a>
</li>
<li><a href="#">«أدوات</a>
<ul>
    /*-----القائمة الفرعية من القائمة السفلية-----*/
<li><a href="#">HTML محرر</a></li>
<li><a href="#">تشفير الاكواد</a></li>
<li><a href="#">محرر الالوان</a></li>
</ul>
</li>
</ul>
</div>
<div style="float:left; margin-right:40px;">
   <ul>
    <li><a id='munuswe' href="http://sweup.com">«احصل عليها</a></li>
    </ul>
    </div>
     <script src='https://mununon.googlecode.com/svn/munu.js' type='text/javascript'/>
</div>

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

للتعديل على القائمة

1- نضع مؤشر الفاراة على المكان المراد تغير لونه في القائمة ثم نضغط على الزر الايسر للفاراة ثم نقوم بالضغط على فحص العنصر

2-ستظهر لنا أكواد HTML الخاصة بالقائمة على الجانب الايسر من الصندوق وفي المقابل اكواد الCSS في الجانب الايمن يمكننا من خلال اكواد الcss تغير لون خلفية العنصر وقد تكون الخلفية عبارة عن لون بصيغة HEXA او Rgp او تكون عبارة عن صورة كما هو الحال في مثالنا

يمكنكم تركيب القائمة على مدوناتكم وعرضها علينا كما يمكنكم تغير الوان واشكال قوائمكم لتكون مميزة

منقول

Sunday, July 22, 2018

مجموعة أكواد ترشدك الى مكان وضع أدواتك فى قوالب مدونات بلوجر2018

قائمة أفقية مزدوجة بشكل راقي مصممة بواسطة الCSS

No comments:

Post a Comment