Cara Membuat Buku Tamu Tersembunyi (Bikin Chat Box)

Ada yang mau tahu bagaimana cara membuat buku tamu tersembunyi di sebelah kanan atau chat box tersembunyi ?

Oke sahabat/i, pada kesempatan kali ini saya akan menuliskan tutorial cara membuat buku tamu tersembunyi di sebelah kanan yang tujuannya adalah untuk menghemat ruang widget dan ini hanya alternatif saja, karena buku tamu / chat box ini tidak wajib dibuat tersembunyi.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb…)

Cara Membuat Buku Tamu Tersembunyi Di Blogger Di Sebelah Kanan

Di sini saya akan menuliskan bagaimana cara membuat buku tamu tersembunyi di sebelah kanan pada blog blogger sebagai gambaran bagaimana cara membuat buku tamu tersembunyi.

Sebelumnya mungkin sahabat/i ingin melihat langsung bagaimana sih buku tersembunyi ini nantinya akan terlihat, untuk itu silakan lihat dahulu demo-nya Di Sini .

Oke, mari kita lanjut.

Langkah – Langkah Cara Membuat Buku Tamu Tersembunyi Di Blogger

Adapun langkah – langkah yang harus dilakukan untuk membuat buku tamu tersembunyi di blogger adalah sebagai berikut :

  1. Masuk ke dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget (posis sembarang tidak masalah)
  4. Pilih gadget / widget HTML/JavaScript
  5. Pasang script buku tamu tersembunyi (yang saya sertakan dibawah nanti) pada bagian Konten / Conten
  6. Simpan / Save
  7. Selesai

Nah, itulah langkah – langkah cara membuat buku tamu tersembunyi di blogger, dan adapun script buku tamu tersembunyi yang harus dipasang adalah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Silakan pasang script buku tamu di sini

<div style="text-align:right">
<a href="http://ahmadrifai.net/cara-membuat-buku-tamu-tersembunyi-bikin-chat-box/">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan :

  • Seluruh kode di atas adalah kode untuk menyembunyikan buku tamu / chat box, dan belum termasuk script buku tamu.
  • Di dalam kode di atas ada tulisan Silakan pasang script buku tamu di sini, silakan ganti tulisan tersebut dengan script buku tamu / chat box, misalnya script buku tamu / chat box dari www.cbox.ws, atau script buku tamu lainnya.

Cara Mendapatkan Script Buku Tamu Dari www.cbox.ws

Untuk melengkapi tutorial cara membuat buku tamu tersembunyi di sebelah kanan ini saya akan menulsikan bagaimana cara mendapatkan script buku tamu dari website www.cbox.ws, dan jika ingin menggunakan script buku tamu dari website lain juga silakan.

Adapun cara mendapatkan script buku tamu tersembunyi dari website www.cbox.ws adalah sebagai berikut :

Pertama silakan kunjungi webiste www.cbox.ws, klik menu Daftar atau langsung kunjungi halaman ini http://www.cbox.ws/getone

Isi formulir pendaftaran dengan lengkap dan benar kemudian klik tombol Create my Cbox!, pada bagian Cbox name silakan isi dengan nama buku tamu yang sahabat/i inginkan, dan ini biasanya sekaligus akan menjadi alamat / url buku tamu tersebut dan bisa di akses langsung dengan alamat seperti ini http://my.cbox.ws/namabukutamu, contoh nyata http://my.cbox.ws/membuatblog

Setelah itu sahabat/i akan dibawa ke halaman selamat datang, dan silakan klik get your embed code, maka sahabat/i akan dibawa ke halaman login.

Silakan login dengan Cbox name dan password yang sudah dibuat pada saat mendaftar tadi, maka sahabat/i akan dibawa ke halaman kode buku tamu / chat box yang bisa di pasang pada blog / website kita.

Cara Membuat Buku Tamu Tersembunyi (Bikin Chat Box)

Itulah yang harus sahabat/i sisipkan pada kode script buku tamu tersembunyi di atas jika ingin membuatnya tersembunyi.

Nah itulah tutorial cara membuat buku tamu tersembunyi di blogger yang bisa saya tuliskan kali ini, semoga ada manfaatnya dan mudah di mengerti.

Random Post Widget Untuk Blogger Dengan Gambar & Ringkasan

Mau pasang random post widget untuk blogger dengan gambar serta ringkasan ?

Oke sahabat/i, kali ini saya akan menuliskan tutorial bagaimana cara pasang random post widget di blogger yang disertai dengan gambar / thumbnail dan ringkasan, sesuai dengan namanya, widget untuk blog yang satu ini fungsinya adalah untuk menampilkan beberapa artikel acak yang disertai dengan gambar dan ringkasan, yang mana widget ini dibuat oleh salah satu master blogger Indonesia yaitu mas Taufik Nurrohman.

