Info Terbaru: CSS

Home / CSS

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Rabu, 15 Februari 2017

Cara Merubah/Mengedit Menu Navigasi di Template Blog Hasil Download

Februari 15, 2017 Add Comment

Cara Merubah/Mengedit Menu Navigasi di Template Blog Hasil Download-Kali ini infobagus212 akan berbagi tutorial mengenai Cara Merubah/Mengedit Menu Navigasi di Template Blog Hasil Download.
Setelah Kita belajar mengenai Panduan mengedit Blog lengkap untuk pemula, kita akan beralih lagi ke materi lanjutannya, yaitu pengeditan Navigasi Template Template.
Jika anda belum membacanya : Panduan lengkap Blogger pemula

Jika anda termasuk Blogger pemula seperti saya, pasti anda akan asing dari yang namanya aktivitas coding, hal ini sangat berkaitan dengan teknik dasar pembuatan template. Membuat Template biasanya di lakukan oleh orang orang yang sudah faham mengenai dunia coding, di antaranya seperti HTML, JavaScript, CSS dan lain-lain. makadari itu keterbatasan kita (orang awam) ketika tidak bisa membuat template sendiri adalah dengan cara mencari tempalte-template gratis yang sudah siap pakai. Maka dari itu mungkin saat anda menggunakan template hasil download ada beberapa hal yang anda bingung untuk mengeditnya, terutama navigasi, karena apa? Karena navigasi merupakan hal yang paling utama untuk kita ubah sesuai dengan tema blog kita.

Seorang pembuat template, umumnya merancang menu navigasi dasar dengan format menu1, menu2, menu3, dst..
dan beberapa sub menu, dan terkadang hal itu tidak sesuai dengan template yang anda inginkan.
Tapi jika anda belum bisa mengganti template, silakan anda pelajari di Cara Mengganti Template Blogspot dengan Template Sendiri

Tapi anda tidak perlu kawatir, jika anda merupakan salah satu dari blogger yang kurang faham dalam pengeditan template. dengan senang hati, saya akan memberikan tutorial bergambar cara lengkap mengedit template, terutama dalam menu navigasi.
Baca juga Cara (Lengakap) Merubah dan Memodifikasi Template Blogspot Agar Lebih Menarik

Cara Merubah/Mengedit Menu Navigasi di Template Blog.

Oke, langkah pertama adalah masuklah ke Blogger anda.
Pada menu Dashboard pilih Template Lalu kilk Edit HTML

Lalu lihat dulu navigasi template pada Blog anda, di Template (saya) Tertulis beberapa navigasi yang mungkin akan erbeda dengan miliki anda, nah untuk mudahnya, saya akan mengganti kata ANIMASI BLOG di navigasi template milik (saya) "anda bisa melihatnya di Template Blog ini"

Selanjtnya, untuk memudahakan pencaria, anda bisa menggunakan CTRL + F setelah muncul kotak Search seperti gambar di bawah, tulis menu navigasi yang akan anda ganti, jangan lupa tekan enter.

Setelah ketemu silakan ganti sesuai dengan label yang anda inginkan, Lihat gambar di bawah,
Untuk Nomer 1 : Silakan ganti dengan tulisan label sesuai keinginan anda
Untuk Nomer 2 : Silakan ganti dengan dengan URL label yang sesuai dengan yang nomer satu.

Jangan lupa tekan Simpan Template

Gimana sob? Mudah bukan Cara Merubah/Mengedit Menu Navigasi di Template Blog Hasil Download, Jika masih kebingungan silakan tinggalkan komentar anda di bawah. Semoga bermanfaat.
Baca juga :Download Responsive Blogger Template 2017

Rabu, 11 Januari 2017

Cara Terbaru Memasang Kolom Komentar Facebook Keren di Blog

Blogger CSS TIPS

Januari 11, 2017 Add Comment

