Trending
Loading...
  • PANDUAN DESAIN
  • PANDUAN SEO
  • BISNIS ONLINE

Tab 1 Top Area

Panduan SEO

Bisnis Online

Recent Post

Tampilkan postingan dengan label Desain Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Desain Blog. Tampilkan semua postingan
Selasa, 02 Desember 2014
no image

Panduan Cara Pasang Player Musik/Lagu MP3 di Blog

Ini adalah panduan cara Memasang player lagu di blog tidak dianjurkan. Pasalnya, ia tidak dibutuhkan mayoritas pengunjung karena mereka juga punya koleksi musik/lagu di komputernya masing-masing, juga bisa download lagu yang mereka sukai.

Namun, jika Anda tetap "maksa" mau pasang, atau memang ada file MP3 yang akan disisipkan dalam posting blog atau dipasang di sidebar, ini dia cara Cara Pasang Player Musik/Lagu MP3 di Blog.

Ada dua langkah utama:
1. Membuat Blog Penyimpan Lagu/Musik/File MP3 di Site Google.
2. Membuat atau Memasang Kode Music Player-nya.

LANGKAH PERTAMA
  1. Login ke Akun Google/Blogger Anda.
  2. Buka Google Site.
  3. Klik "Create" 
  4. Choose "Blank Template" 
  5. Kasih Nama 
  6. Pilih "Create"
  7. Cari dan pilih menu "Page Settings"
Selanjutnya? Hmm... agak ribet nin. Silakan langsung ke TKP aja ya. Buka saja link ini "Embed MP3 in Blogger".

Cara Lain Pasang Player Musik/Lagu MP3 di Blog:

Ini contohnya: Selamat Bergoyang :)



Rabu, 19 November 2014
Cara Membuat Posting Pake Password (Protected Post)

Cara Membuat Posting Pake Password (Protected Post)

Cara Membuat Posting Pake Password (Protected Post)
SEBELUM berbagi tentang cara membuat posting (tulisan) pake password (protected post) ini, CB sudah share tentang cara membuat halaman statis (static page) pake password.

Gunanya password di posting blog ini tentu agar hanya mereka yang punya password yang bisa membukanya atau membacanya.

DEMO atau Contoh Posting yang Menggunakan Password:
7 Rahasia Kunci Sukses CB Blogger

Cara Membuat Posting Blog Pake Password 

Ini dia cara membuat posting atau konten blog yang dilindungi password. CB kutipkan dari My Blogger Tricks. Ada dua tahap.

TAHAP PERTAMA
1. Klik menu "Template" >  "Edit HTML"
2. Cari/Temukan (Ctrl + F) kode ]]></b:skin>
3. Copy + Paste kode berikut ini di bawahnya:

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

4. Save Template!
5. Kembali ke Dashboard Blog!

TAHAP KEDUA
1. Klik "New Post" (Entri Baru), seperti biasa kita akan membuat posting baru. 
2. Seperti biasa, isi JUDUL, ISI POSTING, Label, Masukkan Gambar, dst.
3. Selesai nulis, klik mode "HTML". 
4. Buka situs JavaScript Encryption

Di sana ada 4 kotak isian:
  1. Key
  2. Plain Text
  3. Clipher Text (Abaikan!)
  4. HTML Code
5. Isi kolom "Key" dengan password yang Anda inginkan
6. Copy semua teks posting di Blog Anda yang sudah dibuka dalam Mode HTML (Tahap Kedua No. 3) dan PASTE di kotak "Plain Text".

Cara Membuat Posting Pake Password (Protected Post)

7. Klik tombol "Encrypt"
8. Akan muncul kode di kotak "HTML Code" seperti ini:

Cara Membuat Posting Pake Password (Protected Post)

8. COPY deh tu kode HTML yang ada di sana!
9. Hapus KONTEN posting Anda yang di Mode HTML.
10. PASTE kode HTML tadi di kolom konten posting yang sudah dikosongkan

Kita bisa mengubah tulisan "Show Encrypted text" menjadi tulisan apa saja, misalnya menjadi "Baca Tulisan Ini!".

Kita juga bisa menambahkan tulisan SEBELUM atau SESUDAH kode HTML tersebut.

TAHAP AKHIR
1. Jangan ubdah mode HTML. Tetap biarkan begitu.
2. Klik "Publish" (Publikasikan)!

Selamat, Anda sudah punya Posting yang Pake Password (Protected Post)!
Rabu, 12 November 2014
Cara Pasang Logo Media Sosial di Sidebar Blog

Cara Pasang Logo Media Sosial di Sidebar Blog