Random post widget untuk blogger dengan gambar & ringkasan yang satu ini memiliki kecepatan loading yang bagus, sehingga tidak terlalu memberatkan blog blogger kita.

Apa sih manfaat memasang random post widget untuk blogger ini ?

Selain untuk menghias dan meramaikan blog kita (dari segi tampilan), widget ini juga berfungsi untuk meningkatkan pageview blog, karena dengan menampilkan beberapa artikel acak di samping blog kita, maka ini memungkinkan pengunjung untuk membaca artikel lainnya yang tampil pada widget random post tersebut.

Selain random post widget untuk blogger dengan gambar & ringkasan ini, sahabat/i juga perlu memasang Cara Membuat Artikel Terkait Serta Gambar & Ringkasan Di Blogger untuk memberikan bacaan lain yang berhubungan dengan artikel yang sedang di baca pengunjung blog kita.

Oke, mari kita lanjut ke cara pasang random post widget untuk blogger yang disertai dengan gambar dan ringkasan.

Cara Pasang Random Post Widget Untuk Blogger Serta Gambar & Ringkasan Dengan Mudah

Untuk memasang widget random post / artikel acak di blog blogger sangat mudah kok, dan untuk lebih jelasnya silakan ikuti langkah – langkah berikut :

  1. Masuk ke dasbor blogger dengan akun milik sahabat/i, jangan pakai akun orang ya
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget dan pilih widget HTML/JavaScript
  4. Masukkan kode script widget random post yang akan saya sertakan di bawah nanti.
  5. Klik Simpan / Save

Random Post Widget Untuk Blogger Dengan Gambar & Ringkasan

Nah itulah cara pasang random post widget untuk blogger dengan gambar & ringkasan yang menurut saya paling mudah, adapun kode script widget yang harus dipasang adalah ini

Script Random Post Widget Untuk Blogger Dengan Gambar & Ringkasan

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'/>
<div id='random-post-container'>Memuat...</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://www.blogbacatulis.com',
    maxResults = 7,
    summaryLength = 170,
    noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
    containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j]; 
        arr[j] = temp;
    }
    return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
    var link, summary, img,
        ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<br *\/?>|[\s]+/g, ' ').replace(/<.*?>/g, "").replace(/[<>]/g, "")).substring(0, summaryLength) + '&hellip;' : "";
        img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s\d+(\-c)?\//, "/s72-c/") : noImageUrl;
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            if (entry[i].link[j].rel == "alternate") {
                link = entry[i].link[j].href;
                break;
            }
        }
        skeleton += '<li>';
        skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
        skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
        skeleton += '<span>' + summary + '</span>';
        skeleton += '<span class="clear"></span></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Keterangan :

  • Baris 1 adalah kode script jQuery, hapus kode tersebut jika sahabat/i sudah menggunakan script jQuery.
  • Baris 2 kode <div id='random-post-container'>Memuat...</div> adalah area yang akan menampilkan artikel acak / random post.
  • Baris 6, ganti http://www.blogbacatulis.com dengan alamat blog blogger sahabat/i
  • Baris 7, silakan ganti angka 7 pada kode maxResults = 7 dengan jumlah artikel acak yang ingin sahabat/i tampilkan.
  • Baris 8 summaryLength = 170, adalah nilai untuk menentukan jumlah karakter ringkasan, ganti angka 170 dengan angka lain yang diinginkan.
  • Baris 8 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png', adalah gambar / thumbnail yang akan digunakan jika artikel terkait tidak memiliki gambar.

Cara lain yang bisa sahabat/i lakukan untuk memasang random post widget untuk blogger dengan gambar & ringkasan tersebut adalah dengan cara menambahkan kode script pada template yang digunakan.

Cara Pasang Random Post Widget Untuk Blogger Dengan Gambar & Ringkasan Pada Template Blogger

berikut cara menambahkan kode script random post widget untuk blogger dengan gambar & ringkasan pada template blogger yang kita gunakan.

Setelah berada pada dasbor blogger silakan buka halaman Template, setelah itu klik Cadangkan / Pulihkan untuk mencadangkan pengaturan template yang sahabat/i gunakan saat ini, dan apabila sudah dicadangkan selanjutnya silakan klik tombol Edit HTML yang berada di bawah tampilan template blogger yang digunakan saat ini (lihat gambar).

 

Cara Pasang Random Post Widget Untuk Blogger Serta Gambar & Ringkasan Dengan Mudah

Cari kode </body> dan kemudian letakkan kode script widget random post yang sudah saya sertakan di atas tadi tepat di atas kode </body>.

Jangan di simpan dahulu ya, sekarang perhatikan kode yang baru di letakkan tadi, di sana ada kode <div id='random-post-container'>Memuat...</div> (pada baris 2)

Nah, kode itu fungsinya adalah area untuk menampilkan artikel acak / random post pada blog kita, maka yang harus di lakukan pada kode tersebut adalah memindahkannya pada posisi di mana sahabat/i ingin menampilkan widget random post tersebut.