Bagaimana cara mengubah/memasang kolom komentar facebook keren di blog ?
Untuk mengubah kotak kolom komentar pada blogger bukanlah hal yang sulit, kita cukup mencari kode HTML dan melakukan place script kode yang akan saya sertakan di bawah.
Pling tidak, tampilanya seperti gambar di bawah ini :

Lalu apa kelebihan dari komentar Facebook?

Kita bisa mengaitkan komentar dengan fanspage blog kita
Adanya peluang share link akun yang kita kehendaki
Fast, simpel dan mudah pastinya

Cara memasang kolom komentar Facebook di blog

Masuk ke Blogger
Pada menu dashboard masuk ke Template lalu pilih Edit HTML
Cari kode <div class='comments' id='comments'>
Place Script di bawah ini tepat di bawah <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Terakhir klik Save Template dan lihat hasilnya.

Keterangan :

Ganti IDFANPAGEFACEBOOKS dengan kode/no/id fanspage milik anda,

Dengan Cara

Masuk ke halaman Facebook
Pengaturan
Info Halaman

Jika anda tidak punya halaman Facebbok, anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOKS.

Size kolom komentar bisa anda atur dengan cara find kode (ctrl+f) ketik (width='550') dan ubah ukuran sesuai yang anda inginkan.

Jika anda menemukan kode <div class='comments' id='comments'> ada 2, maka pilih salah satu saja.

Mudah bukan Cara Terbaru Memasang Kolom Komentar Facebook Keren di Blog. semoga artikel ini memberikan solusi untuk anda. Selamat mencoba!

Panduan Lengkap Memasang Syintax Highlighter (kotak script) CSS di blog

Blogger CSS TIPS

Januari 11, 2017 Add Comment

Kumpulan Syintax Highlighter (kotak script) CSS di blog- Syintax Highlighter adalah sebuah place script yang berbentuk kotak area untuk memudahkan para pembaca blog untuk menggolongkan kode-kode terentu seperti JavaScript, CSS, HTML dll.
Contoh:

Caranya cukup mudah,