logo link media sosial sidebar blog
MENAMPILKAN atau memasang logo (link) akun media sosial Facebook, Twitter, Google+ dll. di sidebar blog sangat diajurkan para pakar media sosial. Tujuannya, agar menambah follower, member, atau liker.

Lagi pula, akun media sosial biasa kita gunakan juga untuk share posting blog, sehingga pengunjung bisa mengikuti update tulisan blog kita melalui akun media sosial mereka.

Jika Anda ingin memasang logo akun atau link media sosial seperti yang dipasang di blog CB ini (di sidebar kanan), ini dia caranya!

Cara Pasang Logo Media Sosial di Sidebar Blog

1. Login ke Blog Anda
2. Di Dashboard Blog, klik menu "Layout"
3. Klik "Add a Gagdet" > Pilih "Javascript/HTML"
4. Masukkan kode berikut ini setelah Anda ganti tulisan yang berwarna merah (ID Akun Sosmed Anda)

<div class="widget-content">
<style>
    #socialwidget {
   width: 300px;
   margin-left: -7px;
    }
    .TZ-social{
    padding: 10px 5px 10px 5px;
   border-bottom: 1px dotted #EBE2E2;
    }
    .TZ-social img:hover{opacity:0.8}
    .googleplus {
    background: #ffffff;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    ine-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }

    .TZ {
    background: #ffffff;
    border-top: 1px solid white;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .TZ span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 310px;
    }
    #widgetbox .author-credit a {
    font-size: 10px;
    font-size: 10px;letter-spacing: 1px;
    color: #1E598E;
    text-decoration: none;
    }
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id="socialwidget">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 15px;" href="http://facebook.com/cbblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLKlTL-5nDlKZlrlYggZmhqA4nauvyn0jzwTAFkAW0ct6Lo9e4XuleR3bQp9T_Vme4ELyeajt__nm5KFdBkB8C4-YWd_3vd-k742LLolI88P4Shbc44byKIfpe5ZRLarHU-N5p5s_9yE/s1600/facebook.png" title="Facebook" /></a>
    <a style="margin-right: 12px;" href="http://twitter.com/contohblog" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOQ71FcaCj9xVn0s_aa73i-YTtYMATljPY45JBdFapTQjhlcDd4Hk5H3u4suScNwCPQb67yCmXMWhunYG5HDBYO_N1o9TBo8p95Dw8AxM0Pw5DTb5FCbPdBR6Gfetbu39wzFBVOXLims/s1600/twitter.png" title="Twitter" /></a>
    <a style="margin-right: 12px;" rel="me" href="https://plus.google.com/106869251529186655236/posts" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi729luer2IvZY-_-QoPJR3t7oFpHFJ3Pa1Hjjxqd12i0w3tHmFLfXwIXfcvq7z6404Li-RdZOqZ4H63ss4odoCskgYuRLxI6vmiRVJi7jEuQ_9lfmhB0aHmq6qqkwmM4gwZhFEjFnreHU/s1600/gplus.png" title="Google Plus" /></a>
    <a style="margin-right: 12px;" href="http://www.pinterest.com/cbblogger" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2p2VTfo2fZ9SOWbYK8Q1CqGDO5spxPgaApQWHg6d_N01f8e9Eiu29aVL4JG6RNTckAVO7m6PwVDj3JxuEWL_eTtz1SQrHAHVW6ZhZOcRJNshxs59PYhGcSOpo8c44aUb9q7ClQSHiCuA/s1600/pinterest.png" title="Pinterest" /></a>
    <a style="margin-right: 12px;" href="http://feeds.feedburner.com/contohblognih" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLlzHtMqeylpXc1vLSH-OMFKEBclPvng_Mig1qktUucRSlEyOmgPdHB7gz3IhcmLAI-2msynCSXBANaY3_L1QmMy7oTowAqK2cYZ4hw09z0-KWIwhyt0YUfJU979ob3eyOXTc4ZJ1t4W4/s1600/rss.png" title="RSS Feed" /></a>

    <a style="margin-right: 12px;" href="http://www.linkedin.com/in/cbblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAsi-ycbNEn0KTCROLPKP5cxHOknzTtrvfJANa4D0MweSn8sru9KyuMR3P2nW3cAi_UAxsKvZv4rWD1xuEwa0R2R157svrO3CDs-DcNsulT0muYXxc2g9miLnBatjkMfy9gGbHH7H-ztA/s1600/linkedin.png" title="Linkedin" /></a>
    </center>
    </div>
    <!-- End Widget -->
    </div>
</div>


