Pemula Fast Free Responsive Blogger Template

- Februari 28, 2017


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.

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 :

Pemula Fast Free Responsive Blogger Template
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.
Advertisement

4 komentar

avatar

Excelente.. very nice and fast!

avatar

Thanks sir. I will build PemulaFast v2 Later.

avatar

Templatenya sangat bagus gan, saya jadi tertarik pengen make nihh...

avatar

Siap, silahkan digunakan mas.

Berkomentarlah jika memang ada pertanyaan apapun itu, admin akan membalasnya jika tidak ada kesibukan lainnya. Terima kasih
EmoticonEmoticon

 

Start typing and press Enter to search