Sistem Komputer: Tips 'N Trik

Tampilkan postingan dengan label Tips 'N Trik. Tampilkan semua postingan

Mempercepat Loading Blog With Script Lazyload

Loading situs merupakan hal yang paling dijaga-jaga oleh semua pemiliknya, tak menutup kemungkinan pemilik blog. sebab loading blog merupakan tolak ukur kebetahan pengunjung untuk berlama-lama pada blog kita.

Seperti halnya tampilan template yang menarik, loading blog kita harus dimaksimalkan untuk mengatur kecepatan blog supaya ringan atau cepat. Untuk itu, pada tuulisan kecil ini Kang Fathur akan memberikan sedikit tips cara mengatasi lambatnya loding blog pada template anda dengan menggunakan Script Lazyload.

Pada tulisan beberapa hari lalu, Kang Fathur memberikan tips mempercepat loding blog dengan men-Compress CSS dengan pihak ketiga. Tutorial ini gak kalah hebat dengan cara sebelumnya, disamping relatif mudah dalam penerapannya juga fungsinya gak kalah bersaing denga blog lainnya.

Sebelum anda memasang script ini, sebaiknya anda mengecek dulu seberapa berat/ringan blog anda. Jika sudah mengetahuinya, terapkan script lazyload pada template anda. Buktikan perubahannya...!!!

Cara pemasangannyapun gampang, anda tinggal mencari kode </head> dan copy paste kode berikut sebelum kode </head> dan Simpan Template anda, dijamin memuaskan.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://zonaku.googlecode.com/files/loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1uY9rP6KUVYYDv5DAkd5qDJgD6RGkyqRpb6fl2uaVZkT3y12XEo9TuLz-5_IVeSW3QpTXv_fN_dh3p-6qdAnwa3Lf6TYYDj_abCIlBqKrJXWXIkjTCY11HSdRJHZMyGdxc983aDy01w/s1600/loading.png",threshold : 200});
});
</script>

Jika penerapan dalam blog anda tidak berfungsi atau malah tambah berat loading blognya, sekedar saran Kang Fathur, sebaiknya jangan diterapkan. It's Okey.....!!!!

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

RSS Comments Dengan Javascript

09.40 Blogger, Tips 'N Trik, tutorial

Membuat RSS Comments default blogger sudah banyak diberikan oleh blog penyedia tutorial, karena hampir semua pemilik blogger menerapkannya dalam situs mereka. Ini bertujuan agar pemilik blog tersebut dengan gambang mengetahui siapa dan apa komentar yang terkini (recent comments) dalam blog mereka. Baik berupa cercahan, kritikan ataupun saran dari pengunjung blog.

Tutorial kali ini, Kang Fathur memberikan tips dengan mudah cara membuat recent comment yang simple untuk diterapkan pada blog template simple anda.

LIVE DEMO

Kode Javascript

<script type="text/javascript">
var jmlkomentar = 6,
jmlkarakter = 20,
home_page = "http://zona-minimum.blogspot.com";
</script>
<script src="http://zonaku.googlecode.com/files/rss-comments.js" type="text/javascript"></script>

Catatan :

Angka 6 (enam) merupakan banyaknya komentar yang akan ditampilkan.
Angka 20 merupakan jumlah karakter (huruf) yang ditampilkan pada komentar pengunjung.

Selamat mencoba dan smoga berhasil ya gan....!!!

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Mengatasi Halaman Mandiri (Page Statis) Error

09.12 Blogger, Tips 'N Trik, tutorial

Kadang tanpa kita sadari pada template yang kita pakai, seperti yang Kang Fathur pernah alami beberapa hari lalu, yakni halaman mandiri atau banyak kalangan yang menyebut page statis mengalami masalah (error) saat menerapkan page statis.

Biasanya halaman ini diterapkan untuk memposting artikel yang berkenaan dengan artikel khusus pemilik blog, seperti halnya, profil pengguna, daftar isi, arsip blog dan gallery foto ataupun yang lainnya.

Pada contoh yang pernah saya alami ketika menerapkan daftar isi (sitemap) pada page statis mengalami kendala, yakni pemenggalan artikel (read more, red) muncul pada halaman mandiri (static page). Pada halaman ini biasanya terjadi pada penerapan Auto Read More pada halaman utama (home page).

Kang Fathur pernah menerapkan Arsip Postingan pada template yang didownload dari abazta creations, dan ternyata ketika diterapkan halaman mandiri ini terjadi error dengan tetap munculnta read more.

LIVE DEMO

tapi malah yang muncul seperti gambar berikut :

Akan tetapi, ketika di edit HTML Template ternyata penerapan auto read more teradi kesalahan yang sangat kecil untuk dipecahkan... hehehe, GR nih...!!! dan hasilnya seperti screenshot berikut :

Jika ini terjadi pada template anda silakan ikuti tutorial ini dengan mencari kode HTML auto read more dalam template anda. Biasanya kodenya seperti 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='readmore'><a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>

Jika sudah ketemu dengan kode tersebut, silakan ganti semua kode diatas dengan kode dibawah ini :

       <b:if cond='data:blog.pageType == "static_page"'>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='readmore'><a expr:href='data:post.url'>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>

Simpan Template anda dan lihat hasilnya, dijamin memuaskan.

Referensi : Jika setelah disimpan ternyata terdapat dua artikel sama dalam satu halaman, silakan sobat hapus teks berwarna bercetak tebal seperti yang ditunjukkan diatas

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Daftar Isi Seperti Gallery

13.32 Blogger, Tips 'N Trik, tutorial

Daftar isi dalam dunia blogging tidaklah asing kita dengar, ada yang menyebut Sitemap Blog. Pemasangan daftar isi berupa gallery sama halnya dengan thumbnail yang dibahas sebelumnya. Akan tetapi pada tutorial ini, telah dimodifikasi dan di terapkan sentuhan-sentuhan CSS dan JavaScript yang dilengkapi jQuery yang menarik juga.