MENAMBAHKAN KOTAK BERLANGGANAN
Jika Anda ingin menambahkan kotak berlangganan (RSS Subscribe) di bawahnya, seperti pada blog CB ini, maka tambahkan kode berikut ini. Jangan lupa, ganti tulisna berwarna merah dengan ID Feedburner Anda.

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KqiaJSl3mbhmZeU3QkUVUn79FhEWNkbhPbSpMu98MCIEg7VsgWsBhnwcU9-7Q8svW7osmfSaRCdyf8dqUktqQ4VUxa9IJdHFgjXbANyK3urIDxKkR91nOX0SR5jXLQ88zohlaiAYSIw/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:180px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="contohblognih" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Nah itu dia Cara Pasang Logo Media Sosial di Sidebar Blog. Kalo mau pasang di bawah postingan, ini caranya: Pasang Kotak Langganan dan Sosial Media di Bawah Posting Blog.

Mau model lainnya? Nih... ada 100 macam widget sosial media untuk blog. Silakan pilih....! Good Luck and Happy Blogging!

Gunakan Rata Kiri (Align Left) di Posting Blog Anda!

Gunakan Rata Kiri (Align Left) di Posting Blog Anda!

Gunakan Rata Kiri (Align Left) di Posting Blog Anda!
MASALAH rata kiri (align left) atau rata kiri-kanan (justify) dalam tampilan posting (tulisan) di blog adalah masalah keterbacaan (readability) dan keterpindaian (scannability).

Ini soal Format Posting (Tulisan) di Blog atau Situs Web.

Faktor Readable & Scannable merupakan masalah penting, terkait kenyamanan user/pengunjung, juga terkait UX (User Experience) dalam membaca tulisan (teks) di situs web.blog.

Langsung aja ke pokok deh: Gunakan Rata Kiri (Align Left) di Posting Blog Anda!

Ada tiga alasan utama kenapa naskah posting (tulisan) di blog (website) harus rata kiri (align left), bukan "rata kiri-kanan" (justify, justified).

1. This makes it easier to read. 
Naskah rata kiri lebih mudah dibaca. Lebih nyaman di mata. Lebih mengesankan rileks, santai, gak kaku!

2. Justified Alignment is actually non-standard for the web.
Rata kiri-kanan (justify) bukan standar website. Ia standar surat-menyurat, tulisan "serius" (skripsi atau karya ilmiah).

3. Bawaannya Rileks!
Rata kiri-kanan (justify) menunjukkan formal, kaku, tidak rileks. Rata kiri (align left) akan menyisakan "ruang putih" (white space) lebih banyak untuk "istirahat mata".

Selain itu, justify biasanya memunculkan jarak antar kata yang "tidak kompak" alias "acak-acakan". Lihat contohnya berikut ini. Rata kiri lebih enak dibaca (readable) alias dipindai (scannable).

ALIGN LEFT (RATA KIRI)

In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. 

Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout.

The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed such that it is nonsensical, improper Latin.
JUSTIFY (RATA KIRI-KANAN)


In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout.


The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed such that it is nonsensical, improper Latin. 


CB mendapatkan "dukungan" soal align left ini dari DMJ Design dalam posting "Why you shouldn’t align html justify".

Apalagi di sana ada pernyataan Komite Standar W3C yang menguatkan bahwa rata kiri (align left) lebih baik ketimbang rata kiri-kanan (justify):

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).

Alasan lainnya, kenapa harus Gunakan Rata Kiri (Align Left) di Posting Blog adalah justify itu gaya suratkabar (koran). Bahkan majalah dan tabloid kebanyakan sudah menggunakan rata kiri di layoutnya.

Satu lagi, silakan cermati tampilan posting di situs-situs ternama, seperti detik.com, kompas.com, cnn.com, BBC, CNN, dan sebagainya. Semuanya menggunakan align left!

Namun, terserah Anda sih, mau pilih rata kiri atau rata kiri-kanan. Bebas kok! Jika Anda tipe orang yang "formal-birokratis", Anda akan lebih memilih justify, layaknya format surat.

Jika Anda tipe orang yang tidak kaku, "nyantai", maka Anda akan pilih rata kiri. Sekali lagi, rata kiri (align left) adalah format tampilan posting blog terbaik. Wasalam.

Baca juga: Format Posting Blog yang Baik

Catatan Tambahan:
Untuk mengubah "justify" menjadi "align-left", maka cari saja di template blog Anda kata "justify", lalu GANTI dengan kata "left". Bisanya diawali ada di jajaran kode "font-family" (jenis huruf).
Senin, 27 Oktober 2014
Menghilangkan Credit Link Footer di Template Blog

Menghilangkan Credit Link Footer di Template Blog

Menghilangkan Credit Link Footer di Template Blog
BANYAK blogger berbagi tips tentang cara menghilangkan credit link footer di Template Blog. Ini tidak baik! Gak bagus! Menghapus credit link desainer template adalah sebuah kezhaliman, penganiaan, unfair!

