-?/strong>

 -

? Corel PaintShop Pro - (0)

? Corel PaintShop Pro ? Corel PaintShop P...

?? ?/a> - (0)

?? ? *Mariea@mmg* ? ?? ...

??/a> - (0)

???| ? ???? ? ...

? ??/a> - (0)

? ?? ? ?? ? ?..

??/a> - (0)

?? ?,? ? ?! ??...

 -?

???Inna_Guseva

 -

LiveInternet.ru: ??? title=
: 08.09.2013
? 12375
: 9985
: 39643

Blogger: ? ????/b>
? 28 2018 ? 15:04 + ?
? ?/a> [??/a> + ? ?!]

Blogger: ? ????/strong>

?? ?:

? ????? ??? ? :
  ?? ?(Blogger: ?? Blogger(?!

1. CSS - ??:

#top-wrapper {
width: 900px;
margin: 0 auto;
background: $top_bg;
color: $top_color;
font-size: 100%;
}


#bottom-wrapper {
width: 900px;
margin: 0 auto;
background: $bottom_bg;
color: $bottom_color;
font-size: 100%;
}

? ??? ?? ?? ?

width
- ? ?. ???? ?(? ??? ?? 900px ???? (? ) ?
? "??quot; (?? ?? ?? ???
width 100%.

background - ? ? ???? ? top_bg ( ? ?bottom_bg ( ?
color - ??: top_color ( ? ?bottom_color ( ?
font-size - ?100% ? ??? ?? ?

1? ?CSS ? ???

???????]]></b:skin> ??? ?.
? ? ? ? ? ?? ?? ? ?,

2. ?? :

<Variable name="top_bg" description=" ?quot;
type="color" default="#ffffff" value="#ffffff">
<Variable name="bottom_bg" description=" ??quot;
type="color" default="#ffffff" value="#ffffff">
<Variable name="top_color" description=" ?quot;
type="color" default="#000000" value="#000000">
<Variable name="bottom_color" description=" ??quot;
type="color" default="#000000" value="#000000">

? ?, ?? ??? ??? ? ? - ??, ? ? ? ? ?? - ??
? ?? ?.. ?? ????HTML- ? ?

/* Variable definitions

? ? ? ?? ? ? ? ?? ?? ???.

?? ? ? ????

? ? - ???? ? ? ?/span>.
! ? ? ? ???/span> .

3. ???

? ??-? ? ? ? ? ?. ?, ? ? , ? ? ????? ? ?

? ?? <body>

<body> ? ?? ?? ?

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='? ?(Header)' type='Header'/>
</b:section>
</div>

? </div> ? ?:

<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>

? ?? ? ??.

? ? ? ?.
??? ??

</div>
</body>
</html>

?/span> </div> ? ?

<div id='bottom-wrapper'>
<b:section class='bottommer' id='bottommer'/>
</div>

?? ? ??? ? ?/span>.

? ????? ? ? ? ??/span> ?? ???????? ?? ?

? ??.. ? ?? , ?? ????
?  *********"Blogger"
?

?? ??.
? 14 2018 ? 09:38 + ?
? ?/a> [??/a> + ? ?!]

?? ??.

, ??? , ?? ? ???? ? ?. ?? 3 ? ?, ???????? ?
?2 ?????? ??.
? ????? ?????? . ? .
? ??? ? ?? ? — ??! — ?. — ??…
??? ???? . ?? ? - HTML.
? ]]></b: skin>. ? ? ???  .
? ?? ??
blockquote {
width: 90%;
margin:10px auto;
border-top: solid 10px #666;border-left: solid 1px #ccc;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("https://4.bp.blogspot.com/-vKFz-h9rAdQ/UspzABXw__I/AAAAAAAACIA/JgpTpSm5gQI/s1600/hover-bg.gif") repeat;
}
? ??, ???? , ? ? ??? ????? ???HTML ?? ???
<blockquote>???</blockquote>

??? ? ??? ? ?.
?? ?? , ??. ?? . ?? ? ?/a> ? ?
blockquote { line-height: 20px; background: url(https://1.bp.blogspot.com/-3ilOkVXlxTc/UjSXlK4UthI/...yU/gGDMiS7rA7c/s1600/black.png); font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000000; border:solid #999999 1px; border-left:solid #990000 15px; padding: 0 5px 0 10px; margin-left:30px; } blockquote:hover{ background: #FFFFFF; box-shadow:0 0 7px #999; }
? , ?? ? ?- ? ?

 

?  *********"Blogger"
?

? BLOGGER
? 09 2018 ? 21:09 + ?
? ?/a> [??/a> + ? ?!]

? BLOGGER

? ? ? ? ?/ ? ?.

? ? . ??. ??? , ?? ? ?. ? . ? ?? . ?? ? HTML/JavaScript, ?? ??? , ? ?????

???. ?? ?? ? ?? ?? ? ???? ??

? ? , ?? ?? ??(? ?. ? ?/a> ?? ?/a>.

, ??? ? ??, ? URL , ? .

?? ?? ? ?? .

<div id="navfixed"><div id="navfixedinner"><div id="navtop-wrapper"><div id="navtopbar"><ul id="navtop">
<style>
#navfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#navfixedinner{text-align:center;background:transparent;height:30px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #navfixedinner{margin-right:-145px;voice-family: "\"}\""; voice-family:inherit; }* html #navfixedinner{margin-right:17px;}
* html #navfixed {position:absolute
;}
#navtop-wrapper{background:#EEE5DE;width:100%;display: float: left;;margin:0 auto;padding:0 auto;-moz-box-shadow: inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
border-bottom:3px solid #4682B4  ;border-top:3px solid #4682B4;}
#navtopbar{width:1140px;height:30px;margin:0 auto}
#navtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-transform:none;color:#8b008b; padding:8px 11px 8px}
#navtop a.arrow{);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#navtop li{float:left;position:static;width:auto}
#navtop li ul,#navtop ul li{width:300px;}
#navtop ul li a{text-align:left;color:#fff;font-size:16px;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}
#navtop li ul{z-index:100;position:absolute;display:none;background: #FFFFF0;padding-bottom:0px;-moz-box-shadow: inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;}
#navtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#CDC5BF;color:#fff}
#navtop li:hover ul,#navtop li.hvr ul{display:block}
#navtop li:hover ul a,#navtop li.hvr ul a{color:#404040;background-color:transparent;text-decoration:none}

#navtop ul a:hover{background-color:rgb(211, 196, 182)!important;color:#fff!important;text-decoration:none }
#navtop a span,#navtop a.arrow span{font:normal 16px Georgia;color:#000;display:block;line-height:16px;text-transform:uppercase;}
#navtop li:hover a span,#navtop li:hover a.arrow span{color: #1c8fce}</style>


<li><a href="###"><span></span></a></li>

<li><a href="###"><span> ?lt;/span></a>
<ul>

<li><a href="?quot;>?? ?lt;/a></li>

<li><a href="?quot;> ?</a></li>
<li><a href="?quot;> </a></li>
<li><a href="?quot;> </a></li>
<li><a href="?quot;> ??lt;/a></li>

</ul></li>

<li><a href="###"><span>?2</span></a>
<ul>

<li><a href="?quot;> 1</a></li>
<li><a href="?quot;  > 2</a></li>
<li><a href="?quot;> 3</a></li>
<li><a href="?quot; > 4</a></li>
<li><a href="?quot; > 5</a></li>
</ul></li>

<li><a href="###"><span>?3</span></a>
<ul>

<li><a href="?quot; > 1</a></li>
<li><a href="?quot; > 2</a></li>
<li><a href="?quot; > 3</a></li>
<li><a href="?quot; > 4</a></li>
<li><a href="?quot; > 5</a></li>

</ul></li>

<li><a href="###"><span>?4</span></a>
<ul>

<li><a href="?quot;> 1</a></li>
<li><a href="?quot;"> 2</a></li>
<li><a href="?quot;> 3</a></li>
<li><a href="?quot;> 4</a></li>
<li><a href="?quot;> 5</a></li>

</ul></li>

<li><a href="###"><span>?5</span></a>
<ul>

<li><a href="?quot;> 1</a></li>
<li><a href="?quot;> 2</a></li>
<li><a href="?quot;> 3</a></li>
<li><a href="?quot;> 4</a></li>
<li><a href="?quot;> 5</a></li>

</ul></li>

<li><a href="###"><span>?6</span></a>
<ul>

<li><a href="?quot; > 1</a></li>
<li><a href="?quot; > 2</a></li>
<li><a href="?quot; > 3</a></li>
<li><a href="?quot; > 4</a></li>
<li><a href="?quot; > 5</a></li>
</ul></li>

<li><a href="###"><span>?7</span></a>
<ul>

<li><a href="?quot; > 1</a></li>
<li><a href="?quot; > 2</a></li>
<li><a href="?quot; > 3</a></li>
<li><a href="?quot; > 4</a></li>
<li><a href="?quot; > 5</a></li>
</ul></li>

<li><a href="###"><span>?8</span></a>
<ul>

<li><a href="?quot; > 1</a></li>
<li><a href="?quot; > 2</a></li>
<li><a href="?quot; > 3</a></li>
</ul></li>

<li><a href="###"><span> </span></a></li>

</ul></div><div style="clear:both;"></div></div></div></div>
? ?### ?URL ?? ? ?- .
, ? ? ?? (?. ?? ?? .

??? ?, ???/span>
<li><a href="###"><span>?lt;/span></a>
<ul>

<li><a href="?quot; > 1</a></li>
<li><a href="?quot; > 2</a></li>
<li><a href="?quot; > 3</a></li>
<li><a href="?quot; > 4</a></li>
<li><a href="?quot; > 5</a></li>
</ul></li>

?/u> , - ? ? ?? ??

 

<li><a href="?quot; ></a></li>
, ? ??? ? ?. ? . ? ? .

??? ??? ?? ?? ? ?

?. ? ?? ? ?. ?? ?nbsp;rel="nofollow" ? ?? ??

<li><a href="?quot;rel="nofollow" ></a></li>

? ? ?a target="_blank"> ???/a> ,  target="_blank".
<li><a href="?quot;rel="nofollow" target="_blank" ></a></li>

 

?  *********"Blogger"
?

? ?
? 09 2018 ? 21:07 + ?
? ?/a> [??/a> + ? ?!]

? ?

? ?. ? ??? ??? ?? ?. ?? ?? ??? ??
 
?? ?, ?? ? ? ? ? ?, ? "", ?, ?. ?? ?PageList. ? ?? ?
??:
??? ? ?
?
 
<style>
#main-nav {
width: 100%;
}
ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
}
ul#main-nav li a {
    position: relative;
    width: 110px;
    height: 26px;
    display: block;
    background-position: center center;
    color: #404040;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-top: 12px;
    text-align: left;
    padding-left: 26px;
    font-weight: normal;
    text-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.2), 0 -0.6px #000;
}
ul#main-nav li.home a {
color: #03b4cc;
}
ul#main-nav li.home a:hover {
color: #f7f7f7;
}
ul#main-nav li.current a {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li a:hover {
    background-position: bottom;
    color: #c2c2c2;
    padding-left: 25px;
    cursor: pointer;
}
ul#main-nav li.current a:hover {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li.current {
    z-index: 100;
}
ul#main-nav li.home {
    z-index: 100;
}
ul#main-nav li.web-design {
    z-index: 99;
}
ul#main-nav li.web-development {
    z-index: 98;
}
ul#main-nav li.blogging {
    z-index: 97;
}
ul#main-nav li.blogger-tips {
    z-index: 96;
}
ul#main-nav li.widgets {
    z-index: 95;
}
ul#main-nav {
margin-left: 10px;
}
ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
}
.mbt_navigation1 {
        position:absolute;
        display:none;
} 
.mbt_navigation1 li {
        clear:both;
}
ul#mbt_navigation1 li a {
background: #242424;
width: 196px;
padding-left: 10px;
color: #c2c2c2;
opacity: 0.9;
font-family: arial;
font-size: 14px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
ul#mbt_navigation1 li a:hover {
background: #535353;
color: #f7f7f7;
margin-left: -22px;
}
#main-nav li ul {
    background: #242424;
    border-left: 2px solid #2b2b2b;
    border-right: 2px solid #2b2b2b;
    border-bottom: 2px solid #2b2b2b;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.9;
    position: absolute;
    width: 177px;
    z-index: 200;
    -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;
/*top:1em;
/*left:0;*/
}
#main-nav li:hover ul {
    display: block;
    background-image: none;
}
#main-nav li li {
    display: block;
    float: none;
    padding: 0px;
    width: 245px;
}
.searchbutton1:hover{
opacity: 0.9;
border: none;
}
.icon-right2 {
  color: #4e4e4e;
  font-size: 7px;
}
</style>
<ul id='main-nav'>
<li class='home'><a href='#'></a></li>
<li class='web-design'><a><span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<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>
</ul></li>
<li class='main-nav web-development'><a><span class='icon-right2'>&#9660;</span></a>
 
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'></a></li>
</ul></li>
 