Jika anda tahu dalam menerapkannya, pastilah anda akan terkesan untuk menerapkannya dalam blog kita. Seperti yang Kang Onk pakai pada blog KOD Template tersebut.

LIVE DEMO

Tanpa panjang lebar, marilah kita ikuti bersama cara penerapannya dalam blog kita.

Langkah Pertama

Edit HTML blogger anda;
Cari kode ]]></b:skin>
Letakkan kode berikut sebelum kode diatas :

@font-face {
font-family:'Yanone Kaffeesatz';
font-style:normal;
font-weight:400;
src:local('Yanone Kaffeesatz Regular'),
local('YanoneKaffeesatz-Regular'),
url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}

#pio-masonry-container {
font:normal 11px Arial,Sans-Serif;
color:#666;
margin:0 auto;
}

#pio-masonry-container * {
border:none;
outline:none;
}

#pio-masonry-container .json_post {
background-color:white;
padding:20px;
margin:2px;
float:left;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
box-shadow:0 1px 2px rgba(0,0,0,0.5);
position:relative;
}

#pio-masonry-container .json_post h3 {
margin:0 0 10px;
padding:0 0;
font:normal 20px 'Yanone Kaffeesatz',Impact,Arial,Sans-Serif;
}

#pio-masonry-container .json_post h3 a {
text-decoration:none;
color:#3868B5;
font-weight:normal;
}

#pio-masonry-container .json_post .json_sub-header {
display:block;
margin:0 0 10px;
border-top:1px solid #ccc;
padding-top:10px;
color:#627E83;
}

#pio-masonry-container .json_post a.json_img-container {
display:block;
border:1px solid #ccc;
background-color:#fafafa;
padding:1%;
font-size:0;
}

#pio-masonry-container .json_post img {
margin:0 0;
padding:0 0;
width:100%;
height:auto;
display:block;
outline:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
opacity:0;
}

#pio-masonry-container .json_post p {
margin:10px 0 0;
padding:0;
word-wrap:break-word;
overflow:hidden;
}

#pio-masonry-container .json_post .json_post-footer {
text-align:left;
display:block;
margin-top:10px;
border-top:1px solid #ccc;
padding-top:10px;
overflow:hidden;
font-weight:bold;
}

#pio-masonry-container a.json_more {
display:block;
background-color:#3868B5;
color:white;
padding:0;
width:30px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
position:absolute;
bottom:0;
right:0;
font-size:14px;
font-weight:bold;
}

#pio-masonry-container a.json_more:hover {
background-color:#214889;
color:white;
}

#pio-masonry-container h3 a:hover {
color:#214889;
}

.clear {
clear:both;
}

#json_loading {
display:block;
width:120px;
position:fixed !important;
position:absolute;
text-align:center;
font:bold 11px/24px Arial,Sans-Serif;
color:white;
background-color:#36AA4A;
top:0;
left:50%;
margin-left:-60px;
z-index:999;
-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}

#json_loading.loaded {background-color:#900;}

#pio-masonry-container .json_post.json_thumbnail-mode.loading,
#pio-masonry-container .json_post.json_summary-mode a.loading {
background:white url('data:image/gif;base64,R0lGODlhEAAQAPYAAP///wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4+Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6+vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6+vz8/MDAwMrKyvj4+NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5+fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA') no-repeat 50% 50% !important;
padding:0 0;
}

#pio-masonry-container .json-post.json_summary-mode a.loading img {
background-color:transparent !important;
}

/* Thumbnail Mode */
#pio-masonry-container .json_post.json_thumbnail-mode {
padding:0 0;
line-height:0;
border:2px solid white;
width:50px;
height:50px;
overflow:hidden;
}

#pio-masonry-container .json_post.json_thumbnail-mode img {
border:none;
margin:0;
padding:0;
width:auto;
height:auto !important;
}

#pio-masonry-container .json_post.json_thumbnail-mode figcaption {
position:absolute;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,0.9);
line-height:100%;
padding:5px 7px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#pio-masonry-container .json_post.json_thumbnail-mode figcaption span {
font-size:10px;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption {
display:block;
padding:5px 5px 7px;
border-bottom:1px solid #222;
margin:0 0 4px;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption a {
color:#CFDBEC;
text-decoration:none;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption a:hover {
color:white;
}

#pio-masonry-container .json_post.json_thumbnail-mode .json_post-date {
float:left;
}

#pio-masonry-container .json_post.json_thumbnail-mode .json_comment {
float:right;
}

#pio-masonry-nav {
text-align:center;
font:normal 14px 'Yanone Kaffeesatz',Times,Serif;
margin:15px 0 30px;
display:none;
}

#pio-masonry-nav a,
#pio-masonry-nav #json_total-posts {
background-color:#012;
padding:4px 7px;
color:#DBE1F2;
text-decoration:none;
text-shadow:0 1px 0 rgba(0,0,0,0.7);
}

