Tampilkan posting dengan label Tutorial Blogger. Tampilkan semua posting
Tampilkan posting dengan label Tutorial Blogger. Tampilkan semua posting

Plugin Wordpress anti hack

PLUGIN WP MENCEGAH dari Hacker


Menjamurnya hacker-hacker yang berada diluar sana, Berikut ini Admin memberikan Plugin Wordpress anti hack. Memang tidak 100% terlindung, karena banyak hacker yang sangat jago diluar sana, namun cukup membantu untuk melindungi dari hacker jahat yang tak bertanggung jawab. Masing-masing plugin diciptakan untuk tujuan yang berbeda, sehingga blog kita akan mendapatkan perlindungan terbaik dari setiap bagian.

Plugin Wordpress anti hack
Plugin Wordpress anti hack


Limit Login Attempts
http://devel.kostdoktorn.se/limit-login-attempts

Limit-Login-Attempts-anti-hack
Limit-Login-Attempts-anti-hack

Membatasi jumlah login .

Login Lock Down
http://www.bad-neighborhood.com/login-lockdown.html
Plugin ini sama fungsinya dengan plugin limit login attempts .

login-lockdown-anti-hack
login-lockdown-anti-hack


Hide Login
http://wordpress.org/extend/plugins/hide-login/
Plugin ini memungkinkan untuk membuat URL custom untuk login, logout, administrasi dan register untuk blog WordPress teman-teman . Teman-teman dapat membuat url pilihan agar lebih mudah untuk diingat daripada wp-login.php / wp-admin , misalnya teman-teman bisa mengatur url login Anda untuk  http://www.yourblog.com/login , nah URL login sudah berganti , hal ini akan membingungkan hacker untuk mencari halaman login .


hide-login-anti-hack-tools
hide-login-anti-hack-tools


WordPress Firewall
http://wordpress.org/extend/plugins/wordpress-firewall/

WordPress-Firewall-anti-hack-tools
WordPress-Firewall-anti-hack-tools

Wp Security Scan
http://wordpress.org/extend/plugins/wp-security-scan/
menganalisa file permision , Database security , password , menghilangkan wp version .

Wp-Security-Scan-anti-hack-tools
Wp-Security-Scan-anti-hack-tools

Antivirus
http://wordpress.org/extend/plugins/antivirus/
Plugin ini berfungsi untuk men-scan template tema teman-teman , apakah ada script / file berbahaya , injeksi berbahaya .

WordPress File Monitor
Memonitor instalasi WordPress , untuk file yang baru ditambahkan / dihapus / diubah . Ketika perubahan terdeteksi plugin ini mengirimkan peringatan email dapat dikirim ke alamat yang ditentukan. apabila hacker menanamkan backdoor di hosting kita maka plugin ini akan mengirimkan peringatan .



Semoga Plugin Wordpress anti hack tools bermanfaat untuk anda dalam melindungi akun akun Anda. Terima Kasih.

Silahkan Bagikan :-)





Persembahan dari Cerita Cinta, kaos couple korea

Cara Redirect Broken Link Pada Blogger

Cara Redirect Broken Link Pada Blogger. Redirect broken link pada blogger adalah salah satu dari beberapa fitur baru blogger yang berhubungan dengan Seo. Redirect broken link ini berfungsi mengalihkan atau merujuk link error dengan link yang lain. Saya pribadi sangat menyukai Page Redirect ini karena memungkinkan kita dengan mudah redirect posting yang hilang, tulisan yang tidak ada atau dihapus di blog BlogSpot Anda ke lokasi yang ada. Biasanya untuk halaman yang tidak ditemukan, blogger secara otomatis menampilkan halaman Error 404, tetapi hal ini dapat membahayakan PageRank sobat dari link internal dan eksternal. Misalnya sobat memiliki posting dan orang-orang / pengunjung berbagi link dengan teman temannya dan itu bisa menyebar di mana-mana, jika karena alasan tertentu sobat memutuskan untuk menghapus posting itu, orang dan robot akan melihat kesalahan URL yaitu halaman tidak ditemukan. Berikut ini adalah hal yang perlu sobat ketahui sebelum melakukan redirect broken link pada blogger.
Cara Redirect Broken Link Pada Blogger

Apa itu Broken Link?

