Keuntungan menggunakan akun Google Plus pada Blogger

Hallo sahabat-sahabat Blogger, seneng rasanya bisa kembali posting dan berbagi serta belajar bersama disini. Ngomong-ngomong gimana nih kabarnya para sahabat Blogger, mudah-mudahan semuanya sehat, ceria serta semangat selalu ya.

Google+ dan Blogger Bersahabat

Di hari yang cerah ini saya akan kasih tau, apa aja sih keuntungan menggunakan akun Google Plus pada Blogger.  Jika anda menggunakan akun Google Plus pada Blogger pasti pernah deh merasakan keuntungannya. Sebelum kita membahasnya lebih jauh, buat yg belum kenal dengan Google Plus, yuk kita kenalan dulu dengan Google Plus. (Baca:Apa itu Google+ atau Google Plus).

Kalau udah kenal dengan Google Plus atau Google+, langsung aja deh. Berikut keuntungan menggunakan akun Google Plus pada Blogger.

1. Pertama, dengan akun Google Plus anda akan mendapatkan jaringan teman yang luas, dengan begitu kita bisa dengan mudah bersilaturahmi kepada sesama akun Google Plus

2. Dengan menggunakan akun Google Plus, kita bisa dengan mudah mendapatkan banyak komentar dan pengunjung pada blog kita. Tapi dengan di barengi oleh aktivitas blogwalking tentunya.

3. Setiap postingan blog yang mendapatkan banyak G+, pasti dengan mudah dan cepat terindex  Oleh Google. Bahkan bisa menduduki posisi teratas. Jadi kita ga perlu lagi tuh yang namanya optimasi Postingan di blog kita, kita cukup mengumpulkan banyak G+ dan kita bisa berada di posisi teratas di google

Apalagi ya keuntungan menggunakan akun google+ pada blogger. Tentunya masih banyak, tapi selama ini saya baru merasakan keuntungannya itu saja. Tapi saya yakin masih banyak lagi keuntungannya.

Nah, kalo dari pengalaman sahabat blogger sendiri menggunakan akun google plus pada blogger apa aja sih keuntungan yang kalian rasakan.

Popular Posts Warna-Warni Ala Evo Magz

Popular Posts Warna-Warni Ala Evo Magz

Cara Membuat Popular Posts Warna-Warni Ala Evo Magz - Ada yang tau Template Evo Magz. Pasti sahabat blogger tau dong, siapa sih yang ga tau template buatan Mas-sugeng yang satu ini. Ada yang menarik dari template ini, template ini mempunyai desain yang simple dan cukup membuat mata melek dengan widget Popular Posts-nya yang berwarna-warni "menurut saya". Nah pada hari ini saya akan share cara membuat popular posts kita mirip dengan popular posts Template Evo Magz. Caranya cukup mudah kalian hanya perlu memasukkan CSS Popular Post warna-warni ala Evo Magz ke dalam template kalian.

Berikut CSS popular Posts Warna-Warni Ala Evo Magz :

 /* Popular Posts By Wahid Lovers */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
} 
Demikianlah Cara Membuat Popular Posts Warna-Warni Ala Evo Magz. Semoga kalian suka, kalau ga suka di buang aja hehehe.

Cara Membuat Tombol Tautan Back To Top Pada Blog Versi mobile

Tombol Tautan Back To Top Pada Blog Versi mobile
Di hari libur ini saya akan share tutorial untuk blog versi mobile yaitu Cara Membuat Tombol Tautan Back To Top Pada Blog Versi Mobile. Seperti yang kita ketahui back itu artinya 'kembali' dan To itu 'ke', dan Top itu 'Atas'. Jadi Kalau di satukan dalam bahasa indonesia adalah kembali ke atas. Fungsi dari tombol tautan back to top sendiri untuk memudahkan kita untuk kembali ke halaman bagian atas jadi kita tidak perlu ribet untuk scroll ke atas jika ingin kembali ke halaman bagian atas.

Cara Membuat Tombol Tautan Back To Top Pada Blog Versi Mobile:
1. Seperti biasa masuk dulu ke akun blogger anda.
2. Masuk ke bagian template lalu klik Edit HTML.
3. Kemudian cari kode </head>
4. Sisipkan kode <a id='atas'/> Tepat di atasnya
5. Selanjutnya Cari kode <b:include name='mobile-nextprev'/>
6. Sisipkan kode berikut ini di atas <b:include name='mobile-nextprev'/>
<div style='-moz-border-radius: 7px 7px 7px 7px; background: #eeeeee; background: -moz-linear-gradient( center top, white 40%, #cccccc 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) ); border: 1px solid #000000; height: auto; margin: 0px; overflow: auto; padding: 2px; text-align: center; width: auto;'> <b><a href='#atas'>Kembali ke Atas</a></b> </div>
7. Simpan Template dan lihat hasilnya.