#pio-masonry-nav a:link {
background-image:-webkit-linear-gradient(top,#234,#012);
background-image:-moz-linear-gradient(top,#234,#012);
background-image:-ms-linear-gradient(top,#234,#012);
background-image:-o-linear-gradient(top,#234,#012);
background-image:linear-gradient(top,#234,#012);
}

#pio-masonry-nav a:hover {
color:white;
}

#pio-masonry-nav a:active {
background-image:none;
background-color:black;
}

#pio-masonry-nav #json_total-posts {
background-image:-webkit-linear-gradient(top,#012,#234);
background-image:-moz-linear-gradient(top,#012,#234);
background-image:-ms-linear-gradient(top,#012,#234);
background-image:-o-linear-gradient(top,#012,#234);
background-image:linear-gradient(top,#012,#234);
-webkit-box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
-moz-box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
}

/**** Transitions ****/
.masonry.css-transition,
.masonry.css-transition .masonry-brick {
-webkit-transition-duration:0.7s;
-moz-transition-duration:0.7s;
-o-transition-duration:0.7s;
transition-duration:0.7s;
}

.masonry.css-transition {
-webkit-transition-property:height,width;
-moz-transition-property:height,width;
-o-transition-property:height,width;
transition-property:height,width;
}

.masonry.css-transition .masonry-brick {
-webkit-transition-property:left,right,top;
-moz-transition-property:left,right,top;
-o-transition-property:left,right,top;
transition-property:left,right,top;
}

Cari kode </head>
Copy paste kode dibawah ini sebelum kode diatas :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://zonaku.googlecode.com/files/jquery.masonry.js' type='text/javascript'/>

Simpan Template.

Langkah Kedua

Tambahkan halaman page atau postingan dan terapkan kode berikut :

<div id="pio-masonry-container">
<span id="json_loading">Please wait...</span></div>
<div id="pio-masonry-nav">
<a id="json_prev-nav">Previous</a><span id="json_total-posts">Page # of #</span><a id="json_next-nav">Next</a>
</div>
<script type="text/javascript">
//<![CDATA[
// JSON...
var viewMode         = "summary", // Widget mode ? "summary" : "thumbnail"
    jm_homePage      = "http://kang-fathur.blogspot.com",
    numposts         = 20,
    numchars         = 270,
    showThumbnails   = true,
    squareImage      = false,
    newTabLink       = false,
    jm_columnWidth   = 200,
    jm_subHeaderText = ["Posted by", "at"],
    jm_monthNames    = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    jm_commentLabel = "",
    jm_postCategory = null,
    jm_fallbackThumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEX__gTEO0TgSUQ1JsV2qYclf9-qi8zsc-LFNHMfVcK7dDISrfz3uoltSI0wHSpCAhDV_KgCROJUS6cJun7JuD427WLmyIJe42TVyvBK1osJcvRpD94yVyPdOwrktldU9nPzzA7XhSAmCS/s320/profile_blogger.jpg",
    jm_loadedText    = "Loaded.";

// MASONRY...
var $jm_container    = $('#pio-masonry-container'),
    $jm_itemSelector = '.json_post',
    $jm_nav          = $('#pio-masonry-nav'),
    $jm_prev         = $('#json_prev-nav'),
    $jm_next         = $('#json_next-nav'),
    $jm_totalPosts   = $('#json_total-posts'),

    jm_fadeSpeed   = 400,
    jm_resizeSpeed = 1000,
    jm_isAnimated = true,
    jm_animateWithTransition = false,
    jm_animationOptions = {
        queue: false,
        duration: 600,
        easing: null
    }
    jm_isFitWidth = true,
    jm_gutterWidth = 0,
    jm_isRTL       = false;
//]]>
</script>
<script src="http://zonaku.googlecode.com/files/post.brick.js" type="text/javascript"></script>

Simpan dan lihat hasilnya.

Semoga anda berhasil. Amin Allahumma Amin.

source : hompimpa

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Auto Read More Tanpa JavaScript

13.00 Blogger, Tips 'N Trik, tutorial

Pemasangan read more merupakan pemasangan sepenggal kalimat yang dituliskan dalam artikel blogger. Biasanya ini digunakan oleh pengguna blogger pada home page saja. Alasan kebanyakan dari mereka adalah memperingkas home page (halaman depan) blogger. Tak jarang dari kebanyakan tutorial yang sudah memberikan tips untuk pemasangan read more ini. Baik read more yang diganti oleh gambar ataupun read more manual.

Pada tutorial ini, murni menggunakan tag data default dari blogger. ini bisa memperingan pemasangan read more dengan javascript. Berikut demo yang bisa anda liat dari pemasangan read more otomatis tanpa javascript.

LIVE DEMO

Cara membuatnya adalah :

Edit HTML template anda dan jangan lupa centang Expand Widget Templates dan cari kode berikut <data:post.body/> dan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.thumbnailUrl'>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4DFNUlHrTRFN0nbpqqRtpewMpzzMcmhVjumUH46wNgPUPjhId6YQOz2hepOeZnce52SvlOQ9cE0ttpx72hvkwb4d2UvggMAT9E0RDHriF0D50NTu7qAFe_RfTiS9wc2zA4_p8XZzYHE/s1600/no-image.png'/></a>
    </b:if>
    <div class='post-snippet'><data:post.snippet/></div>
    <div class='rm-button-wrap'>
        <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
<b:else/>
    <b:if cond='data:blog.pageType == "static_page"'>
        <data:post.body/>
    </b:if>
</b:if>

Jika template anda sudah menggunakan auto readmore dengan javascript silakan cari kode berikut :

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

dan ganti semua kode diatas sehingga menjadi seperti ini :

<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4DFNUlHrTRFN0nbpqqRtpewMpzzMcmhVjumUH46wNgPUPjhId6YQOz2hepOeZnce52SvlOQ9cE0ttpx72hvkwb4d2UvggMAT9E0RDHriF0D50NTu7qAFe_RfTiS9wc2zA4_p8XZzYHE/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>

Langkah terakhir, silakan modifikasi auto read more template anda dengan sentuhan CSS berikut yang biasanya diletakkan sebelum kode ]]></b:skin>

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0px 10px 0px 0px;
}

Simpan Template anda dan lihat hasilnya.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Menampilkan Statistik Komentar dan Posting

13.00 Blogger, Tips 'N Trik, tutorial

Sebagai pelengkap widget anda, gak ada salahnya jika anda memasang statistik jumlah komentar dan jumlah postingan dalam blog kita. ini hanya ingin mengetahui seberapa besar ketenaran blog kita. Paling tidak bisa membuat kita lebih semangat untuk melakukan pembenahan-pembenahan terhadap blog kesayangan kita. Slah satu contohnya, blog Kang Fathur ini memiliki komentar yang sedikit jika dibandingkan dengan postingan yaang diteritkan oleh Kang Fathur. Ini menunjukkan kalau blog saya tidak tenar setenar Kang Rohman, Kang O-Om dan lainnya.

Untuk itu, sebagai blog pemula saya harus lebih bekerja agar blog ini melejit terbang.... hehhehe,

Postingan yang diterbitkan oleh Kang Fathur adalah :
Komentar pada blog Kang Fathur adalah :

Contoh diatas hanyalah sebuah statistik perkembangan blog Kang Fathur. Bagaimana dengan blog anda?

Silakan pasang statistik berikut dalam blog anda untuk mengetahui sejauh mana traffick blog anda.

Kodenya adalah :

<div class="widget-content">
<div name="posted" style="float: left; height: 50px; margin-top: 5px; width: 160px;">
<div name="img" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRqqT2_OIk7NZrY9DR6pa_5ydn5uzds4UXuMXtt3Gn8NeYlK428snviqDcATZZEAyuSTS0hsfD2Eq8Drxfzx8rzNOkrTWIG0scvJ9j2MUQiV67huKiTiAKfidpSucj8NLv40Xvr8j6WpE/s1600/posted.png") no-repeat scroll 0% 0% transparent; float: left; height: 46px; margin: 2px 5px 2px 2px; padding: 0pt; width: 46px;">
</div>
<div name="contador" style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; margin: 0pt; padding: 6px 0pt 0pt;">
<script type="text/javascript">
function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount">
</script> Posted</div>
<div name="posting" style="font-family: Arial,Helvetica,sans-serif; font-size: 10px; margin: 5px 0pt 0pt; padding: 0pt;">
posts published</div>
</div>
<div name="comments" style="float: left; height: 50px; margin-left: 10px; margin-top: 5px; width: 160px;">
<div name="img" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepgeSYwA4295TuzxJ9tnxE-93YwhpDhfJ3OtiLTvlyyFLO70ubEjxK4IWhfmOORdqElrZ01XxzdbarVIl7lKhVU7-X0D2OdZLyazJEgsNduWRluyINyM6zVzaY6kod8G_bMHuzUDWvPk/s1600/commented.png") no-repeat scroll 0% 0% transparent; float: left; height: 46px; margin: 2px 5px 2px 2px; padding: 0pt; width: 46px;">
</div>
<div name="contador" style="font-family: arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; margin: 0pt; padding: 6px 0pt 0pt;">
<script type="text/javascript">
function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount">
</script> Commented</div>
<div name="texto" style="font-family: Arial,Helvetica,sans-serif; font-size: 10px; margin: 5px 0pt 0pt; padding: 0pt;">
Published comments</div>
</div>
<span style="float: right; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0pt; padding: 0pt;"><small><script language="javascript" src="http://zonaku.googlecode.com/files/kf.js" type="text/javascript">
</script></small></span></div>

Semoga berguna bagi anda semua.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Halaman Arsip Blog (Daftar Isi)

09.29 Blogger, Tips 'N Trik, tutorial

Masih ingat dengan pembuatan Sitemap (Daftar Isi)? saya kira semua pecinta blogger gak akan awam atas daftar isi blog. Lah, dalam tutorial kali ini Kang Fathur akan membagikan cara pembuatan Halaman Arsip Blog yang sama dengan daftar isi, hanya saja tampilannya yang sedikit variasi yang dilengkapi tanggal postingan, kategori (label) postingan serta dijamin tidak akan ada duplicate dalam postingan.

LIVE DEMO

Selain itu, kelebihan Halaman Arsip pada Blog ini adalah kita bisa mengurutkan postingan (sort) baik dari Alphabet huruf A sampai huruf Z ataupun sebaliknya. Sort pertanggal dan sort berdasarkan kategori postingan. Penasaran ya?

Dan penerapannyapun sangat mudah. Anda tinggal men-copy paste kode berikut pada halaman postingan atau laman dalam blog anda.

<div id="bp_toc">
Loading....</div>
<script src="http://zonaku.googlecode.com/files/archive.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Sekian artikel singkat ini, semoga apa yang menjadi kebutuhan anda saat ini semuanya terjawab dalam blog ini. Selamat berkarya dan semoga berhasil.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Dapatkan Domain Gratis Dot Com Dari Intuit.Website

11.18 Artikel, Blogger, Free, Internet, Tips 'N Trik, tutorial

Banyak kalangan blogger yang berpikiran untuk mendapatkan domain yang bersifat premium seperti domain [dot]com, [dot]org, [dot]info ataupun [dot]name. Akan tetapi kadang kita kendala dengan pembayaran bulanan yang mengikat. Ya, tenang dulu, pada artikel kecil dan sederhana ini Kang Fathur akan membagikan tentang cara untuk mendapatkan domain gartis dari Intuit.Website

Bisakah? jawabannya pasti yes... Untuk itu marilah ikuti secara seksama tetang artikel ini. Namun harus diingat, domain yang ditawarkan oleh Intuit.Website hanya berlaku selama 1 tahun dan akan dikenakan biaya $2USD pada tahun berikutnya.

Ya gak apa-apalah, paling gak kita pengguna blogger [blogspot.com] tahu bagaimana mempunyai domain yang premium walaupun hanya sebentar. Jika anda berminat untuk melanjutkan, ya lakukan transfer domain ke penyedia domain di Indonesia.

Biar tidak terlalu panjang lebar pembahasannya, marilah kita langsung pada tutorial cara mendapat domain gratis dari Intuit.Website

Siapkan nama domain [dot]com, [dot]org, [dot]info, [dot]name bisa cek Disini
Daftar akun Intuit.Website Disini
Untuk ByPass klik Disini
Masukan Email dan Domain
Masukan domain tanpa www
Jangan centang Domain Privasi (akan kena biaya $1USD)
Centang Saya Setuju
Submit

Tunggu sekitar 4 - 5 jam akun anda diapprove dan jika masih belum di setujui tanggu waktu estimasi maksimal skitar 24 jam. Lakukan pengecekan untuk login akunnya disini.

Sebagai referensi anda kalau Kang Fathur berhasil membuat domain blogger [blogspot.com] pada URL
http://www.karak-situbondo.blogspot/ menjadi http://www.karaks.info/

Warning...!!!!

Tidak diperbolehkan kita order domain melalui Intuit.Website lebih dari satu domain dalam satu akun, jika nantinya domain anda tidak mau kena suspend.
Tidak diperkenankan menjual domain yang anda dapatkan dari Intuit
Domain yang diperbolehkan hanya [dot]com, [dot]org, [dot]info,[dot]name
Pergunakanlah dengan bijak, at your own risk.

Semoga artikel ini bermanfaat bagi semuanya. Amin Allahumma Amin.

Update :

dari banyaknya komentar yang mengungkapkan kalau pendaftran ini memerlukan input data pada billing informasi seperti yang ditanyakan Fathur Rahman, maka dari itu silakan masukan informasi dibaha ini yang diberikan oleh Fashinour
Name on card : Isi Terserah Anda
Card Type : Visa
Number card : 4067424205414109
Exp date : 02/13
Security code card : 145

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Template dan Java Script Toolbar Iframe (Live Demo - Download)

04.49 Blogger, Tips 'N Trik, Tool, tutorial

Lama tidak buat tulisan membuat Kang Fathur kangen akan dunia blogger, ya meskipun banyak kalangan blogger paham tentang pembuatan tips dan trick, tutorial, serta artikl-artikel lainnya. Seperti yang Kang Fathur tulisankan kalin ini adalah pembahasan tentang cara membuat link demo yang hidup, artinya Toolbar Iframe Demo dan Download.

Seperti yang diberikan berbagai penyedia download template baik template blogger, theme wordpress, drupal theme ataupun template-template lainnya dalam dunia internet. Coba anda lihat gambar dibawah, gambar ini menunjukkan link demo yang tidak menghapuskan blog aslinya. Artinya, penggabungan blog kita dengan blogger orang lain.

Ada dua cara untuk menerapkannya dalam blogger kita :

Cara Pertama :

Kita menggunakan template yang disediakan oleh KOD Tutor dalam tulisannya

LIVE DEMO

Penerapannya dalam blog kita seperti ini :

http://NAMABLOGKAMU.blogspot.com/?url=NAMABLOG-DEMO.blogspot.com

Cara Kedua :

Menerapkan java script dan kode CSS beserta pembuatan laman blog

LIVE DEMO

Penerapannya sebagai berikut :

http:// NAMABLOGKAMU/p/demo.html?iframe= NAMABLOG-DEMO.blogspot.com/

Masih bingung ya? Silakan kunjungi blog aslinya di KOD Tutor tentang Cara 1 dan Cara 2.

Semoga bermanfaat ya? salam Blogger Indonesia

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Random Posts pada Blog

10.56 Blogger, Tips 'N Trik, tutorial

Random posts merupakan salah satu trick untuk blogger agar SEO Friendly, sebab pengunjung akan bertanya-tanya saat melihat random posts. Paling gak membuat pengunjung blog ingin melihat apa yang telah diperlihatkan pada random posts tersebut.

Jika anda ingin menaikkan pagerank blog anda adalah :

Buat Related Posts pada blogger anda;
Perbanyak Backlink pada artikel (tulisan) anda;
Backlink blog anda pada social bookmark;
Sering bertukar link atau banner;
Perbanyak komentar di blog dan situs (web) lain;
Mengedit blog agar SEO Friendly
Pasang Random post pada widget blog.

Lah untuk melengkapi salah satu meningkatkan pagerank blog tersebut adalah membuat random post, dan script-nya berikut :

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Selamat mencoba dan semoga blog anda lebih maju. Amin Allahumma Amin

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Penggabungan Label Blog dengan Recent Posts

10.37 Blogger, Tips 'N Trik, tutorial

Pada tutorial kali ini beda dengan tutorial-tutorial lainnya yang di buat oleh Kang Fathur. Mengapa? Artikel blogger ini penggabungan dari Label Blog dengan Recent Posts. Label blog yang dibuat dengan menu dropdown dengan sedikit penerapan kode CSS yang dimodifikasi. Anda bisa langsung melihatnya untuk memastikan penerapan tutorial ini berhasil atau gak.

Penggabungan Label Blog dengan Recent Posts

LIVE DEMO

Cara untuk membuatnya, anda langsung memilih tambahkan gadget (widget) pada blog serta pilih HTML/JavaScript.

<div style="background:#F2F2F2;overflow:auto;width:100%px;height:280px;padding:10px;border:1px solid #ccc">
<span id="pio_labels"></span>
<div id="pio_tulisan"> Recent Posts </div>
<script type="text/javascript">
var maximum_account = 10;
var scripsi = true;
var scripsi_account = 100;
</script>
<script type='text/javascript'>
var num = maximum_account;
var wsumm = scripsi;
var summlen = scripsi_account;
var json; var labels;
function entryHasLabel(entry, label){
if(label == "*"){return true;} // always true if label is "*"
var labels = getPostLabels(entry);
return isExists(labels, label);
}
function getAllLabels(json){
var labels = [];
var entries = json.feed.entry;
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var categories = entry.category;
if(!categories){continue;}
for(var j=0; j<categories.length; j++){
var category = categories[j];
var label = category.term;
if(!isExists(labels, label)){labels.push(label);}
}
}
labels.sort();
return labels;
}
function getContent(entry){
if(!wsumm){return "";}
var content = entry.content ? entry.content.$t : entry.summary.$t;
content = stripHTML(content);
if(content.length <= summlen){return content;}
content = content.substr(0, summlen);
if(content.charAt(content.length-1) != " "){content = content.substr(0, content.lastIndexOf(" ")+1);}
content += "...";
return content;
}
function getPermalink(entry){
var links = entry.link;
if(!links){return null;}
for(var i=0; i<links.length; i++){
var link = links[i];
if(link.rel == "alternate"){return link.href;}
}
return null;
}
function getPostLabels(entry){
var labels = [];
var categories = entry.category;
if(!categories){return labels;}
for(var i=0; i<categories.length; i++){
labels.push(categories[i].term);
}
return labels;
}
function getRecentPosts(json, label){
// this widget is made by copycat91 in his blog
var posts = [];
var entries = json.feed.entry;
var i = 0;
while(posts.length < num){
if(i == entries.length){break;}
var entry = entries[i];
if(entryHasLabel(entry, label)){
var title = entry.title.$t;
var href = getPermalink(entry);
var content = getContent(entry);
var post = {"title" : title, "href" : href, "content" : content};
posts.push(post);
}
i++;
}
return posts;
}
function isExists(array, val){
for(var i=0; i<array.length; i++){
if(array[i] == val){return true;}
}
return false;
}
function onLoadFeed(json_arg){
json = json_arg;
labels = getAllLabels(json);
showLabels(labels);
showLabeledPosts("*");
}
function showLabeledPosts(label){
// set label == "*" if you want to show all posts
posts = getRecentPosts(json, label);
showPosts(posts);
}
function showLabels(labels){
var s = "";
s += "<select onchange='showLabeledPosts(this.value)'>";
s += "<option value='*'/>Semua Labels";
for(var i=0; i<labels.length; i++){
var label = labels[i];
s += "<option value='"+label+"'/>" + label;
}
s += "</select>";
document.getElementById("pio_labels").innerHTML = s;
}
function showPosts(posts){
var s = "";
if(!wsumm){s += "<ul>";}
for(var i=0; i<posts.length; i++){
var post = posts[i];
if(wsumm){
s += "<p>";
s += "<b><a href='"+post.href+"'>" + post.title + "</a></b> <br/>";
s += post.content;
s += "<br/><a href='"+post.href+"'> continue>> </a>";
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
}
}
if(!wsumm){s += "</ul>";}
document.getElementById("pio_tulisan").innerHTML = s;
}
function stripHTML(s) {
var c;
var intag = false; var newstr = "";
for(var i=0; i<s.length; i++){
c = s.charAt(i);
if(c=="<"){intag = true;}
else if(c==">"){intag = false;}
if(c == ">"){newstr += " ";}
else if(!intag){newstr += c;}
}
return newstr;
}
</script>
<script src="http://kang-fathur.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div>

Ganti tulisan berwarna merah dengan URL blog anda.

Bagaimana menurut anda?

Jika anda tidak keberatan silakan like Facebook, Tweet on Twitter, follow my blogger dan klik Google +

Terima kasih dan semoga ini bermanfaat bagi anda semuanya. Salam blogger

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Modifikasi Image pada Blogger

09.28 Blogger, Tips 'N Trik, tutorial

Sebenarnya cara ini sudah banyak di share-kan temen-temen blogger, apalagi The Master blog udah paham cara ini. Ya, dari pada gak posting sama sekali di bulan ini mending nulis wal;au hanya sekedar artikel biasa. Pernah tulisan yang dulu membuat Recent Comment dengan Image (Thumbnails), kali ini saya mencoba untuk membagikan cara memodifikasi gambar dengan CSS.

Pada contoh kali ini saya memainkan kode CSS untuk memodifikasi profil pada blog ini (posisi disebelah bawah)

untuk membuatnya langsung terapkan kode berikut pada gadget anda :

<style>#aboutme{border:2px solid #888; margin:2px 5px 0px 0px; padding:2px}
#aboutme:hover{border:2px solid #ccc; cursor:pointer}
.opacity{opacity:0.5; margin-left:50px; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out; -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg); -ms-transform:rotate(7deg); transform:rotate(7deg); filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand'); zoom:1}
.opacity:hover{opacity:1; margin-left:0px; -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); filter:progid:DXImageTransform.Microsoft.Matrix( M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand'); zoom:1; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000}
</style><style>#aboutme{border:2px solid #888;margin:2px 5px 0px 0px;padding:2px}#aboutme:hover{border:2px solid #ccc;cursor:pointer}.opacity {opacity:0.5;-moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out;zoom:1}.opacity:hover {opacity:1;zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
</style>
<img class="opacity" id="aboutme" src="URL IMAGE" align="left"/>
------------Tulisan anda------------

Semoga artikel yang sedikit ini dapat membantu dan bermanfaat bagi anda.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Tombol Demo (Download) dengan Image

07.01 Blogger, Tips 'N Trik, tutorial

Tidak perlu panjang lebar tentang cara menerapkan link demo dan donwload dalam blog anda. Sepeti yang saya posting pada tutorial sebelumnya tentang Membuat Tombol Demo (Download) dengan CSS, cara dan penerapannya sama. Untuk itu lebih baik pengunjung menhunjungi dulu artikel disini.

ada dua macam cara dalam menerapkan gambar (image) untuk dijadikan link dalam blogging yang Kang Fathur berikan dalam kesempatan kali ini.

Tombol link dengan satu gambar

Seperti yang Kang Fathur terapkan dalam blog ini yang berkaitan dengan Software, Photoshop, CorelDRAW menggunkan tombol image hanya dengan 1 gambar. Contohnya sebagai berikut

Bagi anda yang ingin mempunyai LINK DEMO dan DOWNLOAD, seperti dibawah ini

Kodenyanya adalah :

<div style="background: none repeat scroll 0% 0% rgb(232, 232, 232); border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; height: auto; overflow: auto; padding: 2px; text-align: center; width: auto;">

======= KATA ATAU KALIMAT ====================

<a href="URL TUJUAN LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="31" src="URL GAMBAR *IMAGE) YANG DITERAPKAN" width="223" /></a></div>

Tombol dengan satu gambar untuk 2 link

Seperti yang ditanyakan pengunjung bernama Beraaga Zerozeroseven blog disini, maka Kang Fathur mencoba untuk menjawabnya

LIVE DEMO

Code CSS-nya :

ul.tombolposting{list-style-image:none;list-style-position:outside;list-style-type:none;padding-left:25px;padding-top:0px;padding-bottom:30px}ul.tombolposting li{background:none 0 0 repeat scroll transparent;float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 5px 0 0;padding:0}
.demo{text-align:right;overflow:hidden;line-height:1.3em;margin:30px 0 0 0}a.demo1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) left bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.demo1:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) left top no-repeat scroll transparent}a.download{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) right bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.download:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) right top no-repeat scroll transparent}