Dengan kata lain setiap halaman atau posting yang Anda hapus dalam blog atau website Anda disebut sebagai link yang rusak / broken link oleh robot pencari. Yang disebut rusak karena titik link ke konten yang hilang dan menampilkan halaman kesalahan 404.

Cara menemukan Broken Link / Link error.

Kadang-kadang sobat tidak ingat posting mana yang dihapus oleh sobat sendiri atau URL yang menyebabkan kesalahan, sehingga sulit bagi spider pencari untuk mengindeks blog sobat. Untuk menemukan link yang rusak di blog sobat silahkan kunjungi Google Webmaster Tools. Berikut ini cara menemukan broken link atau link rusak / error.
  • Klik Not Found
  • Maka akan muncul list dari link error pada blog sobat. contohnya di bawah ini
Link error tersebut dikarenakan pengunjung yang salah mengetikkan link url yang sebenarnya. Bisa saja karena posting di hapus, tapi yang saya contohkan di atas hanya karena pengunjung salah mengakses link. Jadi jika pengunjung mengeklik link tersebut maka yang muncul adalah Halaman Error 404 sebagai pengganti broken link tersebut.

Cara Redirect Broken Link

Untuk redirect broken link, pertama sobat klik link not found blog sobat. Nah saya contohkan link di atas.
Link yang rusak disini adalah
http://www.bamz.us/2011/12/kata-kata-ga..
Sedangkan link yang sebenarnya adalah
http://www.bamz.us/2011/12/kata-kata-galau-terbaru.html


Sekarang saatnya redirect broken link tersebut
  1. Jika sobat menggunakan tampilan blogger lama, silahkan menuju draft.blogger.com . Kecuali jika sobat sudah upgrade Blogger New interface
  2. Ke halaman Setting > Search preferences > Klik link edit di sebelah Custom Redirects
  3. Sobat masukkan link error kedalam kolom from ( cukup masukkan link yang saya warnai kuning sebagai contoh : /2011/12/kata-kata-ga.. )
  4. Terus masukkan juga link redirect / tujuan pada kolom to ( /2011/12/kata-kata-galau-terbaru.html )
  5. Klik link Save diikuti dengan tombol Save Changes

Redirect Broken Link Pada Blogger ini hanya di batasi 10 link. Jadi lakukan redirect untuk link yang mungkin sangat di butuhkan. OK selamat mencoba melakukan redirect broken link pada blog sobat.

Cara Memasang Star Rating Google untuk Blogger

Cara memasang Star Rating google untuk Blogger. Star rating google untuk blogger / blogspot yang bisa di manfaatkan untuk mengetahui kualitas konten blog anda dari penilaian visitor. Star rating google ini bisa sobat pasang di atas posting maupun di bawah posting. Bagaimana cara memasang star rating google di blogger? Caranya sangat mudah dan saya yakin sobat semua tidak akan kesusahan :). Berikut ini cara memasang star rating google di blogspot.
Cara memasang Star Rating Google untuk Blogger

Cara memasang star rating google untuk Blogger / blogspot

  • Pergi ke halaman Layout
  • Kemudian klik edit pada widget posting blog
  • Maka akan muncul popup untuk mengatur star rating google ini akan ditampilkan atau tidak. Lihat gambar di bawah ini
 Cara Memasang Star Rating Google untuk Blogger
Silahkan lakukan seperti gambar di atas, kemudian save
  • Pemasangan start rating google di blog sobat belum selesai, sekarang menuju Template > Edit HTML > Centang Expand widgets Templates
  • Cari kode <data:post.body/> . Untuk pengguna read more otomatis biasanya ada 3 kode yang sama, maka sobat gunakan kode yang kedua. Namun jika ada 4 kode yang sama, sobat gunakan kode yang ke 3.
  • Jika sudah ketemu silahkan sobat paste kode berikut di atasnya apabila ingin star rating tersebut tampil di atas posting. Tapi jika ingin star rating google tersebut tampil di bawah posting, silahkan sobat paste kode ini di bawahnya.
<div class='rating-google'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</div>
  • Langkah terahir yaitu simpan template dan selamat sobat berhasil memasang star rating google di blog sobat sendiri.
Ok itu saja, dan terima kasih sudah membaca artikel Cara memasang Star Rating Google untuk Blogger / Blogspot.

Memasang Meta Deskripsi Setiap Posting / Artikel

Meta Deskripsi Setiap Posting. Cara memasang meta deskripsi setiap postingan secara manual. Belum lama ini blogger kembali meluncurkan fitur-fitur baru seperti redirect broken link, custom halaman error 404 dan meta deskripsi setiap postingan. Meta deskripsi ini akan sangat berguna untuk menarik pengunjung / memperbanyak pengunjung blog sobat sendiri. Bot Search Engine lebih suka dengan deskripsi / sedikit ulasan tentang posting anda. Hasil pencarian dari meta deskripsi secara manual tentu saja akan berbeda dengan meta deskripsi / meta tags otomatis setiap postingan. Lebih mudahnya, jika sobat menggunakan meta deskripsi manual pada setiap postingan, maka deskripsi dari posting yang satu akan berbeda dengan deskripsi posting lainnya.

Cara aktifkan fitur meta deskripsi setiap postingan

Sebelum sobat mengaktifkan meta tags deskripsi setiap postingan, sobat harus mengaktifkan terlebih dahulu meta deskripsi singkat tentang blog sobat secara keseluruhan. Berikut ini caranya.
  • Ke halaman Settings > Search Preferences
  • Klik "Edit Link"
  • Pilih "Enable Search Description?"
  • Di dalam kotak itu adalah deskripsi singkat blog sobat secara keseluruhan tidak lebih dari 150
Meta Deskripsi Setiap Posting
  • Klik save Changes

Sekarang Sobat harus menambahkan beberapa kode untuk Template Blogger sobat. Untuk melakukan itu Masuk ke Template dan Lanjutkan ke Edit HTML Cari kode </head> dan paste kode berikut tepat Bawahnya.
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Simpan template

Cara Pasanga Meta Deskripsi Pada Postingan

Disini saya contohkan posting saya yang menggunakan meta deskripsi secara manual, salah satunya artikel "Cara membuat twitter"
Meta Deskripsi Setiap Posting
Dari Meta Deskrip di atas, maka posting / artikel tersebut akan nampak di search engine seperti gambar berikut
Ok sobat itu saja kegunaan fitur blogger terbaru (meta deskripsi manual setiap posting) dan sudah saya rinci apa itu meta deskripsi dan cara mengaktifkannya serta cara memasangnya. Kalau sobat masih bingung bisa ditanyakan pada komentar.

Custom Halaman Error 404 untuk Blogger

Custom Halaman Error 404 untuk Blogger. Custom Halaman error 404 merupakan salah 1 dari fitur baru blogger. Ini berguna untuk membantu pengunjung yang salah mengakses link / halaman yang ada di blog kita dengan memberikan petunjuk atau saran pada halaman error yang mereka akses. Dengan kata sederhana Halaman Error 404 adalah halaman yang akan ditampilkan bila halaman yang sebenarnya tidak ditemukan disebut Halaman Error 404. Saat ini halaman Error Blogger sudah bisa disesuaikan. Contoh Custom Halaman error 404 untuk Blogger bisa anda liaht disini.
Custom Halaman Error 404 untuk Blogger

Custom Halaman Error 404 untuk Blogger

Langkahnya adalah menuju halaman Settings > Search preferences > Custom Page not Found
Custom Halaman Error 404 untuk Blogger

Jika sobat ingin tampilan halaman error not found seperti blog ini, silahkan gunakan kode di bawah ini.
</br>
</br>
</br>
</br>
<img src="http://3.bp.blogspot.com/-2QYAt64zRLY/T3facUPxYSI/AAAAAAAABWA/8RwzIbIxLT8/s1600/artikel-not-found.jpg"  />
</br>
</br>
<h3>Halaman yang Anda minta tidak ditemukan</h3>
<p>Maaf, kami tidak dapat menemukan halaman yang Anda cari. Mungkin telah dihapus, itu namanya berubah, atau sementara tidak tersedia.<br/>
Silakan periksa bahwa alamat situs Web dieja dengan benar.</p>
<b>Hal lain untuk membantu Anda:</b><br/>
<ul style="text-align:left;">
<li>Menuju halaman <b><a href="/">Home Page</a></b>, dan menggunakan menu atau link untuk menavigasi ke pos tertentu.</li>
<li>Menuju halaman <b><a href="http://www.bamz.us/2011/09/sitemap.html">Sitemap</a></b>, dan pilih artikel yang ingin anda baca.</li>
</ul>
</br>
<form method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="Search this website..." name="q" onfocus="if (this.value = 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}"></td>
<td><input id="searchbutton" type="button" Value="Search"></td>
</tr>
</table>
</form>

