Download Pemula Free Fast Responsive Blogger Template Rededign

Menarik Lainnya

 

Pada artikel kali ini sungguh tidak biasa, karena biasanya saya share template milik orang lain. Nah, pada kesempatan kali ini saya akan share yang saya build sendiri dengan kemampuan yang saya bisa dan semaksimal mungkin.

Advertisement

Soal design sesuai dengan apa yang saya inginkan, namun saya buatnya dengan sangat simple dan sangat ennak dilihat ketika diakses dari versi selular. Iya template ini sudah saya buat sedemikian rupa agar bisa diakses dari perangkat manapun dengan kata lain template ini mempunyai design yang Responsive.

Blogger Template Style

Name : Pemula Fast Free Responsive Blogger Template
Version : 1.0
Publish Date : 28 Februari 2017
Intructions : Cara Memasang Template Blogger
Designer : Iwan Efendi
URL : http://iwanberbagi.com
Published : http://situstemplate.com

Fitur Template

- Responsive Design
- Valid Structured Data
- Fast Loading
- Share Button Count
- On Scroll Disqus Comments
- Related Post With Thumbnail
- Font Roboto Async
- Responsive Vidio Youtube
- Facebook Emoticon Comments & Posting
- Custom Error Page
- Pembatasan Tampilan Label
- Custom Popular Post
- Custom Widget Follow By Email
- Widget Recent Post
- Kotak Note

Dasar template ini adalah dari template yang dibagikan Kang Ismet jika kamu tertarik membacanya kamu bisa mengaksesnya disini. Walaupun tidak sepenuhnya template ini saya buat, karena menggunakan dasar template dari kang ismet, namun kedepannya akan saya optimasi hingga bisa saya temukan tampilan terbaiknya dan melatih coding saya juga.

Untuk konfigurasi template adalah sebagai berikut :

1. Mengaktifkan Recent Post
Template ini sudah saya tambahkan fitur Recent Post yang berfungsi untuk menampilkan Postingan Terbaru yang kamu publish. Untuk menampilkannya kamu hanya perlu membuat Gadget HTML/Javascript dan tambahkan kode berikut :

<ul id="recent-posts"></ul>

Atau untuk lebih memudahkan kamu, kamu bisa perhatikan gambar berikut :

Jika Widgetya belum ada kamu harus menambahkannya terlebih dahulu "Tambahkan Gadget". Namun jika sesuai kamu hanya perlu mengedit Gadgetnya (1) dan menambahkan kode pemanggil yang saya berikan tadi (2) selanjutnya kamu bisa memberi nama Gadgetnya (3) setelah itu langkah terakhir kamu bisa klik Simpan (4).

Selanjutnya kamu hanya perlu masuk pada edit HTML pada template kamu dan kamu ganti url yang ada pada kode berikut :

var homePage = "https://pemulafast.blogspot.com/",
    numPosts = 5;
function recentPosts(a) {
    if (document.getElementById("recent-posts")) {
        var e = a.feed.entry,
            title, link, content = "",
            ct = document.getElementById("recent-posts");
        for (var i = 0; i < numPosts; i++) {
            for (var j = 0; j < numPosts; j++) {
                if (e[i].link[j].rel == "alternate") {
                    link = e[i].link[j].href;
                    break
                }
            }
            var title = e[i].title.$t;
            content += '<li class="recent-posts"><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></li>'
        }
        ct.innerHTML = content
    }
}
var rcp = document.createElement('script');
rcp.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
document.getElementsByTagName('head')[0].appendChild(rcp);

Tepatnya kamu harus mengganti https://pemulafast.blogspot.com/ dengan url blog kamu sendiri, atau blog lainnya yang ingin kamu tampilkan recent post nya. Setelah selesai, kamu klik "Simpan Template" dan seharusnya recent postnya sudah tampil.

2. Memasang Slot Iklan
Sebenarnya slot iklan bisa kamu pasang di sidebar aja yang paling mudah, namun jika kamu seorang yang bermain iklan adsense, iklan adsensen akan lebih optimal jika kita pasang didalam postingan.

Pada template ini saya sudah siapkan dua tempat slot iklan yang bisa kamu gunakan, sesuai pada demo. Untuk meletakkan slot iklan sesuai pada blog demo tersebut, kamu harus mencari kode berikut :

<!-- Iklan diatas posting Disini -->

<div class='iklan-atas'>
    <div style='width:300px;height:250px;background:#e7e7e7;margin:0 auto' />
</div>
<data:post.body/>
<div class='iklan-bawah'>
    <div style='width:300px;height:250px;background:#e7e7e7;margin:0 auto' />
</div>

<!-- Iklan dibawah posting Disini -->

Kamu hanya perlu memodifikasi kode diantara kode <div class='iklan-atas'>dan kode penutup </div> saya rasa sudah cukup jelas apa yang ada pada template tersebut.

3. Mengedit menu di Footer
Karena template ini belum saya lengkapi dengan dropdown menu, maka untuk melatakkan menu about, privacy, sitemap, atau juga menu lainnya yang kamu perlukan, saya sudah meletakkannya pada footer. Cari kode berikut :

<div class='footer-left'>
    <a href='#' target='_blank'>About</a>
    <a href='#' target='_blank'>Contact</a>
    <a href='#' target='_blank'>Sitemap</a>
    <a href='#' target='_blank'>Privacy Policy</a>
</div>

Ganti semua tanda # pada kode tersebut dengan link yang kamu miliki.

Kedepannya saya akan update lagi template ini agar memiliki tampilan dan fitur yang lebih keren lagi, jadi jika kamu suka template ini kamu bisa mendukung saya dengan cara memberikan masukan di kolom komentar.