Pererapannya adalah :

<ul class="tombolposting">
<li><a class="demo1" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="preview template">Preview</a> </li>
<li><a class="download" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="download template">Download Theme</a></li>
</ul>

Semoga berhasi dan bermanfaat. Amin

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Mengganti Background di Setiap Postingan

10.43 Blogger, Tips 'N Trik, tutorial

Kadang hal mudah dalam kehidupan tidak pernah terpecahkan solusinya. ya, itulah manusia...!!!
Seperti pada hal artikel berikut, sebenarnya ini sangatlah mudah untuk anda terapkan dalam dunia blogging akan tetapi kita gak pernah mau mencoba dan berusaha walau kadang penerapannya kita salah. Ya, inilah resiko....!!! hehehhehhe,

Untuk itu, bagi anda yang gak mau beresiko akan hal tersebut marilah kita amati tulisan sedikit ini tapi sangat bermanfaat bagi kita. Gambar yang anda terapkan untuk mengganti latar belakang (background) postingan blog agak sedikit transparant, tujuannya biar gak menggantu pada tulisan blog yang kita share-kan. Serta disesuaikan pada label yang diposting. Sebab ini dapat menjawab apa yang dituliskan pada blog tersebut.

LIVE DEMO

Langkahnya

Seperti biasa pada saat anda melakukan postingan blog, jangan lupa pilih Edit HTML bukan Compose, lalu tambahkan kode dibawah ini pada akhir tulisan anda.