Para desainer atau pembuat template sudah berbaik hati menggratiskan template hasil karyanya. Mungkin mereka butuh waktu 1-2 hari atau lebih untuk mendesain, eh... malah sama blogger mau dihapus credit linknya! This is UNFAIR!!!

Apa sih ruginya Anda membiarkan credit link itu tetap ada? Toh itu bukan template buatan Anda 'kan?

Blogger yang menghapus atau mengubah credit link footer TIDAK AKAN BERKAH. Integritasnya pun menurun karena ia terbukti TIDAK TAHU BERTERIMA KASIH dan TIDAK TAU MALU!

Maka, biarkan saja credit link footer Sorartemplate, Templateism, dll. itu tetap ada. Anda boleh modif background atau warna hurufnya, tapi JANGAN DIHAPUS credit linknya!!!

Bagaimana jika sang desainer mengadukan blog Anda ke DMCA Google? Blog Anda bisa dihapus oleh Google!

Banyak juga blogger yang bertindak "lucu". Ia membiarkan credit link tetap aja, namun url linknya diubah menjadi alamat blognya. Misalnya, anchor teksnya tetap Mastemplate, eh... begitu diklik mengarah ke alamat blog lain!

CB memodifikasi sejumlah template dan tetap mencantumkan credit link desainer asli. Eh... banyak yang pake template hasil modif CB, misalnya New Johny Wuss, lalu dihapus atau diganti tuh credit linknya! 

Menghapus credit link tidak akan meningkatkan trafik, ranking, dan seo, juga tidak akan meningkatkan integritas blog. Bahkan, menghilangkan credit link di footer justru membuat Anda amatiran dan "licik".*

Sabtu, 25 Oktober 2014
 Cara Membuat Tabbed Content di Sidebar Blog

Cara Membuat Tabbed Content di Sidebar Blog

 Cara Membuat Tabbed Content di Sidebar Blog
Menampilkan atau membuat Tabbed Content Widget di Sidebar Blog bagus buat navigasi dan internal link blog, sekaligus mempercantik dan menghemat ruang.

Apa itu Tabbed Content? Jawabannya, seperti yang Anda lihat di gambar ilustrasi posting ini. Cara membuat tabbed widget semacam ini sangat mudah. Tinggal pasang kode yang sudah disediakan Blogger Central.

1. Klik "Layout" > "Add A Gadget"
2. Pilih "HTML/Javascript"
3. Kotak "title" (judul) kosongkan, jangan diisi apa pun.
4. Copy + Paste kode berikut ini di kotak konten:

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

5. Hapus javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :)

6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.
7. Save!

8. Tambahkan 3 widget (Add a Gadget) di bawah Tabbed Widget yang sudah dibuat tadi. Lihat gambar berikut ini:



Demikian  Cara Membuat Tabbed Content di Sidebar Blog. Untuk lebih jelas dan rinci, silakan ke TKP. Good Luck!
Selasa, 21 Oktober 2014
Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih


Membagi Tulisan Panjang Jadi Dua Bagian Blog
POSTING atau tulisan panjang di blog akan sangat menyiksa pembaca. Melelahkan mata. Tulisan panjang bisa dibagi menjadi dua bagian (halaman/page) atau lebih. Simak saja detik.com, khususnya detikSport, yang demen banget membagi tulisan panjangannya menjadi beberapa bagian.

Selain memudahkan dan "memanjakan" pembaca, tulisan pendek lebih mudah dipahami, dimengerti, lebih menarik dibaca, dan... bisa meningkatkan pageviews lho!

Sebelumnya, CB sudah berbagi tentang hal ini di posting Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog. Namun, itu cara yang rumit.

Kali ini CB berbagi cara yang jauh lebih simple dan mudah yang didapat di All Blogger Trick. Demonya atau contohnya, ya... seperti posting ini! Tuh di bawah ada angka 1,2, dan 3. Cek aja!

Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

Langkah 1
Pastikan dulu di template Anda ada kode JQuery seperti kode berikut ini:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Jika tidak ada, ya... masukkan dong! Copas kode tersebut di bawah kode <head> di template Anda. Caranya:

1. Klik  menu "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode <head>
3. Copas kode jquery tersebut di bawahnya.

123
Senin, 20 Oktober 2014
Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting Blog

Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting Blog

Cara membuat, memasang, memunculkan, atau menampilkan kotak berlangganan (RSS Subscription Box) plus akun Media Sosial Facebook, Twitter, dll. di bawah setiap posting blog sangat mudah.

Fungsi Kotak Subscription plus Media Sosial ini bisa meningkatkan follower jaringan sosial yang pada giliranya bisa membantu meningkatkan trafik pengunjung blog.

 Kotak Subscription plus Media Sosial


