Tips Meningkatkan Rangking Alexa dengan Cepat

Cara Meningkatkan Rangking Alexa dengan Cepat membutuhkan konsistensi dan kerja keras Anda. Situs, blog, atau website anda akan mudah diindex oleh Alexa Rank jika melakukan beberapa hal yang sangat penting yang nanti akan saya jelaskan.

Alexa adalah web perusahaan informasi yang menangani peringkat, data, dan traffik situs di dunia berdasarkan lalu lintas, kinerja situs, dan beberapa faktor lain. Alexa Rank merupakan penentu tingkat keberhasilan blog / website seseorang. Dikarenakan alexa rank dan pagerank google merupakan salah satu nilai tersendiri untuk semua webmaster search engine.

Semakin baik nilai rangking alexa seseorang maka akan mempermudah situs kita terindex di mesin pencari. Cara kerja dari pembaruan rangking alexa adalah dengan hitz yang melalui system. Jadi, apabila anda ingin mendapatkan rangking alexa tinggi pasanglah toolbar dan add ons alexa. Beberapa tips lengkapnya dapat dibaca dalam uraian berikut ini.

Tips Meningkatkan Rangking Alexa :
1. Install Alexa Toolbar.

•     Download Alexa Toolbar for your browser.

2. Claim Your Site with Verifycation.

Agar blog anda mudah ditingkatkan rangking alexanya, daftar segera ke alexa.com dan lakukan verifikasi dengan cara menempatkan meta tag beserta kode yang tertera atau dengan cara lain yang telah ditulis alexa.

3. Letakkan Alexa Widget di Blog Anda.

Cara Memasang Widget Alexa adalah :

• Login ke alexa.com dengan akun anda.
• Klik Product, lalu klik See Other Tools for Site Owner pada bagian bawah.
• Terdapat berbagai macam tools seperti Alexa Widget, silahkan anda klik.
• Masukkan nama situs anda di kotak yang tersedia.
• Pilih tampilan widget tersebut, dan copy kode yang ada ke blog Anda.

4. Tulis review alexa dengan menggunakan akun anda sendiri.

5. Lakukan review pengunjung seperti berikut ini :

• Review and Get Backlinks for your Blog

6. Komentar di situs atau forum dengan pagerank tinggi.
7. Update blog kamu setiap hari.
8. Tulis Artikel yang Berkualitas.
9. Share artikel tersebut ke salah satu Social Bookmarking.

Memang tidak ada proses yang cepat untuk mendapatkan hasil yang baik, tetapi kerja keras yang tinggi akan mengalahkan semua keadaan dan meningkatkan peringkat diri Anda. Semoga Tips Meningkatkan Rangking Alexa dengan Cepat ini dapat bermanfaat.




Sumber

Cara Mengedit Template Blogger Terbaru

Setelah membahas mengenai Panduan Edit HTML Blog, Tutorial kali ini membahas Cara Mengedit Template Blogger Terbaru untuk membantu proses pencarian kode yang ingin ditemukan, dan bagaimana menemukan kode <data:post.body/> di dalam edit template.

Karena pada pembahasan sebelumnya anda sudah mengetahui fitur-fitur dan fungsi dari menu-menu dan istilah di dalam pengeditan template, topik saat ini mengacu pada proses penemuan sebuah kode-kodee yang ingin dicari.

Langkah dan tahapan untuk menggunakan Kotak Search di dalam Edit HTML :
1. Masuk ke Menu Template di dalam Blogger.
2. Pilih Edit HTML.

3. Letakkan pointer mouse di dalam kotak Edit HTML tersebut. Klik Edit Template terlebih dahulu.
4. Klik di dekat kode apapun seperti terlihat pada contoh gambar :

5. Untuk melihat keseluruhan kode, silahkan klik icon logo hitam kecil berbentuk tombol play.
6. Untuk melakukan pencarian kode CSS / HTML, silahkan tekan CTRL + F.

