Cara Menambahkan Photo Profile Sebelum Judul Postingan

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis


Sang Blogger >> cara menambahkan photo profile sebelum judul postingan. Alhamdulillah malam ini bisa berbagi tips cara menambahkan photo profile sebelum judul postingan di blogger.com seperti yang sahabat bisa lihat di blog sangbloger ini pada gambar di atas yg ada tanda panahnya.

Lalu bagaimana cara membuat nya? Gampang sekali. Silahkan ikuti langkah-langkah cara menambahkan photo profile sebelum judul postingan berikut ini:

1. Silahkan log in ke blogger
2. Pilih rancangan 

3. Pilih edit HTML

4. Jangan lupa centang Expand Template Widget

5. Setelah itu backup dulu template sahabat untuk menjaga kemungkinan yg tdk diinginkan agar bisa di restore seandainya terjadi kesalahan

6. Cari kode .post h3 atau .post h2 kemudian nanti sahabat akan menemukan kode yang kira-kira mirip seprti kode berikut ini


.post h2 {
color: #007ACC;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal;
margin: 0px;
padding: 0px 10px 0 47px;
}


7. Ganti kode di atas menggunakan kode di bawah ini

.post h3 {
background:url(LINK GAMBAR PHOTO PROFIL SAHABAT) no-repeat top left;
color: #289728;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal; height:45px;
margin: 0px;
padding: 0px 10px 0 47px;
line-height:1.1em;
}


8. Gantilah tulisan yg bercetak tebal berwarna kuning di atas dengan link gambar sahabat. Gunakan gambar yang berukuran 40px X 40px untuk hasil yg lebih baik.

9. Ganti juga kode yang ini #289728; dengan kode warna blog sahabat yang semula, dalam KASKUS kasus ini kode di blog sangbloger adalah #007ACC; Jadi saya mengganti kode #289728; dengan kode #007ACC;

10. Simpan template sahabat dan lihat hasilnya, BRAVO!!! Congratulation, selamat sahabat sudah berhasil menerapkan Cara Menambahkan Photo Profile Sebelum Judul Postingan di blog sahabat.
More about → Cara Menambahkan Photo Profile Sebelum Judul Postingan

{ 4 komentar }
Label:

Tips Cara Mempercepat Loading Blog

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis

Sang Blogger >> mempercepat loading blog. Ternyata memiliki blog atau website yang loading nya cepat itu adalah salah sasaran EMPUKK si MBAH untuk dikunjungi, ini artinya blog yang cepat loading itu bagus dari sisi SEO.
Lalu bagaimana cara mempercepat loading blog sahabat..??? caranya mudah saja, tinggalKAN RUMAH copy paste kode script di bawah ini yg saya dpt dari blog agan abdur rozaq:

