خوب ما یاد گرفتیم یک sidebar ثابت یا متحرک در وبلاگ بسازیم . حالا وقتشه کمی دست به کار بشیم و درون این ساید بار چیزی قرار بدیم .در اینجا قصد دارم یک لینکدونی درون sidebar قرار بدم . چرا که یک لینکدونی بخش بسیار مفیدی برای سایت هست . شما با لینکدونی میتونید کاربرانی از وبلاگ های دیگه رو لینک کنید.(چرا که قادر به دنبال کردن اون ها نیستید)بهترین راه ساخت لینک ها استفاده از لیست ها میباشد . با لیست ها شما میتونید لینک های زیبایی بسازید . خوب به قسمت Edit HtML برید . قبلا برای ساید بار در درون تگ body همچین قسمتی رو وارد کردیم .
لینکدونی ما هم باید در این قسمت قرار بگیره . کد بالا رو به شکل زیر در بیارید .
به جای url باید آدرس لینک و به جای Enter title for url هم عنوان لینک رو قرار بدید . فراموش نکنید که لینک رو با //:http قرار بدید .برای اضافه کردن لینک های بیشتر فقط کافیه یک بار دیگه دستور بین تگ ul رو تکرار کنید . مثلا من اینجا دو تا لینک به شکل زیر قرار دادم .
حالا باید این لینک ها رو استایل بدیم . چرا که به صورت پیش فرض ریخت مناسبی ندارند .باید کمی استایل ها رو تغییر بدیم . کد های استایل که در دو پست قدیمی نوشتیم رو به شکل زیر تغییر بدید .
اینم از ظاهر لینک دونی یا همون sidebar ما. امید وارم خوشتون بیاد ...
منبع : www.tumfa.com/tumblr
کد:
<div id="sidebar"></div>
کد:
<div id="sidebar"> <ul><li><a href="url">Enter tittle for url</a></li></ul> </div>
کد:
<div id="sidebar">
<ul>
<li><a href="url">Enter tittle for url</a></li>
<li><a href="url2">Enter tittle for url2</a></li>
</ul>
</div>
کد:
#sidebar:hover{ opacity:1; }
#sidebar li a:link,#sidebar li a:visited,#sidebar li a:active { color:#dddddd; display:block; background-color:#666666; border-top:1px solid white; padding-right:5px; }
#sidebar li{list-style-type:none;}
#sidebar li a:hover{background-color:#777777}
#sidebar{ direction:rtl; position:fixed; float:left; width:250px; height:100%; background-color:#aaaaaa; opacity:0; padding:5px; border:1px solid black; }
منبع : www.tumfa.com/tumblr