Sulteng Tutorial

Cara Mengganti Tulisan Menu Template Blog

Cara Mengganti Tulisan Menu Blog Template - Untuk pertama kalinya ngeblog Khususnya blogger, pasti kawan -kawan binggung, cara mengganti tulisan yang melekat di template, pastinya kita hanya tau mengganti tulisan yang berada di postingan saja, nih untuk informasi lebih lengkapnya mari kita lihat,

Cara Mengganti Tulisan Menu Template Blog

Login ke Blog
Masuk menu Template
Edit HTML
Pilih lompat Widget, Pilih Header, maka secara otomatis kamu akan berada di header wrap untuk mengedit tulisan menu
Saya akan memberikan contohnya

<div id='header-wrap'>
<nav id='navigasi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<label id='toogle2'>≡ Menu</label>
<ul class=''>

<li><a href='#' itemprop='url'><span itemprop='name'>Pengetahuan</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Pendidikan</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Kesehatan</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Kuliner & Masakan</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Adat & Kebiasaan</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Unik & Gokil</span></a></li>
</ul>
</li>

Ubah yang berwarna tulisan merah ,Simpan template dan lihat hasilnya, Salam Blogger

Komentar

Memasang Tombol Smooth Back To Top di Blog

BLOGGER

Memasang Tombol Smooth Back To Top di Blog - Mungkin sudah banyak bertaburan di internet tentang tutorial cara memasang tombol back to top di blog dan kali ini saya akan berbagi tips mengenai tutorial tersebut. Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.

Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.

Berikut cara pemasangannya :

1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.

2. Simpan CSS di bawah ini sebelum ]]></b:skin> atau </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Simpan jQuery dan HTML di bawah ini sebelum </body>


<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Simpan template dan lihat hasilnya, Salam Blogger

Komentar

Cara Menghapus Atribusi di Blogger

BLOGGER

Cara Menghapus Atribusi di Blogger - Kebanyakan template yang disediakan oleh pihak ketiga memang sudah tidak lagi mencantumkan atribusi blogger. Akan tetapi, jika kita masih menggunakan template bawaan dari blogger maka template tersebut akan secara otomatis terpasang atribusi blogger yang tidak bisa dihilangkan secara manual.

Permasalah muncul ketika ada blogger yang masih ingin menggunakan template bawaan
blogger tetapi juga ingin menghapus atribusi blogger di templatenya tersebut untuk beberapa
alasan.

Meski tidak dapat dihapus secara manual, tetapi kita masih dapat menghapus atribusi blogger pada template bawaan dengan menambahkan kode untuk menyembunyikan widget atribusi ini melalui edit HTML template secara langsung. Untuk menyembunyikan tulisan diberdayakan oleh Blogger dengan kode CSS caranya cukup mudah, silakan ikuti langkah berikut :

1. Login ke blogger
2. Simpan kode di bawah ini tepat sebelum ]]></b:skin>


#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

Simpan template dan lihat hasilnya, Salam Blogger

Komentar

Cara Optimasi Gambar Agar SEO Secara Otomatis

BLOGGER SEO

Cara Optimasi Gambar Agar SEO Secara Otomatis - Hal ini dilakukan agar gambar yang ada di halaman blog Anda terindeks secara otomatis oleh search engine seperti google sehingga Anda tidak direpotkan dengan menambahkan secara manual (menambahkan deskripsi pada
<img alt="description of the image" height="125" scr="/image.png" width="125" /> saat memposting gambar).

Cara tersebut bisa dikatakan merepotkan. Dengan cara otomatis ini setiap gambar
mempunyai deskripsi sama dengan judul gambarnya. Oleh karena itu, Anda harus memberi
nama yang sesuai untuk setiap gambar yang akan diposting.

Kenapa harus Optimasi Gambar Agar SEO Secara Otomatis?

Karena gambar pada halaman blog merupakan salah satu media yang dapat digunakan untuk trafik pada search engine karena kebanyakan pengguna internet sangat suka mencari atau sekedar browsing untuk melihat-lihat gambar.

Berikut cara memasang kode SEO otomatis pada gambar

Cari kode </body> pada template blog Anda, kemudian salin dan pastekan kode di bawah ini

tepat di atas kode </body>


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan template dan lihat hasilnya, Salam Blogger

Setiap gambar blog yang Anda pasang di suatu artikel secara otomatis akan mempunyai
kode SEO friendly.

Komentar

Cara Menghilangkan Tang dan Obeng di Blog Terbaru

BLOGGER

Cara Menghilangkan Tang dan Obeng di Blog Terbaru - Tang dan obeng akan muncul di beranda blog apabila kita dalam keadaan login, fungsinya adalah untuk pengeditan secara cepat langsung di blog Anda Sendiri.

Sebenarnya fungsi ini juga penting saat kita ingin melakukan pengeditan dengan cepat,
dengan mengklik tombol logo ikon tersebut kita langsung diarahkan kebagian elemen laman yang akan diedit.

Namun ada juga pengguna blogger yang tidak suka dengan tampilan tang dan obeng
tersebut, untuk menghilangkannya caranya cukup mudah silahkan ikuti langkah berikut.

Login ke Blog
Masuk menu Template
Edit HTML
Cari kode ]]></b:skin> atau </style>

Masukan kode CSS berikut tepat sebelum kode ]]></b:skin> atau </style>


.quickedit{

display:none;visibility:hidden;}

Simpan template dan lihat hasilnya, Salam Blogger

Komentar

Sulteng Tutorial

Cara Mengganti Tulisan Menu Template Blog

Memasang Tombol Smooth Back To Top di Blog

Cara Menghapus Atribusi di Blogger

Cara Optimasi Gambar Agar SEO Secara Otomatis

Cara Menghilangkan Tang dan Obeng di Blog Terbaru

Cari Apapun Disini

Popular Posts

Comments

Recent Posts

Category