Yogi Prasetiya

QueryLoader Di Blogger

noreply@blogger.com (Yogi Prasetiya) — Tue, 15 Feb 2011 10:35:00 +0000

QueryLoader
Preload Your Website With Style

Untuk pertama kalinya posting di tahun 2011, padahal udah bulan februari. Ok, kali ini saya mau bikin tutor lagi, masih seputar jquery. Sesuai dengan judul, saya mau bahas tentang QueryLoader dan bagaimana penerapanya di mesin Blogger ini.

DEMO DENGAN PERSENTASE
DEMO TANPA PERSENTASE

Content

Apa itu QueryLoader
Cara Mengimplementasikan
Apa Yang Bisa Kita Modifikasi
Memperbaiki Masalah Yang Sering Terjadi

Apa itu QueryLoader?

QueryLoader adalah animasi yang akan keluar dalam pemanggilan halaman/page, istilah kerennya sih preloader page. Sebelumnya yang lebih populer yaitu LazyLoader, Jika LazyLoader untuk gambar atau beberapa element, nah QueryLoader ini bisa menjadi preloader halaman/page. Tetapi tidak hanya halaman saja, gambar atau elemen-elemen dalam blog juga bisa diberi animasi dalam pemanggilannya.

Fitur:

Preload sebuah halaman web secara keseluruhan
Preload elemen pada halaman
Preload semua gambar, dan background dari CSS
Mudah untuk diimplementasikan
Animasi bar yang adjustable

Cara Mengimplementasikan

Sebelumnya kalian harus unduh file yang akan kita gunakan.

Ok langsung aja kita mulai!

Unzip file yang sudah kalian unduh tadi
Upload ke webserver seperti Google Code
Selanjutnya masukkan script dibawah ini, tepat diatas tag </head>

Setelah itu taruh script dibawah ini diatas </body>

Nah selanjutnya kita masukkan code CSS-nya

QueryLoader Tanpa Persentase

.QOverlay { background-color: #000000; z-index: 9999; } .QLoader { background-color: #00818B; height: 2px; }

QueryLoader Dengan Persentase

.QOverlay { background-color: #000000; z-index: 9999; } .QLoader { background-color: #CCCCCC; height: 1px; } .QAmt { color:#333333; font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-size:40px; font-weight:bold; line-height:50px; height:50px; width:100px; margin:-60px 0 0 -50px; }

Code CSS tersebut dapat kalian ubah/modifikasi untuk menyesuaikan dengan template anda.

Apa Yang Bisa Kita Modifikasi?

Kita dapat memodifikasinya lewat CSS, ataupun lewat pemanggilan Jquery tersebut. Bagaimana caranya?

CSS
Dalam css ada beberapa selector yang dapat kalian modifikasi, coba lihat pada gambar dibawah ini.

Jquery
Untuk hal ini kalian bisa melihatnya dari tutorial aslinya, disini

Memperbaiki Masalah Yang Sering Terjadi

QueryLoader bar hanya berjalan 75% saja atau tidak selesai sama sekali.
Hal ini disebabkan ada salah satu gambar yang broken/rusak, sehingga QueryLoader menganggap hal ini masih dalam pemanggilan/loading, sehingga proses tidak selesai.

Ada bagian pada tag body yang terlihat
Sebenarnya ini bukan masalah, dan tidak akan menggangu proses, namu hal ini membuat QueryPreloader agak terlihat aneh, karena tidak semua bagian tertutupi oleh background dari Query Loader sendiri.
Untuk membetulkannya, coba hilangkan border yang anda terapkan pada tag BODY.

Kesimpulan Dan Saran

Penggunaan Jquery ini hanya untuk mempercantik blog kalian, bukan untuk mempercepat proses loading. Jadi Jquery ini hanya memberitahukan proses pemanggilan halaman dengan menutupi halaman itu dan dengan backgrund dan progress bar.
Saran saya jangan menggunakan background gambar yang besar dalam background QueryLoader, karena menurut saya, sama saja bohong. Toh nantinya malah memperlambat.

Bila ada pertanyaan tentang bagaimana cara mengimpplementasikan QueryLoader langsung saja comment ye!

Semoga sukses!

Box 0.6

noreply@blogger.com (Yogi Prasetiya) — Sun, 26 Dec 2010 07:03:00 +0000

DEMO

Feature :

Dark
2 Columns
3 Columns Footer
Menu Navigation Widget
Custom Search Widget
Custom Label Widget in Sidebar

See is the configuration for your post on the image below for best appearance :

Customization :

Search Widget

<div class="search-widget">
<div class="search-title">Search</div>
<div class="search-form">
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input type="text" id="search-box" name="q" onblur="if(this.value=="")this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value="";" size="30" value="To search type and hit enter" vinput="">
</form>
</div>
</div>

Label Widget
Put . Because I just modify it only in sidebar section.

Navigation Widget

<ul class="navigation">
<li class="n1"><a href="/">Home</a> </li>
<li class="n2"><a href="/p/portfolio.html">Work</a> </li>
<li class="n3"><a href="/search/label/?max-results=3">Blog</a></li>
<li class="n4"><a href="/p/contact.html">Contact</a> </li>
<li class="n5"><a href="/p/about.html">About</a> </li>
</ul>

Happy Blogging

DOWNLOAD

Animated Scrolling

noreply@blogger.com (Yogi Prasetiya) — Sat, 25 Dec 2010 06:36:00 +0000

Ok, kita mau bahas tentang Scrolling lagi, hampir sama dengan post sebelumnya. Cuma kali ini mau bikin yang pakai effek.Yang akan kita otak-atik yaitu Jquery Scrolling To Top And Bottom, kita beri sedikit efek supaya gag cuma Scroll saja. Nah efek yang kita pakai, yaitu efek Ease.
Ok coba langsung saja lihat demonya biar lebih jelas

DEMO

Cara Mengaplikasikan di Blogger

Seperti biasa kalian harus mempunyai Jquery berikut

Jquery
Ease Jquery 1.3

Kenapa saya pakai Ease 1.3, karena nama efek berbeda dengan yang Ease 1.1, Nanti akan saya bahas.

HTML

Kalian cukup memasukkan code HTML diatas kedalam blog kalian.

CSS

.nav_down {
     -moz-border-radius: 3px 3px 3px 3px;
     background: url("http://www.tympanus.net/scrollupdown/images/arrow_down.png") no-repeat scroll 50% 50% transparent;
     border: 1px solid #CCCCCC;
     bottom: 10px;
     cursor: pointer;
     height: 20px;
     left: 70px;
     opacity: 0.7;
     padding: 7px;
     position: fixed;
     white-space: nowrap;
     width: 20px;
     z-index: 10;
}
.nav_up {
     -moz-border-radius: 3px 3px 3px 3px;
     background: url("http://www.tympanus.net/scrollupdown/images/arrow_up.png") no-repeat scroll 50% 50% transparent;
     border: 1px solid #CCCCCC;
     bottom: 10px;
     cursor: pointer;
     height: 20px;
     left: 30px;
     opacity: 0.7;
     padding: 7px;
     position: fixed;
     white-space: nowrap;
     width: 20px;
     z-index: 10;
}

Code tersebut bisa kalian sesuaikan dengan template kalian sendiri.

JQUERY

Ket :

1800 adalah durasi yang diperlukan, semakin kecil nilainya maka akan semakin cepat menuju target yang dituju.
easeInBounce adalah efek yang diberikan untuk scrollnya, untuk variasi yang lain silahkan lihat dihalaman dokumentasinya disini

Silahkan masukkan code jquery tersebut diatas </head> untuk pemanggilan diawal load blog,
atau diatas </body> untuk pemanggilannya setelah blog kalian selesai load.

Nah didalam code Jquery kalian melihat code ‘easeOutBounce’ pada Ease 1.1 penulisan untuk nama setiap efek tidak menggunakan kata depan ‘ease’ dan tidak menggunakan huruf kapital disalah satu hurufnya. maka penulisannya seperti ini ‘bounceout’ ataupun ‘bouncein’

Kesimpulan
Sebenarnya tidak hanya pada Scrollto Top dan Bottom saja kita bisa selipkan Jquery Ease ini, namun pada beberapa trik-trik JQuery lain juga bisa diaplikasikan efek ease ini.

Inspirasi : LearnJquery
Code by : Jquery Ease & Tympanus

ScrollTo Post di Blogger

noreply@blogger.com (Yogi Prasetiya) — Thu, 23 Dec 2010 13:00:00 +0000

ScrollTo Post? Yups, kita mau bahas bagaimana cara menggunakan Jquery ScrollTo yang diaplikasikan untuk blogger. Jadi Jquery ini berguna untuk mempermudah pengunjung untuk mengeksplor posting tanpa harus menggunakan scroll di mousenya jadi cukup *klik saja. Bagaimana tertarik?

DEMO

Cara Kerja
Jquery yang akan kita aplikasikan ini secara otomatis akan menemukan tag yang akan kita panggil dalam jquery. Contoh dalam demo, tag yang dipanggil adalah .post-outer sehingga setiap kalian klik next maka akan otomatis scroll ke post selanjutnya. bagitupun sebaliknya ketika kalian klik prev

Cara Mengaplikasikan di Blogger
Sebelumnya kalian harus memasang Jquery dibawah ini didalam Blog kalian :

HTML
Beginilah kira-kira kerangka HTML yang kita gunakan :

CSS
Seperti yang terlihat diatas, kita membutuhkan nav-dock untuk medianya. Jadi kalian bisa mengeditnya agar bisa mecing dengan blog kalian. Dan ini yang saya pakai :

#nav-dock {
 position: fixed;
 right: 15px;
 top: 35%;

padding:5px
}
#nav-dock a {
padding:5px
}