<div style="position: fixed; bottom: 10px; right: 25px;width:170px;height:100px;">
<a href="http://sangbloger.blogspot.com/2011/08/mempercepat-loading-blog.html" title="mempercepat loading blog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiYRnMhhPrJTdjbnrY-DzYm-UbF5eJeepaQ70a9z15O_0YgbOpCjflu2y2CxCnEAMt-e6bGJGMQ6jr1ZSkKwCLAZwLtAmcFm9ZVnB0Pi5t5Kcm8zNG7Z15TrQV-D1paDycwasZRKMJCDd4/s1600/Sang+Blogger+KBW.gif" /></a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://davitblog.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0"></script>
<script type="text/javascript"><br/>jQuery(document).ready(function($){<br/>if (navigator.platform == "iPad") return;<br/>jQuery("img").lazyload({<br/>effect:"fadeIn",<br/>placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40I7jdGXs8JSbgP1PEllFE1zbI-tBqZWiA07V3SIglPfvlCqev7uObg2ErUNerFMc99i8GNbyqdAYWcAmAHm1kgjaRWM_lSX1vzytYlGwq6nePrhHUznoY_Eh7ttpOoGwWvB7Sl9xDr4/s1600/grey.gif"<br/>});<br/>});<br/></script<br/></script>

OOooooppsss, hampir ja lupa, copy dan pastenya di HTML / Java Script ya.. Setelah itu simpan, dan sahabat bisa lihat perbedaan loading blog nya sekarang. Sudah cepat bukan menerapkan cara mempercepat blog ini..????
More about → Tips Cara Mempercepat Loading Blog

{ 3 komentar }
Label:

Cara Buat Kotak Komentar Facebook di Blog

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis

Sang Blogger >> cara buat kotak komentar facebook di blog. Kemarin sy mampir ke blog nya tmen blogger Lombok, blog nya agan Daenk, si master SEO (bgi sy) dan sy liat di blog nya itu, orang2 bs comment artikel nya mas Daenk menggunakan form facebook. Wah sy jd tertarik n sy coba dan ternyata berhasil.
Nah, kali ini sy mau share cara buat kotak komentar facebook di blog itu seperti apa, silahkan ikuti saja langkah-langkah cara buat kotak komentar facebook di blog berikut ini:

BERSAMBUNG>>>> mohon maaf, ane lagi buru2 ni gan, nanti sy lanjutin lagi tutorial  cara buat kotak komentar facebook di blog ini okey...
More about → Cara Buat Kotak Komentar Facebook di Blog

{ 3 komentar }
Label:

Membuat Print This Post / Cetak Artikel Di Blog

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis

Sang Blogger >> cara membuat print this post / cetak artikel di blog sangat gampang.
Silahkan ikuti langkah-langkah cara membuat print this post / cetak artikel di blog berikut ini:

1. Login to http://www.blogger.com/home

2. Click Layout >> Edit HTML >> Expand widget templates >> dan cari kode </head>

3. Tambahkan kode di bawah ini sebelum kode </head>

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>


4. Jadi akan tampak seperti di bawah ini:

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
</head>


5. Selanjutnya cari kode seperti di bawah ini
<p><data:post.body/></p>


6. Lalu tambahkan kode di bawah ini setelah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Cetak Halaman ini</a>
</b:if>


7. Simpan dan selesai.

Well, that's all. Ternyata mudah bangt ya cara membuat print this post / cetak artikel di blog ini. Kalau ada yyg kurang jelas, silahkan comment melalui comment form di bawah.. thanks for your visit..
More about → Membuat Print This Post / Cetak Artikel Di Blog

{ Add komentar }
Label:

Widget Menu Tab View

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis

Welcome to Sang Blogger pada postingan mengenai widget menu tab view.
More about → Widget Menu Tab View

{ Add komentar }
Label:

Manfaat ngeBlog atau Blogging Versi Sang Blogger

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis


Welcome to Sang Blogger pada postingan tentang manfaat ngeblog atau blogging versi sang blogger. Mungkin ada diantara sahabat yang bertanya-tanya "kenapa sih harus membuat blog kemudian ngeblog atau blogging? Apa sih manfaat atau keuntungan kita ngeblog atau blogging?"
Jika pertanyaan semacam itu pernah terbesit di benak sahabat, mudah-mudahan setelah membaca postingan sang blogger tentang manfaat ngeblog atau blogging versi sang blogger berikut ini, pertanyaan sahabat bisa terjawab. 
Berikut ini adalah beberapa manfaat ngeblog atau blogging versi sang blogger, diantaranya adalah sbb:
  1. Manfaat ngeblog atau blogging buat orang lain. Dengan kita ngeblog atau melakukan aktivitas blogging kita bisa berbagi / sharing tentang semua yang kita tahu atau menuliskan tentang semua ilmu pengetahuan dan informasi yang kita miliki agar bisa dibaca oleh orang banyak yang tentunya akan sangat bermanfaat bagi orang-orang yang sedang mencari-cari informasi atau pengetahuan tsb. Bukankah sebaik-baik orang adalah orang yang bisa bermanfaat bagi yang lainnya...???
  2. Manfaat ngeblog atau blogging bagi diri sendiri. Kita bisa meringkas, mencatat, atau menulis ulang / rewrite semua ilmu yang kita dapatkan ketika kita browsing atau melakukan aktivitas online untuk dijadikan sebagai catatan online pribadi yang sewaktu-waktu bisa kita baca lagi disaat kita lupa, karna yang namanya manusia adalah tempat salah dan lupa.
  3. Manfaat ngeblog atau blogging dari segi bisnis, baik itu bisnis online atau offline. Bagi sahabat yang memiliki suatu produk (barang atau jasa) sahabat bisa memasarkannya melalui blog yang sahabat miliki.
Jadi kesimpulannya setelah meninjau manfaat ngeblog atau blogging adalah blogging itu tidak ada ruginya. So, keep blogging mate and be the real blogger.  Salam Sang Blogger, bye-bye....
More about → Manfaat ngeBlog atau Blogging Versi Sang Blogger

{ 3 komentar }
Label:

Cara Membuat Breadcrumb Navigation Gaya Stripe-Ad

Diposting oleh Sang Blogger on SeninMingguKamisMingguJumatKamis

Welcome to Sang Blogger. Trik berikut adalah cara membuat breadcrumb navigation bergaya stripe-ad. Udah tahu kan breadcrumb navigation itu apa? kalo belum tahu, silahkan baca disini. atau lihat gambar di bawah ini untuk lebih jelasnya. Click gambar untuk memperjelas.


Nah, sekarang sobat udah faham kan yg saya maksud dengan breadcrumb navigation ini??? Contoh breadcrumb navigation seperti pada gambar di atas merupakan breadcrumb navigation yg sudah umum digunakan oleh para blogger. 
Namun kali ini saya akan tunjukkan bagaimana cara membuat breadcrumb navigation dengan gaya stripe-ad yg sudah tentu berbeda dari yg lainnya. Klik disini untuk melihat contoh breadcrumb navigation gaya stripe-ad ini.
Lalu bagaimana cara membuat breadcrumb navigation gaya stripe-ad yg kerreennnn ini gan..??? (he he..)  Ok berikut ini langkah-langkah cara membuat breadcrumb navigation gaya stripe-ad seperti itu:

1. Masuk ke tab Rancangan kemudian pilih Edit HTML. Centang Expand Widget Template
2. Copy kode berikut ini dan letakkan tepat di atas RANJANG  ]]></b:skin> atau </style>
.sangblogercrumb {
          position:fixed;
          z-index:1000;
          top:0;
          left:0;
          background:#333;
          width:100%;
          color:#ccc;
          border-bottom:2px solid #999;
          padding:1px 7px 1px 7px;
          box-shadow:0 0 7px #000;
          -moz-box-shadow:0 0 7px #000;
          -webkit-box-shadow:0 0 7px #000;
          }

          .sangblogercrumb a, .sangblogercrumb a:visited, .sangblogercrumb a:active {
          color:#fff;
          }

          .sangblogercrumb span.kanan {
          float:right;
          margin:0 15px 0;
          }
3. Kemudian carilah kode yang kurang lebih tampak seperti ini:

      <a expr:name='data:post.id'/>
4.  Copy kode berikut ini dan letakkan tepat di atas kode <a expr:name='data:post.id'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='sangblogercrumb'>
          <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
          <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'>
          <data:label.name/>
          </a>
          <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
          </b:loop>
          </b:if> &#187; <data:post.title/>
          <span class='kanan'>
          Konten Lain di Sini
          </span>
          </div>
          </b:if>
5. Langkah KAKI terakhir simpan template dan finish...

Alhamdulillah... Selamat!! Sekarang blog sobat sudah memiliki breadcrumb navigation bergaya stripe-ad.
More about → Cara Membuat Breadcrumb Navigation Gaya Stripe-Ad

{ 5 komentar }
Label: