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() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1uY9rP6KUVYYDv5DAkd5qDJgD6RGkyqRpb6fl2uaVZkT3y12XEo9TuLz-5_IVeSW3QpTXv_fN_dh3p-6qdAnwa3Lf6TYYDj_abCIlBqKrJXWXIkjTCY11HSdRJHZMyGdxc983aDy01w/s1600/loading.png&quot;,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.....!!!!

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Free Download 'Zona' Template SEO Friendly

Template simple atau sederhana ternyata banyak diminati oleh pengguna blogger begitu juga Kang Fathur. Mereka menggangap template sederhana tapi menarik ini dapat bersaing dalam peringkat di search engine karena template yang SEO Friendly. Untuk itu, pada tulisan kecil ini saya mencoba membagikan 2 template SEO secara gratis untuk anda semua.

Template ini gak kalah bersaing dengan template-template SEO dan Magazine lainnya, bahkan bisa dibilang lebih terkesan indah dengan tampilan dark color dan loading yang ringan. feature yang ditawarkan juga hampir sangat simple untuk diterapkannya.

Minimum Dark Template

Template ini masih original yang berhasil di download dari abazta creations.

DEMO | DOWNLOAD

Zona Maximum Dark Template

DEMO | DOWNLOAD

Feature on template

1. Read More tanpa JavaScript, membuat template ini terkesan menarik untuk dilihat.
2. Titel Tooltip Otomatis pada setiap link, memberikan kesan terindah dalam meanpilkan title link yang mengikuti mouse
3. Recent Comments Simple, tidak  memperngaruhi loading blog (loanding blog)
4. About The Author, menunjukkan sang author blog yang dilengkapi dengan modifikasi image (gambar) yang menarik.
5. Archive, merupakan daftar isi blog yang sudah dirubah dengan sentuhan-sentuh CSS dan JavaScript yang mantap dan bisa di sort berdasarkan tanggal dan posting.
6. Gallery, ini merupakan penjabaran dari daftar isi thumbnail yang diberikan oleh Kang Fathur sebelumnya.

Semoga template SEO Friendly ini dapat menjadikan anda terkenal dengan blog baru ini. Minimal template ini tersimpan dalam koleksi template anda.

Pesan PIO

Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah template, terima kasih.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

RSS Comments Dengan Javascript

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 :

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

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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Mengatasi Halaman Mandiri (Page Statis) Error

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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Membuat Daftar Isi Seperti Gallery

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,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') 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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Auto Read More Tanpa JavaScript

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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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 == &quot;item&quot;'>
    <data:post.body/>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>
</b:if>

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Menampilkan Statistik Komentar dan Posting

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.

Posted

posts published

Commented

Published comments

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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRqqT2_OIk7NZrY9DR6pa_5ydn5uzds4UXuMXtt3Gn8NeYlK428snviqDcATZZEAyuSTS0hsfD2Eq8Drxfzx8rzNOkrTWIG0scvJ9j2MUQiV67huKiTiAKfidpSucj8NLv40Xvr8j6WpE/s1600/posted.png&quot;) 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&amp;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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepgeSYwA4295TuzxJ9tnxE-93YwhpDhfJ3OtiLTvlyyFLO70ubEjxK4IWhfmOORdqElrZ01XxzdbarVIl7lKhVU7-X0D2OdZLyazJEgsNduWRluyINyM6zVzaY6kod8G_bMHuzUDWvPk/s1600/commented.png&quot;) 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&amp;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.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Membuat Halaman Arsip Blog (Daftar Isi)

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.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Dapatkan Domain Gratis Dot Com Dari Intuit.Website

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

1. Siapkan nama domain [dot]com, [dot]org, [dot]info, [dot]name bisa cek Disini
2. Daftar akun Intuit.Website Disini
3. Untuk ByPass klik Disini
4. Masukan Email dan Domain
5. Masukan domain tanpa www
6. Jangan centang Domain Privasi (akan kena biaya $1USD)
7. Centang Saya Setuju
8. 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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

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

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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

BlackZone Template Classic

Urusan modifikasi bloggersetiap saat gak akan ada habisnya, apalgi pembuatan template blog yang kian hari kian ada inspirasi untuk membuatnya. Pada template Ebook Gallery dan Magazine juga pernah di bagikan gratis untuk anda, semoga apa yang pernah Kang Fathur tuliskan bermanfaat bagi anda semua. Template ini banyak referensi yang bisa dibuat untuk menjadi template seperti yang Kang Fathur bagikan. Template sederhana dengan style classic yang bisa digunakan untuk urusan news, berita kumpulan artikel dan lain sebagainya, tergantung dari anda untuk dipakai.

LIVE | DOWNLOAD

Install BlackZone Template Classic

1. Feature Pada Pendidikan
2. Like Us
3. Terkini
4. Komentar
5. About  The Author
6. Random Post

Semoga template ini gak mengurangi rasa anda terus berkunjung pada blog Berbagi Untuk Semua dalam dunia Portal Infomasi Online. Sampai jumpa lagi, bye.....!!!!

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Membuat Random Posts pada Blog

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 :

1. Buat Related Posts pada blogger anda;
2. Perbanyak Backlink pada artikel (tulisan) anda;
3. Backlink blog anda pada social bookmark;
4. Sering bertukar link atau banner;
5. Perbanyak komentar di blog dan situs (web) lain;
6. Mengedit blog agar SEO Friendly
7. 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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Penggabungan Label Blog dengan Recent Posts

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.

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&gt;&gt; </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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Modifikasi Image pada Blogger

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.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Membuat Tombol Demo (Download) dengan Image

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

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Mengganti Background di Setiap Postingan

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>

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

Selamat mencoba dan terima kasih.

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

ZonaMagz Template Berita Elegant

Seperti yang Kang Fathur bagikan sebelumnya, kali in gak kalah menarik dengan template-template magazine yang ada. Sebab banyak fitur yang ditampilkan dalam template yang saya beri nama ZonaMagz Template.

Mungkin template ini bisa bermanfaat dan menjadikan anda pengunjung setia blog Portal Informasi Online ini puas alias gak bosen. Template magazine ini dilengkapi dengan fitur, slider otomatis berdasarkan label yang diingikan, label image yang dapat menarik pengunjung,

LIVE | DOWNLOAD

Instalasi Widge

