edena

Hi, my name is MD ,i'm a freelance web designer from Romania and this blog is my piece of heaven,i can't imagine my life without it. Why was MDTheme created ? Cause i want to share my experience and knowledge with you through my articles. I hope you can learn from me as much as i can learn from you. What about MDTheme ? Well, this place offers free web design tutorials, web design showcases, blogspot templates, CSS-HTML basic articles and more free stuffs. I hope many will find it useful. If you have any questions regarding these areas, please feel free to contact me via the comments section. I'll be in touch again soon with more details.

The news

Noutatea acestei saptamani este sablonul Blogger SoPink.Este un sablon pe care-l ofer gratuit tuturor bloggerilor care indragesc Blogspotul.

Martie 11, 2013 on blogger templates
PUB
Blogger Templates
Sopink
So Pink it is a free premium blogger template,ready for your next blog or portfolio site. My biggest source of design inspiration for this theme was SuperChanger by RoyalwpThemes. So Pink is ideal for showcasing your portfolio of works or other multimedia elements like images, photo galleries, videos and podcasts. Cross-Browser compatible and yes even the IE7. Template features : Wordpress Look, 2 Columns, Right Sidebar, Magazine, Jcarousel, Fixed Width, Social Widget, Dropdown Menu, Adsense ready and more.To see the demo click on the picture.
Installation Guide :
Replace background "url" with your images URL.
Replace "a href=" with your adresse URL.
Download the javascripts files from here: rcentcmmnt.js,
jquery.min.js,
stepcarousel.jsand jcarousel.
Find Facebook widget,openit it and put your ownFacebook likebox iframe.
Find Comments widget,openit it and put the code bellow.
<script type="text/javascript" src="http://YOUR/BLOG/ADRESS.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Designed and developed by : mdteme.blogspot.ro

So Pink

This CSS3 Drop-Down menus are free for commercial or personal use.Both Style 1 and Style 2 works in all browsers,Style 3 works in new browsers.
Style 1 CSS code:



ul#meniu {
margin: 0 auto;
background: #333333;
border-bottom: 4px solid #FF004B;
height: 44px;
width: 980px;}

ul.navigation {
position: relative;
z-index: 100;}

ul.navigation li {
float: left;
vertical-align: middle;
zoom: 1;
line-height: 44px;}