Saya gunakan position:fixed agar navigasinya juga bisa ikut scroll.

JAVASCRIPT
Dan sekaran kalian masukkan javascript berikut diatas tag </head> ataupun </body>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://kidzoom.googlecode.com/files/jquery.scrollTo-min.js"></script>
<script language='javascript' type='text/javascript'>
$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post-outer');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {
        return scroll($(this).attr('id'));
    });   

});

</script>

PESAN
ScrollTo Post ini sangat cocok sekali buat template 1 Column. Ada satu variasi yang mungkin bisa kalian coba juga, yaitu dengan menaruh #nav-dock tepat disamping title post kalian. Saya juga sudah mengaplikasikannya di DEMO tutor ini.
Atau coba lihat web ini sebagai referensi Parveen Verma.

Credits: Javascript code by Neutron Creations
Tutorial by Webdesigner

Simple Dot Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Sat, 18 Dec 2010 04:10:00 +0000

DEMO

Feature :

2 Columns
Competible With Template Designer
Custom Jumplink
Custom Navigation
Competible With IE

See is the configuration for your post on the image below for best appearance :

Configurasi

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

Box 0.5 Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Thu, 25 Nov 2010 13:12:00 +0000

DEMO

Feature :

2 Columns
3 Columns Footer
Menu Navigation Ready
Label1 Edited
Search Widget Ready

See is the configuration for your post on the image below for best appearance :

For Post Widget

For Label Widget

Delete Title Menu Widget

Code for Search Widget :

Now you edit the appropriate image above. And Happy Blogging

DEMO

Yellow One Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Tue, 23 Nov 2010 14:15:00 +0000

DEMO

Feature :

One Column
3 Columns Footer

See is the configuration for your post on the image below for best appearance :

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

Black Window Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Sun, 21 Nov 2010 02:24:00 +0000

DEMO

Feature :

Tumblr-Like
Cufon Font
2 Columns

See is the configuration for your post on the image below for best appearance :

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

Green & Glow Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Wed, 17 Nov 2010 09:57:00 +0000

DEMO

Feature :

Page Navigation Ready
Auto Readmore
CSS 3 Effect
2 Columns
3 Columns Footer
PageList

See is the configuration for your post on the image below for best appearance :

This is code of Search Widget :

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

#850 Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Sun, 14 Nov 2010 12:46:00 +0000

DEMO

Feature :

Two Columns
Two columns sidebar
Custom Search Widget
Two Columns Footer
Clean
Navigation Ready

See is the configuration for your post on the image below for best appearance :

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

Custom U'r Popular Posts

noreply@blogger.com (Yogi Prasetiya) — Wed, 10 Nov 2010 14:54:00 +0000

Beberapa bulan yang lalu Blogspot telah menambahkan beberapa widgetnya. Yang salah satunya PopularPosts.Dulu blog saya pernah memakainya dan tampilannya seperti yg disamping ini. Terlihat berbeda dengan popularpost yg biasanyanya. Tidak ada judul dari postnya. Ko bisa?Mari kita bahas bagaimana cara untuk mengedit widget Popular Post.

Struktur

Untuk memodifikasi sebelumnya kita harus tau dulu struktur dari widget tersebut. Supaya kita tau tag mana yang akan kita edit. Coba kalian lihat gambar dibawah ini.


Struktur Popular-posts

Ket :

.item-title = tag untuk judul posting
.item-snipppet = tag untuk ringkasan dari post kalian
.item-thumbnail img = tag untuk thumbnail dari post kalian
.item-content = tag untuk wadah dari snippet dan judul post

Dan untuk rangka HTML-nya seperti ini nih

Kerangka HTML Popular-posts