Cara Memasang Subscription Box di bawah Postingan Blog:
  1. Login ke dashboard blogger.
  2. Klik menu "Template" > klik "Edit HTML"
  3. Cari (Ctrl+F) kode <div class='post-footer-line post-footer-line-1'>
  4. Copas kode berikut ini di bawah kode tersebut. Ganti huruf yang berwarna merah dengan kepunyaan Anda.
<style>
.wc-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #ccc;
color:#444444;
background-color:#fff;
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
ul.wc-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.wc-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.wc-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.wc-subboxbutton{
background:#f8f8f8;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.wc-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.wc-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.wc-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.wc-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.wc-subboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.wc-subboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.wc-subboxbutton{
padding:8px !important;
}
.wc-subboxemailform, .wc-subboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-subboxv2'>
<div class='wc-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='wc-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=
contohblognih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='contohblognih'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='wc-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='wc-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='wc-subboxsoc'>
<li>
<a href='
http://feeds.feedburner.com/contohblognih'><img src='http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png' title='Subscribe us'/></a>
</li><li>
<a href='
https://twitter.com/contohblog'><img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Follow us'/></a>
</li><li>
<a href='
https://www.facebook.com/cbblogger'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='
https://plus.google.com/106869251529186655236/posts'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>


5. Save Template!

Selamat! Blog Anda sudah Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting yang bisa meningkakan like, follower, dan subscriber serta jumlah pengunjung.

Jika Anda ingin menampilkan kotak berlangganan di sidebar, seperti punya CB ini, maka simak panduannya di posting cara membuat kotak berlangganan di sidebar blog.

Sumber
Sabtu, 11 Oktober 2014
Cara Menampilkan Posting yang Paling Banyak Dikomentari

Cara Menampilkan Posting yang Paling Banyak Dikomentari

Posting yang Paling Banyak Dikomentari
SETELAH berbagi tentang Cara Menampilkan Widget Random Posts Berwarna, langsung CB lanjutkan nih dengan berbagi ttg Cara Menampilkan Posting yang Paling Banyak Dikomentari (Most Commented Posts) seperti yg CB pasang di sidebar. Kali aja ada yang tertarik memasangnya.

Fungsinya memasang widget daftar tulisan blog yang paling banyak dikomentari ini sama dengan Random Post, Related Posts, Popular Posts, dan Recent Posts, yaitu sebagai navigasi blog dan internal link untuk meningkatkan Pageviews, Trafik, dan memudahkan pengunjung menemukan info yang dicari.

Sentuhan warna background yang "warna-warni" (multicolored) hanya sebagai "pemanis" saja untuk lebih menarik perhatian.

CB dapatkan Cara Menampilkan Posting yang Paling Banyak Dikomentari ini dari Help Blogger. Anda juga bisa menuju ke sana untuk mendapatkan panduannya.

Cara Menampilkan Most Commented Blog Posts

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode </Group> dan Copas kode berikut ini di bawahnya. Jika di template Anda tidak kode tersebut, maka cari kode <b:skin><![CDATA[ dan Copas kode berikut ini di bawahnya.

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

3. Cari kode ]]></b:skin> dan Copas kode berikut ini di atasnya:

 .comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

4. Klik SAVE Template !!!

Sampai sini Anda sudah memasukkan kode CSS  Posting yang Paling Banyak Dikomentari di template blog Anda. Selanjutnya kembali ke Dashboard Blog lagi.

5. Klik menu "Layout" (Tata Letak) > "Add a Gadget" > pilih "Javasript/HTML"

6. Copy  + Paste kode berikut ini di kotak yang tersedia:

<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://contohblognih.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://contohblognih.blogspot.com">Most Commented Posts</a></span>

7. Ganti http://contohblognih.blogspot.com dengan alamat blog Anda.
8. Save!

Selamat, Anda sudah memasang widget daftar Posting yang Paling Banyak Dikomentari (Most Commented Posts) di sidebar yang bisa membuat pengunjung makin betah di blog Anda! 

NOTE!
Untuk MENGGANTI WARNA latar belakang:
1. Klik "Template" > "Customize"
2. Klik "Advanced" > "Most Commented"
3. Silakan pilih warna kesukaan Anda.
4. Save dengan klik menu "Apply to Blog"

Good Luck!
Cara Menampilkan Widget Random Posts Blog Berwarna

Cara Menampilkan Widget Random Posts Blog Berwarna

Cara Menampilkan Widget Random Posts Blog Berwarna
Kali ini CB berbagi cara membuat Random Post (Posting Acak) yang berwarna (colorful/multicolor), seperti yang CB pasang di sidebar widget.