<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKyS_yDAlU-NTK8SeJDb-pj4OxKJy8kosXbzeQJTU3IbNrPhnsAaQcg-erGthWn9Vk6MNbuqfxA8qYXwcq_hMlPAPyajfZVw8xrRssKIVOgFmhSUXZQ6RTAAVyQCAnz0XB77kmbVLgrYo/s1600/blogger_bg.png) no-repeat left bottom;}
</style>

Silakan ganti URL image diatas dengan foto anda
Atur posisi image yang disesuaikan dengan bentuk foto anda

Selamat mencoba dan terima kasih.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Recent Comment Dengan Gambar

13.50 Blogger, Tips 'N Trik, tutorial

Bisakah anda membuat recent comment (komentar terbaru dengan thumbnail atau gambar? Jika anda tidak bisa, mari anda ikuti artikel yang berkenaan dengan tutorial blog ini. Bahkan, menurut Kang Fathur sebaiknya anda memasang widget ini agar anda tahu siapa yang berkomentar dalam blog kesayangan anda.

Anda bisa melihat gambar ini untuk memastikan anda tidak menyesal dalam penerapannya. Atau langsung anda lihat di tab menu "Comment" pada blog Kang Fathur ini.

Bagaimana? Tertarik? Jika jawabannya iya, ikuti langkanya sebagai berikut :

Langkah Pertama

Anda langsung Login Blogger;
Pilih Design atau Rancangan;
Klik tab Edit HTML;
Cari Kode ]]></b:skin>
Copy paste kode berikut sebelum kode ]]></b:skin>