Nah kira-kira seperti itulah. Dari kerangka diatas kita bisa mengetahui, apa yang harus kita edit

Ayo Edit

Dimulai dari mana? kalian mau menggunakan snippet/ringkasan post atau hanya sekedar menampilkan thumbnailnya saja seperti punya saya. Ayo dipilih !

Ayo pilih sesuai kebutuhan!

Hanya Thumbnail

Nah kebanyakan kita mengalami kendala disini. Ketika kita hanya mencentang image thumbnail, judul post tetap saja ada. Seperti yang sudah kita bahas diatas. Kita bisa menghapus judul tersebut. Coba kalian masukkan code berikut diatas ]]></b:skin>

.item-title {display:none}

Sekarang Judul sudah hilang tetapi kenapa tetap kebawah tidak menyamping. Ini solusinya , masukkan kembali code dibawah ini diatas ]]></b:skin>

.PopularPosts ul li {float:left}

Kok beda? Ya karena kita cuma mau mengganti letak dai tag li nya saja. Dan ini screenshotnya

Thumbnail Beserta Snippet

Kalau beserta snippet semua orang juga bisa. tapi bagaimana dengan yang ada backgroundnya. Setiap item di widget tersebut kita beri background, supaya terlihat menarik dan beda.
Kalian cukup memasukkan code ini diatas ]]></b:skin>

.PopularPosts .widget-content ul li {background:rgba(0,0,0,.5);padding:5px ;margin-bottom:2px}

Dan ini hasilnya

Sekiranya begitulah, selebihnya kalian bisa memodifikasi widget ini dengan gaya kalian sendiri.

Blue Heron Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Fri, 05 Nov 2010 16:09:00 +0000

DEMO

Blue Heron is theme for Tumblr. It's created by Brandon Ewoldt. And now i convert it to Blogger. I hope you like this template.

Feature :

Two Columns
Two columns sidebar
Custom Profile Widget
Custom Search Widget

See is the configuration for your post on the image below for best appearance :

Now you edit the appropriate image above. And Happy Blogging

DOWNLOAD

JQuery Masonry di Blogspot

noreply@blogger.com (Yogi Prasetiya) — Fri, 08 Oct 2010 15:16:00 +0000

Masonry adalah sebuah layout plugin untuk jQuery. Digunakan untuk mengatur elemen vertikal kemudian horisontal sesuai dengan kotak. Hasil meminimalkan kesenjangan vertikal antara unsur ketinggian yang bervariasi. Plugin ini sendiri dibuat oleh desandro.com.

Pengguna Masonry di Blogspot

Penggunaan Masonry pada mesin blogger sendiri masih sangat sedikit, mungkin karena belum ada yang mempublish artikel tentang bagaimana penggunaan JQuery Masonry itu sendiri.

Saya baru menemukan dua orang yang menggunakan JQuery ini di bloggnya yaitu:

Abu Farhan

Menurut saya Abu-Farhan.com adalah orang yang pertama kali menggunakan JQuery Masonry pada blogspot. Mas Farhan mengaplikasikan JQuery ini pada Masonry Blogger Template, template blogger yang ia buat. Dan dari Mas Farhan inilah saya tertarik untuk mengetahui cara penggunaannya. Namun sayangnya Mas Farhan tidak memberikan tutorial bagaimana cara mengaplikasikan Masonry pada mesin Blogger.

Simplex Design

Berbeda dengan Simplex Design, JQuery ini langsung di aplikasikan kedalam blognya itu. Terlihat sangat simple dan bersih namun menarik.

Selain mereka mungkin masih banyak lagi yang menggunakan Jquery ini. Untuk posting yang akan datang akan saya coba untuk memberi tahukan cara penggunaan Masonry di Blogger.

Sumber :

Light Blue Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Sun, 03 Oct 2010 01:22:00 +0000

Blogger template this one is a template that I previously used for my personal blog on this one. But because it was not used so I'm sharing it away for free for you.

Features

2 Columns
3 Columns in Footer
Auto Readmore With Thumbnail (Static Page Fixed)
Footer Menu
Custom Fonts {From Kernest}

This is first time I gave Blogger Templates for free. simple although hopefully you guys like what I'd created. If you want to use this template there are several things you must edit the template to be like what you see in the screenshots that are above this post.

Happy Blogging

DEMO DOWNLOAD

Overflow Blogger Template

noreply@blogger.com (Yogi Prasetiya) — Sun, 03 Oct 2010 01:18:00 +0000

Feature :