Jangan lupa ganti link yang berwarna merah lalu save.

Halaman error 404 untuk blogger ini bisa sobat desain sendiri, bebas menggunakan HTML atau Text. Ok selamat mencoba dan semoga sukses mendesain halaman error pada blog sobat

Membuat Artikel Terkait dengan Gambar / Thumbnail

Membuat Artikel Terkait dengan Gambar / Thumbnail. Artikel terkait atau related post atau mungkin artikel yang berhubungan, sama aja yah hehehe. Kali ini Blog Bamz akan sharing cara membuat artikel terkait dengan thumbnail setelah sebelumnya sudah posting cara membuat artikel terkait di sidebar blog. Ada 2 cara membuat artikel terkait dengan thubnail atau gambar, yang pertama menggunakan layanan online seperti linkwithin dll. Sedangkan yang ke 2 yaitu membuat artikel terkait dengan thumbnail secara manual. Disini saya akan sharing cara membuat artikel terkait dengan gambar secara manual.
Membuat Artikel Terkait dengan Gambar / Thumbnail

Membuat Artikel Terkait dengan Gambar / Thumbnail

  • Langkah pertama yaitu login ke blog anda > Design > Edit HTML > Centang expand widget templates.
  • Cari kode </head> dan kalau sudah ketemu silahkan paste kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Sekarang anda cari kode ini
<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
Nah kalau sudah ketemu, sekarang paste kode berikut di di bawah kode tadi
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)

jumlah artikel terkait muncul
var maxresults=5;

Jumlah artikel terkait / label
max-results=6

Judul artikel terkait
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari kode warna
var splittercolor="#d4eaf2";

Nah kalau sudah selesai anda bisa klik save template dan selesai :).

Artikel Terkait dengan Gambar / Thumbnail ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan <!-- remove --></b:if>

Untuk sobat yang ingin menggunakan kode javascript sendiri dengan menguploadnya di hosting sendiri untuk keamanan kode tersebut.
Download kodenya http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js kemudian sobat bisa upload di hosting sobat sendiri. Atau mungkin upload di salah satu top hosting gratis yaitu google code.

Artikel ini dipelajari dari Bloggerplugins dengan sedikit modifikasi :).

Pasang Breadcrumb Google di Blogger

Pasang Google Breadcrumb di Blogger. Memasang atau membuat google breadcrumb ini memang di butuhkan karena dengan memasang google breadcrumb, bisa membantu menutupi salah satu kekurangan blogger. Kekurangan tersebut yaitu alamat url posting yang terbatas. Makanya mulai sekarang ayo pasang google breadcrumb di blog anda :). Selain itu, dengan Google breadcrumb akan membuat blog kita di search engine google lebih terlihat rapi. Coba anda lihat contoh Google Breadcrumb di bawah ini.
Pasang Breadcrumb Google di Blogger

Cara Memasang Breadcrumb Google di Blogspot / Blogger

  • Langkah pertama untuk memasang Breadcrumb Google tentu saja anda harus login dulu ke blognya kwkwk.
  • Seperti biasa, ke halaman design > edit HTML > Expand Widget Templates (jangan lupa selalu backup template sebelum editing)
  • Cari kode <b:include data='top' name='status-message'/> , biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang anda temukan biar ga bingung).
    <b:include data='posts' name='breadcrumb'/>
  • Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Simpan Template dan selesai, anda berhasil memasang breadcrumb google di blog anda.

Untuk mempercantik Breadcrumb google yang sudah anda pasang, sekarang tambahkan sedikit sentuhan Css berikut ini yang perlu anda tambahkan di atas kode ]]></b:skin>

.breadcrumbs{margin-left:10px;padding: 5px 0;border-bottom: 1px dotted; line-height:1.4em;}
Ok itu saja artikel kali ini dan mudah-mudahan bermanfaat buat para blogger. Oh ya, caranya berbeda loh dengan cara membuat breadcrumb yang dulu saya posting. Jadi lebih teliti lagi yah untuk penempatan kodenya :).

Hapus Feature Post Bamz Magazine Blogger Template