Atau salin dahulu kode tersebut dan tempel / paste pada Notepad, kemudian hapus kode tersebut dari template, setelah itu simpan pengaturan template.

Selanjutnya baru pasang kode yang dihapus tadi pada gadget / widget HTML/JavaScript yang ada pada halaman Tata Letak Blogger agar lebih mudah menentukan posisi widget random post tersebut.

Karena dengan memasangnya pada halaman Tata Letak blogger, kita dapat dengan mudah memindahkan posisi widget tersebut tanpa harus edit template lagi.

Nah itulah cara pasang random post widget untuk blogger dengan gambar & ringkasan. Selamat mencoba, dan mudah –  mudahan tulisan ini bermanfaat.

Cara Membuat Tombol Berbagi Ke Sosial Media Dengan Mudah

Cara Membuat Tombol Berbagi Ke Sosial Media Dengan Mudah

Bagaimana ya cara membuat tombol berbagi ke sosial media seperti facebook, twitter, google plus, pinterest, dan sosial media lainnya ?

Oke sahabat/i, pada kesempatan kali ini saya ingin menuliskan tutorial bagaimana cara membuat tombol berbagi ke sosial media dengan mudah dan cepat menggunakan widget untuk blog yang bernama AddThis.

Hampir semua pemilik blog baik itu blogger, wordpress, maupun website membuat tombol berbagi pada blog / website mereka, karena sosial media diyakini bisa meningkatkan kunjungan blog mereka, karena dengan adanya tombol berbagi ke sosial media para pengunjung dapat dengan mudah membagikan artikel yang mereka baca ke jaringan sosial media yang mereka suka. Nah apabila pengunjung telah membagikan artikel yang mereka baca tersebut ke akun sosial media miliki mereka, maka teman – teman mereka akan melihat tautan artikel yang telah dibagikan dan apabila teman – teman mereka tertarik maka kemungkinan besar juga akan mengunjungi blog / website yang telah dibagikan tersebut.

Ada banyak cara membuat tombol berbagi ke sosial media yang bisa kita lakukan, dan salah satu cara yang menurut saya mudah adalah menggunakan bantuan webiste AddThis, yaitu sebuah webiste yang menyediakan tombol berbagi ke berbagai sosial media secara gratis, namun selain menyediakan layanan gratis AddThis juga menyediakan layan berbayar.

Cara Membuat Tombol Berbagi Ke Sosial Media Menggunakan AddThis

Adapun cara membuat tombol berbagi ke sosial media menggunakan widget untuk blog AddThis yang pertama kita lakukan adalah mendapatkan kode tombol berbagi dari website AddThis, untuk itu silakan ikuti langkah – langkah berikut :

Pertama silakan sahabat/i buka webiste AddThis www.addthis.com

Cara Membuat Tombol Berbagi Ke Sosial Media Dengan Mudah

Kemudian buat akun gratis dengan cara mengklik tombol GET STARTED FREE, dan silakan isi formulir pendaftaran sampai selesai, dan jangan lupa klik tombol Register.

Atau sahabat/i bisa juga mendaftar menggunakan akun Google, Facebook, atau Twitter

Contoh daftar menggunakan akun Google :

  1. Silakan klik tombol CONTINUE WITH GOOGLE
  2. Maka akan dibawa ke halaman masuk Google (jika sahabat/i belum masuk), dan silakan masuk dengan akun Google sahabat/i,  maka akan ada permintaan izin, silakan klik tombol Izinkan.
  3. Di halaman selanjutnya silakan masukkan alamat email Google milik sahabat/i tadi pada kolom Email Address
  4. Terakhir klik tombol REGISTER

Setelah itu sahabat/i akan dibawa masuk ke dasbor AddThis, silakan klik menu TOOLS yang ada di menu atas, maka sahabat/i akan dibawa ke halaman pilihan widget untuk blog / widget tombol berbagi, silakan pilih dan klik widget tombol berbagi yang sahabat/i suka untuk mengatur widget tersebut.

Misalnya kita pilih widget Original Sharing Buttons, silakan klik widget tombol berbagi Original Sharing Buttons tersebut maka sahabat/i akan dibawa ke halaman pengaturan widget untuk menyusun posisi icon atau menambahkan icon tombol berbagi ke sosial media lainnya yang di inginkan.

Cara Membuat Tombol Berbagi Ke Sosial Media Dengan Mudah

Apabila sudah selesai mengatur widget tersebut jangan lupa klik tombol Activate.

Maka sahabat/i akan diberi kode widget tombol berbagi yang harus dipasang untuk menampilkan widget untuk blog / website tersebut.

Biasanya kode terdiri dari 2, yaitu kode script yang boleh diletakkan di mana saja asal masih berada pada dokumen body, misalnya di atas kode </body>. dan kode yang kedua adalah kode yang akan menampilkan widget tombol berbagi, jadi silakan pasang kode kedua pada posisi di mana sahabat/i ingin menampilkan widget tombol berbagi tersebut, misalnya di atas artikel, di bawah artikel, atau di sidebar blog kita.

