شرح إضافة قائمة منسدلة أنيقة وسهلة slide menu | حصري



بعد أن لاقت هذه الإضافة إعجاب الكثير من الزوار الأوفياء
ارتأينا أن نقدمها كهدية بسيطة لكل من يتابعنا ونتظر جديدنا ويسأل عنا
الإضافة تعطي لمدونتك جمالية واحترافية كما أنها تقدم المواضيع بطريقة جميلة
 حيث تنزلق الإضافة للأسفل وتظهر لك مقتطف من الموضوع بمجرد الضغط على العنوان
كما يمكنك اختيار التسمية التي تريد أن تظهر مواضيعها في الإضافة
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
كيفية إضافة قائمة منسدلة للمدونة بلوجر:
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
*نذهب إلى تصميم |عناصر الصفحة| إضافة أداة HTML javascript
*نلصق الكود التالي في الأداة:


<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type="text/css">
.accordion {
width: 300px;
text-align: center;
border-bottom: solid 1px #000000;
}
.accordion h3 {
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOD0SpkVVt9LD6Ou449zVVzz6-qyGlBnVRLhHgthuHB5i-Q45Gpumy_VPCMdOHvrIK6lbFFtF0rfSdl68VRdDg0wQMhGEfZ9eoG7C9cOo4AFWFS6dprkEo2NpEAKKQ-wxYqstXk6axY_H/s320/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #000000;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #000;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFyJ1etai_b7ckzpLWUzIjyu6v2d0NWKFArKgMzptrjOHme2M1FXWN-jT2Kti2zptF8SNRJfvJ-C-VmmBQJMdom0wTV16w8On5qYnAXC-66atmRFs6hnJFJc_Yez-kC2-tqZFdyPbC5A/s128/no-image.blogspacetech.jpeg";
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "التعليقات";
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000000";
numposts = 6;
label = "حصريات";
home_page = "http://ar-plus.blogspot.com/";
</script>
<div class="accordion">
<script src="http://blogspacetech.googlecode.com/files/new.recent-posts.js" type="text/javascript"></script>
</div>


*غير كلمة حصريات بالقسم الذي تريد أن تظهر مواضيعه في الإضافة...
ومبروك عليك الإضافة الجميلة هدية لكم
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
في انتظار تفاعلكم
وأي استفسار نحن في الخدمة
تحياتي

Comments