ul.navigation li:hover {
position: relative;
z-index: 100;
cursor: default;
background: #FF004B;}

ul.navigation a {
padding: 0 20px 0 20px;
display:block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;}

ul.navigation, ul.navigation li, ul.navigation ul {
list-style: none;
margin: 0;
padding: 0;}

ul.navigation li.active > a {
background: #FF004B;}

ul.navigation li.active > a:after {
content: "+";
margin-left: 8px;}

ul.navigation ul li:hover {
position: relative;
z-index: 100;
background: #333333;}

ul.navigation ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 210px;}

ul.navigation ul li {
float: none;
background: #FF004B;
line-height: 30px;
vertical-align: middle;}

ul.navigation ul li a {
padding: 4px 5px;
vertical-align: middle;}

ul.navigation li:hover > ul {
visibility: visible;}

Style 2 CSS code:



ul#meniu {
margin: 0 auto;
background: #333333;
border-bottom: 4px solid #d9d208;
height: 44px;
width: 980px;}

ul.navigation {
position: relative;
z-index: 999;}

ul.navigation li {
float: left;
vertical-align: middle;
zoom: 1;
line-height: 44px;}

ul.navigation li:hover {
position: relative;
z-index: 100;
cursor: default;
background-color: #d9d208;}

ul.navigation a {
padding: 0 20px 0 20px;
display:block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;}

ul.navigation, ul.navigation li, ul.navigation ul {
list-style: none;
margin: 0;
padding: 0;}

ul.navigation li.active > a {
background: #d9d208;}

ul.navigation li.active > a:after {
content: "+";
margin-left: 8px;}

ul.navigation ul li:hover {
position: relative;
z-index: 100;
background: #333333;}

ul.navigation ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 210px;}

ul.navigation ul li {
float: none;
background: #d9d208;
line-height: 30px;
vertical-align: middle;}

ul.navigation ul li a {
padding: 4px 5px;
vertical-align: middle;}

ul.navigation li:hover > ul {
visibility: visible;}

Style 1 and Style 2 HTML code:


<ul class='navigation' id='meniu'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Meniu1</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
<li><a href='#'>Submeniu4</a></li>
<li><a href='#'>Submeniu5</a></li>
</ul>
</li>
<li><a href='#'>Meniu2</a></li>
<li><a href='#'>Meniu3</a></li>
<li><a href='#'>Meniu4</a></li>
<li><a href='#'>Meniu5</a> </li>
<li><a href='#'>Meniu6</a></li>
</ul>

Style 3 CSS code:



.menu {
margin: 0 auto;
background: #ff8400;
-moz-box-shadow: 0px 0px 3px #888888;
-webkit-box-shadow: 0px 0px 3px #888888;
box-shadow: 0px 0px 3px #888888;
height: 44px;
width: 980px;}

.menu ul {
list-style: none;
position: relative;
z-index: 100;}

.menu li {
float: left;}

.menu li a {
line-height: 24px;
margin: 0;
padding: 10px 20px;
display: block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);}

.menu ul .home a {
background: #000000;
color: #FFFFFF;}

.menu li a:hover {
background: #000;
-webkit-transition: all 1.3s ease-in-out;
-moz-transition: all 1.3s ease-in-out;
-o-transition: all 1.3s ease-in-out;
-ms-transition: all 1.3s ease-in-out;
transition: all 1.3s ease-in-out;
color:#FFFFFF;
text-decoration:none;}

.menu li ul {
border: 0 none;
display: none;
height: auto;
position: absolute;
width: 190px;
z-index: 100;}

.menu li:hover ul {
display:block;}

.menu li li {
float: none;}

.menu li:hover li a {
background: #000000;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;}

.menu li ul a {
padding: 0 10px;
line-height: 33px;}

.menu li ul li:hover a {
background: #ff8900;
border: 0 none;
color: #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#888888')";/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#888888'); /* For IE 5.5 - 7 */
-moz-box-shadow: 3px 3px 3px #888888;/* Firefox */
-ms-box-shadow: 3px 3px 3px #888888; /* Internet Explorer */
-webkit-box-shadow: 3px 3px 3px #888888; /* Safari and Chrome */
-o-box-shadow: 3px 3px 3px #888888;/* Opera */
box-shadow: 3px 3px 3px #888888;/* CSS3 */}

Style 3 HTML code:


<div class='menu'>
<ul>
<li class='home'><a href='#'>Home</a></li>
<li><a href='#'>Meniu1</a></li>
<li><a href='#'>Meniu2</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
<li><a href='#'>Submeniu4</a></li>
</ul>
</li>
<li><a href='#'>Meniu3</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
</ul>
</li>
<li><a href='#'>Meniu4</a></li>
</ul>
</div>

CSS3 Drop-Down menu

Blogger Template
parfumuri
Author: mdteme.blogspot.com
Un sablon perfect pentru un blog de shopping.
Caracteristici: E-commerce Look, 4 Columns, Left Sidebar,
Products image Footer, Featured Slider,
Fixed Width, Cool Background, Dropdown Menu, Adsense ready, Page Navigation Widget.

Red Hot Template

Add Coin Slider on your blogspot template.This is a jQuery image slider plugin by Ivan Lazarevic.Open Design Edit Html,no need to expand it,look for

]]></b:skin>

copy the CSS code below and place it above.


* Slider Coin *

.coin-slider {
overflow: hidden;
position: relative;
}
.coin-slider a {
border: medium none;
outline: medium none;
text-decoration: none;
}
.cs-buttons {
float: left;
font-size: 0;
padding: 10px;
}
.cs-buttons a {
border: 1px solid #B8C4CF;
color: #B8C4CF;
float: left;
height: 10px;
margin-left: 5px;
text-indent: -1000px;
width: 10px;
}
.cs-active {
background-color: #B8C4CF;
color: #FFFFFF;
}
.cs-title {
background-color: #000000;
color: #FFFFFF;
padding: 10px;
width: 545px;
}
.cs-prev, .cs-next {
background-color: #000000;
color: #FFFFFF;
padding: 0 10px;
}

Now,find this tag

</head>

and put the following javascript files before it.


<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>

The next step is to place the div where u want,in body section of your template.


<div id='coin-slider'>
<a href="IMAG1_url" target="_blank"><img alt='' src='IMAG1.jpg'/></a>
<span>Description for img01</span></a>
<a href="IMAG2_url" target="_blank"><img alt='' src='IMAG2.jpg'/></a>
<span>Description for IMAG2</span></a>
</div>

Now,go to author page,download javascript files and unpload them on your host.Coin Slider have a lot of options for helping you set slider as you like.It is advisable that the images are resized to the exact width you need.Good luck !For any further questions,please contact me.

Coin Slider on Blogger

Blogger Template
VideoBox
Un sablon perfect pentru un blog de muzica.
Caracteristici: Wordpress Look, 4 Columns, Right Sidebar,
4 Columns Footer, Portfolio, Featured Video Slider,
Fixed Width, Wood Background, Dropdown Menu,
Header Banner, Page Navigation Widget.

Author: www.soratemplates.com

VideoBox Blogger Template

Blogger Template
VideoBox
Un sablon perfect pentru un blog de familie.
Caracteristici : Wordpress Look, 2 Columns, Right Sidebar, 3 Columns Footer, Business, Elegant, Featured Content Slider, Fixed Width, Light Background, Top Navigation Menu, Email Subscription Form.

Author: www.soratemplates.com

Unite Blogger Template

Alte noutati by MDTheme

MD Blogger Theme

mmmm

facebook