ul.tb_recent_comments{list-style:none;margin-top:15px;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

Cari Kode </head>
Copy Paste kode dibawah ini sebelum kode </head>

<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://1.bp.blogspot.com/-LCtABolbUDQ/T4c5vHX7AuI/AAAAAAAAAGw/bAKjTt-BsVI/s1600/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://zona-fathur.googlecode.com/files/cammentavatar.js"></script>

Simpan Template

Langkah Kedua

Tetap pada tab Design (Rancangan);
Klik tab Elemen Laman (Tambahkan Widget);
Pilih HTML/JavaScript;
Copy paste kode berikut kedalam HTML yang baru dipilih;

<script type="text/javascript" src="http://kang-fathur.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=7"></script>

Simpan.

Catatan : Ganti dengan http://kang-fathur.blogspot.com URL blog anda.

Bagaimana gampang bukan? silakan dicoba dan semoga berhasil dan bermanfaat bagi anda semua. Salam blogger Indonesia.

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Membuat Tombol Demo (Download) dengan CSS

08.24 Blogger, Tips 'N Trik, tutorial

Lama gak posting terasa kangen juga ingin ngeblog, ya mau gimana lagi hampi setiap hari lembur dengan kerjaan yang menumpuk. Pada waktu gak sedikit ini Kang Fathur sempatkan untuk membagikan tutorial yang mungkin anda butuhkan dalam blog. Bahkan bagi pengguna blog yang menyediakan link-link download, artikel ini sangat cocok untuk diterapkan.

Seperti blog penyedia download template, pasti disitu ada link DEMO dan DOWNLOAD yang harus diterapkan. Sebab, ini membuat pengunjung gak bertanya-tanya lagi kayak apa sih dan bagaimana hasilnya.

Seperti biasanya anda menerapkan kode CSS ini diatas kode ]]></b:skin> yang ada pada template blog anda. Brikut kopde CSS yang bisa anda copy paste sebelum kode ]]></b:skin>