Di posing sebelumnya tentang cara membuat, memunculkan, atau menampilkan widget Random Posts di blog, CB berbagi tips memasang Random Posts yang "biasa saja", tanpa warna.

Model tampilan Random Post yang menarik ini CB temukan di NetOops Blog. Disebutkan, posting acak multicolor akan lebih menarik perhatian pengunjung/pembaca untuk berlama-lama membuka blog kita, meningkatkan internal link, juga meningkatkan trafik.

Fungsi Random Posts memang sama dengan fungsi link internal blog lainnya, yaitu sebagai navigasi dan internal link untuk memudahkan pengunjung menjelajahi konten blog kita. Navigasi dan internal link itu pun direkomendasikan Google, agar blog kita user friendly.

Daftar posting di Random Post akan muncul secara otomatis dan berganti-ganti, menampilkan posting-posting lama, setiap kali "refresh" atau saat pengunjung membuka link posting baru.

Cara Menampilkan Widget Random Posts Blog Berwarna

Cara Menampilkan Widget Random Posts Blog Berwarna seperti yang CB pasang di sidebar sangat mudah.

1. Klik "Layout" (Tata Letak)
2. Klik "Ad Gadget" > pilih "Javascript/HTM"
3. Copy + Paste kode berikut ini di kotak kode yang tersedia:

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 92%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 92%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 92%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://contohblognih.blogspot.com" style="font-size:0pt">Random Posts Widgets</a><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

4. Save!

Selamat, Anda sudah menampilkan Random Posts berwarna di sidebar blog yang bisa menarik perhatian pengunjung blog Anda!
Minggu, 05 Oktober 2014
Menambah Box Shadow untuk Percantik Tampilan Blog

Menambah Box Shadow untuk Percantik Tampilan Blog

Menambah Box Shadow untuk Percantik Tampilan Blog
POSTING Menambah Box Shadow untuk Percantik Tampilan Blog ini dibuat untuk memperjelas jawaban atas pertanyaan seorang pengunjung di halaman Konsultasi.

Ditanyakan, bagaimana cara membuat gradasi/stroke pada tepi kanan-kiri halaman seperti CB ini. Maksudnya adalah "bayangan kotak" (box shadow) di tepi kiri-kanan tampilan blog.

Box Shadow tidak mempengaruhi SEO dan kecepatan loading. Ia hanya berfungsi "mempercantik" tampilan blog. Itu pun hanya muncul di tampilan Desktop, tidak di versi mobile.

Nah, jika blog Anda ingin juga menampilkan Box Shadow seperti blog CB ini, berikut ini kodenya:

.outerpic-wrapper {
box-shadow: 0 10px 10px #999;
-moz-box-shadow: 0;
overflow: hidden;
-webkit-box-shadow: 0 10px 10px #999;
}

Kode "outerpic-wrapper" adalah kode CSS yang ada di template ini, yaitu area utama blog. Tiap template mungkin berbeda, bisa saja yang lain bernama "outer-wrapper" atau "main-content". 

Maka, cek template blog Anda lebih dulu, dan tambahkan kode tersebut jika ingin Menambah Box Shadow untuk Percantik Tampilan Blog. Cara ngeceknya, arahkan mouse ke area konten utama, lalu klik kanan, dan pilih "inspect elemen". Akan muncul nama kode CSS-nya. 

New Johny Wuss V2
Sebelumnya, banyak pengunjung yang bertanya, template apakah yang digunakan CB ini? Sudah diposting bahwa CB menggunakan Template New Johnuy Wuss V2 dan gratis download!

Good Luck!
Rabu, 10 September 2014
Cara Mengatasi Submenu yang Terhalang Image Slider

Cara Mengatasi Submenu yang Terhalang Image Slider

Cara Mengatasi Submenu yang Terhalang Image Slider
Ilustrasi: drupal.org
POSTING cara mengatasi menu, submenu, atau dropdown menu yang terhalang, tertutup, atau "tertindih" Slider Image, Flash, atau Featured Post Slideshow ini terinspirasi pertanyaan seorang blogger yang tidak dijawab oleh admin blogger yang dikomentarinya.

Pertanyaannya begini: "Saya telah mencoba dan berhasil (membuat featured post slider di homepage blog), tetapi submenunya jadi terhalang. Bagaimana ya cara mengatasinya?"

Tidak ada jawaban, mungkin sang admin sibuk banget atau tidak sempat membaca komentar tersebut.

Dropdown menu tertutup slideshow biasanya terjadi saat kita memasang sendiri slider tersebut, bukan bawaan template yang digunakan. 

Kalau kita Googling, minim sekali posting soal ini. Mungkin juga karena tidak banyak kasusnya, karena memang slider image itu tidak bagus buat SEO blog.

