MASMIP.COM

Cara Menghilangkan Obeng dan Tang di Blogger

Diposkan oleh Huda pukul 10:20 AM , Beri Tanggapan

Biasanya kita sering melihat obeng dan tang berada di samping atau sudut widget yang kita pakai. Obeng dan tang ini sangat mempengaruhi Seo Friendly banyak orang yang menghiraukannya padahal obeng dan tang ini salah satu yang mempengaruhi skor seo maka dari itu saya akan memberikan tutorial untuk anda cara menghilangkan obeng dan tang di blogger.

Cara ini memang tidak 100% valid tapi memang ada berbagai template yang valid menggunakan cara yang saya gunakan ini terkadang obeng dan tang yang ada pada blogger kita biasanya bandel atau sulit dihilangkan meskipun menggunakan cara ini. Kok kamu tau? Memang.. saya pernah mengalami masalah yang satu ini bahkan hampir 10 kali saya pernah mengalami masalah ini tapi yang 9 kali memang obeng dan tang bandel atau susah dihilangkan akan tetapi setelah saya ganti template seo friendly hasilnya cukuplah memuaskan hasil skor 100% di https://chkme.com/ dengan menggunakan cara berikut ini :

Seo Score 100%

1. Cara pertama

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Letakkan kode di bawah ini tepat diatas ]]></b:skin> :

.quickedit{
display:none;
}

Setelah itu Save templatenya.

2. Menggunakan cara kedua

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Cari kode //img1.blogblog.com/img/icon18_wrench_allbkg.png
Apabila anda sudah menemukan kode tersebut kemudian hapuslah
Apabila anda tidak menemukan kode tersebut langsung saja Simpan templatenya.

Sekian tutorial yang saya berikan ini semoga bermanfaat bagi anda yang membacanya.

Label: Blogger, Tutorial

Cara Memodifikasi Blockquote Keren

Diposkan oleh Huda pukul 8:48 AM , Beri Tanggapan

Blockquote adalah kotak yang didalamnya berisi tentang script atau teks khusus (penting) dengan tampilan yang menarik. Postingan saya kali ini adalah Cara Memodifikasi Blockquote Keren.

Contoh Gambar Blockquote Keren

Pada dasarnya blogger sendiri sudah menyediakan blockquote, namun kurang menarik juga kalau tampilan blockquote biasa-biasa saja. biasanya orang itu sangat bosan melihat tampilan blockquote yang biasa-biasa saja tapi kali ini saya akan memberi tutorial untuk memodifikasi blockquote yang mulanya biasa-biasa saja atau masih standar dan setelah anda mengikuti Tutorial yang saya berikan maka nantinya akan menghasilkan tampilan blockquote yang menarik dan keren.

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Letakkan kode CSS di bawah ini tepat diatas ]]></b:skin> :

/* BLOCKQUOTE */
.post blockquote,.tr_bq{ background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-Vjc96n_4x2ZTxX_Y7theRCR5i2b6yXvzKODVIuIfJjBFqMM8Is6_ViSdMoUwCJBlVBJR1UQabF-srr7WpJZYAkY80_vvwAweVdhEY2jJSPMJx6dPzWE17YpreezmZoNIe3PI52Mdg8/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 1.0em &#39;Courier New&#39;, Courier, FreeMono, monospace;}
.post blockquote p { margin: 0; padding-top: 10px; }
.tr_bq { margin: 0; padding-top: 10px; }

Keterangan : background: #F3F3F1 Anda bisa mengubah warna background dengan cara mengganti kode warna tersebut.

Jika anda sudah meletakkan CSS diatas maka selanjutnya adalah menyimpannya. Semoga tutorial ini bermanfaat bagi anda yang sudah membacanya dan mempraktekkanya.

Label: Blogger, Tutorial

Widget Floating Sosial Media dengan Efek Easing

Diposkan oleh Huda pukul 10:37 PM , Beri Tanggapan

Floating Sosial Media

Apa itu Widget Floating Sosial Media? Widget Floating Sosial Media adalah Tombol Follow via Facebook, Twitter, Google+, P, YouTube, Langganan. Widget ini tidak asing lagi bagi para blogger yang biasannya otak atik blog yang mereka punya, Widget ini akan mengikuti gerak naik turun cursor. Nah, kali ini saya akan berikan tutorial Cara Membuat Widget Floating Sosial Media dengan tambahan efek Easing.

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNpIYjyKePp1hvkIXv1C4qDStodF2esqRro4rgqdF7e9ZV-sF0gEgSr6r279SpZ9hI2EOTDgAZTIS6kxHy_Mg9Rltlo_2u22QEXe-LB2AhrOxmvt1eogqJuLGcdx6UCs2z2XW_pSJ-P1M/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Berikutnya penambahan jquery dan javascript, masih berada didalam Edit HTML letakkan kode berikut sebelum </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

Untuk jquery library script atas sendiri, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja. Selanjutnya memanggil widget tersebut, dengan cara meletakkan kode HTML di bawah ini tepat diatas </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/your FB'
 id='facebook-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/your twitter'
 id='twitter-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/your G+'
 id='google-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Google</span></span></a>

<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>

<span class='social-text'>Follow via Pinterest</span></span></a>

<a class='itemsocial' href='https://www.youtube.com/user/your ID'
 id='youtube-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Youtube</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/your feed'
 id='rss-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
RSS</span></span></a>

</div>

Keterangan : Ganti tulisan warna biru diatas, dengan ID yang anda miliki, Lalu Save Templates dan lihat hasilnya.

sumber code : http://www.maskolis.com/2013/03/floating-social-bookmark-dengan-efek.html

Label: Blogger, Tutorial

MASMIP.COM

Cara Menghilangkan Obeng dan Tang di Blogger

Cara Memodifikasi Blockquote Keren

Widget Floating Sosial Media dengan Efek Easing

Sosial Widget

Artikel Menarik

Kotak Arsip