VIDEO

Read More

Cara Mengubah Tampilan Readmore Blogger Menjadi Grid Dengan Thumbnails

Jika Anda menjalankan Wallpaper atau Lucu Images niche blog, Berikut adalah tutorial berguna bagi anda. Pada artikel ini kita akan membahas mengenai bagaimana Anda dapat menampilkan posting blogger dalam tampilan grid dengan thumbnail. Grid View dengan Thumbnail merupakan script untuk diri-host Blogger blog yang menampilkan posting blog sebagai grid thumbnail gambar dalam homepage dan arsip halaman. Biasanya, posting Anda menampilkan panjang penuh dengan gambar besar yang mengambil terlalu banyak ruang di blog Anda dan diperlukan terlalu banyak bergulir. Jadi, jika Anda ingin memiliki blog Anda bersih dan cepat loading maka Anda harus mencoba galeri grid, dengan thumbnail dan judul posting, menghubungkan kembali ke pos sumber. Sebelum Anda pergi untuk langkah-langkah menginstal fitur ini untuk blog Anda Silakan periksa demo blog ini sekali.

Bagaimana Cara Install Readmore Grid:

1.Login Blogger > Template > Edit HTML
2.Tekan CTRL+F Untuk Menampilkan Kotak Pencarian Untuk Mempercepat Pencarian Tulisan ,Ketik </head> di dalam kotak pencarian dan tekan ENTER untuk menemukannya.
3.Sekarang Masukan Kode Di Bawah Ini Sebelum Kode </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript'  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'  type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

    var width         = 200;
    var height        = 170;
    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKx57g6wAG7o7YM0fWtA5gWKY-xzfpqbZ-RYqyLqPz7THXhTxayURalhjyLtSNTBQssVECOETQ_YqA3IGDEgy2G-fX-6p-agZb_ujx7H12um2ydcg06YAGJjU34Uk-Bod3BGrEXkFHxk/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titleLeftRightPadding    = 5;   

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding +  'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');   
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
           
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

         thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');
       
        var thumbTitle =  $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);  
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');             wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:  -webkit-gradient(linear, left top, left bottom,  color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));  /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter:  progid:DXImageTransform.Microsoft.gradient(  startColorstr=&#39;#7d7e7d&#39;,  endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

Catatan:  

• Jika Anda ingin membuat thumbnail posting yang lebih besar, memodifikasi 200 (lebar) dan 170 (tinggi) nilai warna biru
• Untuk mengubah thumbnail default untuk ketika tidak ada gambar, ganti URL merah dengan Anda sendiri.  

Read More

Cara Membuat Facebook Fanspage melayang

di tutorial pagi ini kita akan membahas mengenai " Cara Membuat Facebook Fanspage melayang Di Web "
kenapa saya bilang di web?  disini karena bisa fleksibel di mana - mana asal tau masangnya seperti blogger, Web buatan sendiri, atau dengan CMS seperti Wordpress dan kelebihan tutorial primasaja.com kali ini menekankan terdapat unsur " Responsive ", yang dimaksud responsive disini yaitu dapat tampil dengan baik di dalam handphone, tablet, maupun web

facebook fanspage ini dapat membuat pengunjung anda mengetahui halaman fans situs, produk maupun yang lainnya di website anda bukan hanya dapat membuat pengunjung mengetahuinya tetapi juga dapat langsung like atau menyukai halaman fanspage facebook anda langsung dari web milik anda

mungkin bagi anda yang menginginkan fitur ini didalam website anda yang sedang membutuhkan sekali fitur menarik ini sudah sangat menanti - nanti bukan? baiklah dibawah ini adalah scriptnya

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
z-index: 1;
left: 56%;
right:5%;
margin:0px 0px 0px -182px;
width:280px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"8px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Salam Hangat,<blink>Like Dan Ikuti Info Terbaru Website kami Dari Fanspage Facebook Dibawah ini  </blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/pages/Jaka-prima-maulana-blog/691841597545944?fref=ts" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Fanspage Like <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.jakaprimamaulana.blogspot.com">jakaprimamaulana.blogspot.com</a> </p>
</div>
by jakaprimamaulana at primasaja.com

Catatan: ganti yang berwarna merah dengan alamat fanspage anda

di tutorial x ini saya akan coba menjelaskan cara memasang script tersebut di blogger.com berikut langkah - langkah demi langkahnya