Auto Readmore With Thumbnail (Static Page Fixed)
Accordion Footer (From Abu Farhan)
One Column
One Column Footer
Can be edited in Design Templates

Recommendation :

Use a short blog name, because if you use a blog name that long, then the name of your blog will look bad. Or you change the width in Design Template
To make navigation on your blog. Make the navigation in the footer.

DEMO DOWNLOAD

Daftar Isi / Sitemap di Blogspot

noreply@blogger.com (Yogi Prasetiya) — Sat, 18 Sep 2010 08:43:00 +0000

Apasih?

Kali ini ane mau bahas tentang Daftar Isi yang sudah bertebaran dengan berbagai jenis yang berbeda-beda. Banyak sekali jenis daftar isi atau sitemap ataupun biasa disebut Table Of Contents (TOC). Daftra isi sangat penting fungsinya untuk mempermudah pengunjung mencari posting kita yang telah lamapau. Dan menurut para ahli daftar Isi ini adalah hal penting dalam SEO. Begitu katanya..

Jenis-Jenis Daftar Isi
Dan inilah beberapa jenis daftar isi yang telah ane temuin:

Nah kira-kira itulah beberapa jenis daftar isi yang ane temuin, mulai dari yang paling jadul dengan membuatnya secara manual hingga dengan script accordionnya. Semua tergantung selera anda untuk menggunakan yang seperti apa.

Namun versi saya sendiri menggunakan versinya sendiri juga, dan ini scriptnya.

<blockquote>
<div style="text-align: center;">
<span style="font-size: large;">Note: Use "CTRL+F" (on keyboard) to search post. </span></div>
</blockquote>
<div style="color: #33aaff; list-style: decimal-leading-zero inside none;border-top:10px solid rgba(0,0,0,.3);border-bottom:10px solid rgba(0,0,0,.3);padding:10px 2px">
<script src="http://kidzoom.googlecode.com/files/daftar-isi.txt">
</script><script>
var numposts = 1000;var showpostdate = true;var showpostsummary = false;var numchars = 100;var standardstyling = true;
</script><script src="http://ninetythree.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts">
</script></div>

Sampai sini dulu kita membahas Daftar Isi a.k.a Table Of Content. Sampai ketemu lagi dilain posting ye.

Solusi: Static Page Pada Auto Readmore

noreply@blogger.com (Yogi Prasetiya) — Thu, 16 Sep 2010 09:36:00 +0000

Auto Readmore adalah solusi yang sangat tepat untuk mempercantik tampilan postingan dihalaman-halaman tertentu, yang jelas selain halaman postingan sendiri. Dan secara tidak langsung pun dapat merapihkan halaman Home dan Archives

MASALAHNYA ketika kita mengaplikasikan Auto Readmore halaman Static tidak akan muncul secara penuh namun akan muncul dalam bentuk Summary juga.

CARA MENGATASINYA:

Langsung aja kalian ganti code yang seperti dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Menjadi seperti ini

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right; margin-top:20px; display:inline'>

<a expr:href='data:post.url' style='padding:5px; background-color:#f9f9f9;-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; '><data:post.title/></a>

<a expr:href='data:post.url' style='padding:5px; background-color:#f9f9f9;-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;'>Read More</a>

</span>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>

Nah sekarang Static Page kalian sudah bisa dipakai kembali... Selamat mencoba.

Related Article

Yogi Prasetiya

QueryLoader Di Blogger

Content

Apa itu QueryLoader?

Cara Mengimplementasikan

Apa Yang Bisa Kita Modifikasi?

Memperbaiki Masalah Yang Sering Terjadi

Kesimpulan Dan Saran

Box 0.6

Customization :

Animated Scrolling

Cara Mengaplikasikan di Blogger

HTML

CSS

JQUERY

ScrollTo Post di Blogger

Simple Dot Blogger Template

Feature :

Box 0.5 Blogger Template

Feature :

Yellow One Blogger Template

Feature :

Black Window Blogger Template

Feature :

Green & Glow Blogger Template

Feature :

#850 Blogger Template

Feature :

Custom U'r Popular Posts

Struktur

Ayo Edit

Hanya Thumbnail

Thumbnail Beserta Snippet

Blue Heron Blogger Template

Feature :

JQuery Masonry di Blogspot

Pengguna Masonry di Blogspot

Abu Farhan

Simplex Design

Light Blue Blogger Template

Overflow Blogger Template

Feature :

Recommendation :

Daftar Isi / Sitemap di Blogspot

Solusi: Static Page Pada Auto Readmore