Mengatasi Navigasi Menu yang Terhalang Slider (Dropdown Menu Behind Slideshow)


Setelah "mengintip" atau mempelajari beberapa template blog yang Slider atau Featured Post Slideshow-nya yang normal, tidak menghalangi submenu/dropmenu, maka dipastikan penyebabnya adalah masalah css, yaitu properti z-index.

Di forum Stack Over Flow, solusinya juga yaitu dengan menambahkan z-index, yakni z-index: 999 di CSS Menu yang terhalang/tertindih Slider. Misalnya, #menu {z-index:9999;}

Ini dia contoh lengkap CSS Menu biar tidak terhalang Slider:

#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}

#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}

Menurut para pakar pemrogragam, z-index adalah property CSS yang fungsinya untuk mengatur posisi depan atau belakang suatu elemen.

Demikian Cara Mengatasi Submenu yang Terhalang Image Slider. Semoga bermanfaat dan semoga Anda tidak mengalaminya. Good Luck!
Anda punya solusi paling jitu? Please share and leave a comment!

Selasa, 26 Agustus 2014
Cara Modifikasi Template Blog Bawaan Blogspot

Cara Modifikasi Template Blog Bawaan Blogspot

CARA modifikasi template blog bawaan blogspot (default blogger template), seperti yang kita pilih waktu pertama kali membuat blog, sangat mudah. Dengan memodifikasi sendiri, kita gak usah cape-cape mencari template buat blog kita, juga tidak usah rempong menginstall atau ganti template.

Cara Modifikasi Template Default Blogger:

1. Klik "Template"
2. Klik "Customize"

Di situlah kita bisa mengubah banyak hal, mulai dari background, lebar halaman template, jenis huruf, lebar sidebar/widget, dll.

Coba saja! Buat blog baru untuk belajar desain blog.

Fasilitas modifikasinya relatif lengkap. Mulai ukuran tampilan, latar belakang, warna, jenis huruf, hingga memasukkan kode CSS di Template.

Berikut ini Screen Shot di area modifikasi template bawaan blogger yang terdiri dari memilih Template, Background, memilih lebar, tata letak, dan "Advanced".


Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog


Setelah Modifikasi dari sisi tampilan (desain), langkah berikutnya yang penting antar lain:
  1. Melengkapi Meta Tags dengan memasukkan Kode Meta Tags SEO Friendly.
  2. Membuat Auto Read More
  3. Menghapus kode Quick Edit 
Cara modifikasi atau membuat hal-hal lainnya bisa Anda cari di Kotak Pencarian blog ini. Template bawaan blogger sebenarnya sudah ringan (fast loading) dan SEO Friendly. 

Banyak blogger yang tidak mengganti template bawaan blog, tapi memodifikasinya, bahkan membiarkan apa adanya. Namun, karena kontennya berkualitas, pengunjungnya banyak! Lihat saja blognya Linda Ikeji yang sukses tanpa ganti template, tanpa seo, dan Google Adsense.


Good Luck!



Minggu, 17 Agustus 2014
Cara Memasang Like dan Share Facebook di Halaman Statis Blogger

Cara Memasang Like dan Share Facebook di Halaman Statis Blogger

Cara Memasang Like dan Share Facebook di Halaman Statis Blogger
hoax-slayer.com
Cara membuat, menampilkan, atau memasang tombol "Like" dan "Share" Facebook di Halaman Statis Blog Blogger.

TOMBOL Social Share biasanya hanya muncul di halaman posting (blog posts), tidak muncul di halaman statis (static page). Padahal, tombol "Like" (Suka) dan "Share" (Bagi) Facebook di halaman statis juga penting.

Lihat DEMO

Ini dia cara memasangnya:

  1. Buka Developor Facebook Like Button.
  2. Copy URL Link Halaman Blog yang akan dipasang Like/Share FB di menu "URL to Like" (lihat gambar di bawah)
  3. Klik "Get Code" dan akan muncul kode yang harus di-copy + paste (lihat gambar)
  4. Pilih "IFRAME" dan Copy kodenya ke Notepad.
  5. Paste kode di Notepad tersebut ke bagian atas atau bawah halaman statis di Mode "HTML".
  6. Beres!
Cara Memasang Like dan Share Facebook di Halaman Statis Blogger

Cara Memasang Like dan Share Facebook di Halaman Statis Blogger


Demikian cara Cara Memasang Like dan Share Facebook di Halaman Statis Blogger. Semoga bermanfaat. Good luck and Happy Blogging :)