1. buka www.blogger.com lalu login dengan memasukkan email dan password anda
2. didalam website anda pilih tataletak > tambahkan gadget > Html/Javacript
3. masukkan coding yang sudah saya berikan diatas tadi
4. Selesai

Read More

Memperbaiki Error Website Links di CHKME

Mengatasi/ Memperbaiki Error Website Links di CHKME. Sobat blogger, bagi kalian yang suka cek kekuatan SEO blog di situs CHKME, pasti ingin sekali agar blognya bisa SEO 100% di chkme dengan maksimal berikut mengatasi error-error yang di tampilkan situs chkme agar SEO blog optimal, namun pada beberapa kasus tentang error disini ada yang jarang sekali tau bagaiman cara mengatasi error title pada bagian website links, biasnya disana di tujukan banyak sekali gambar atau sebuah link yang tidak mempunyai title termasuk masalah pada comment-form. seperti error yang di tujukan pada gambar di bawah ini.

Untuk memperbaiki masalah "Error Website Links di CHKME" sebenarnya sangatlah mudah kalo anda bisa memperbaikinya, hehe.. jadi sebenarnya yang terjadi disana adalah karena pada setiap link dan gambar yang ada pada blog anda tidak mempunyai title tag, maka sudah jelas untuk cara memperbaiki di atas adalah dengan cara memberi title tag pada setiap link dan gambar pada blog anda. Tutorial menambahkan title pada setiap link ini juga termasuk salah satu optimasi SEO on page untuk mengoptimalkan link dan gambar.

Cara Mengatasi Error Website Links di CHKME

1. Masalah Error pada comment-form

Error pada commnet-form juga sering di tujukan pada bagian website link, disini masalahnya karena bagian komentar yang tidak mempunyai title tag, jadi cara mengatasinya sudah jelas dengan cara menambahkan title pada halaman komentar.

1. Buka akun blogger anda 

2. Pilih menu template > Backup template anda terlebih dahulu > Klik Edit Html

3. Silahkan anda cari kode addCommentOnclick' ( Gunakan CTRL+F )

Setelah itu tambahkan kode title='Comments' sesudah kode addCommentOnclick'

Hingga akhir penampakannya akan seprti di bawah ini

addCommentOnclick' title='Comments' 

Catatan : biasnya kode tersebut lebih dari satu, tambahkan semua dan Pastikan ada jarak satu sepasi pada penambahan title.

4. Jika sudah klik simpan template.

2. Masalah Error pada bagian link dan gambar

Masalah error pada di bagian link dan gambar adalah penyumbang error terbanyak, untuk cara mengatasinya adalah dengan cara menambahkan title pada bagian link dan gambar.

1. Selanjutnya anda cari tiga kode seperti di bawah ini.

expr:href='data:post.url'
expr:href='data:post.link'
expr:href='data:post.href'

2. Lalu tambahkan kode expr:title='data:post.title' di setiap kode tersebut.

hingga akhir penampakannya akan seperti di bawah ini :

expr:href='data:post.url' expr:title='data:post.title'
expr:href='data:post.link' expr:title='data:post.title'
expr:href='data:post.href' expr:title='data:post.title'

biasanya kode-kode tersebut lebih dari satu, silahkan tambahkan semuanya dan pastikan ada jarak sepasi pada penambahan kode.

5. Jika sudah klik save template.

3. Masalah Error di bagian widget label.

Jika anda menambahkan widget label maka error akan otomatis juga muncul pada bagian website link, cara mengatasinya sama saja yaitu dengan menambahkan title pada widget label.

1. Masih di edit template, sekarang cari kode seperti di bawah ini.

expr:href='data:label.url'

2. Selanjutnya anda tambahkan kode expr:title='data:label.name'

3. Hingga akhir penampakannya akan seperti di bawah ini.

expr:href='data:label.url' expr:title='data:label.name'

4. Klik save template 

4. Menambahkan title pada URL

Jika di template anda terdapat url maka bisanya akan tampak seperti di bawah ini  :

<a href='http://www.madamvia.web.id/'>Tips Blogging</a>

Nah.. ntuk penambahan titlenya, anda hanya menambhakan kode title='Tips Blogging'

hingga penampakannya akan seperti di bawah ini.

<a href='http://www.madamvia.web.id/' title='Tips Blogging'>Tips Blogging</a> 

Nah itulah sobat, cara mengatasi error pada website link di chkme, silahkan di cek lagi, jika fix maka silahkan ucapkan alhmdulillah, jika pusing silahkan minum obat :) salam sukses selalu.

Read More