Trik Membuat Halaman Posting Seperti Tampilan Koran

Assalamualaikum warahmatullahi wabarakatuh.

Tiadak kabar yang paling membahagiakan saya kecuali mendengar dan melihat semua Sahabat blogging saya baik baik selalu sehat dan dalam keada' an bahagia. Hatur saur nu kapihatur hatur carita mugia sing janten kabagja. Salam santun buat semua pun dulur semua yang sudah menyempatkan diri untuk bersilaturrahim ke blog saya ini. Setelah kemarin saya Mereview blog Sahabat setia Mas Yanto itu seperti yang saya tulis di post : Review Sahabat Setia Blog Karrysta portion 1. Pada kesempatan yang baik ini ijinkan saya ingin berbagi trik sederhana cara membuat tampilan halaman posting di blog bak seperti pada lembaran koran. Biar kesanya gak ngebosenin hamparan post yang kita publish itu jika sobat blogging semua ada yang berminat silahkan simak lebih lanjut tulisan ini. Yah itung itung mengasah ketrampilan dan kreatif mendesain an memadu warna yang hendak anda sugguhkan pada semua pengunjung blog anda. Gimana sob..? Silahkan di coba dengan SERSAN (Serius tapi santai). silahkan jika Sahabat nak cuba perkongsian nie dengan senang hati awak siap semua bantu apaupun cakap pertanya'an semua cakapan semua sobat blogging tercinta.

Tampilan artikel seperti Koran :

Sebetulnya tanpa trik ini juga halaman posting di blog bisa di publikasikan seperti biasa. Tetapi jika ada sesuatu yang lain pada tampilan halaman posting anda tidak ada salahnya anda lihat post ini dan jika anda berminat untuk artikel anda tampil beda,.? selanjutnya bisa anda menggunakan tutorial ini. Namun jika anda tidak bersedia juga gak apa apa ini saya semata hanya berbagi dengan niat yang tulus dan Ikhlas. silahkan simak lebih lanjut tulisan nie dan cakapan saya nie.

Membuat posting dengan gaya Koran :

Kenapa harus artikel pada blog harus ikit ikutan gaya yang di miliki pada tampilan koran.? Jawabanya simple hanya sebatas idea saja mungkin lengkapnya hanya mendesain halaman posting nyaris seperti hamparan tulisan bak seperti pada media koran. Malahan bisa seperti Harian Majalah lho sob trik ini.? Tinggal anda meramu dan meracik coding css dan html di post ini. Maksudnya jika tampilanya kurang sesuai dengan selera kita maka anda bisa mengeditnya kode dalam post nie, yang sesuai dengan selera hati dan menurut narasi keinginan sendiri.

Cara penerapan post gaya Koran/Majalah :

Baiklah sobat semua tidak panjang lebar saya uraikan cara membuat halaman posting seperti gaya koran atau majalah ini. silhkan anda simak cara pemasanganya di bawah ini. Dengan cara copy kode di bawah ini. Pada area new post atau buat artikel baru. Atau pada artikel lama juga pun bisa. Setelah anda copy kodenya silahkan pastekan pada new post di area HTML jangan di area Compose yah?, silahkan copy kodenya berikut saya tuturkan di bawah paragraf ini :

Pemberitahuan :
Silahkan buka kode dibawah nie, dengan mengklik "BUKA KODE". Jangan takut kodenya banyak itu saya sertakan tulisan artikel dan gambar postingan juga tag tag tertentu pada bagian masing masing paragraf nya. Maksudnya supaya anda lebih memahami kode Mana tulisan artikelnya dan mana pula kode HTML Dan CSS. Pada kode dibawah ini. Silahkan copy kodenya dan pastekan pada area new post pada kolom HTML Seperti saya terangkan pada paragraf atas :

<!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">


<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>
Blog Karrysta 2
</h1>