Hapus Feature Post Bamz Magazine Blogger Template. Berhubung ada beberapa yang meminta untuk menghapus feature post pada template ini via komentar bahkan kontak saya via email, kali ini saya ingin sharing cara menghapus feature post pada template blogger Bamz Magazine.
Bamz Magazine Blogger Template

Cara menghapus Feature Post Bamz Magazine Blogger Template

  • Pertama tentunya anda harus login ke blog masing masing dulu, kemudian menuju halaman design > Edit HTML.
  • Cari kode di bawah ini, lalu hapus semua kode tersebut
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selectdd" id="nav-fragment-1"><a href="#fragment-1"><img alt="" src="http://1.bp.blogspot.com/-KdOhjAIB5DM/TznFNqluVRI/AAAAAAAABCU/RzNLaxopdGk/s1600/image1-small.jpg"></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img alt="" src="http://3.bp.blogspot.com/-GEpuVfoDcp0/TznFP1xGOKI/AAAAAAAABCc/BQ-UPdBWfzE/s1600/image2-small.jpg"></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img alt="" src="http://2.bp.blogspot.com/-sCilgXyc4Wg/TznFRdbAHlI/AAAAAAAABCk/r3pfo3R46IE/s1600/image3-small.jpg"></a></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4"><a href="#fragment-4"><img alt="" src="http://4.bp.blogspot.com/-1naEmsYcsf4/TznFT0vojvI/AAAAAAAABCs/W-w0eTPrklM/s1600/image4-small.jpg"></a></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
<img alt="" src="http://3.bp.blogspot.com/-NtrVVY4KZAw/TzNzCMTrZFI/AAAAAAAAACY/XXzcX-8kChI/s1600/1.jpg">
<div class="info">
<h2><a href="#">This is default featured slide 1 title</a></h2>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2" style="">
<img alt="" src="http://4.bp.blogspot.com/-EbZ9QCB2RG4/TzNzPJgWK_I/AAAAAAAAADI/7G3an03gedw/s1600/2.jpg">
<div class="info">
<h2><a href="#">This is default featured slide 2 title</a></h2>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
</div>
<!-- Third Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
<img alt="" src="http://2.bp.blogspot.com/-WLSL1MAx338/TzNzFCMr3RI/AAAAAAAAACk/487JGZiv__w/s1600/3.jpg">
<div class="info">
<h2><a href="#">This is default featured slide 3 title</a></h2>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel" id="fragment-4" style="">
<img alt="" src="http://1.bp.blogspot.com/-mNcOvg7hcHE/TzNzGhDTiLI/AAAAAAAAACs/uWB27q2EJwU/s1600/4.jpg">
<div class="info">
<h2><a href="#">This is default featured slide 4 title</a></h2>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
</div>
</div>

Simpan template, selesai deh hehe. :)