• Slider Header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
function rpthumbnt(json)
{
document.write('<ul class="rp_plus_img">');
for(var i=0;
i<numposts;
i++)
{
var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
var posturl;
if(i==json.feed.entry.length)break;
for(var k=0;
k<entry.link.length;
k++)
{
if(entry.link[k].rel=='alternate')
{
posturl=entry.link[k].href;
break
}
}
var thumburl;
try
{
thumburl=entry.media$thumbnail.url
}
catch(error)
{
s=entry.content.$t;
a=s.indexOf("<img");
b=s.indexOf("src=\"",a);
c=s.indexOf("\"",b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{
thumburl=d
}
else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOwIUE1WH46-Njs2eT2zhZohL8rWxDSLeY13womt63zlkwwxdrvt53RPzvgGExxBLDWlgpJRsEcXdpb-0YHlK28XlIuu4LgNR86w-DkZEfu20LhBt6VWva1XSyhPQHVfcXivxDvdYg9Uz/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="'+posturl+'" target="_blank"><img src="'+thumburl+'"/></a>');
document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><br>');
if("content"in entry)
{
var postcontent=entry.content.$t
}
else if("summary"in entry)
{
var postcontent=entry.summary.$t
}
else var postcontent="";
var re=/<\S[^>]*>/g;
postcontent=postcontent.replace(re,"");
if(postcontent.length<numchars)
{
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
}
else
{
document.write('<span class="news-text">');
postcontent=postcontent.substring(0,numchars);
var quoteEnd=postcontent.lastIndexOf(" ");
postcontent=postcontent.substring(0,quoteEnd);
document.write(postcontent+'...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker()
{
last=$('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 10;
var numchars = 100;
</script> <script src="/feeds/posts/default/-/Technology?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script></ul>

Tambahkan kode diatas dan ganti  Technology dengan label anda

• Slider Post

numposts1 = 5;
label1 = "Social Media";

Pada edit HTML cari kode diatas dan ganti Social Media dengan label anda

• Game News

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Game?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Tambahkan kode diatas dan ganti  Game  dengan label anda

• Zona Design

<script language="JavaScript" src="http://feeds.feedburner.com/KangOnkDesign?
format=sigpro&nItems=12&format=openLinks=new
&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=25&dateLocation=below" type="text/javascript"></script>

Tambahkan kode diatas dan ganti   KangOnkDesign  dengan Feedburner anda

• Entertainment News dan Sport News

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Entertainment?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://zonamagz.blogspot.com/feeds/posts/summary/-/Entertainment?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://zonamagz.blogspot.com/search/label/ Entertainment" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article &#187;</a>

Tambahkan kode diatas dan ganti   Entertainment dengan label anda

• Feedburner Feature

Silkan kunjungi postingan disini untuk membuat gadget  seperti wordpress

• Ads Sidebar

<a href="http://kang-fathur.blogspot.com/"><img src="http://s3.buysellads.com/1261376/106032-1336544849.gif"/></a><br />
<a href="http://kang-onk.blogspot.com/"><img style="float:left; margin:5px 0px 0px 15px;" border="0" src="http://s3.buysellads.com/1253581/64466-1308069194.gif" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:5px 15px 0px 0px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcywTaENho-u6AujlIgid221if38Z_ySh5oBfQ5_Z_X_2WRo6kdMYuigWB3AQtg_gekmv0rEBtk1fFYrgINQxbyj94LRVbM5CaL4bSqrew1tyvzBUrAJt-COJHKlao8DqtrfjUXRUbHI4E/s1600/ad2.jpg" /></a>
<a href="http://kang-fathur.blogspot.com/"><img style="float:left; margin:10px 0px 5px 15px;" border="0" src="http://s3.buysellads.com/1260709/71777-1312827947.jpg" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:10px 15px 5px 0px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>
<a href="http://kang-fathur.blogspot.com/"><img style="float:left; margin:10px 0px 5px 15px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:10px 15px 5px 0px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>

Ganti URL dan IMGAE diatas sesuai dengan keinginan kamu.

• Random Post Feature

<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=8;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>

Tambahkan kode diatas pada gadget anda

Pesan PIO

Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah template, terima kasih

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More

Membuat Daftar Isi Blog Dengan Thumbnails

Bisakah membuat datar isi atau sitemap yang diterapkan dalam blog kita menggunakan thumbnail alias gambar yang ada pada postingan. Seperti yang Kang Fathur bagikan tentang cara pembuatan daftar isi blog sudah jelas bermanfaat bagi pengguna blogger. Akan tetapi sitemap kali ini akan dibagikan oleh Kang Fathur mudah sekali seperti membalikkan tangan kita.

Biar gak terlalu lebar dan keluar dari topik pembahasan, sebab cara ini memang sederha tapi menarik. Menarik ubtuk diterapkan, diliat oleh pengunjung. Bahkan sitemap ini juga dilengkapi oleh animasi yang setelah didekati mouse thumbnail tersebut secara otomatis akan berputar.


LIVE DEMO

Hehehehe.... gimana bagus bukan?
Hanya anda menerapkan atau menambahkan view/flipcard setelah URL blog anda.

http://klik-template.blogspot.com/view/flipcard

semoga bermanfaat ya gan,,,,,.... Amin Allahumma Amin

Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Blogger ini.

Read More