Halaman Blogger Seperti Majalah atau Koran

Ingin membuat artikel blogger gaya majalah atau koran? Tidak perlu blogazine, cukup HTML dan CSS.

Kita bisa membuat halaman blogger atau postingan blogger seperti layout sebuah halaman majalah atau koran. Contoh seperti di bawah ini.

Jelas In Blog

Rp.500
Edisi
khusus
www.jelasinblog.blogspot.com
2002

"My Dear Citizens of India,"

its spirit of nationalism. We must thank them with respect and make their lives happy.
1947

About the National Flag

The Indian national flag, represents India's long struggle August 1947 to 26 January 1950 and thereafter as the national flag of the Republic of India. .
1904:The history of the Indian flag dates back to pre independence era. It was in 1904 that
2014

Posting Blog Gaya Koran

02 Mei

15th August is an important day in the history of India. It was on this day that we bid adieu to our colonial masters the British after a rule which lasted for 190 years from the Battle of Palassy. It was on this day a new independent nation was born which would go on to become the largest democracy in the world.
"At the stroke of the midnight hour, when the world sleeps, India will awake to life and freedom" -(bukan)Lalu Abd.Rahman
Lord Mountbatten the last Viceroy and first Governor General of India wanted to show that he was in command and decide on the day India would gain independence. He chose the date August 15th as was the second anniversary of Japan’s surrender to the Allied Forces.
Bhikhaji Rustom Cama is t 1907. inscribed on it.
At the 1929 Lahore session of t
Millions of Muslim, Sikh, aollowed; in Bengal and attempt nto being; st with Destiny speech proclaiming India's independence.
2013

66th Anniversary of Free India.

The National Flag Is A Symbol Of The Nation’s Pride n Respect.
Now, India is the largesteaders who gave their to us. in the comi

Facts about Independence Day