7. Letakkan kode yang ingin dicari di dalam kotak tersebut.
8. Selesai.

Untuk Menemukan kode <data:post.body/> cara manual :
1. Masuk ke Edit HTML di Template.
2. Cari Kode Blog1 dan klik tanda tombol hitam di sebelah kirinya untuk menemukan semua kode.

3. Kemudian, Klik pada bagian post seperti terlihat di gambar.
    Maka anda akan menemukan kode-kode yang berkaitan dengan tampilan artikel posting.

Sebenarnya untuk menemukan kodee <data:post.body/> anda bisa menggunakan kotak search seperti pada panduan pertama, tetapi jika ingin menggunakan cara manual maka dilakukan dengan panduan yang kedua.

Semoga dengan artikel ini dapat membantu anda mengedit template, edit html blog,dan cara mengedit template terbaru yang mudah. Cara Mengedit Template Blogger memang terlihat agak sulit namun apabila sudah sering dicoba pasti akan terlihat mudah.






Sumber

Cara Membuat Artikel Terkait dengan Gambar

Salah satu cara yang relatif tepat untuk meningkatkan aktivitas dari pengunjung adalah dengan membuat Artikel Terkait / Related Posts. Baik itu dengan Gambar / Thumbnail atau url link biasa yang disertai dengan Judul Artikel. Beberapa saat lalu, Media Blogger juga sudah memberikan cara yang mudah untuk memasang artikel terkait ini hanya saja belum disertai Gambar.

Fungsi dari penggunaan gambar Thumbnail itu sendiri lebih ke arah pmbuatan tampilan yang menarik sehingga meningkatkan minat dan simpati pengunjung untuk membaca artikel / postingan lain yang telah saudara buat. Contoh dari hasil pemasangannya adalah sebagai berikut :

Sebenarnya sobat dapat memanfaatkan fasilitas daripada Linkwithin, hanya saja terkadang disaat server sedang down akan membuat loading blog anda menjadi lebih lambat. Untuk mengoptimalkannya terlebih lagi dalam hal Search Engine Optimization (SEO), sahabat semua harus lebih meningkatkan kinerja pada blog anda.

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel anda.

Cara Membuat Artikel Terkait (Related Posts) dengan Gambar Thumbnail :
1. Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
2. Kemudian tekan CTRL + F, dan cari code ]]></b:skin>
    Setelah ketemu, COPAS kode berikut ini di atas / dibawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == "item"'> <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,Times New Roman,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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_t9Bgc6viNDxscj2l3AV9wrj47U8wJ6RGZys752OrVyruejuE0gRKmiFD-xYjIVcwBZXup93w5UrB_jd-MCWfTf12yD-FQ6eTuakPWgkEs-T2vHd4mw7Xg75h9VKkiljAun9pLtBTg5M/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/> </b:if>

Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna yang dapat anda EDIT serta disesuaikan sendiri berdasarkan keinginan, caranya

Silahkan Anda cari kode <data:post.body/>
Kemudian letakan kode di bawah ini setelah kode <data:post:body/>

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> </b:if>

Simpan Template Anda.

Keterangan Mengenai Kode Artikel Terkait Bergambar

1. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.
2. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.
3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya.
4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.
5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikian artikel tentang Cara Membuat Artikel Terkait dengan Thumbnail Gambar. Semoga dengan tutorial blogger / blogspot ini dapat bermanfaat dan menambah wawasan anda.

Sumber

Cara Bertukar Link Otomatis di Blog

Auto Backlink atau biasa disebut tukar link secara otomatis merupakan hal yang diinginkan banyak orang dalam menghimpun suatu keterikatan yang sangat kuat antar sesama blog. Bertukar Link memang memiliki banyak manfaat dan kegunaan yang sangat bermanfaat.

