Blogger CSS

Selasa, 05 Juli 2016

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Daftar isi atau sitemap merupakan halaman wajib bagi setiap blogger untuk di pasang di blog nya . karena fungsinya untuk memudahkan pengunjung untuk mencari daftar artikel yang sudah ada di blog kita. Banyak di luar sana Tutorial Cara Membuat Daftar Isi di Blogger dengan berbagai cara dan berbagai tampilan . ada yang responsive ada juga yang tidak. Pada tutorial kali ini saya menaruh halaman daftar isi atau sitemapnya di bagian laman tapi gak masalah kalau sobat menaruhnya bukan di laman blog sobat semisal di bagian post . oke tanpa banyak basa basi lagi berikut Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label :

Pastikan sobat sudah login di akun blogger sobat lalu klik laman

Silahkan sobat buat laman baru

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Masukan judul laman blog sobat , kemudian pilih bagian HTML ( Note HTML ya bukan Compose ) dan pastekan kode di bawah ini di bagian HTML . Jika sudah silahkan klik Publikasikan


<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">

.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<br />


<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>



<script>
var toc_config = {
    url: 'http://blogger-css.blogspot.co.id/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://rawgit.com/bloggercss/bcss/master/sitemap.js"></script>
</div>

Note : Ganti https://blogger-css.blogspot.co.id/ dengan url blog sobat

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Daftar isi atau sitemap berhasil di buat di laman . Silahkan klik Lihat untuk melihat hasil dari Daftar isi yang sobat buat tadi.

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Jika sudah benar maka tampilan daftar isi sobat akan tampak seperti ini

Cara Membuat Daftar Isi Blogger Responsive Berdasarkan Label

Result

Jumat, 01 Juli 2016

CSS HTML Tutorial

Cara Membuat Tampilan Error Page Responsive Di Blogger

Unknown 22.46 Comment

Tampilan Error page sering kira jumpai di mana pun saat kita mengakses sebuah website. kita melihat halaman tersebut di karenakan artikel atau konten yang kita akses sedang tidak tersedia . error page sangatlah penting bagi setiap blog atapun sebuah situs web karena jika ada halaman kita yang telah dihapus atau memang tidak ada , pengunjung akan mudah mengetahuinya melalui halaman error page ini. berbagai macam tampilan error page di luar sana yang lebih keren. Namun yang akan saya bagikan kali ini tidak kalah kerennya karena ini merupakan Error page yang di buat oleh Arline Design .baiklah untuk mempersingkat waktu langsung saja simak Tutorial Cara Membuat Tampilan Error Page Responsive Di Blogger di bawah ini :

Pastikan anda login ddi akun Blogger anda dan klik template pada dashboard blogger.

Pilih edit HTML

Cara Membuat Tampilan Error Page Responsive Di Blogger

Kemudian cari kode <body>

Masukan kode di bawah ini tepat di bawah kode <body>


<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Cara Membuat Tampilan Error Page Responsive Di Blogger

Lalu Cari kode </body>

Masukan kode di bawah ini tepat di atas kode </body>


</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='container404'>
  <div class='box404'>
    <h2>404</h2>
    <h3>The page could not be found</h3>
    <hr/>
    <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
    <p>Please try the following :</p>
    <ul>
      <li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
      <li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong> to return to our main page.</li>
      <li>If you were linked to this page, contact the administrator and make them aware of this issue.</li>
    </ul>
  </div>
<div class='copyright404'>
  &#169; 2016 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>
</b:if>

Cara Membuat Tampilan Error Page Responsive Di Blogger

Jangan lupa untuk menambahkan kode CSS nya , letakan kode di bawah ini tepat di atas </style> atau ]]></b:skin>


