තිරය පිටුපසට පිවිසෙන ඔබ සාදරයෙන් පිලිගනු ලබනවා !: Apple theme News content එකක් ඔබේ website එකටත් එකතු කරගන්න

www.thirayapitupasa.blogspot.com

ඉතින් කස්ටියට සුබ දවසක් කියලා කියනවා මුලින්ම. ඔන්න ඉතින් පුරුදු ව්දිහට මම අද මගේ බ්ලොග් එකෙන් ඔයගොල්ලන්ට අලුත් apple theme look එක තියෙන news content එකක් දෙන්නයි ලෑස්තිය. මේවගේ news content ගොඩක් website වල දකින්නට පුළුවන්. ඉතින් මම මේක හදල තියෙන්නේ css3 වලින් ඉතින් මම දෙන project file එක බාගෙන ඔයාලත් බලන්න පුළුවන්. ඉතින් මේක වැඩ කරන්න නම් css3 ඔයගොල්ලන්ගේ machine එකේ තියෙන්න ඕනේ. නැත්නම් සමහර keywords වැඩකරන්නේ නැතුව යනවා. මම කලින් post එකේ css3 බාගන්න link එකක් දුන්නා. දැක්කේ නැති අය මෙතනින් බාගන්න. දැන් වැඩේ හරිනේ. ඔන්න code ටික පහල දානවා.

HTML CODE

<body>
<div class="content">
<h3>
Latest News</h3>
<hr />
<img src="Image/NewsIcon.png" alt="" width="25px" height="25px" /><p>
<u>News Heading 1</u><br />
<p style="height: 34px">
<br />
PHOENIX - A package containing explosives addressed to Maricopa County's controversial sheriff could have detonated, Chief Deputy Jerry Sheridan said Friday.<br /><a href="#">Read more</a>  </p>
</p>
<br /><br /><hr />
 
<img src="Image/NewsIcon.png" alt="" width="25px" height="25px" /><p>
<u>News Heading 2</u><br />
<p>
<br />
A powerful spring storm unleashed tornadoes and winds strong enough to peel the roofs from homes.<br /><a href="#">Read more</a></p>
</p>
<br />
<hr />
  
<img src="Image/NewsIcon.png" alt="" width="25px" height="25px" /><p>
<u>News Heading 3</u><br />
<p>
<br />
The comedian inspired the likes of Robin Williams and Jim Carrey.<br /><a href="#">Read more</a></p>
</p>
</div>
</body>

CSS CODE

body 
{
    background:-webkit-linear-gradient(#664c73,#b08ec6,#fefefe);
    background:-linear-gradient(#664c73,#b08ec6,#fefefe);
    background:-moz-linear-gradient(#664c73,#b08ec6,#fefefe);
    background-repeat:repeat-x;    
}

.content
{
    background:-webkit-linear-gradient(#eeeeee,#eeeeee);
    background:-linear-gradient(#eeeeee,#eeeeee);
    background:-moz-linear-gradient(#eeeeee,#eeeeee);    
    width:300px;
    height:350px;
    border-radius:8px 8px 0px 0px;
    padding:30px 0px 0px 0px;
    margin:60px 0px 0px 300px;    
    box-shadow:0px 0px 20px rgba(0,0,0,0.8);
           
    }
    .content hr.hline_color
    {
        background:#FFF;
        height:5px;        
        }
        
        .content h3
        {
            font:bold 13px/0px Arial;
            text-align:center;
            text-shadow:1px 1px -3px #fff;
            margin-top:0; 
             
            }
            .content p
            {
                font:bold 11px/13px Arial;
                text-align:justify;
                text-shadow:1px 1px -3px #fff;
                margin:0px 20px 0px 20px;
                padding-left:12px;                                 
                } 
                       
             
                .content img
                {
                    margin:0px 0px 0px 3px;
                    float :left;                     
                         
                    }
                   
                                        
                .content p a
                {
                    float:right;
                    font:bold 11px/13px Arial;                   
                    text-shadow:1px 1px -3px #fff;
                                           
                    }
                              
            
  
                  
 /*------ Code by Laksiri bandara----------------------*/
 /*------- Founder and Author thirayapitupasa.blogspot.com-----------*/

ඔන්න එහෙනම් code ටික. මතක ඇතුව css file එක html file එකේ link කරන්න.මම ඒක කලින් post එකේ දැම්මා. මතක නැත්තම් මෙතනින් බලන්න. එහෙමනම් ඔන්න project file එක බාගෙන try කරලා බලන්න.එතකොට තව ගැටළු තියෙන ඒවා නිරාකරණය වෙයි.