Fungsi tukar link adalah untuk membuat link yang mengarah ke halaman blog kita menjadi banyak sehingga akan memudahkan blog kita terindex di mesin pencari. Bukan hanya itu, tukar link juga akan menambah traffik pengunjung pada blog kita.Untuk Anda yang ingin bertukar link secara otomatis, caranya cukup mudah.

Masukkan data blog Anda pada kolom auto backlink di bawah ini :




Maka, secara otomatis link Anda akan terpasang dan bertukar link dengan blog saya pada halaman ini. Apabila anda ingin memasang widget link otomatis ini, silahkan daftar disini .






Sumber

Manfaat Tukar Link terhadap Traffik Blog SEO

Untuk sebuah pengembang website/blog, backlink ( tukar link ) atau link exchange merupakan hal penting. Apa fungsi, manfaat, dan kegunaan dari tukar link? Bagaimana cara membuat backlink atau tukar link yang serp SEO terhadap traffik blog? Mari, kita bahas mengenai pengertian tukar link (link exchange) terlebih dahulu.

Backlink / Tukar Link adalah sebuah cara yang dilakukan oleh 2 orang pengguna blog atau website yang melakukan peletakan link ke tempat website tersebut berada dan saling bertukar link satu sama lain ( dilakukan oleh kedua belah pihak ). Backlink ini sangat bermanfaat dan berpengaruh terhadap traffik blog yang kita miliki dan akan berpengaruh pada index di search engine.

"Lalu, Apakah Fungsi , Manfaat dan kegunaan dari tukar menukar link ke sesama blog ?". Tentu, memiliki manfaat serta kegunaan yang sangat banyak. Menurut, Windows Indonesia sendiri backlink memiliki fungsi yaitu sebagai hubungan dan keterkaitan link serta meningkatkan sumber lalu lintas links in ke dalam website/blog kita sehingga akan meningkatkan traffik pengunjung serta menambah indexing di mata search engine.

Konsep dari backlink ini sebenarnya cukup mudah dan tidak sulit. Cara membuat backlink ini bisa dilakukan dengan cara me-contact admin yang memiliki blog/website atau bisa juga dengan berkomentar di halaman tukar link ( link exchange ) blog tersebut dan memberitahukan bahwa linknya telah terpasang dengan baik dan benar.

Adapaun,untuk bertukar link dengan website blog kami cukup mudah. Caranya adalah dengan mengikuti panduan tukar link dan syarat serta ketentuan bertukar link yang baik seperti berikut ini :

1. Masuk ke halaman blogger dan Login dengan akun Anda.

2. Masuk ke halaman Layout, lalu pilihlah letak yang tepat untuk menambah link yang akan ditampilkan.

3. Klik tambah gadget ( Add Gadget ).

4. Copy paste kode yang diberikan oleh pemilik blog. Contohnya bisa terlihat seperti di bawah ini dengan tulisan berwarna biru. Ketentuan : setiap blog atau website memiliki kode dan persyaratan yang berbeda. Biasanya dipengaruhi oleh faktor pagerank Google, Alexa Rank dan lainnya.

5. Klik OK dan Simpan ( Save ).

Kode Bertukar Link dengan Windows-Indonesia adalah sebagai berikut :

<a href="http://blogislamiindah.blogspot.com/" onmouseover="window.location=this.href"><blink><b><span style="color: black;">Bacaan Ringan</span></b></blink></a>

Bacaan Ringan

Silahkan copy kode diatas dan paste di blog Anda. Kami akan mengkonfigurasi halaman blog Anda dan akan menampilkan link blog Anda di halaman website blog kami paling lambat 3x24 jam. Terimakasih untuk kerja sama yang Anda berikan di antara sesama pembangun web.






Sumber

Cara Menambahkan Email Subscription Widget di Bawah Posting

