Tiada kabar yang paling membahagiakan saya kecuali mendengar dan melihat semua Sahabat blogging saya baik baik selalu sehat. Salam santun buat semua yang sudah menyempatkan diri untuk bersilaturrahim ke blog saya ini. Setelah kemarin saya Mereview blog. 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.
Baca juga artikel lainya : Semua Tentang Trik Blogger
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 :
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">
<!--
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>
Blog Karrysta 2
</h1>
<!--
LESSON - Have ago at creating your own on this day page with different dates, events and images.
-->
<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/AVvXsEjAMX7tKRQMe-tJMHxRFBgY2Ol8A6n_0yEiY80tziDItE0fVCFWIImAgSaBrPGSxv_4tEeAt6P1zRl5eYc-osg06MTFw1H4AtxrMMyIng67yLxF9Tsx1a8SYr46-6-dlsoFfblkfSHiUZo/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/AVvXsEjQE7nBbY-eTtSCsod1PjjFZ9dDpQ5nl48wg26SQl3EmjgJJjngPUCncNm86CAtLecromR-7y02wqrv-hnmqLQWsdJCkpFIQ-Ppuclorj_UcIqt9e_vUU1pelKSnMleIe3UxOpuZDR_nas/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/AVvXsEj7uRLTbApYwHAjqE2_mXTI6iK07ApbSmAA0oSBfm2-x487T-nkuSv1H8Qm_Pxbl-9y76rYJl2DxCFqsxli3aFceC8xQx8m60Tjy2yeSv-4VGN6nFLRvhse2QEit2PiGP76AfLcmQaulbw/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/AVvXsEjl7dmYuCf06d_qFqJHm5kLpYQrITHgKxPWU-5qbUnzJZcBqU6hcp67ohTWvCJON2DezW4MP5ge8n_kFYirfRHkLcX6hgW5cECG2EChmVJ1ZKz9h0lUOwh_iXHRFJRGdvsRNbm_-6BBM7w/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.
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....