Langakh I

.box-css3-tombol-download{
padding: 10px 0;
}
.css3-tombol-download{
margin:0 auto;
text-decoration:none;
width:140px;
text-align:left;
height:38px;
display:block;
overflow:hidden;
font:normal normal 20px/14px Arial, Helvetica;
color:#fefefe;
cursor:pointer;
text-shadow:0 1px 0 rgb(129, 56, 149);
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
background:#C65AE3;
background:-moz-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(213, 118, 237)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover{
text-shadow:0 1px 0 rgb(43, 42, 126);
box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
background:#4E4DD7;
background:-moz-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(117, 117, 239)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:before{
position:relative;
content:'';
display:block;
top:2px;
margin:0 auto;
width:98%;
padding:18px 0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:rgb(168, 60, 197);
background:-moz-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(206, 98, 235)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover:before{
background:rgb(60, 59, 196);
background:-moz-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(97, 98, 233)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:after{
position:relative;
float:right;
content:'';
display:block;
top:-50px;
width:36px;
padding:19px 0;
height:40px;
border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
background:rgba(72, 30, 178, 0.4);
}
.css3-tombol-download:hover:after{
background:rgba(91, 158, 228, 0.4);
}
.css3-tombol-download span{
position:relative;
color:#fefefe;
content:'';
display:block;
top:-24px;
margin:0 auto;
z-index:4;
padding:0 0 0 7px;
text-transform:capitalize;
}
.css3-tombol-download span:before{
position:relative;
float:right;
content:'';
display:block;
top:-6px;
right:12px;
width:12px;
height:12px;
background:rgb(225, 225, 225);
border-radius:1px 1px 0 0;
-webkit-border-radius:1px 1px 0 0;
-moz-border-radius:1px 1px 0 0;
}
.css3-tombol-download span:after{
position:relative;
float:right;
content:'';
top:6px;
right:-5px;
border-style:solid;
border-width:14px 11px 0 11px;
border-color:transparent;
border-top-color:rgb(225, 225, 225);
}
/*************************************/
.css3-tombol-download-sprite{
overflow:hidden;
display:block;
margin:0 auto;
text-decoration:none;
padding:19px 0 17px 0;
text-align:center;
color:rgba(220, 228, 235, 0.9);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7),
0 2px 1px rgba(0, 0, 0, 0.7);
text-transform:uppercase;
font:normal bold 18px/17px Helvetica, Arial;
max-width:160px;
display:block;
background:#273648;
background:-moz-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-o-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(55, 69, 83)),
color-stop(50%, rgb(38, 53, 70)),
color-stop(100%, rgb(23, 34, 45)));
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:before,
.css3-tombol-download-sprite:after{
position:relative;
float:left;
content:'';
width:110px;
height:1px;
}
.css3-tombol-download-sprite:before{
left:24px;
top:-19px;
background:#656E79;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.5)),
color-stop(70%, rgba(155, 158, 163, 0.5)),
color-stop(100%, transparent));
box-shadow:0 1px 10px rgb(155, 158, 163);
-moz-box-shadow:0 1px 10px rgb(155, 158, 163);
-webkit-box-shadow:none!important/* 0 1px 10px rgb(155, 158, 163) */;
}
.css3-tombol-download-sprite:after{
left:24px;
top:17px;
background:#585859;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(40%, rgba(44, 53, 64, 0.8)),
color-stop(60%, rgba(44, 53, 64, 0.8)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:hover{
outline:none;
color:rgba(220, 228, 235, 0.8);
background:#162230;
background: -moz-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(50, 61, 73)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(18, 31, 44)));
}
.css3-tombol-download-sprite:hover:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.7)),
color-stop(50%, rgba(44, 53, 64, 1)),
color-stop(80%, rgba(44, 53, 64, 0.7)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus,
.css3-tombol-download-sprite:active{
outline:none;
position:relative;
top:2px;
background:#243547;
background: -moz-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(40, 51, 65)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(19, 31, 44)));
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:focus:before,
.css3-tombol-download-sprite:active:before{
top:-19px;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.6)),
color-stop(70%, rgba(155, 158, 163, 0.6)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus:after,
.css3-tombol-download-sprite:active:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.5)),
color-stop(50%, rgba(44, 53, 64, 0.8)),
color-stop(80%, rgba(44, 53, 64, 0.5)),
color-stop(100%, transparent));
}

Jika anda sudah menerapkan dalam template anda langsung simpan template.

Langakh II

Dalam penerapan tombol DEMO atau DOWNLOAD anda dapat menirukan kode dibawah

<a href='http://kang-fathur.blogspot.com' class='css3-tombol-download-sprite'>Download</a>

Catatan : ganti tulisan http://kang-fathur.blogspot.com dengan URL (link) yang akan dituju pada tombol yang baru dibuat

Hasilnya akan seperti ini

Download

Atau

Demo

Semoga ini bermanfaat bagi anda. Trims udah berkunjung di blog Portal Informasi Online ini

Tips 'N Trik adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Tips 'N Trik ini.

Sistem Komputer

Friends

Mempercepat Loading Blog With Script Lazyload