cara membuat tombol berbagi ke sosial media

Bagi sahabat/i pengguna blogger yang ingin memasang widget tombol berbagi tersebut di sidebar blog silakan baca Widget Blog : Cara Dasar Untuk Menghias Blog Blogger dan pilih widget HTML/JavaScript untuk menambahkan widget tersebut.

Dan bagi sahabat/i pengguna wordpress maka silakan download plugin AddThis di https://wordpress.org/plugins/addthis/

Nah itulah cara membuat tombol berbagi ke sosial media dengan mudah dan cepat menggunakan widget untuk blog dari AddThis.

Semoga bermanfaat.

Cara Mengisi Menu Dengan Artikel / Halaman Blog – Blogger

Bagaimana cara mengisi menu dengan artikel / halaman blog blogger kita atau ke halaman blog lain yang kita inginkan ?

Pada tulisan terdahulu saya sudah menuliskan Cara Membuat Menu Di Blogger Dengan Mudah & Cepat serta Cara Membuat Menu Di WordPress + Membuat Sub Menu dan pada kesempatan kali ini saya akan menuliskan bagaimana cara mengisi menu dengan artikel / halaman blog blogger atau blog lain, karena mungkin ada sebagian dari sahabat/i kita yang masih belum paham bagaimana cara mengisi menu dengan artikel / kumpulan artikel / halaman yang ada di blog kita atau blog lain.

Tujuan saya menuliskan tutorial cara mengisi menu dengan artikel / halaman blog blogger ini adalah untuk memperjelas bagaimana cara mengisi menu dengan artikel yang di inginkan, sehingga ketika pengunjung mengklik menu tersebut akan dibawa ke halaman / artikel yang telah kita sesuaikan dengan menu tersebut.

Sebenarnya setiap penulis / blogger yang menuliskan tutorial cara membuat menu selalu menyertakan keterangan singkat bagian mana yang harus di edit dan di isi dengan tautan artikel, namun bagi sebagian pembaca itu belum cukup, dan perlu penjelasan lebih bagaimana cara mengisi menu dengan artikel / halaman yang diinginkan.

Oke mari kita mulai belajar isi menu dengan artikel yang kita mau.

Cara Mengisi Menu Dengan Artikel / Halaman Yang Kita Inginkan

Untuk mengisi menu yang sudah kita buat dengan sebuah artikel / halaman yang kita inginkan maka hal pertama yang harus dipastikan adalah artikel / halaman yang ingin kita masukkan ke dalam menu tersebut sudah online dan bisa di akses.

Untuk meyakinkan apakah artikel / halaman tersebut sudah benar-benar online dan sudah bisa di akses maka yang harus dilakukan adalah mengunjungi / membuka artikel / halaman yang ingin kita masukkan ke menu tersebut, jika artikel yang sahabat/i maksud sudah terlihat di halaman tersebut maka itu artinya artikel / halaman tersebut sudah online dan bisa dimasukkan ke menu.

Contoh 1 :

Saya ingin membuat menu KODE HTML LENGKAP yang jika di klik akan menuju ke halaman Kode HTML Lengkap – Kumpulan Referensi Tag HTML5, maka saya buka halaman tersebut dan isinya sesuai dengan yang saya inginkan, maka itu artinya halaman tersebut bisa saya masukkan ke menu.

Setelah artikel / halaman yang ingin kita masukkan ke menu sudah online, maka langkah selanjutnya adalah mengambil tautan / link artikel / halaman tersebut, caranya silakan sahabat/i lihat pada address bar halaman tersebut, maka sahabat/i akan melihat tautan / link artikel / halaman tersebut.

Cara Mengisi Menu Dengan Artikel / Halaman Blog – Blogger

Nah tautan / link yang ada di address bar itulah yang harus kita ambil dan masukkan ke menu.

Biasanya pada tutorial membuat menu ada kode menu kseperti ini :

<li><a href=’#‘>Menu</a></li>