Selain menghapus feature post, saya juga menerima permintaan untuk menghapus tulisan "Your Adsense Link 728 X 15". Sebenarnya ini sangat mudah, anda tinggal cari tulisan "Your Adsense Link 728 X 15" dan gunakan CTRL + F untuk mempermudah pencarian anda, lalu hapus kalimat tersebut, simpan dan selesai. Jika ingin menghapus sekalian dengan elemennya hapus kode berikut
<div class="topadsense">
Your Adsense Link 728 X 15
</div>
Yang ke-3 yaitu mengubah ukuran font judul blog. Kalau yang ini anda bisa mengubah CSS berikut, gkanti yang warna merah sesuai ukuran font yang anda inginkan. Misalkan 120% atau mungkin di ganti dengan 20px dsb.
h1.logo {
margin: 10px 0 0 0;
padding: 0;
width: 600px;
font-size: 100%;
Simpan dan selesai.

OK itu saja untuk semua permintaan yang saya terima, baik dari komentar maupun via email. Dan terima kasih sudah menggunakan template blogger Bamz Magazine. OH ya 1 lagi, saya minta tolong kepada para blogger yang menggunakan template dari saya
Jika blog anda berisi artikel-artikel desawa, foto-foto dewasa atau mungkin artikel lainnya yang di luar google webmaster guidelines. Tolong link credit atau semua link yang menuju blog ini di hapus yah, karena kemarin saya sudah mendapat pesan dari google dan mungkin karena ada beberapa blog dewasa yang menggunakan template saya, dan link saya tertancap pada blog tersebut. Tapi untuk blog yang mengikuti panduan google webmaster guidelines, yah jangan di hapus link credit nya kwkwkkw. Thanks untuk semua nya.

Membuat Footer Kolom Pada Template Blogger

Membuat Footer Kolom Pada Template. Menambahkan 4 kolom footer spesial untuk pengguna blogger template Bamz Style. Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.
Membuat Footer Kolom Pada Template Blogger

Cara Membuat atau menambah Footer kolom pada Template

  • Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
  • Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#bamzlower { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#bamzlower-wrapper { margin:auto;width: 860px; border:0; }
#bamzlowerbar-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.bamzlowerbar {margin: 0; padding: 0;}
.bamzlowerbar .widget {margin: 0; padding: 10px 0px 0px 0px;}
.bamzlowerbar h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.bamzlowerbar ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.bamzlowerbar li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.bamzlowerbar li a { text-decoration:none; color: #333; }
.bamzlowerbar li a:hover { text-decoration:none; color:#000;}
.bamzlowerbar li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/
  • Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>
<!-- Kolom Footer By BamZ -->

<div id='bamzlower'>
<div id='bamzlower-wrapper'>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar1' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar2' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar3' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->
Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini
# bamzlowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
Selanjutnya hapus kode

<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
Simpan template dan jadilah 3 kolom Footer.

Jangan lupa berlangganan yah (Facebook, twitter, google plus atau mungkin di bookmark) dan dapatkan update-update seputar Tutorial blogger dan fitur template dari Blog Bamz hehehe :). Selamat mencoba dan semoga sukses!

Custom Design Css Threaded Comments

Custom Design Css Threaded Comments. Untuk mempercantik atau memper indah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blogger terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Aktifkan thread comments blogger"

Custom Design Css Threaded Comments


Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya. Apa yang harus anda lakukan?
  • Pertama login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
  • Cari kode <b:includable id="threaded_comment_css">, kira kira semua kodenya seperti di bawah ini.
<b:includable id="threaded_comment_css">
<style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
KARENA KEPANJANGAN, SAYA SINGKAT SAJA KODENYA,
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
</style>
</b:includable>
  • Silahkan anda ganti semua kode tersebut dengan kode di bawah ini
<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  marfin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE; border: 1px dotted #DDD;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;
  margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .commdnt-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>
  • Langkah terahir yaitu simpan template dan lihat hasilnya.
Anda tidak perlu bingung, pokoknya yang di ganti yaitu mulai dari <b:includable id="threaded_comment_css"> sampai </b:includable>

Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin>



Custom Design Css Threaded Comments

Fitur baru blogger ini memang sangat menarik dan terlihat keren di bandingkan fitur komentar sebelumnya. Apalagi jika anda menggunakan Blogger template seo friendly Bamz Style yang saya desain, tentunya akan lebih mudah dalam pengeditan karena saya menggunakan template tersebut sebagai praktek terlebih dahulu :). Ok deh selamat mencoba tips custom design Css Threaded comments ini dan semoga sukses.

Aktifkan Threaded Comments Blogger

Aktifkan Threaded Comments Blogger
Aktifkan Threaded Comments Blogger. Threaded comments adalah fitur terbaru dari blogger/blogspot. Fungsingya adalah membuat komentar pada postingan berulir dan lebih menarik di bandingkan fitur komentar sebelumnya. Fitur komentar ini sudah bisa di temukan pada blog baru dengan template standard dari blogger. Untuk blog yang menggunakan template yang sudah di modifikasi, threaded comments ini kebanyakan belum aktif, alias masih menggunakan format komentar yang lama. Blog ini sempat menggunakan thread comments, memang terlihat lebih keren, tapi terasa lebih berat. Apalagi kalau komentar sudah banyak, wuhh!! Bagaimana cara mengaktifkan threaded comments blogger?

Cara mengaktifkan Threaded Comments blogger

  • Langkah pertama tentu anda harus mengaktifkan pengaturan komentar anda, ke halaman setting > Comments. Pilih show dan Embedded below post untuk Comment Form Placement
  • Langkah kedua jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
  • Buka halaman design > Edit HTML > centang expand widgets templates
  • Cari kode <b:include data='post' name='comments'/>. Kira kira kodenya seperti di bawah ini.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
  • Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
  • Langkah terahir yaitu simpan template dan lihat hasilnya.

Threaded Comments Blogger

Threaded comments blogger sudah aktif. Sekarang anda tinggal men-desain tampilan / css nya agar terlihat lebih keren dan menarik. Untuk desain Css thread comments blogger ini akan saya share pada postingan berikutnya. Kalau anda kebingungan silahkan tanyakan pada komentar.

10 Menu Horizontal Keren untuk Blogger

10 Menu Horizontal Keren. Membuat menu horizontal untuk link pilihan pada blog anda, misalnya link menuju Home atau kategory kategory tertentu. Bagaimana caranya? nah seperti yang saya posting sebelumya, yaitu cara membuat menu horizontal di atas header. Membuat menu horizontal ini sama dengan cara sebelumnya. Berikut ini cara memasang menu horizontal keren ini.

Cara membuat menu horizontal

  • Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
  • Cari Kode ]]></b:skin>  ( Gunakan CTRL + F untuk mempermudah pencarian )
  • Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
  • Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
  • Jika sudah ditemukan, Copy kode menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Menu Horizontal 1