Lord Mountbatten attended one transfer of power ceremony in Karachi on the morning of the 14th, and another in Delhi on 15th Aug 1947.
At the time and the remaining two (Hyderabad and Junagadh) were annexed by the Army.
The King of the ut the Hindu Maharaja finally decided to join India in October 1947.
The border wa, hte areas, East Pakistan (today's Bangladesh,) and West Pakistan, with India in between.
1942

Grand Old Lady of the Independence movement

time of her death.
the premises unless she was also released and gave in only after Mohandas K. Gandhi intervened. A public agitation secured her release.
In 1932, she was held prisoner at the he was politically not very active after her release.
Ingin mencoba? Ini hal yang mudah (kelihatannya). Copy-Paste HTML dan CSS berikut pada HTML Editor postingan Anda lalu terbitkan.
<!DOCTYPE html><html><head>

  <meta content="onthisday" name="webmaker:tags">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100" rel="stylesheet" type="text/css">
<!--

Lessons to be covered:
- Floats
- Text-alignment
- Changing content

-->

<!--
This day in history

READ THROUGH THE COMMENTS. This is a comment. Everything inside of
this tag for HTML or '/*' for CSS, is not processed as code, but
instead is just text comments about the code. For this project, the
comments will give you instructions, hints and guides to completing
the project, so skim down through the comments to get an understanding
of what you are being asked to do.

GET ORIENTED IN THE CODE. HTML is made up of tags that look like
this <p> </p>. The tags tell you something about the information
contained between them. Click on the tags in the code on this side
of the editor to get a description of what each tag is for.

A good place to start is with the title. Personalize the title of your page by changing the text within the <title>Remix of Remix of Remix of Remix of </title>
tags. For example, 'Charlie Brown's first web page' might be one way to go. 

The title won't appear on the main web page within this editor but it will appear at the top of the browser once you publish and view your project and if you roll over it when it's a tab or a minimized window. Mighty helpful when you have a gazillion windows open at the same time. 

-->

  <title>On This Day in History: A Starter Make</title>

<style>

/*
    LESSON -
    Don't like the layout of this page? Floating an object removes it from the flow of the page and align them to the left or right of the parent element, in this case .columns - try and changing the values for the column floats to either left or right. Notice what this does to the columns. You can order the columns in pretty much any order.
    
    As it stands the columns will read left to right in the order they appear in the HTML.

    The order of the columns in the HTML is important as if you are floating two columns in the same direction, the column that appears in the markup first will take precedent and appear to the left of the two columns.
    
    If all the columns are floated left the columns appear in order. If you want the first or middle columns to appear on the right try floating one of them right.
*/
    .columns .column-1 {
        float:left;
    }
    .columns .column-2 {
        float:left;
    }
    .columns .column-3 {
        float:left;
    }

/*
    LESSON - A standard style for text alignment in newspapers is 'justify'. This effect fills each line with text before falling to the next line. Try changing the value to either left right or center and back again to justify to see the effect.
*/
    body {
        text-align:justify;
    }
    .hero-story h2,
    .hero-story h3 {
        text-align:center;
    }

    .story h2 {
        text-align:left;
    }

    span.year,
    footer.date,
    span.date,
    div.price {
        text-align:center;
    }
    blockquote {text-align:right;}




    </style>

</head>


<body>

    <div class="page">

        <div class="page-inner">


            <h1>            
                Independent India
            </h1>

            <div class="price">
                Rs.1
            </div>

            <div class="edition">
                Final<br>
                edition
            </div>
            <!--
                LESSON - Have  ago at creating your own on this day page with different dates, events and images.
            -->
            <span class="date">
            15th August,India             </span>

            <div class="hero">

            </div>

            <div class="columns">
                <div class="column-1">
                    <div class="story">
                        <span class="year">2002 </span>
                        <h2>"My Dear Citizens of India,"</h2>
                        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT4uqsjlEfBL4_NbBdupW3bzLy_Kv9eFd1X2TRak2FSws4nrw9Eaw9a4zH3">
                        <p>On the eve of the 59th Independence Day, I extend to you my best wishes for your happiness and prosperity. My greetings to all our people at home and abroad. Let us resolve, on this occasion, to remember with gratitude, the selfless and devoted services of our Armed Forces who are guarding our frontiers on the land, over the sea, and in the air. We are also grateful to the Paramilitary and Police Forces for preserving our internal security and maintaining law and order.

I met 137 freedom fighters from 27 States and Union Territories on 9th August 2005 at Rashtrapati Bhavan. I saw their enthusiasm even at their ripe age, to bring back the nationalism as a living movement. Today our country is free, because the freedom fighters gave their best to the nation in their prime of youth. Honouring the freedom fighters is honouring the independent nation and its spirit of nationalism. We must thank them with respect and make their lives happy.</p>

                    </div>
                    <div class="story">
                        <span class="year">1947</span>
                        <h2>About the National Flag</h2>
                        <img>
                        <p>The Indian national flag, represents India's long struggle for freedom is a national treasure. It signifies the status of India as an independent republic. The Indian National Flag came into being in its present form at the meeting of Constitutional Assembly on 22nd July 1947. Since then it has first served as the National Flag of the Dominion of India from 15 August 1947 to 26 January 1950 and thereafter as the national flag of the Republic of India. The Indian National Flag was designed by Pingali Venkayya and contains three equal strips of saffron, white and green. The ratio of its width to its length is two is to three.</p> 
                        <p>1904:The history of the Indian flag dates back to pre independence era. It was in 1904 that first Indian flag came into being. It was made by an Irish disciple of Swami Vivekananda. Her name was Sister Nivedita and after some time this flag came to be known as Sister Nivedita's flag. This flag was colouredd red and yellow. Red signified the freedom struggle and yellow was a symbol of victory. It had the words "Bonde Matoram" in Bengali written on it. Along with it the flag contained a figure of 'Vajra', weapon of god 'Indra', and a white lotus in the middle. The 'Vajra' is a symbol of strength and lotus depicts purity</p>

                    </div>


                </div>

                <div class="column-2">

                    <div class="hero-story">

                        <hgroup>
                            <span class="year">1947</span>
                            <h2>Independece Day</h2>
                            <h3>15 August</h3>
                        </hgroup>
  <iframe allowfullscreen="" height="233" src="//www.youtube.com/embed/uGxhrBa1L00?&amp;theme='dark'" width="310"></iframe> 
                      <p><b>15th August</b> is an important day in the history of India. It was on this day that we bid adieu to our colonial masters the British after a rule which lasted for 190 years from the Battle of Palassy. It was on this day a new independent nation was born which would go on to become the largest democracy in the world.</p>
                            <blockquote>
                            <span class="quote">
                                "At the stroke of the midnight hour, when the world sleeps, India will awake to life and freedom"
                            </span>

                            <cite>- Jawaharlal Nehru</cite>
                        </blockquote>
                      <p><b>Lord Mountbatten the last Viceroy and first Governor General of India</b> wanted to show that he was in command and decide on the day India would gain independence. He chose the date August 15th as was the second anniversary of Japan’s surrender to the Allied Forces.</p>
                        <p>Bhikhaji Rustom Cama is the first person to raise the tri-colour in Germany on 22nd of August 1907. But this flag was a different version than the original one. This flag consisted of three colors- the topmost being green followed by golden saffron in the middle and the red color at the bottom. It had 'Vande Mataram' inscribed on it. </p>
                        
                        <p>At the 1929 Lahore session of the Indian National Congress, the Purna Swaraj declaration, or "Declaration of the Independence of India" was promulgated,and 26 January was declared as Independence Day.The Congress called on people to pledge themselves to civil disobedience and "to carry out the Congress instructions issued from time to time" until India attained complete independence. Celebration of such an Independence Day was envisioned to stoke nationalistic fervour among Indian citizens, and to force the British government to consider granting independence.</p>
                        <p>Millions of Muslim, Sikh, and Hindu refugees trekked across the newly drawn borders in the months surrounding independence.In Punjab, where the borders divided the Sikh regions in halves, massive bloodshed followed; in Bengal and Bihar, where Mahatma Gandhi's presence assuaged communal tempers, the violence was mitigated. In all, between 250,000 and 1,000,000 people on both sides of the new borders died in the violence.While the entire nation was celebrating the Independence Day, Gandhi stayed in Calcutta in an attempt to stem the carnage.On 14 August 1947, the Independence Day of Pakistan, the new Dominion of Pakistan came into being; Muhammad Ali Jinnah was sworn in as its first Governor General in Karachi. At midnight, as India moved into 15 August 1947, Jawaharlal Nehru delivered the Tryst with Destiny speech proclaiming India's independence.</p>
                    </div>

                    <div class="story">
                       <span class="year">2013</span>
                      <h2>66th Anniversary of Free India.</h2>
                       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjX5LvjLKqjK7GhcSVV1T2jLqSeAcp6zYcFmHQUyRR0qYTvTPG">
                       <p>The National Flag Is A Symbol Of The Nation’s Pride n Respect.
There Is A Liberal Use Of The Flag On Independence Day.
The Trend Of Selling Flags Made Up Of Paper n Plastic,
Is Incorrect.
With A Sense Of Natinal Pride,
Ppl Enthusiastically Buy Such Flags
But Very Next Day,
We Find These Flags Being Trampled
Upon The Road,
In Dustbins n Elsewhere.
In This Context, Ppl Forget That They Are Insulting The Flag. Often,
These Flags Are Burnt Along With Garbage.
It’s The Duty Of Every Individual To
Maintain Proper Respect Of The National Flag.</p>
<p>Now, India is the largest democratic country in the world. The country’s strength is to find, “Unity in diversity”. But, there are stray incidents that test her secularism but the people of India are  ready to sacrifice anything for the cause of unity.Today we remember the great leaders who gave their lives for the nation’s freedom and prosperity.Dr. B.R.Ambedkar gave the longest written constitution to us. Pandit Jawaharlal Nehru worked for an industrialized India. Gandhi ji taught us Ahimsa and Non-violence. Subash ChandraBose inducted courage in us. Swami Vivekanada gave us spiritual power.Yes, with these contributions, India will be the super power in the coming years.Our former President Dr.APJ Abdul Kalam called the children of India to dream to build a strong Nation with aim and perseverance.Indeed! This is not a word of a single man. It is word of one billion souls. Hail India! Jai Hind!
 </p>


                   </div>

               </div>



               <div class="column-3">
                   <div class="story">
                    <span class="year"></span>
                    <h2>Facts about Independence Day</h2>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpEOIsUMrbPShM7dz1lp7OxQRWzz4uRa4jFQnCtoV8n_B4uo9QlJ_axUud">
                    <p>Lord Mountbatten attended one transfer of power ceremony in Karachi on the morning of the 14th, and another in Delhi on 15th Aug 1947.</p> 
                     <p>At the time of independence there were 562 princely states in India. Out of those 560 of these states joined India and the remaining two (Hyderabad and Junagadh) were annexed by the Army.</p>
                     <p>The King of the Jammu and Kashmir princely state didn’t decide which side (Pakistan or India) to join by August 1947. But the Hindu Maharaja finally decided to join India in October 1947.</p>
                     <p>The border was drawn by a London lawyer, Sir Cyril Radcliffe. Appointed head of the Boundary Commission on June 3 1947, he submitted his partition map on August 13. The Radcliffe Award split Pakistan into two separate areas, East Pakistan (today's Bangladesh,) and West Pakistan, with India in between. </p>
                    


                </div>
                <div class="story">
                    <span class="year">1942</span>
                    <h2> Grand Old Lady of the Independence movement</h2>
                    <img src="http://upload.wikimedia.org/wikipedia/en/0/0d/Aruna_asaf_ali.jpg">
                    <p>Aruna Asaf Ali (Bengali: &#2437;&#2480;&#2497;&#2467;&#2494; &#2438;&#2488;&#2475; &#2438;&#2482;&#2496;) born Aruna Ganguly, was an Indian independence activist. She is widely remembered for hoisting the Indian National Congress flag at the Gowalia Tank maidan in Bombay during the Quit India Movement, 1942. She was 87 years old at the time of her death.</p> 
                  <p>She became an active member of Congress Party after marrying Asaf Ali and participated in public processions during the Salt Satyagraha. She was arrested on the charge that she was a vagrant and hence not released in 1931 under the Gandhi-Irwin Pact which stipulated release of all political prisoners. Other women co-prisoners refused to leave the premises unless she was also released and gave in only after Mohandas K. Gandhi intervened. A public agitation secured her release.</p>
                    <p>In 1932, she was held prisoner at the Tihar Jail where she protested the indifferent treatment of political prisoners by launching a hunger strike. Her efforts resulted in an improvement of conditions in the Tihar Jail but she was moved to Ambala and was subjected to solitary confinement. She was politically not very active after her release.</p>
           

                </div>

            </div>

        </div> 

        <footer class="date">

          Remixed by: <a href="http://twitter.com/_Tripad">@_Tripad </a> | Saare Jahan se Accha Tune By : <a href="http://www.flutetunes.com/tunes.php?id=501">Muhammad Iqbal</a>

        </footer>

    </div>

</div>



<style>
/* **
Main style - BY ALL MEANS HAVE A PLAY WITH THESE STYLE DECLARATIONS BELOW! HOWEVER ANY CHANGES MAY BREAK THE LAYOUT 
*/

body {
    background:#5f5f5f;
    font-family: 'Roboto Slab', serif;
    font-weight:300;
    -webkit-backface-visibility: hidden;
}
h1, h2, h3, {
    margin:0px 0px 12px 0px;
}
a {color:#444;}
.page {
    position:relative;
    padding:30px;
    margin-left:10px;
    width:600px;
    margin:80px auto 200px;
    background:#FFF;
    -webkit-border-bottom-left-radius: 100px 20px;
    -webkit-border-top-left-radius: 100px 20px;
    border-top-left-radius: 100px 20px;
    border-bottom-left-radius: 100px 20px;
    box-shadow :20px 20px 20px rgba(0,0,0,0.3);
    height:100%;
    background: #F9f9f9 -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(220,220,220,0) 30%);
    /* FF3.6+ */
    background: #FFF -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(240,240,240,0)));
    /* Chrome,Safari4+ */
    background: #FFF -webkit-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(240,240,240,0) 30%);
    /* Chrome10+,Safari5.1+ */
    background: #FFF -o-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);
    /* Opera 11.10+ */
    background: #FFF -ms-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);
    /* IE10+ */
    background: #FFF linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dededed', endColorstr='#00ffffff',GradientType=1 );
    /* IE6-8 */
    
    /* Safari and Chrome */
}

.page:after {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    outline: 1px solid transparent;
}

.page:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #F7F7F7;
    border-width: 100px;
    margin-left: -70px;
    -webkit-transform: rotate(42deg);
    transform: rotate(42deg);
    right: -89px;
    top: -107px;
    z-index: -4;
    outline: 1px solid transparent;
}

.page-inner {
    overflow:hidden;
    position:relative;
}

.page h1 {   
    font-family: 'Roboto Slab', serif;
    font-weight:100;
    position: relative;
    padding: 0 75px 0 50px;  
    margin:0px;
    position:relative;
    line-height:1;
 
    letter-spacing:-1px;
    font-size:42px;
    font-weight:normal;
    text-transform:uppercase;
    line-height:100px;
    text-align:center;
    color:#FE880F;
    opacity:1;
    z-index:1;
  -moz-transform: skewX(-9deg);
        text-shadow:
    1px 1px 0 #F9C345,
    2px 2px 0 #F9C345,
    3px 3px 0 #F9C345,
    4px 4px 0 #ffffff,
    5px 5px 0 #fff,
    6px 6px 0 #fff,
    7px 7px 0 #2FD206,
    8px 8px 0 #2FD206;
    
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;    
}
  
  .page h1:hover{-moz-transform: scale(1.1);}

footer.date,
span.date {
    display:block;
    border-top:solid 1px #CCC;
    border-bottom:double 3px #CCC;
    margin-bottom:20px;
    padding:6px 0px;
}
div.price {
    padding:10px;
    border:double 3px #BBB;
    display:inline-block;
    position:absolute;
    left:0px;
    top:30px;
}

div.edition {
    padding:6px;
    border:double 3px #BBB; 
    display:inline-block;
    position:absolute;
    right:0px;
    top:24px;
    font-size:14px;
    text-transform:uppercase;
    text-align:center;
    
}

span.year {
    font-weight:bold;
    font-size:11px;
    margin-bottom:10px;
    display:block;
    font-family:sans-serif;
    letter-spacing:1px;
}

.hero-story h2 {
    font-weight:normal;
    text-transform:uppercase;
    font-size:46px;
    margin:0px 0px 4px 0px;
    line-height:0.9em;
    letter-spacing:-1px;
}

.hero-story h3 {
    font-weight:normal;
    font-style:italic;
    text-transform:uppercase;
    font-size:18px;
    margin:0px 0px 16px 0px;
    
}   

p {
    font-size:13px;
    line-height:18px;
}

blockquote {
    border-bottom:10px solid #EFEFEF;
    padding-bottom:10px;
    width:128px;
    float:right;
    margin:8px 30px;
}
blockquote span {
    line-height:28px;
    font-size:24px;
    margin:0px 0px 8px 0px;
    display:block;
    font-style:italic;
}
blockquote cite {
    font-style:normal;
    font-size:13px;
}

.columns {
    overflow:hidden;
    width:613px;
    margin-left:-12px;
}
.columns img {
    width:100%;
}
.columns .column-1,
.columns .column-2,
.columns .column-3 {
    min-height:2200px;
    padding:0px 12px;
}

.columns .column-1 {
    width:114px;
    border-right:solid 1px #CCC;
}
.columns .column-2 {
    width:310px;
    border-right:solid 1px #CCC;
}
.columns .column-3 {
    width:114px;
    border-right:solid 1px #CCC;
}

.story {
    margin-top:24px;
    padding-top:24px;
    border-top:solid 1px #CCC;
}
.story:first-child {
    margin-top:0px;
    padding-top:0px;
    border-top:0px none;
}
.story h2 {
    font-size:15px;
    margin-top:0px;
}

</style>
<audio autoplay>
  <source src="https://dl.dropboxusercontent.com/u/57197495/saare_jahan_se_achcha.ogg" type="audio/ogg">
</audio> 

</body></html>

Selamat belajar :)

COMMENTS

BLOGGER: 1

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Halaman Blogger Seperti Majalah atau Koran
Halaman Blogger Seperti Majalah atau Koran
Ingin membuat artikel blogger gaya majalah atau koran? Tidak perlu blogazine, cukup HTML dan CSS.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_y6xHNtxuvU-ZMH8MS2C2R8lSh_1PgMBIK8zOHo-7Ll1fAbn3o2cixxQ0QG0aTfryzbHUUCL69_LGslD5wQqs_2otq8uCuT707Be6yZQJQIPPw5UmJJkPav9xBxRzDPGCU9O0I3hw-Y/s1600/layout_hierarchy.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_y6xHNtxuvU-ZMH8MS2C2R8lSh_1PgMBIK8zOHo-7Ll1fAbn3o2cixxQ0QG0aTfryzbHUUCL69_LGslD5wQqs_2otq8uCuT707Be6yZQJQIPPw5UmJJkPav9xBxRzDPGCU9O0I3hw-Y/s72-c/layout_hierarchy.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/halaman-blogger-seperti-majalah-atau.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/halaman-blogger-seperti-majalah-atau.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content