Cara Membuat Icon Menu Versi Mobile di Atas Header/Navbar Blog

Di hari yang cerah ini saya akan share Cara Membuat Icon Menu Versi Mobile di Atas Header/Navbar Blog. Dengan icon menu versi mobile ini akan memudahkan pengunjung untuk mengakses blog anda dan tentunya blog versi mobile anda akan terlihat lebih menarik dan keren. 
Icon Menu Versi Mobile
Cara Membuat Icon Menu Versi Mobile di Atas Header/Navbar Blog:
Langkah Pertama:
1. Masuk ke akun Blog anda
2. Masuk ke bagian Template
3. Klik Edit HTML
4. Kemudian Cari kode ]]></b:skin> 
5. Letakkan kode berikut ini di atas kode ]]></b:skin>
.bilah-menu-seluler{
  text-align:center;
  width:100%;
  min-height: 34px;
  z-index: 99;
  background: #000000;
  background: -moz-linear-gradient(center top ,#000000 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));
  background: -o-linear-gradient(top, #000000, #000000);
  background: -ms-linear-gradient(top, #000000,#000000);
  border-bottom: 2px solid #4169E1;
}
.bilah-menu-seluler ul{
  margin:0px;
  padding:0px;
}
.bilah-menu-seluler li{
  display:inline;
}
.bilah-menu-seluler img{
  width:30px;max-width:30px;
  height:24px;max-height:24px;
  margin:2px;
  padding:2px;
  border-bottom: 1px dotted #4169E1;
}
.bilah-menu-seluler img:hover{
  background: #000000;
}
Catatan: kode yang di warnai merah adalah warna background dan gradisi, warna background diatas menunjukan warna hitam, anda bisa ganti warnanya sesuka anda.


Langkah kedua:
1. Cari kode <div class='content-outer'> 
2. Letakkan kode berikut ini diatas kode <div class='content-outer'> 
<b:if cond='data:blog.isMobile'>
  <div class='bilah-menu-seluler'>
    <ul>
      <li><a href='http://wahidlovers.blogspot.com/?m=1'><img alt='Beranda' src='http://4.bp.blogspot.com/-sxGldjTTXoI/UoLarqNEGlI/AAAAAAAAB0A/H4NKpBZWYho/s1600/nav-icon.png' title='Beranda'/></a></li>
      <li><a href='http://wahidlovers.blogspot.com/p/blog-page.html?m=1'><img alt='Sitemap' src='http://3.bp.blogspot.com/-HqxSZgSXZuA/UoLahTga0tI/AAAAAAAABz4/bx_XttiZXiU/s1600/Iuze77NW11J-4.jpg' title='Sitemap'/></a></li>
      <li><a href='http://wahidlovers.blogspot.com/2013/08/contact.html?m=1'><img alt='Contact' src='http://4.bp.blogspot.com/-6cx_i3jor2Q/UoLcfjHafGI/AAAAAAAAB0w/v6_tLGAT07I/s1600/Iuze77NW11J-2.jpg' title='Contact'/></a></li>
      <li><a href='https://plus.google.com/u/0/+Abdurrahman78/about'><img alt='About' src='http://1.bp.blogspot.com/-QMTgNxX0GHE/UoLa5uOlpOI/AAAAAAAAB0Q/mlXWikAIMaU/s1600/Iuze77NW11J-5.jpg' title='About'/></a></li>
      <li><a href='http://wahidlovers.blogspot.com/p/privacy-policy.html?m=1'><img alt='Privacy Policy' src='http://2.bp.blogspot.com/-4SSjbpWlKHs/UoNUJ3bg6DI/AAAAAAAAB24/vFWD0UZuxXM/s1600/IMG_20131113_155826.jpg' title='Privacy Policy'/></a></li>
 <li><a href='http://wahidlovers.blogspot.com/p/disclaimer-for-wahid-lovers-if-you.html?m=1'><img alt='Disclaimer' src='http://1.bp.blogspot.com/-J9MT4pDYY_8/UoLcak331sI/AAAAAAAAB0o/K9fw6OLJHHk/s1600/Iuze77NW11J-3.jpg' title='Disclaimer'/></a></li>
    </ul>
  </div>
</b:if>
Catatan: Silahkan ganti tulisan yang di warnai biru dengan url dan judul yang mau di tampilkan sebagai menu. Anda juga bisa mengganti icon menu dengan icon menu yang lain, dengan cara mengganti url gambar yang di warnai merah.
Copyright © 2017 Wahid Lovers Powered by Blogger
DMCA · Privacy Policy · Sitemap · Contact ·
Back to Top