<span class="date">
<a href="http://karristaent.blogspot.com">www.karristaent.blogspot.com</a> </span>
<span class="date">
22/11/2014, Indonesia </span>
<div class="hero">
</div>
<div class="columns">
<div class="column-1">
<div class="story">
<span class="year">22-11-2014 </span>
<h2>
"Miss Karrysta,"</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8-CDDnL0eRD1CmaxTctTaFsLMiD4kO2PJw8jgwi-EsRQrwum8xfUKvNfbnMi3VtoybJR2wZUyb5Wiip-znv08L8L69pyiKvTuywwF10Yp96NDWheNul05UOCbtQIcNnWe-dUELtkhV4/s1600/No-inmissKarrysta.jpg" title="Miss Karrysta"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ante in leo sollicitudin, at aliquet leo sollicitudin. Cras dictum sodales cursus. Cras non ligula quis justo cursus faucibus. Sed at ullamcorper nibh, ac aliquet neque. Mauris ultrices mauris vel consectetur consectetur. Vestibulum a velit eget erat iaculis mattis. Pellentesque sit amet facilisis felis. Maecenas fringilla pellentesque suscipit. Suspendisse ullamcorper ac erat in sagittis. Nunc vehicula, risus in commodo malesuada, arcu urna imperdiet magna, ac hendrerit ex risus non dolor..</p>
</div>
<div class="story">
<span class="year">Karrysta 2014</span>
<h2>
Karrysta</h2>
<img>
<p>
Morbi id vestibulum purus. Praesent vitae tempus metus, vitae luctus sapien. Duis blandit neque est, quis vulputate ipsum tempor sit amet. Donec metus purus, suscipit sit amet elit a, pretium varius nisl.</p>
</div>
</div>
<div class="column-2">
<div class="hero-story">
<hgroup>
<span class="year">2014</span>
<h2>
Halaman Posting Seperti Koran atau Majalah</h2>
<h3>
22 November</h3>
</hgroup>

<p>
<b><a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh risus, condimentum blandit lacus ac, vulputate congue tellus. Sed malesuada felis dictum magna euismod faucibus. Pellentesque euismod odio aliquam ipsum dictum, eu condimentum felis hendrerit. Aenean vestibulum eleifend massa quis mollis. In congue nibh ut odio porttitor, sit amet suscipit mi dignissim. Donec ut velit interdum velit mattis iaculis. Lorem ipsum dolor sit amet.</p>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTjSJQ0-6jL6ARcrHDydT566K-fFdMhR_AsNcQulqnB6HfaejXKb24sxNT4_xVyZk5kepDMUnt3Ae1QjIeEWY1cWp55WXKKn1PkCgguFWogxp2fBUPQzeK1B5jqlCona2mXV48UQSp_w/s1600/@@1.jpg" title="Miss Karrysta"/>
<p>
<b><a href="http://karristaent.blogspot.com/2014/11/rank-alexa-anjlok-terjun-bebas.html" title="Rank Alexa Anjlok Terjun Bebas ">Karrsta</a></b> Morbi iaculis, purus nec rutrum vehicula, justo ante egestas libero, quis vestibulum leo dolor vitae libero. In ultricies erat lacus, at bibendum ex euismod eu. Pellentesque ut varius tellus. Etiam dapibus, libero sit amet imperdiet vulputate, augue tortor dictum ante, quis eleifend nisi augue id ipsum. Duis dignissim nec lacus vel eleifend. Nulla aliquam leo at ligula porttitor facilisis. Aliquam aliquet est ut pharetra commodo. Praesent volutpat vestibulum tempus. Donec efficitur justo quis convallis commodo. Nam id enim sem. Praesent viverra sagittis ipsum id pretium</p>
</div>
</div>