Css

Kode


Menu Horizontal 2

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 3

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 4

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 5

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 6

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 7

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 8

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 9

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 10

Menu Horizontal Keren
CSS

Kode


Catatan:
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="http://bamz.us/" ><span>BLog Bamz</span></a></li>
10 Menu horizontal keren di atas terinspirasi dari mbt. Buat yang sudah sukses membuat menu tersebut jangan lupar komentar yah, kalau bingung tanyakan saja pada komentar. Mudah mudahan artikel ini bermanfaat untuk anda semua.

Membuat Navigasi Nomer Halaman Blog untuk Blogger

Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot. Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.
Membuat Navigasi Nomer Halaman Blog
Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

  • Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
  • Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>
<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigasi -->
Simpan template dan lihat hasilnya :).

Keterangan :
Anda bebas mengubah tulisan yang saya kasih warna hijau, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya previous untuk kembali kehalaman sebelumnya.

Membuat Navigasi Nomer Halaman Blog

Cara membuat Navigasi Nomer Halaman Blog untuk blogger ini di dapat dari jalan jalan tadi ke blog lain hehe. Thanks bloggerplugin yang sudah posting tutorial ini. Oh ya buat anda yang males mau edit HTML atau bingung dengan cara yang saya kasih di atas, bisa langsung add widget navigasi halaman untuk blogger di bawah ini.

Tambahan :
Untuk menyesuaikan Tampilan pada label, silahkan cari kode
'data:label.url' dan ganti dengan kode 'data:label.url + &quot;?&amp;max-results=5&quot;'
Nah angka 5 di sana samakan dengan Pagecount pada kode Navigasi. Semoga sukses

20 Tutorial Dasar Blogspot

Learn Russian
Free online Russian lessons with audio recorded by a native speaker. From beginner to advanced. Slow spoken audio recordings for beginner and intermediate levels.

20 Tutorial Dasar Blogspot
20 Tutorial dasar Blogspot untuk mendesain blog anda. 20 tutorial dasar blogspot ini tidak hanya untuk mempercantik blog anda, tapi juga tersedia bermacam-macam kumpulan tips dan trik dalam blogging. Posting ini BLog Bamz buat agar mempermudah anda dalam mencari kebutuhan tutorial untuk blog anda, khusus blogger atau blogspot.

