Blogger’da Gazete Yazısı Gibi Görünen Yazı Tarzı Eklentisi

Blogger bloğunuzda yazılarınızın görseldeki gibi görünmesini istiyorsanız yapmanız gereken şey size vereceğimiz kodları değerlendirmek. 

Kodlar: 

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
</tbody></table> 

Yukarıkdaki kodları nereye yapıştıracaksınız? Kodları yapıştıracağınız yer şurasıdır. Yeni yayın diyeceksiniz. Karşınıza gelen sayfada sol köşede “oluştur/HTML” adında bir buton gelecek. HTML’ye tıkladığınız zaman yazının kod sayfası açılır. Yukarıdaki kodları oraya yapıştıracaksınız. Herhangi bir yere yapıştırabilirsiniz. 

Ancak şuna dikkat edin. Kırmızı ile geçen yer sol taraftaki yazınız, mavi ile geçen yer ise sağ taraftaki yazınızdır. Bunu dikkate alarak düzenleme yapın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Css Modern Açılır Menü DropDown Menü

Sizlere kendi sitemdede kullandığım bloghocam sitesinde gördüğüm çok kaliteli bir açılır menü sunucağım.

Css ile oluşturulmuş bu menüde bütün tarayıcılara uygunluk ve göze batmayan şık bir görüntü vardır.CSS kodları içerisinde bulunan width: kodunu kendi sitenizin boyutlarına göre ayarlayabilirsiniz.Lafı fazla uzatmayım alttaki resimde gördüğünüz menünün demosudur.Kolay gelsin.

Css Modern Açılır Menü DropDown Menü kodlarını aşağıdan alın ve sitenizin gerekli kısımlarına ekleyin.Html Kodunun içerisindeki linkleri kendinize göre düzenlemeyi unutmayın :)

HTML Kodları
<ul id='hb-menu'><li><a href='http://wmuzmani.blogspot.com'>Ana Sayfa</a></li><li> <a href='http://wmuzmani.blogspot.com/2012/11/wmuzmani-tantm-yazs.html'>Hakkımda</a> </li><li><a href='#'>Hazır Sistemler</a> <ul><li><a href='http://wmuzmani.blogspot.com/search/label/Blogger'>Blogger</a></li><li><a href='http://wmuzmani.blogspot.com/search/label/WordPress'>WordPress</a></li><li><a href='#'>VBullettin</a></li><li><a href='#'>MyBB</a></li></ul></li><li><a href='#'>Web Programlama</a> <ul><li><a href='http://wmuzmani.blogspot.com/search/label/HTML'>HTML</a></li><li><a href='http://wmuzmani.blogspot.com/search/label/CSS'>CSS</a></li><li><a href='#'>JavaScript</a></li><li><a href='#'>PHP</a></li></ul></li><li><a href='#'>Web Editörleri</a> <ul><li><a href='#'>Flash 8</a></li><li><a href='#'>Dreamweawer 8</a></li><li><a href='#'>Fireworsk 8</a></li></ul></li><li><a href='http://wmuzmani.blogspot.com/search/label/Videolu%20Anlat%C4%B1m'><u><u>Videolu Anlatımlar</u></u></a> </li><li><a href='http://wmuzmani.blogspot.com/p/arsiv.html'><u>Arşiv</u></a> </li></ul>

CSS Kodları:
#hb-menu, #hb-menu ul { margin: 0; padding: 0; list-style: none; } #hb-menu { width: 900px; margin: auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #hb-menu:before, #hb-menu:after { content: ""; display: table; } #hb-menu:after { clear: both; } #hb-menu { zoom:1; } #hb-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #hb-menu a { float: left; padding: 12px 15px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #hb-menu li:hover > a { color: #fafafa; } *html #hb-menu li a:hover { /* IE6 only */ color: #fafafa; } #hb-menu ul { margin: 15px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #hb-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #hb-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #hb-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #hb-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #hb-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #hb-menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #hb-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #hb-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #hb-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #hb-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #hb-menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #hb-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }

Bu menü için bloghocama çok teşekkür ederim :)