pertama-taman buka Blogger
Pada deshboard pilih menu Template
Silahkan copy script di bawah ini dan taruh tepat di atas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Selanjutnya copy script di bawah ini dan letakan di atas kode ]]></b:skin>

 /*PRE*/ pre,i[rel="pre"] { padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:13px; color:#839496; font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; line-height:1.4em; position:relative; white-space: pre; word-wrap: normal; white-space:pre; overflow:auto } pre.line-number { background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RTBCsDmrbzO4YaCFWh6NbqPlp0RwsoJ9FiETNNOY3CO3kcCzTmzNo3yT1_XuLf0v6hE1nunbFgF_MOfiBnsso5Fsd5F9eAgPQ73NPUiSoBq8igZH5E4hV30LFS2o7ANmtVmPQFBgLLU/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none; } pre.line-number:after{ content:""; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute; } pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before { content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Oswald,Arial,Sans-serif; font-size:14px; text-transform:uppercase; background-color:#41749f; color:white } pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} code { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color: #d14; } #comments code { color:#bbbb6d; } #comments pre { margin-bottom:-15px; } pre code { padding:0 !important; color: #a3a49a; background: none !important; border:none !important; display:block; } pre mark {background-color:#1a5752;color:#a3a483} pre .line-number { float:left; margin:0 1em 0 -1em; color:#61686d; background-color:#39424e; text-align:right; min-width:2.5em; padding-right:4px; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #7195a3; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function { color: #569dcf; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #aa985a; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo { color: #509a55; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #073642; }

Cara menggunaan

Untuk dapat di tampilakn di postingan, maka anda harus letakkan kode di bawah ini (copy),

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Lalu klik compose pada menu page work editing konten Paste kan kode di atas
Untuk melihat hasilnya klik pertinjau
Trakhir Save

Senin, 09 Januari 2017

Tutorial Cara Dasar Membuat Layout Desain WEB yang Responsive

Blogger CSS Membuat Website TIPS

Januari 09, 2017 Add Comment

Tutotrial dasar membuat desain web yang responsive__Apa itu responsive? Responsive adalah konsep Template yang bisa menyseuaikan view sesuai dengan lebar/ukuran layar penampungnya bisa itu berupa PC, tablet maupun Ponsel. Dan pada kesempatan kali ini saya akan berbagi tutorial singkat mengenai cara mendesain/melayout Blog/website yang responsive.

Buat Scrpit HTML Terlebih Dahulu
Yang pertama kita lakukan adalah membuat Script HTML nya, yang terdiri dari 3 Struktur kolom pada class (.MAIN) yang akan kita bagi lagi menjadi tiga class (.LEFT), (.MIDDLE) dan (.RIGHT). Pada setiap class nanti akan kita beri properti float agar membentuk seperti kolom.

Class Header
Class Main
Class Footer

<div class="container">
   <div class="header">Untuk bagian header...</div>
   <div class="main">
       <div class="left">Untuk kolom bagian Kiri...</div>
       <div class="middle">Untuk kolom bagian tengah...</div>
       <div class="right">Untuk kolom bagian kanan...</div>
   </div>
   <div class="footer">Untuk bagian footer...</div>
</div>

Jangan lupa untuk menyisipkan meta Viewport di bawah ini pada <head>

Mengatur Layout Desain
Setelah kita selesai membuat setruktur HTML, tahap berikutnya adalah mendesain layout dengan kode CSS agar membentuk layout yang terdiri dari 3 class, silahkan rangkai Script CSS seperti di bawah ini

.container{
    max-width: 1080px;
    margin: 20px auto;
    background: #fff;
    overflow: hidden;
    padding: 10px;
}

.header{
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
}

/* Main */
    .left{
        width: 250px;
        border: 1px solid #dedede;
        background: #e5e5e5;
        padding: 10px;
        margin: 10px;
        float: left;
    }

    .middle{
        width: 500px;
        border: 1px solid #dedede;
        padding: 10px;
        margin: 10px;
        float: left;
    }
        .middle img{
            max-width: 100%;
            height: auto;
        }

    .right{
        width: 250px;
        border: 1px solid #dedede;
        padding: 10px;
        margin: 10px;
        float: left;
    }

.footer{
    clear: both;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
}

Mengatur Gambar Agar Responsive
Agar gambar tidak berubah-ubah, gunakan Script di bawah ini

.middle img{
max-width: 100%;
height: auto;
}

Setting 2 Kolom ketika di Tablet

Agar ukuran layout menjadi responsive masukan Script CSS di bawah, selain untuk merubah kolom, kode di bawah juga berfungsi untuk menyesuaikan ukuran font, warna font dan merubah warna kolom.

@media screen and (max-width: 1080px) {

    .container {
        width: 100%;
    }
    .left {
        width: 25%;
        background: #fff000;
    }
    .middle {
        width: 68%;
        float: right;
    }

    .right {
        cletuar: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }
}

Background bisa anda sesuaikan dengan kode warna yang anda inginkan dengan mengganti Script yang sudah saya beri warna merah.

Dan tambahan lagi agar responsive menjadi satu kolom ketika di ponsel tambahkan Script CSS di bawah ini:

@media screen and (max-width: 780px) {

   .header,
   .footer{
       text-align: center;
   }
   .left {
       width: auto;
       float: none;
   }

   .middle {
       width: auto;
       float: none;
   }

   .right {
       width: auto;
       float: none;
   }

}

Pada kode CSS di atas semua lebar kolom telah di atur menjadi "auto" yang artinya sudah bisa menyesuaikan dengan lebar layar yang menampungnya.

Mungkin Itu dulu pembahasan dasar membuat layout desain web yang responsive, untuk elemen-elemen pengembangnya akan saya bahas pada tutorial berikutnya.

Info Terbaru