Tidak terasa selama 1 bulan ini, telah membuat banyak posting yang berkaitan dengan Tutorial Blogger. Cara Membuat Email Subcription Widget atau lebih dikenal dengan Kotak Email Subscribe sangat mudah dilakukan. Di dalam kotak Email Subcription ini juga terdapat logo button Followers sederhana, mulai dari RSS,Twitter,Facebook, dan Google Plus.

Ditambahi juga tombol Like bagi pengunjung yang memiliki akun Fcaebook dan ingin memberikan jempol jarinya yang menandakan artikel kita bagus dan patut untuk di copy paste -,-'. Viuhhh !!! Widget ini pasti akan meningkatkan jumlah subscribers Anda. Jika sosial network Anda dapat menulis posting dengan baik dan mengharapkan lebih banyak jumlah pelanggan maka widget ini pasti akan membantu kamu. Subcription Widget ini berisi formulir berlangganan email, facebook seperti tombol, tombol dan twitter mengikuti beberapa ikon sosial yang indah di sebelah kanan widget widget. Semuanya dapat anda nikmati dengan mudah dengan mengikuti panduan cara membuat dan menambahkan email subscription di bawah posting artikel kita.

Cara Menambahkan Email Subscribe Widget Cantik di Bawah Posting :

1. First go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed
5. Check the Expand Widget Templates checkbox
6. Sepertinya saya harus memakai Bahasa Indonesia sampai disini, biar Anda dapat mengetahuinya.
7. Cari kode <data:post.body/> . Letakkan kode ini dibawah <data:post.body/>. Cari kode yang kedua.