<li class='main-nav web-development'><a><span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'></a></li>
</ul></li>
<li class='main-nav web-development'><a><span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'></a></li>
</ul></li>
<li class='blogging'><a href='#'></a></li>
<li class='widgets'><a href='?#39;>?lt;/a></li>
<li class='main-nav'><a>?<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>?lt;/a></li>
<li><a href='#'>Generator</a></li>
<li><a href='#'></a></li>
</ul></li>
</ul>

? ?/span> ? ? ?/span> ??; ??; ? ?( ? ?), ?/span> ? ; ?/span> ?? ?? ? ; ?/span> ? ?
 
? ; &#9660; ?, ??
?  *********"Blogger"
?

? blogspot
? 09 2018 ? 21:01 + ?
? ?/a> [??/a> + ? ?!]

? blogspot

, ? ?? ? ??? blogger ? ??, ??? . 
 
?, ??- ? ? , ??? ? ? ? ?? ??. 
 
??  fixed, ? fixed-top, ?? ? ( ?? ??? .
? , ?? (), ?? ? ? ?? ???? ? ? ?? ?
? blogger ??? border=
? blogger ???/span>
? . ????? ? ? ? ??. blogger ???. ??? ?"? ".
? ?? . ? ?.
? ?? .
 
? blogger ? , ???, ? , ??? . ??? ? ??. ? ?? ?? .
?? ?

<style>#sbtop-wrapper{background:#000;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:10px double #00b27d;border-top:10px double #00b27d;border-radius:12px;}#sbtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-color: #03b4cc; padding:7px 10px 7px}#sbtop li ul,#sbtop ul li{width:300px;}#sbtop ul li a{text-align:left;color:#333;font-size:16px;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background: #00b27d;border:2px dotted #f8fcff;padding-bottom:10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color: #eee;color:#f8f8ff;}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:0px solid #000;border-top:0px solid #fff;display:block;font-size:1px;height:0;line-height:0;margin:100px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#eee!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 14px Georgia;color:#fff;display:block;line-height:16px;text-transform:uppercase;}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color: #0e5198;}</style>
 
<div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="https://demo-q.blogspot.com"><span></span></a></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>"rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a><ul>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li>
<li><a href="?/b>" rel="nofollow" target="_blank"></a></li></ul></li>
<li><a href="#"><span></span></a></li>
</ul></div><div style="clear:both;"></div></div>

?, ? CSS ? .
? , , , ?? ??
?? ? ?
? ?
?/span> ; ?/span> ?? ? , ?? ? ?( ? ????, ?;
 
, , , ? ? ?? ? ??CSS ?? ? , ?? . ? ? , ? ??
 
? ? ???? ??? ?.
?? ???? "" ? . ? ? ? ?? ??
?  *********"Blogger"
?

? ?/b>
? 08 2018 ? 19:05 + ?
? ?/a> [??/a> + ? ?!]

? ?/strong>

???? ?, ? ? , ?? ????? ???

?? ?:  - - HTML/JavaScript,  ? ?"?" ? ?? ? .
 
<style>.post h3 {
background:url(//s61.radikal.ru/i171/1303/a7/b994b024329f.jpg)no-repeat top
left;margin: 0px;
padding: 40px 0px 0px 80px;
line-height:1.1em;
}</style>
, padding: 40px 0px 0px 80px; ??? : 40px  ? 80px; 
? ?? ?/span>, .

 

?  *********"Blogger"
?

/ ?? ?/b>
? 07 2018 ? 21:34 + ?
? ?/a> [??/a> + ? ?!]

/ ?? ?

, ? ?? ?? ?/span>
???. ? ?
?????? ?, ?.

? ????? ? ???? Blogspot.

, -? ? ??? ???
??? ? ??
             ? ??,
              ? ??nbsp;                               ???

?? ?                         ? ? border=    
??

?? ?- HTML, ???</head>
? ? ???/span>
 
<style type='text/css'>
.content-inner
{
margin-top: -50px;
}
</style>

50 ; ?( ? ??).

-? ? ?- .
- -Header1 (?.
, ? ? ?
???, ? ?
???? border=
??
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 
, ? ?? ?/span> 1- ? 2
? ? no- yes.
?.
??-?, ?? ?. ?/span>
? ?
, ?  maxwidgets='1' 5, 7 ???? ????? 
 
? ??, ? HTML/JavaScript ??
? , ? ???? ?<table>...</table>.
 
<table><tr>
<td>??/span></td>
<td>&nbsp;&nbsp;</td> ?nbsp;
<td>??/span></td>
</tr></table>
???. ?????, ????
? blogger.
???
?  *********"Blogger"

? ? !
? 05 2018 ? 21:12 + ?
? Jorjorych [??/a> + ? ?!]

? ? !

??? !

? ?(? ?) ?

?/b>

?" ?":
?1 - ?? - ?? ?/a>
?2 - ? ? ? ??
...
?22 - ? ? !
?23 - ? ?/a>
?24 - ? ? !
?25 -
?26 - ? ? ?
...
?45 - ? ?..
?46 - "???? ?quot; - ?- ?
?47 - ?, " ? ? "? (?)

?  *********"Blogger"
?

?? ????
? 02 2018 ? 20:39 + ?
? ?/a> [??/a> + ? ?!]

?? ????

?? ?? ?? , ? , ? ??? . ??? ? ?????? ?? ? ?/span>
?? ??? ? ? ? ?? "?" ? ?. ? ??.
???

1. ? .
2. .
3. ?(? ? ?
4. ? ?
5. ?
? ??? ?? ??.
? jquery ?? ? ?? ? ? ? , ?, ???? . ? ?? ?

?1. ? ? ?? ? HTML. ??- , ? ??? ? ?, ??.

??? ?span style="color:#ffd700;"> </head>.
1 ?
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

?2. ?CSS. ??? ???.

2 ?

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>
<style>
.clearfix:after {content: &quot;.&quot;;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 45px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 90%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/s1600/sliding-panel-tab-left.png) no-repeat left 0;

height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px; 
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.95em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://3.bp.blogspot.com/-dT-QzDtobHo/Uv_j8KyMIWI/AAAAAAAAGLE/dhWa0RKCLpI/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://4.bp.blogspot.com/-zAJKRnLzcmc/Uv_yHsaS9FI/AAAAAAAAGMc/1fbDDXwrbbY/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 12px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type=&quot;text&quot;] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type=&quot;text&quot;]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
</style>
?  height: 230px; ?   background: #272727; .
? ??? ??

?3. ?? ??div- ?  ????? ? ?? . .

?? , ? ????<body>.
??, ? </head>.
?? <body> -
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>,
??? ?3 ?/b>.
<!-- ?l -->

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- -->

<div class='left' style='width:240px !important'>

<h4>?!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://3.bp.blogspot.com/-b3ZedGTPF8E/U_93L9eGS5I/AAAAAAAACns/XVM0P9UKy7w/s44/jpg '/>
<h3 class='boxtitle'> </h3>
<p>, ? ??. ????? ???.</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>? ?</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='?/span>...' size='40' type='text'/>
</form>

</div>

<!-- -->

<div class='left' style='width:320px !important'>
<h4>?/span></h4>

<div id='sliding-panel'>
<ul>
<li><a href=' URL'>?1</a></li>
<li><a href='URL'>?2</a></li>
<li><a href='URL'>?3</a></li>
<li><a href='URL'>? 4</a></li>
<li><a href='URL'>? 5</a></li>
<li><a href='URL'>? 6</a></li>
<li><a href='URL'>? 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='URL'>? 1</a></li>
<li><a href='URL'>?  2</a></li>
<li><a href='URL'>? 3</a></li>
<li><a href='URL'>? 4</a></li>
<li><a href='URL'>? 5</a></li>
<li><a href='URL'>? 6</a></li>
<li><a href='URL'>? 7</a></li>
</ul>
</div>
</div>

<!-- -->

<div align='center' class='left right'>

<h4>?!</h4>
<p style='padding:0px 30px;'>?? ? ? ? Email</p>

<form action='https://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value=''/></form>

<div align='center' style='clear: both;'>
<a href='?? ??/span>'><img src='https://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='https://blog-address.blogspot.com/atom.xml'><img src='https://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href=' ???+'><img src='https://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='?? ??/span>'><img src='https://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/s1600/Twitter.png' style='padding:5px;' title='Follow on Twitter' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>?</a>
<a class='close' href='#' id='close' style='display: none;'>?</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

?  ? . ? ? ? URL. .

?

https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=https://3.bp.blogspot.com/-b3ZedGTPF8E/U_93L9eGS5I/AAAAAAAACns/XVM0P9UKy7w/s44/*&container=blogger&gadget=a&rewriteMime=image/*

? ? ??? /jpg. ?? ? 3.

? ??, ? ? ? , ?? ? ? ? ? ???? ?? ?/a> ? . 

??, ? . ? ? ???????
?  *********"Blogger"
?

??? Blogger
? 26 ? 2018 ? 21:35 + ?
? ?/a> [??/a> + ? ?!]

??? Blogger


? «??» ??Blogger:
  1. ?? ?Blogger. Blogger , ?? «??».
  2. ?? «» ?? « HTML».
  3. «Blog» ? « ».
  4. ?? ? HTML ?? , :
    <b:includable id='post' var='post'>
  5. ??? <data:post.body/> ?HTML-. ? ? ?, ?«F3» , ??? ?. ?? ? , ? ? ?
  6. ? «??» ??strong> «??».
    ? «?raquo; ??.
  7. ?expr:data-identifier='data:post.id' ? «span»:
    <span class="likebtn-wrapper" data-style="drop" expr:data-identifier='data:post.id'/>
?? «??» ?? ???<data:post.body/>:

 

?  *********"Blogger"

 : [3] 2 1