Sabtu, 16 Agustus 2014
Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog

Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog

Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog
TULISAN atau posting panjang di blog blogspot (long blog post), bisa dibagi menjadi dua-tiga atau lebih bagian (halaman, page), tanpa harus mengubah permalinknya. Kita nanti tambahkan "Page 2" atau "Next Page" di tiap bagian akhir tulisan yang dipenggal itu.

Isu yang dalam bahasa Inggis disebut "Split lengthy blogger post into multiple pages" bukan hal asing bagi pengguna blog selfhosting Wordpress karena ada pluginnya: Splitter. Plugin WP ini "Automatically split a post into pages by adding a `nextpage` tag, with html validity maintenance" (secara otomatis membagi posting kedalam beberapa bagian (halaman) dengan menambahkan tag "nextpage" dalam kode html.)

Nah, bagaiman dengan blogspot? Tidak ada widget instant ataupun plugin. Blogger juga "gak ngajarin" tuh soal ini. Tapi, CB menemukan isu "split long blog post" untuk blogger ini di Rushly Written dan Tripo Soft.

DEMO POSTING YANG DIBAGI 3 HALAMAN

Namun, sebelumnya harap diingat, "blog posts split" atau pembagian posting menjadi dua halaman atau lebih ini tidak berpengaruh pada Pageviews. Artinya, tidak menambah jumlah Pageview. Sebabnya, url atau permalinknya sama.

Ini dia Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog


1. Pisahkan atau bagi posting Anda kedalam DIV atau SPAN dan tambahkan "class attribute" di dalamnya. Contohnya seperti di bawah ini. Ini contoh posting yang dibagi tiga bagian/halaman. Dilakukan di Mode HTML.

<div class="content_1">
    //Bagian pertama posting di sini!
</div>
<div class="content_2" style="display:none;">
    //Bagian kedua posting di sini!
</div>
<div class="content_3" style="display:none;">
    //Bagian ketiga posting di sini!
</div>

2. COPAS kode berikut ini di bawah kode di atas.

//When users click on these buttons, let's bring them to corresponding pages
<p style="font-weight:bold;">Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>

3. COPAS juga kode berikut ini di bawah kode no. 2. Perhatikan catatan yang ada setelah kode yang warna merah!


//add jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script> //Jika di template blog Anda sudah ada kode yang seperti ini maka gak usah lagi ditambahkan

<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
return false;
});
});
</script>


Bingung? Ini dia Video Tutorial


Posting cara memotong, memenggal, atau membangi posting panjang menjadi beberapa bagian/halaman ini "sekadar" menjawab pertanyaan yang masuk di kotak komentar posting "Cara membuat link Internal".

CB sudah mempraktekkan tutorial ini (Lihat DEMO). Silakan Anda coba juga dan "laporkan" hasilnya di sini. Good Luck and Happy Blogging!

Rabu, 13 Agustus 2014
Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body

Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body

Cara Menambah Dua Kolom Widget di Bawah atau di Atas Post Body Halaman Depan Blog

JIKA halaman depan (homepage) blog Anda terasa "monton", maka jadikan ia menarik dengan menambah dua kolom widget baru di bawah atau di atas blog posts (daftar posting terbaru) halaman depan.

Dua kolom itu bisa diisi posting terbaru per label (kategori), posting terpopuler, gambar, atau apa saja sebagamana halnya widget/gadget blog.

Ini caranya:
1. Template > Edit HTML
2. Cari (Ctrl + F) kode ]]></b:skin>
3. Copy + Paste kode berikut ini di atas kode  ]]></b:skin> tadi:

#Spicy Column h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#Spicy Column{
width:600px; /*Change width */
}
#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}


Save Template! 
Tahap pertama selesai. 
Tahap berikutnya sebagai berikut:

Untuk menambah 2 kolom DI ATAS Post Body:
1. Cari (Ctrl + F) kode <div id='main-wrapper'> 
2. Copy + Paste kode berikut ini di atas kode <div id='main-wrapper'>

<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/>
</div>

3. Save!
4. Klik "Layout" dan Tekan F5 (Refresh) untuk melihat ada dua kolom baru di atas Blog Posts.

Untuk menambah 2 kolom DI BAWAH Post Body:
1. Cari (Ctrl + F) kode di bawah ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


2. Tambahkan kode berikut ini sebelum kode setelah kode </b:section> atau sebelum </div>

<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/>
</div>

Hasilnya akan seperti ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/></div>
</div>

Save Template!

Kini mestinya dua widget tambahan sudah muncul di atas atau di bawah Blog Posts. Anda tinggal menambahkan (Add Gadget) di sana untuk mengisinya dengan apa saja yang bisa dimunculkan di sidebar widget.

Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body


Demikian cara Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body. Good Luck and Happy Blogging!


Copyright © 2012 PANDUAN BLOGnih All Right Reserved
TERIMA KASIH
Back To Top