20 Tutorial Dasar Blogspot

  1. Optimasi Seo on page blogspot : berguna bagi anda yang ingin belajar mengoptimalkan setiap posting / artikel anda. Mengoptimalkan keyword dalam postingan. contohnya penerapannya seperti artikel Ultrabook Notebook Tipis Harga Murah Terbaik yang mungkin sudah cukup maksimal.
  2. Memasang Tombol Google Plus di Blog : button social share google Plus ( + )
  3. Membuat Popular Post dengan Animasi Gambar berputar : mempercantik blog anda dengan widget animasi pada popular post
  4. Membuat Navbar Menu di Blog : Fitur menu atau sticky bar di bagian atas blog
  5. Membuat Widget Recent Post Blogspot : Widget recent post yang simpel dengan memanfaatkan fitur Rss Feed
  6. Memasang Facebook Like di Blog : Social share facebook di atas setiap postingan
  7. Cara Membuat Recent Comment Blog : Membuat recent comment dengan memanfaatkan Rss feed
  8. Cara Membuat Artikel Terkait di Sidebar Blog : mempercantik blog dengan artikel terkait di sidebar blog
  9. Membuat Menu Vertikal di Blogspot : Menu vertikal tambahan pada blog
  10. Cara Membuat Menu Drop Down Blogspot : membuat menu dropdown tambahan untuk meminimalis penggunaan widget
  11. Cara Membuat Popular Post Animasi 3D : percantik blog anda dengan widget popular post dengan animasi 3D
  12. Cara Membuat Daftar Isi Blog Otomatis : daftar isi blog dengan 2 macam
  13. Cara Membuat Tombol Share Facebook, Twitter dan Google + : Social share button lengkap di atas postingan
  14. Meta Tags for Seo Blogspot : pasang deskripsi atau keyword agar seo friendly
  15. Cara Membuat Artikel Terkait : Memberi fitur artikel terkait di bawa setiap posting / artikel
  16. Cara Membuat Breadcrumb : menu navigasi agar mempermudah pengunjung melihat lokasi pada blog anda
  17. Cara Membuat Menu Horizontal : menu horizontal tambahan untuk memasang link link penting pada blog anda
  18. Cara Membuat Read More Otomatis di Blog : Read more otomatis dengan gambar, tapi bisa juga anda ganti dengan gambar atau tulisan lain
  19. Cara Membuat Contact Us : mempermudah pengunjung blog untuk menghubungi anda
  20. Cara Membuat Template Blog Sendiri : desain template blog anda sendiri dengan beberapa cara yang ada

Memasang Tombol Google Plus di Blog

Memasang Tombol Google Plus di Blog
Memasang Tombol Google Plus di Blog. Blog dilengkapi Tombol Google Plus atau G+1 di atas setiap postingan blog? Wah tentunya sangat bagus. Artinya kita memberikan kesempatan untuk para pengunjung blog agar berbagi dengan teman mereka di jaringan sosial terbaru saat ini yaitu Google Plus. Selain itu tombol Google Plus juga berguna untuk merekomendasikan atau memberi nilai + setiap posting blog kita di search engine google. Tapi tutorial ini hanya untuk Blogspot atau Blogger hehe. Ok sekarang di simak baik-baik cara memasang tombol google plus (+) di Blog.

Cara memasang tombol Google Plus (+) di Blog

  • Pertama silahkan login ke blog anda
  • Pilih menu Design > Edit HTML > Centang expand widget templates
  • Cari kode </head>
  • Setelah ketemu silahkan paste kode JS berikut tepat di atas kode </head>
<!-- kode G + -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
  • Nah sekarang anda cari <data:post.body/>. Untuk blog pengguna Read More, kalau ada lebih dari 1 kode tersebut, pakai kode <data:post.body/> yang kedua.
  • Kalau sudah ketemu sekarang paste kode dibawah ini tepat di atas kode <data:post.body/>
<g:plusone size='medium'/>
  • Sekarang simpan template dan selesai.
Catatan : sekarang anda pilih dulu ukuran tombol google plus tersebut sesuai kriteria anda, ukurannya di bawah ini.

1. small
2. medium
3. standart
4. tall

Cara memasang tombol Google Plus di Blog

Cara memasang tombol Google Plus (+1) sama dengan cara memasang facebook like di atas posting blog dan tentunya tidak sulit kan? hehhe silahkan anda coba dulu, kalau sudah berhasil jangan lupa komentar disini yah :). Oh iya Tombol Google Plus tersebut bisa anda pasang dimana saja dengan hanya menambahkan kode yang ini saja <g:plusone size="medium"></g:plusone> , jadi tidak perlu lagi menambah kode javascript. Dan kalau anda ingin tombol google plus tersebut hanya mengarah ke 1 link, misalnya tombol tersebut hanya ingin ditujukan untuk halaman home page seperti di bagian header blog ini. Anda hanya cukup menambahkan link url tujuan seperti ini <g:plusone href='URL' size="medium"></g:plusone> . Ayo silahkan di coba dulu memasang tombol Google Plus (+1) di blog anda, kalau kesulitan silahkan tanyakan saja :).
Posting Lama ►
 
Exit Di Like yah Sob!! Makasih