body{background:#fa4949;color:#fff;}
.container404{margin:8% auto 0 auto;max-width:768px;min-width:200px;line-height:normal;font-size:16px;backface-visibility:hidden;transition:all .3s;}
.box404 hr{background:transparent;display:block;border:none;border-bottom:4px solid rgba(255,255,255,.3)}
.box404{padding:20px;font-size:110%;color:#fff;border-radius:5px 5px 0 0}
.box404 h2,.box404 h3{color:#fff;display:block;font-weight:700;font-size:2.6rem;text-transform:uppercase}
.box404 h2{position:absolute;font-size:20rem;color:rgba(255,255,255,.3);transform:rotate(-45deg);right:3%;bottom:8%}
.box404 p{display:block;margin:10px 0}
.box404 ul li{margin:0 0 8px 20px;list-style:initial;list-style-type:square}
.box404 ul li a{color:#e5ffaf;}.box404 ul li a:hover{background:rgba(0,0,0,0.1);color:#e5ffaf;text-decoration:underline}
.copyright404{display:block;margin:auto;font-weight:normal;max-width:768px;min-width:200px;padding:0 20px}
.copyright404 a,.copyright404 a:hover{color:#fff}
@media screen and (max-width:1024px) {
.box404 h2{font-size:10rem;}
.container404{margin:4% auto 0 auto;}}
@media screen and (max-width:640px) {
.box404 h3{font-size:1.6rem;}
.box404 h2{display:none}}

Cara Membuat Tampilan Error Page Responsive Di Blogger

Terakhir Simpan template , Jika berhasil maka nanti tampilannya akan seperti ini

Cara Membuat Tampilan Error Page Responsive Di Blogger

Result

Selasa, 28 Juni 2016

Javascript Tutorial Widget

Widget Recent Post atau Artikel Terbaru Responsive

Unknown 14.51 Comment

Widget mrupakan sebuah elemen yang ada di dalam sebuah situs . widget bisa berupa CSS,HTML maupun javascript . di blogger sobat dapat mengakses widget itu sendiri di bagian tata letak.jika sebelumnya sobat sudah memiliki blog maka tentunya sobat ingin blog nya tampak cantik dan tersedia beberapa elemen yang memudahkan pengunjung dalam menjelajah blog sobat.disini saya akan membagikan sebuah widget Recent Post , dimana di dalam widget itu sendiri terdapat daftar artikel terbaru dari blog sobat.Widget Recent post ini merupakan buatan dari Arlina Design yang kemudian saya jadikan tutorial di blog ini agar bagi kalian yang kebingungan bagaimana sih cara membuat widget artikel terbaru atau Recent Post di blogger tidak kebinguungan lagi karena adanya tutorial ini. Oke langsung saja tutorial memasnag Widget Recent Post atau Artikel Terbaru Responsive :

Pastikan sobat sudah login akun google terlbih dahulu kemudian klik tata letak

kemudian klik tambahkan gadget dimana posisi yang kalian inginkan ( misalkan sobat ingin memasang di sidebar maka klik tambahkan gadget pada bagian sidebar di tata letak )

maka akan muncul jendela baru , isilah data data seperti judul widget . untuk konten isi dengan Script di bawah ini :


<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;margin:0;padding:10px 0;position:relative;width:100%}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:62px;height:62px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
.recent_posts_arlina strong {font-size:13px;}
ul.recent_posts_arlina li a{color:#000;font-weight:700;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#138be6}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://rawgit.com/bloggercss/bcss/master/recentpost'></script>
<script style='text/javascript'>
var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

Kemudian klik Simpan . Maka lihat lah di blog sobat jika berhasil sesuai prosedur maka akan tampil seperti ini

Sekian Tutorial Cara Membuat Widget Recent Post atau Artikel Terbaru Responsive . Kurang lebih nya saya mohon maaf. Apabila ada perntayaan silahkan komentar di bawah ini.
Request Tutorial ?
Email us : atbcss@gmail.com
Dengan subject Request Tutorial

#SalamBlogger

Tutorial

Cara Membuat Blog Gratis Dengan Mudah

Unknown 09.49 Comment

Perkembangan Era teknologi digital makin nampak dengan tumbuhnya berbagai macam paltform media sosial seperti facebook , twitter , ask.fm , blogger , dan lainnya . keinginan akan memnyebar luaskan tentang diri dia sendiri agar lebih di kenal orang. dengan media sosial inilah jalan satu-satunya untuk memperkenalkan diri pada luasnya dunia maya ( Cyber Space ) . tidak hanya melalui sosial media melalui sebuah situs atauu blog pun kita bisa membuat sebuah perkenalan diri sehigga mudah di akses oleh siapa saja.selain sebagai media memperkenalkan diri blog juga bisa di gunakan sebagai sarana berbagi , tukar informasi , maupun tanya jawab dari form komentar yang tersedia di setiap blog.pada kesempatan kali ini saya akan membagikan tutorial Cara membuat Blog Gratis Dengan Mudah , dan saya disini memberikan tutorialnya cara daftar blog di blogger . karena menurut saya blogger adalah paltform blog terbaik dan mudah di gunakan serta gratis.

Apa itu Blog ?

Blog merupakan kepanjangan dari web log ang merupakan sebuah aplikasi web yang berupa tulisan-tulisan pada sebuah halaman web dan dapat diakses oleh siapapun.Blog sendiri mulai populer sejak munculnya Blogger oleh pyra labs namun pada akhir 2002 Blogger pindah tangan dan di akusisi oleh Google .

Kegunaan Blog ?

seperti yang dikutip oleh Wikipedia Blog mempunyai fungsi yang sangat beragam, mulai dari sebuah catatan harian, media publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan perusahaan-perusahaan. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa penulis. Banyak juga blog yang memiliki fasilitas interaksi dengan para pengunjungnya, seperti menggunakan buku tamu dan kolom komentar yang dapat memperkenankan pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga blog yang bersifat sebaliknya (non-interaktif).

Cara Daftar Blog ?

Selain mudah di gunakan dan gratis cara daftarnya pun juga bisa di bilang demikian.hanya memrlukan kurang lebih 5 step yg harus di lalui anda sudah memiliki sebuah blog yang siap untuk di sebar luaskan.hal pertama yang harus anda perhatikan sebelum membuat blog ialah :

Mempunyai akun Google

sejak akhir tahun 2002 Blogger sudah di akusisikan ke Google tentunya kita harus memiliki akun google terlebih dahulu agar bisa mengakses dan menggunakan produk-produk dari Google . Namun Jika sobat belum memiliki akun Google / Email Google sobat bisa mengunjungi halaman tersebut " Cara Membuat Email Gratis Dengan Mudah " .

Tentukan Judul dan URL blog

Judul yang unik sangatlah penting untuk menark perhatian para pengunjung tak lupa pula URL yang berkaitan dengan judul maupun tem blog juga tak kalah penting karena akan mempengarhi sistem pengurutan di mesin pencari.

Niche / Tema blog

Niche atau tema dalam suatu blog juga sangat penting agar pengunjung sobat tertarget berdasarkan tpik tertentu . tersedia berbagai macam niche yang bisa sobat gunakan seperti Asuransi , Otomotif , Tutorial , Bisnis , kesehatan , berita dan lainnya.

Jika ketiga tersebut sudah di tentukan atau terpenuhi maka mulailah kita untuk membuat sebuah blog baru untuk sobat :) . Caranya :

Pada browser buka link Blogger.com dan silahkan sobat login dengan akun google sobat