Cara Membuat Post Layout Design Grid Di Blogger

Cara Membuat Postingan Layout Design Grid Di Blog - Hello Kali Ini Saya Akan Memberikan Tutorial Atau Cara Untuk Anda Yaitu Mengubah Design Layout Post Anda Menjadi Design Grid Atau Design Kotak - Kotak Dan Pastinya Keren Untuk Blog Anda, Oke Langsung Saya Tutorialnya Untuk Anda.

Cara Memasang Post Layout Design Grid Di Blogger

Blogger === > Template === > Edit Template
Kamu Cari Kode </head> Dulu
Kemudian Kamu Copy Script Kode Yang Di Bawah Ini
Dan Kamu Pastekan Tepat Di Atas Kode </head>

<script type = 'text / javascript'>
posts_no_thumb_sum = 100;
Posts_thumb_sum = 100;
</ script>
<script type = 'text / javascript'>
// <! [CDATA [
fungsi removeHtmlTag (a, b) {if (a.indexOf ("<")! = - 1) {untuk (var c = A.split ("<"), d = 0; d <c.length; d ++) c [d] .indexOf (">")! = - 1 && (c [d] = c [d] .substring (c [D] .indexOf (">") + 1, c [d] .length)); a = c.join ("")} untuk (b = b <a.length-1? B: a.length- 2; ""! = A.charAt (b-1) && a.indexOf ("", b)! = - 1;) b ++; return a = a.substring (0, b-1), a + "... "} Function createSummaryAndThumb (a, b, c) {var d = document.getElementById (a), e =" ", f = d.getElementsByTagName (" img "), g = posts_no_thumb_sum; f.length> = 1? E = '<div class = "

Selanjutnya Kamu Cari Kode  <data: post.body /> Dan Kamu Hapus
Kemudian Kamu Dengan Script Yang Di Bawah Ini

<B: if cond = 'data: blog.pageType! = & Quot; static_page & quot;'>
    <b: if cond = 'data: blog.pageType! = & Quot; item & quot;'>
        <div expr: id = '& quot; summary & quot ; + Data: post.id '>
            <data: post.body />
        </ div>
        <script type =' teks / javascript '> createSummaryAndThumb (& quot; summary <data: post.id /> & quot ;, & quot; <data : Post.url /> & quot;); </ script>
        <b: if cond = 'data: post.allowComments'>
            <a class = 'komentar-bubble' expr: href = 'data: post.addCommentUrl' expr: Onclick = 'data: post.addCommentOnclick'>
                <data: post.numComments />

Selanjutnya Kamu Cari Kode Cssnya Yaitu  ]]></b:skin> Atau Juga Bisa </style>
Tekan Ctrl F/G Untuk Mencarinya
Kamu Copy Script Yang Di Bawah Ini
Dan Kamu Pastekan Tepat Di Atas ]]></b:skin> Atau Juga Bisa </style>

<B: if cond = 'data: blog.pageType! = & Quot; static_page & quot;'>
<b: if cond = 'data: blog.pageType! = & Quot; item & quot;'>
<style type = "text / css">
# Blog-pager {clear: both} .post {height: auto; width: 31%; display: inline-block; text-decoration: none; float: left; margin: 0 1.1% 2%; padding: 0! Important ;} H3.post-title a {font: 95% & # 39; Open Sans Condensed & # 39;, sans-serif; text-transform: huruf besar; warna: #fff; padding: 0; text-shadow: 2px 2px 3px # 222} h3.post-title {height: 22px; text-align: center; position: absolute; top: 1%; width: 100%; z-index: 101; overflow: hidden; margin: 0! Important; padding : 10px 0} .date-header {visibility: hidden; height: 0! Important; width: 0! Important; margin: 0! Important; padding: 0! Important;}. Posts-thumb {width: 100%; height: 190px; overflow: hidden; position: relative;}.Post-body {position: relative; overflow: hidden} .post-body a {text-decoration: none;}. Posting-thumb img {posisi: absolute; left: -100%; right: -100%; top: - 100%; bottom: -100%; margin: auto; width: auto; max-width: 340px; height: auto; padding: 0; border: none; outline: none;}. Post-summary-text {kursor: pointer ; Background-color: rgba (44,77,163,0,8); warna: #fff; font: 108% & # 39; Open Sans Condensed & # 39;, sans-serif; overflow: hidden; padding: 45px 10px 0; left: 0; posisi: absolute; text-align: center; text-shadow: 1px 1px 0 rgba (0,0,0,0,1); top: 0; opacity: 0; height: 100%; transition: all 300ms easy-out Post-summary-text: hover {opacity: 1; z-index: 10;} a.comment-bubble {color: #fff; text-decoration: none; font: 104% & # 39; Pacifico & # 39;, kursif: 100%; text-align: center; position: absolute; top: 160px; left: 0; text-shadow: 1px 2px 1px # 333; z-index: 11;} a.comment-bubble : Sebelum {content: & quot;Komentar: & quot;}. Post-header, .post-footer {display: none}
</ style> </ b: if> </ b: if>
<link href = 'https: //fonts.googleapis.com/ Css? Family = Buka + Sans + kental: 300 'rel =' stylesheet 'type =' text / css '/>
<link href =' https: //fonts.googleapis.com/css? Family = Pacifico 'rel =' Stylesheet 'type =' text / css '/>

Dan Kamu Simpan Template

DEMO POST LAYOUT DESIGN GRID

Oke Sekian Dari Saya Untuk Anda Tentang Cara Membuat Post Layout Design Grid Di Blogger , Sekian Dan Terima Kasih.

script code by helplogger.blogspot.com


EmoticonEmoticon