<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> form.feedburner { margin: 20px 0 0; display: block; clear: both; } .mediabloggerstyle { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeIj6AqPar20lVoIkIWG6uQrWq-BnEPQZUDB3MdetrObVTDC6S0oDcFuu5o-JB9I_wzlzXFkNV7Ejg_Pr8KlZjAUEJZskBJULjm3gGFZisPVNhro2ops4Y68AvsgXCRs17Ethb9H30a4O/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #666; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .mediabloggersubmit { color: #666; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' #FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } #mediablogger-widget { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 10px; background: none repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 480px; -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D; } #mediablogger-widget:hover { background: none repeat scroll 0 0 #FFF; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } #mediablogger-widget td { padding: 3px 0; } </style> <center> <br/><div id='mediablogger-widget'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '> Get free daily email updates! </p> <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMA FEEDBURNER ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='NAMA FEEDBURNER ANDA'/> <input name='loc' type='hidden' value='en_US'/> <input class='mediabloggerstyle' 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 alt='' class='mediabloggersubmit' title='' type='submit' value='Submit'/> </form> </td> <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '> Follow us! </p> <a href='http://feeds.feedburner.com/ID FEEDBURNER ANDA' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7i0sGp2jMSEHtyte26vr8B_CeBrtB499SH2Kko-cBOZ2vPcVEGuSHGkD-tCMECDn_1TH3FIBJ0YLm1WHJnUMkqiGg-oOcBUuzaGwjdNYRDyW3pHuM_1V_bGcGLF33YTaoq0n6UZxlQ_D/s1600/helperblogger.com-rss.png'/></a> <a href='http://twitter.com/ID TWITTER ANDA' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_918HdAVfZ3RuNMPAwmITdAeakJDbSE0zNUYCTRSCUQ8dd52-8heIjZzkWkh7et8R09rp7azF5nuLnfKxTGAt0rdmwUDuavdkuTA8c-QT2WNDpEb2U0ZHZGFb79j5IFhwUT0bQvWZqQSU/s1600/helperblogger.com-twitter.png'/></a> <a href='http://www.facebook.com/ID FACEBOOK ANDA' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZHXEBQTIsiPXZh8adJjjzDERgsSzGBZ0WRXRHSWZ_r1-qzv1bw3LmUCInbNSeTiKgZi5GVO4egDyLfNbMROJUP8AvisUta2KYnEEl19_-y7_FZHD_S62SS2PdB2zS_nrh1sOi_030pAL/s1600/helperblogger.com-fb.png'/></a> <a href='https://plus.google.com/ID GOOGLE PLUS ANDA' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KVVbkfNhqEx0NWrTqqW6ezJmnKDoSkhubdUD78YT2DS8sh6zavK_EsKxzfZHjNFJWj9UyN9dhtl__aAgDk9HnP_4h5jGeng_5Y_0Wsy2l9VaYDcWtlzhnYZ7XSRyQ2-tqV0EQ-KjzUFa/s1600/helperblogger.com-gplus.png'/></a> </td> </tr> </tbody> </table> <div align='right'> <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://impoint.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span> </div> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FID FACEBOOK ANDA&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true"> </iframe> <a class='twitter-follow-button' href='http://twitter.com/ID TWITTER ANDA' rel='nofollow'></a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div> </div> </center> </b:if>

Gantilah kode yang sudah saya tandai dengan ID anda sendiri. Jika sudah selesai Simpan Template Anda. itulah tadi Cara Menambahkan Email Subscription Widget di Blog dengan Mudah dan Simple.




Sumber

Cara Menampilkan Widget Hanya di Homepage / Posting

Saat mengatur beberapa widget agar lebih rapih dan teratur sering sekali kita lakukan. Halaman Homepage dan Posting adalah dua buah tempat untuk menampilkan dan menyembunyikan salah satu widget yang dianggap terlalu banyak dan membuat sulit untuk dilihat. Lalu, cara yang paling baik untuk melakukan design terhadap widget atau gadget pada blog kita adalah dengan cara widget tersebut kita tampilkan hanya pada suatu halaman tertentu.

Untuk menampilkan dan menyembunyikan beberapa widget caranya cukup mudah. Jadi, ada beberapa widget yang kita tampilkan hanya pada halaman posting tetapi tidak ingin terlihat pada halaman Home. Berikut panduan cara merubahnya :

1. Carilah widget apa yang ingin kita sembunyikan. Elemen Widget atau Gadget yang sudah ada pada template seperti Blog Archive, Popular Post dan lainnya mungkin untuk beberapa template tidak dapat disembunyikan.

2. Masuklah ke Template - Edit HTML - Ceklis Expand Widget Template.
3. Tekan CTRL + F, Untuk mencari nama widget tersebut.
4. Ketikkan nama widget yang ingin kita sembunyikan, contoh : Buku Tamu. Atau bisa juga dengan mencari ID Widget tersebut. Contoh : HTML1, HTML12, dll.
5. Setelah berhasil ditemukan, amati script berikut ini :

<b:widget id='HTML11' locked='false' title='' type='HTML'><b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/></h2> </b:if> <div class='widget-content'> </data:content> </div> <b:include name='quickedit'/></b:includable></b:widget>

A. Untuk Menamilkan Widget hanya dihalaman utama / Homepage :
Tambahkan dan sisipkan kode HTML berikut pada script diatas :

<b:if cond='data:blog.url == data:blog.homepageUrl'> </b:if>

Contoh cara menyisipkannya adalah sebagai berikut :

<b:widget id='HTML11' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>

B. Untuk Menampilkan Widget atau Gadget hanya di halaman Posting Artikel :

<b:if cond='data:blog.pageType == "item"'> </b:if>

( Cara menyisipkannya sama seperti contoh diatas )

C. Untuk Menampilkan Widget hanya pada Halaman Tertentu ( Berdasarkan URL ) :

<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'> </b:if>

D. Cara Menampilkan Widget hanya pada halaman statis / Static Page  :

<b:if cond='data:blog.pageType != "static_page"'> </b:if>

Setelah tag HTML tadi ditambahkan, Save template Anda dan lihat hasilnya. Semoga dapat bermanfaat untuk para blogger semua. Semua Widget yang kita tambahkan dengan HTML/Javascript dapat senantiasa kita sembunyikan dan tampilkan pada halaman Utama. Terimakasih telah membaca artikel berjudul Cara Menampilkan Widget Hanya di Homepage / halaman Posting.

Sumber

Cara Membuat Popular Post Warna Warni Di Blogger

Kemarin ada yang bertanya tentang cara membuat popular post warna warni, sehingga akhirnya saya putuskan untuk menuliskan tutorial cara pasang widget popular post warna warni di blogger pada postingan kali ini.

Sebenarnya cara membuat popular post warna warni di blogger tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada template kita.

Untuk lebih jelasnya silakan ikuti tutorial berikut.

Cara Pasang Popular Post Warna Warni Di Blogger

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:

1. 1. Klik menu Tata Letak / Layout
2. 2. Klik Tambahkan Gadget / Add a Gdget
3. 3. Pilih Widget Popular Post / Entri Populer

Cara Setting Widget Popular Post :

• 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

Sampai tahap ini widget artikel populer sudah bisa dilihat pada blog kita, namun artikel populer nya belum warna warni, agar popular post menjadi warna warni silakan lanjutkan baca tutorial ini , he heeee.

Ada 2 cara, silakan pilih yang menurut kamu lebih mudah.

Cara Pertama

Karena kamu sudah berada pada bagian Tata Letak / Layout, maka kamu cukup klik tambah gadget lagi, dan pilih gadget HTML/JavaScript, setelah itu masukkan kode css berikut di dalamnya 

<style type='text/css'> /*----- POPULAR POST WARNA WARNI -----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}</style>

Selanjutnya simpan. 

Cara Kedua 

Klik menu Template (letak menunya di sebelah kiri) Di sana kamu akan bisa melihat tampilan blog kamu sekarang, nah di bawahnya ada tulisan Edit HTML, silakan klik tulisan Edit HTML tersebut, kemudian klik Lanjutkan. 
Cari kode ]]></b:skin> setelah itu pasang kode berikut di atasnya. Agar lebih mudah menemukan kode tersebut silakan baca Cara Mudah + Cepat Mencari Kode Html di Blogger

/*----- POPULAR POST WARNA WARNI -----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Simpan pengaturan template kamu. 

Nah itulah tutorial cara membuat / pasang widget popular post warna warni di blogger, semoga bermanfaat

Cara Mudah + Cepat Mencari Kode Html di Blogger

Hari ini saya akan menuliskan Bagaimana cara mudah dan cepat untuk mencari sebuah kode html di bagian Edit Html (dashboard Blogger) ketika kita hendak mengdit template blogger kita atau ingin menambahkan script/kode di template tersebut.

artikel ini saya tulis karena ada salah satu pengunjung blog ini yang bertanya:

gimana caranya agar kita mencari dengan cepat sbuah code di Edit HTML

Nah itu lah pertanyaan yang membuat saya merasa bahwa cara mudah dan cepat untuk mencari kode html ini perlu saya tulis.

Mencari sebuah kode html di di template blogger memang agak susah kalau kita tidak tahu cara mudahnya, kita harus merelakan sebagian waktu kita untuk memelototi kode-kode html blogger yang lumayan banyak tersebut.

Namun tahukah teman bahwa ternyata ada cara yang sangat mudah dan cepat untuk mencari sebuah kode html yang kita ingin cari itu. Misalnya kita ingin mencari kode <body> maka kita bisa dengan cepat dan mudah menemukan kode <body> hanya dengan beberapa kali klik saja.

Ok langsung saja. 

Cara Mudah dan Cepat Mencari Kode Html di Blogger
Tekan tombol Ctrl + F secara bersamaan, maka di bagian bawah layar komputer anda akan keluar seperti ini.

(Gambar ini di ambil menggunakan Mozilla Firefox) jika anda menggunakan browse lain mungkin ada perbedaan.

 jika sudah keluar maka silakan tulis kode yang ingin di temukan tersebut di kolom pencariannya.

Nah itulah cara mudah untuk menemukan sebuah kode html di blogger, selamat mencoba, semoga berhasil dan bermanfaat.




Sumber

Cara Membuat Kotak Search Box Beautifull Blogger

Mau Membuat Kotak Search Keren? Kotak Search Cantik dan Simple? Bagaimana cara membuat kotak search box css? Mau tau caranya? Panduan mengenai pemasangan search box ini semoga dapat membantu Anda yang belum memiliki elemen kotak search di template blognya. Berikut ini adalah demo skin dengan CSS pembuatan kotak search cantik dan elegant ini.

Bagaimana bagus tidak? Silahkan Anda cari di blog tetangga sebelah kalau ada yang seperti ini. hahaha^^. Kebanyakan saya membuat artikel tidak pernah copy paste, paling hanya sekedar mengamati, mempelajari, dan memodifikasi itupun kalau ide dalam otak saya sedang tidak bersemangat. Kalau sedang fresh saya akan selalu memberikan kualitas artikel yang terbaik dan beragam bagi pengunjung semua.

Kembali lagi ke topik awal yaitu Cara Membuat Kotak Search Box Beautifull ini. Mengenai pembuatannya di blogger sangatlah mudah, hanya dengan memanfaatkan keragaman dan design CSS serta sedikit tambahan elemen HTML, Kotak Search Box ini dapat dipasang dengan mudah.

Langsung ke tahap pemasangan sekarang juga. As previous search boxes you can also add this search boxes in one step.See preview of search boxes below in search boxes,now lets see how to add them into blogger blog?

Follow and watch step by step making of Search Box :
1. Masuk ke Blogger.
2. Klik Tambah Widget / Add a Gadget.
3. Pilih HTML/Javascript.
4. Copy kode di bawah ini dan letakkan disana.

Search Box Style Green

<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeagBhbFHIbrtBCfgjmnE1v1TWwdNNiUsUqinHrjzCY3Ci4t0hAolHAFXQloO1nMxoHwErjqaoPJfFAxlVS0M_LiviAKkVJkkFRbME_JxtMuOYkdnzJbk6RyUYgDkXcBDt5Rd7NxBDG20/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Untuk Cara Pemasangan Search Box Warna Lain, ganti kode berwarna merah kode diatas dengan url gambar di bawah ini :

- Style Red ( Merah )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-x5PY2ggJh-p6Vr9Xi3p98UdKEq2045WhTWbMIfTJeS3LGecnKxnY4SqwWa7zlXjsJgTULgVU0_Zaq9hVfzXCbLa-S2sSA1XAYgDiOwWDShQbwJ5wJZ4QSXUbdTyLFU8wJBb8vB3h80T/s1600/impoint.blogspot.com-red.png

- Style Blue ( Biru )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4PPPG_5T6bw1lG-Zu3CSyKRPezNfQEFGFFy2OPFiAD4S5ssUwi9Hi_NlTpjwdzfqsI7pJvUSEqfjzrO8XIQnZvDWmeP7ymsj96HhKUdKTqIUvnBFh4hc_vaEjHFlu6KoybyTN8xBVQVA/s1600/impoint.blogspot.com-blue.png

-Style Orange

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglMqBDLmLq8AK5TbdMgzY1yTgueqONXP9_UM60fmV7OqSJs49r46fbeF6mcggmS9H7eSuxRVOieT-G9QUpngpUxwhl-ajgR49sGktWnJRXdM9zkTMhJSNVgmz4FPfNZ9XS4VGnVA-j3dcA/s1600/impoint.blogspot.com-orange.png

Setelah selesai, Klik Save.
Itulah tadi panduan mengenai Cara Membuat Kotak Search Box Cantik di Blogger. Oke, terimakasih sampai jumpa di kesempatan tutorial blogger berikutnya hanya di Media Blogger. 




Sumber