Dengan keterangan, silakan ganti kode pagar (#) dengan tautan / link / url / alamat yang diinginkan, dan ganti tulisan Menu dengan nama yang sahabat/i mau.

Nah, di atas sudah disebutkan bahwa yang harus kita ganti dan isi dengan tautan / link yang kita inginkan adalah tanda pagar, dan tulisan Menu dengan nama menu yang kita inginkan.

Contoh 2 :

Pada contoh 1 di atas saya sudah menentukan halaman yang akan saya masukkan ke menu, dan tautan menu yang harus saya pasang adalah :

Dan saya ingin menu tersebut ingin saya isi dengan tautan halaman yang sudah saya tentukan tadi, maka pertama saya memasukkan tautan / link pada menu tersebut yaitu http://ahmadrifai.net/kode-html-lengkap-kumpulan-referensi-tag-html5/ , sehingga kode nya menjadi seperti ini

<li><a href='http://ahmadrifai.net/kode-html-lengkap-kumpulan-referensi-tag-html5/'>Menu</a></li>

Selanjutnya, saya akan merubah nama menu menjadi … , sehingga hasil kode menu tersebut menjadi seperti ini

<li><a href='http://ahmadrifai.net/kode-html-lengkap-kumpulan-referensi-tag-html5/'>KODE HTML LENGKAP</a></li>

Nah, sekarang saya sudah berhasil mengisi salah satu menu dengan nama menu KODE HTML LENGKAP yang jika menu tersebut di klik maka pengunjung akan dibawa ke halaman http://ahmadrifai.net/kode-html-lengkap-kumpulan-referensi-tag-html5

Nah itulah cara mengisi menu dengan artikel / halaman blog yang kita inginkan, dan untuk cara memasukkan artikel / halaman lainnya pada menu lainnya maka silakan ulang lagi langkah – langkah yang sudah saya tuliskan di atas.

Itu cuma 1 artikel saja, bagaimana cara mengisi satu menu dengan kumpulan artikel yang kita inginkan ?

Oke oke, mari kita bahas juga

Cara Mengisi Menu Dengan Kumpulan Artikel Tertentu Yang Kita Inginkan

Untuk mengisi menu dengan kumpulan artikel, maka blog / website kita harus memiliki kategori, dan artikel – artikel yang kita tulis masing – masing harus memiliki kategori. Dan bagi sahabat/i pengguna blogger ada yang namanya Label, nah setiap artikel yang sahabat/i tulis di blogger harus memiliki Label, untuk lebih jelasnya silakan baca : Cara Membuat Label: Mengelompokkan Artikel Pada 1 Menu Blog.

Contoh :

Saya ingin membuat menu BLOGGER yang jika menu tersebut di klik akan mengarah ke halaman yang isinya kumpulan artikel tentang Blogger.

Maka langkah yang harus saya lakukan sama dengan langkah cara mengisi menu dengan artikel / halaman blog di atas, yaitu pertama saya harus membuat beberapa artikel tantang blogger yang dimasukkan salam 1 kategori (blogger), kemudian saya harus memastikan apakah halaman kategori yang saya inginkan sudah benar – benar online atau tidak dengan cara membukanya.

Dan untuk memudahkan saya menemukan halaman kategori tersebut maka saya pasang widget kategori di samping / sidebar, jika sahabat/i menggunakan blogger maka silakan pasang widget Label di sidebar blog.

Cara Mengisi Menu Dengan Artikel / Halaman Blog – Blogger

Kemudian saya klik salah satu kategori yang ingin saya masukkan ke menu pada widget Kategori yang sudah saya pasang di sidebar tadi (untuk memastikan apakah isinya benar – benar kumpulan artikel yang saya inginkan).

Apabila setelah dibuka isinya sudah pas dengan keinginan, maka itu artinya saya bisa menggunakan tautan / link halaman kategori tersebut dan memasukkan-nya ke dalam menu.

Cara Mengisi Menu Dengan Artikel / Halaman Kategori

Selanjutnya saya salin tautan / link halaman kategori tersebut sesuai dengan tautan yang ada di addres bar, kemudian saya masukkan ke dalam menu lainnya

Kode asal

<li><a href='#'>Menu</a></li>

Dan setelah saya edit kode menu tersebut menjadi seperti ini

<li><a href='http://ahmadrifai.net/category/blogger/'>BLOGGER</a></li>

Selelsai, sekarang menu tersebut sudah saya beri nama BLOGGER dan jika di klik akan mengarah ke laman http://ahmadrifai.net/category/blogger/

Nah, itulah cara mengisi menu dengan artikel / halaman blog yang kita inginkan, dan untuk mendapatkan / mengambil tautan halaman sebenarnya bisa dengan cara klik kanan pada tautan / link halaman yang ingin kita masukkan ke menu kemudian klik salin / copy, kemudian tempel / paste pada Notepad atau boleh juga langsung ditempel / salin pada kode menu.

Tutorial cara mengisi menu dengan artikel / halaman blog yang saya tulis ini adalah sebagai bahan pembelajaran, dan mudah – mudahan tutorial cara mengisi menu dengan artikel / halaman blog ini dapat membantu dan mudah dimengerti.

5 Style Search Box Widget Kolom Pencarian Untuk Blogger

5 Style Search Box Widget Kolom Pencarian Untuk Blogger

Bosan dengan tampilan kolom pencarian blogger bawaan, dan ingin menggunakan style search box widget / kolom pencarian untuk blogger yang lain ?

Mungkin 5 style search box widget / kolom pencarian untuk blogger yang akan saya tuliskan di sini bisa dipertimbangkan untuk di gunakan pada blog blogger sahabat/i, dan 5 style search box widget / kolom pencarian untuk blogger ini saya tuliskan tidak hanya untuk pengguna blogger saja, sahabat/i juga bisa menggunakannya untuk blog lain selain blogger maupun untuk website (tapi sebagian kode harus di edit dahulu).

Apa sih gunanya kita memasang widget kolom pencarian / search box widget ?

Sesuai dengan namanya yaitu widget kolom pencarian, maka sudah tentu gunanya untuk mencari artikel lain di blog kita atau menggunakan Google penelusuran dengan cara memasukkan kata kunci pada kolom pencarian tersebut, dan widget kolom pencarian / search box widget untuk blogger yang akan saya tuliskan di sini fungsinya untuk mencari artikel lain yang ada pada blog blogger kita.

Sebelum saya menuliskan 5 kode serta style search box widget kolom pencarian untuk blogger, saya akan menuliskan cara pasang widget kolom pencarian ini di blogger

Cara Pasang Search Box Widget Kolom Pencarian di Blogger

adapun langkah – langkah cara pasang search box widget kolom pencarian di blogger adalah sebagai berikut :

  1. Silakan masuk ke dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget
  4. Pilih gadget / widget HTML/JavaScript
  5. Masukkan kode search box widget kolom pencarian untuk blogger yang saya sertakan di bawah pada bagian Konten / Content
  6. Klik Simpan / Save

 

5 Style Search Box Widget Kolom Pencarian Untuk Blogger

Nah itulah langkah – langkah cara pasang search box widget kolom pencarian di blogger, dan berikut kode search box widget kolom pencarian untuk blogger yang bisa sahabat/i gunakan.

5 Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger

Urutan kode search box widget kolom pencarian untuk blogger yang saya sertakan di bawah nanti sesuai dengan urutan gambar utama (gambar pertama pada artikel ini) dari paling atas (kode 1) sampai paling bawah (kode 5). Silakan pilih salah satu kode search box widget kolom pencarian untuk blogger yang ingin sahabat/i gunakan

Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger 1

<style type='text/css'>
.box-cari {
    background:#EEEEEE;
    border: 0;
    padding: 1em;
    width:70%;
}
.btn-cari {
    background: #359BED;
    border: 0;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    padding: 0.95em 1.5em;
    cursor:pointer;
}
.btn-cari:hover {
    background: #555;
}
</style>
<form class='cari' action='/search' method=get>
<input class='box-cari' name='q' type='text' placeholder='Cari Artikel'/>
<input class="btn-cari" value="Cari" type="submit"/>
</form>

Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger 2

<style type='text/css'>
.box-cari {
    background:#EEEEEE;
    width:70%;
    border: 0;
    margin:0;
    padding: 1em;
    float:left;
}
.btn-cari {
    background: #359BED;
    border: 0;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    margin:0;
    padding: 0.95em 1.5em;
    float:left;
    cursor:pointer;
}
.btn-cari:hover {
    background: #555;
}
</style>
<form class='cari' action='/search' method=get>
<input class='box-cari' name='q' type='text' placeholder='Cari Artikel'/>
<input class="btn-cari" value="Cari" type="submit"/>
</form>

Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger 3

<style type='text/css'>
.box-cari {
    background:#EEEEEE;
    width:70%;
    border: 0;
    border-radius: 5px 0 0 5px;
    margin:0;
    padding: 1em;
    float:left;
}
.btn-cari {
    background: #359BED;
    border: 0;
    border-radius: 0 5px 5px 0;
    color: #FFFFFF;
    margin:0;
    padding: 0.95em 1.5em;
    float:left;
    cursor:pointer;
}
.btn-cari:hover {
    background: #555;
}
</style>
<form class='cari' action='/search' method=get>
<input class='box-cari' name='q' type='text' placeholder='Cari Artikel'/>
<input class="btn-cari" value="Cari" type="submit"/>
</form>

Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger 4

<style type='text/css'>
.box-cari {
    background:#EEEEEE;
    width:70%;
    border: 0;
    border-radius: 15px 0 0 0;
    margin:0;
    padding: 1em;
    float:left;
}
.btn-cari {
    background: #359BED;
    border: 0;
    border-radius: 0 0 15px 0;
    color: #FFFFFF;
    margin:0;
    padding: 0.95em 1.5em;
    float:left;
    cursor:pointer;
}
.btn-cari:hover {
    background: #555;
}
</style>
<form class='cari' action='/search' method=get>
<input class='box-cari' name='q' type='text' placeholder='Cari Artikel'/>
<input class="btn-cari" value="Cari" type="submit"/>
</form>

Kode + Style Search Box Widget Kolom Pencarian Untuk Blogger 5

<style type='text/css'>
.box-cari {
    background:#EEEEEE;
    width:70%;
    border: 0;
    border-radius: 15px 0 0 0;
    margin:0;
    padding: 1em;
    float:left;
}
.btn-cari {
    background: #359BED;
    border: 0;
    border-radius: 0 15px 0 0;
    color: #FFFFFF;
    margin:0;
    padding: 0.95em 1.5em;
    float:left;
    cursor:pointer;
}
.btn-cari:hover {
    background: #555;
}
</style>
<form class='cari' action='/search' method=get>
<input class='box-cari' name='q' type='text' placeholder='Cari Artikel'/>
<input class="btn-cari" value="Cari" type="submit"/>
</form>

Nah itulah 5 kode + style search box widget kolom pencarian untuk blogger yang bisa sahabat/i gunakan.

Sebenarnya 5 kode + style search box widget kolom pencarian untuk blogger yang saya tuliskan di atas berasal dari 1 kode saja, kemudian style / css saya edit menjadi 5, jadi 5 kode yang saya tuliskan di atas tidak bersifat baku, silakan rubah style / css di atas sesuai selera sahabat/i masing-masing.

Cara Membuat Widget Popular Post Warna Warni Di Blogger

Cara Membuat Widget Popular Post Warna Warni Di Blogger

Mau tahu bagaimana cara membuat widget popular post warna warni di blogger / widget entri populer warna warni di blogger ?

Salah satu widget blogger yang sering digunakan sahabat/i blogger kita adalah widget popular post / widget entri populer, yang mana widget tersebut fungsinya adalah untuk menampilkan daftar artikel populer / artikel yang paling sering dibaca pengunjung blog kita.

Walaupun widget popular post / widget entri populer telah tersedia di blogger dengan tampilan yang sudah diberi style oleh pihak blogger (tidak warna warni), namun kita juga bisa merubah tampilan-nya dengan menambahkan style / css sendiri sesuai yang kita inginkan, dan memberi warna warni widget tersebut sesuai selera.

Nah, pada tutorial ini saya akan menuliskan cara membuat widget popular post warna warni di blogger / widget entri populer warna warni di blogger dengan cara menambahkan kode css yang berguna untuk memberi warna pada daftar artikel populer tersebut.

Cara Membuat Widget Popular Post Warna Warni Di Blogger

Cara membuat widget popular post warna warni di blogger sangat mudah kok, karena kita cukup menambahkan widget popular post kemudian baru menambahkan kode css untuk membuat widget popular post tersebut menjadi warna warni.

Ok, mari kita lanjut ke tahap pertama cara membuat widget popular post warna warni di blogger yaitu menambahkan widget popular post / widget entri populer dahulu, untuk menambahkan widget popular post silakan ikuti langkah-langkah berikut :

  1. Silakan masuk dahulu ke dasbor blogger
  2. Buka halaman Tata Letak blogger
  3. Klik Tambahkan Gadget
  4. Pilih Gadget Popular Post / Entri Populer, kemudian silakan atur gadget tersebut sesuai keinginan.
  5. Dan terakhir jangan lupa untuk menyimpan widget tersebut.

 

Cara Membuat Widget Popular Post Warna Warni Di Blogger

Cara Membuat Widget Popular Post Warna Warni Di Blogger / mengatur widget popular post agar tampilan-nya sama persis seperti yang saya contoh-kan di tutorial ini :

  • Pada bagian Most viewed, silakan tentukan sendiri apakah ingin menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam satu minggu.
  • Pada bagian Show ada bagian image thumbnail dan snippet serta Display up to, nah pada bagian Display up to silakan tentukan berapa artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan snippet JANGAN DIBERI CENTANG.
  • Setelah itu silakan Simpan

Setelah widget popular post warna warni sudah terpasang di blog blogger sahabat/i, maka tahap selanjutnya adalah memberi style / menambahkan kode css yang fungsinya untuk memberi warna warni pada daftar artikel populer.

Cara Membuat Widget Popular Post Menjadi Warna Warni Di Blogger

Pada tutorial cara membuat widget popular post warna warni di blogger ini saya akan memberikan 2 kode css yang bisa sahabat/i gunakan untuk memberi warna warni pada widget popular post yang sudah sahabat/i pasang. Kode CSS ini tidak bersifat baku, sahabat/i bisa mengedit-nya sesuai keinginan, namun untuk mengedit kode css tersebut tentu sahabat/i harus mengerti tentang kode css.

Untuk menambahkan style / css untuk widget popular post silakan sahabat/i ikuti langkah-langkah cara membuat widget popular post warna warni di blogger yang sudah saya tuliskan di atas sampai langkah 3. Klik Tambahkan Gadget.

Kemudian pilih Gadget Html/JavaScript, dan selanjutnya masukkan kode css yang saya sertakan di bawah nanti pada bagian Konten / Conten, dan kemudian simpan.

Selain cara ini, sahabat/i bisa juga mengedit template blogger yang digunakan untuk menambahkan kode css ini dan meletakkannya sebelum kode </head>.

2 Kode CSS Popular Post Warna Warni Untuk Blogger

Silakan pilih kode css popular post warna warni untuk blogger yang ingin sahabat/i gunakan. Bagaimana tampilan dari kode css 1 dan 2 silakan sahabat/i lihat pada gambar utama yang ada di atas tutorial ini.

CSS Popular Post Warna Warni Untuk Blogger 1

CSS Popular Post Warna Warni Untuk Blogger 2

Nah itulah tutoria cara membuat widget popular post warna warni di blogger, semoga tutoria cara membuat widget popular post warna warni di blogger ada manfaatnya dan mudah dimengerti.

Cara Mengganti Icon Blog Blogger Dengan Mudah dan Cepat

Cara Mengganti Icon Blog Blogger Dengan Mudah dan Cepat Tanpa Ribet

Mungkin cara mengganti icon blog blogger merupakan hal yang bisa saja bagi sahabat/i yang sudah lama apalagi mahir menggunakan blogger, namun saya rasa tidak ada salahnya juga jika saya mengangkat topik bagaimana cara mengganti icon blog blogger ini, karena mungkin saja tutorial ini akan bermanfaat bagi yang baru menggunakan blogger.

Sebelum saya membahas lebih jauh tentang cara mengganti icon blog blogger ini, saya akan memberitahukan dahulu apa yang saya maksud icon pada tutorial ini, dan untuk itu saya sudah menyiapkan gambar untuk menjelaskan-nya.

icon blogger

Nah, bagian yang saya tunjuk dengan tanda panah itulah yang saya maksud icon di sini, dan saya akan menuliskan tutorial cara mengganti icon blog blogger menggunakan icon / gambar yang diinginkan.

Ada beberapa cara yang bisa kita lakukan untuk mengganti icon blog blogger, dan saya akan memulainya dengan cara yang paling mudah, dan selanjutnya baru saya tuliskan cara lainnya sebagai alternatif saja.

Cara Mengganti Icon Blog Blogger Dengan Mudah dan Cepat

Saat ini untuk mengganti icon blog blogger bukan lah hal yang sulit dilakukan, karena kita cukup mengunggah gambar yang ingin kita jadikan sebagai icon blog blogger kita, dan untuk lebih jelasnya bagaimana cara mengganti icon blog blogger, silakan ikuti langkah-langkah berikut :

  1. Masuk ke dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Edit pada bagian Favicon, kemudian upload gambar yang ingin dijadikan sebagai icon blog blogger sahabat/i
  4. Selesai

Cara Mengganti Icon Blog Blogger Dengan Mudah - Cepat

 

Bagaimana, sangat mudah bukan mengganti icon blog blogger ?

Nah, itulah cara yang menurut saya paling mudah untuk mengganti icon blog blogger, namun sebenarnya ada cara lain yang bisa kita lakukan untuk mengganti icon blog blogger.

Cara Mengganti Icon Blog Blogger Secara Manual

Cara mengganti icon blog blogger yang satu ini pernah saya lakukan pada waktu blogger belum menambahkan gadget icon pada Tata Letak blogger, namun sebenarnya cara ini masih bisa kita gunakan, dan juga cara ini bisa kita gunakan untuk mengganti icon website / blog selain blogger, walau langkah-langkah yang harus dilakukan tidak sama persis dengan langkah yang dilakukan pada blogger yang akan saya tuliskan ini.

Berikut langkah-langkah yang harus dilakukan untuk mengganti icon blog blogger secara manual.

Masih berada pada dasbor blogger ?

Jika sudah keluar maka silakan masuk dahulu ke dasbor blogger.

Setelah berada pada dasbor blogger silakan buka halaman Template, selanjutnya klik tombol Edit HTML yang berada di bawah tampilan template yang sahabat/i gunakan saat ini.

Cara Mengganti Icon Blog Blogger Secara Manual

 

Pada halaman Editor Template Blogger silakan sahabat/i cari kode </head>, kemudian letakkan kode berikut tepat di atas kode </head> tadi

<link href="Masukkan URL Gambar Di Sini" rel="icon" type="image/x-icon">

Keterangan :

Pada kode di atas ada tulisan Masukkan URL Gambar Di Sini, silakan ganti tulisan tersebut dengan url gambar yang ingin sahabat/i jadikan sebagai icon.

Setelah menambahkan kode tersebut jangan lupa untuk menyimpan pengaturan template ya.

Nah itulah cara manual mengganti icon blog blogger, dan seperti yang sudah saya sebutkan di atas bahwa cara manual ini bisa diterapkan untuk mengganti icon blog selain blogger atau pun website.

Intinya sahabat/i harus meletakkan kode yang sudah saya tuliskan di atas sebelum kode </head> yang ada pada template blog / template website yang digunakan, itu saja.

Saya rasa cukup untuk tutorial ini, dan mudah-mudahan tutorial cara mengganti icon blog blogger yang saya tuliskan di sini dapat bermanfaat bagi semua.