<div class="column-3">
<div class="story">
<span class="year"></span>
<h2>
Neng Karrysta Tersayang</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLECkJu4YbUcO8_iV9bz8HhQwVn5OwqIimFUNAoCTdaHaj18ErR37ub6TKjWyJXPsG1bLinCTN3A_WA2QHBXupbxnO-dCGmk8c8ArjnAvt5PGMUQbKA0f75Mk1dpAvm2JK3C0MKANjuh8/s1600/karrysta-cyg.jpg" title="Karrysta Tersayang"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper lorem aliquam lorem rhoncus aliquet. Nunc rhoncus purus risus, hendrerit hendrerit nibh tristique sit amet. Donec suscipit felis quis risus mollis, sed lacinia enim feugiat. Donec tincidunt massa eros, ut venenatis libero bibendum ut. Mauris fringilla lectus justo, eget cursus risus maximus at.</p>
</div>
<div class="story">
<span class="year">Saud S Karrysta 2014</span>
<h2>
Musisi Band/Dangdut Jawa Barat</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepcCTKJRVCtyTt-D5tYjfMnSA3gtFWllQsOOLT76-mVI8lD4zyIn4QYJj-JGYy6hZlg2SDBnIFFkIDVKZj4XSx7oDwH1fyMy6Cibm-BLkD0uvVqa1sx36ilwcJNbqQDReRjUXoA0Pf_Y/s1600/@.Karrysta1.jpg" title="Administer : Saud Karrysta"/>
<p>
In venenatis, ex sed imperdiet dictum, quam nunc molestie libero, ut faucibus velit mauris vel metus. Donec dictum risus vel nulla rhoncus pretium. Nam a lacus euismod, egestas lorem viverra.</p>
</div>
</div>
</div>
<footer class="date">
Administer by: <a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a> | Support by : <a href="http://karristabloggerdemo.blogspot.com" title="Karrysta Demo2">Saud S Karrysta</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:500px;
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;

}

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:40px;
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 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:1200px;
padding:0px 12px;
}

.columns .column-1 {
width:115px;
border-right:solid 1px #CCC;
}
.columns .column-2 {
width:215px;
border-right:solid 1px #CCC;
}
.columns .column-3 {
width:115px;
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>
</body></html>

Keterangan Kode diatas :

Yang berwarna PURPLE Itu contoh tulisan artikel, silahkan anda ganti dengan tulisan artikel anda.
Yang berwarna MERAH Itu contoh link gambar postingan silahkan ganti dengan link gambar anda.
Yang berwarna BIRU itu link url blog silahkan ganti dengan link dengan arahan link url blog anda.
Yang berwarna LIME itu kode HTML Jadi jangan anda hapus itu pelengkap pada metode ini.

Dan pada kode yang berwarna ORANGE itu kode CCS Silahkan sesuaikan lebar dan tingginya dengan merubah width atau height pada kode CSS dan HTML Diatas dan ganti juga tanggal dan sub judul artikel pada masing masing tag judul pada contoh kode diatas itu. Silahkan anda berkreasi sendiri untuk mendesain halaman postingan blog anda. Tetapi harus sesuai dengan tampilan pada masing masing template blog nya.

Untuk melihat tampilan kode diatas silahkan anda buka halaman "DEMO" nya berikut dibawah ini : Silahkan anda klik tampilan page post tampilan koran/majalah : DEMO

Demikianlah artikel yang bisa saya hadirkan pada kesempatan ini. Semoga bisa bermanfaat buat sobat yang membutuhkanya. Mohon maaf jika seluruh artikel ini ada kesalahan atupun kekeliruan. Jika ada kesulitan silahkan diskusikan lewat kolom komentar. Semoga anda lebih memahami artian dari post yang saya publikasikan ini. Tidak ada kata yang lebih indah kecuali hanya rasa dan ucapan terima kasih yang tak terhingga atas kedatangan dan kunjungan anda yang berharga ini. salam santun dan ceria selalu buat seluruh sohib rekan dan Sahabat blogging ku semua. Tetap semangat dan berexpresi *salam hangat selalu buat seluruh sahabat blogging dan,, Happy Blogging....

0 Response to "Trik Membuat Halaman Posting Seperti Tampilan Koran"

Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
Apabila artikel yang berjudul "Trik Membuat Halaman Posting Seperti Tampilan Koran" ini bermanfaat, share ke jejaring sosial.

Konversi Kode