Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Cara Menghilangkan Tampilan Judul Widget Blog

on Rabu, 16 Oktober 2013

Menyembunyikan Tampilan Judul Widget Blog

Cara Menghilangkan Tampilan Judul Widget Blog - Judul pada sebuah widget sangat berguna untuk memperjelas isi atau kegunaan sebuah widget. Juga bermanfaat untuk menarik perhatian pengunjung pada sebuah widget. Contohnya pada widget yang berisi cuplikan mengenai kita sebagai penulis Blog, kita beri judul "About The Author" sehingga pengunjung mengerti bahwa widget tersebut berisi cuplikan mengenai kita sebagai penulis Blog. Atau pada widget Like Box Facebook, kita memberikan judul "Like Ya Sobat" sehingga pengunjung lebih tertarik untuk menjadi fans pada page Blog di Facebook milik kita.

Namun ada kalanya kita juga ingin memasang widget dengan tidak memberikan judul pada widget tersebut. Alasanya, entah karena sebuah widget sudah sangat jelas isi dan kegunaanya meski tidak diberi judul. Atau jika diberi judul, tampilan widget malah kurang baik. Atau alasan lain seperti pada sebuah iklan PPC tidak diberi judul agar pengunjung tidak menyadari keberadaan iklan PPC tersebut. Hal ini mudah saja diatasi, kita hanya perlu untuk tidak memasukan data atau tulisan pada form judul widget. Maka sebuah widget akan tampil tanpa disertai judul.

Judul Widget yang tidak diperlukan

Namun saya rasa banyak sekali kendala ketika kita memasang widget tanpa judul. Ketika kita memasang widget tanpa judul dalam jumlah yang agak banyak, maka kita akan sulit membedakan widget-widget tersebut saat melakukan pengeditan pada halaman Tata Letak, Blogger.

Widget-widget tanpa judul

Atau memang terdapat beberapa widget yang mengharuskan kita untuk memberikan judul, dengan kata lain kita tidak dapat memasang widget tanpa memberikan judul.

Judul widget harus diisi

Oleh karena itu saya akan bagikan cara lain untuk mengatasi masalah ini. Kita dapat memberikan judul pada sebuah widget tanpa menampilkan judul widget tersebut pada halaman Blog dengan cara menghilangkan atau menyembunyikan tampilan judul widget tersebut. Saya akan berikan 2 cara yaitu menghilangkan tampilan judul widget atau menyembunyikan tampilan judul widget. Silakan sobat pilih salah satu di antara 2 cara tersebut. Simak langkah-langkahnya:

1. Login ke akun Blogger.
2. Masuk ke bagian Tata Letak.
3. Sentuhkan kursor pada tulisan edit pada widget yang ingin sobat hilangkan judulnya. Hal ini dilakukan karena pertama kita harus mengetahui widget ID yang akan kita hilangkan judulnya.

Mengetahui widget ID
Dengan ini kita telah mengetahui widget ID sebuah widget yaitu "HTML4". Silakan sobat perhatikan pada bagian sudut kiri bawah monitor sobat, di situ salah satu tulisanya menampilkan widget ID.

4. Selanjutnya kita masuk ke bagian Template dan klik Edit HTML.
  • Menghilangkan Tampilan Judul Widget.
5. Dengan menggunakan tombol ctrl+F, cari ID widget yang telah sobat ketahui pada langkah 3. Jika kode-kode elemen widget belum teruraikan, klik pada bagian "titik-titik" diantara kode <b:widget> dan </b:widget>, serta bagian "titik-titik" diantara kode <b:includable> dan </b:includable>.

Menguraikan elemen widget

Maka akan muncul kode-kode seperti berikut tepat di bawahnya.

          <b:widget id='HTML4' locked='false' title='Judul Widget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>

6. Hapuslah kode bercetak tebal dan berwarna merah seperti kode yang telah saya tandai di atas.
7. Klik Simpan Template, dan silakan lihat hasilnya.
Dengan ini kita telah menghilangkan tampilan judul widget.
  • Menyembunyikan Tampilan Judul Widget.
5. Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin>.

#HTML4 .title, #HTML6 .title, #HTML9 .title {display:none}

6. Ubahlah kode bercetak tebal dan berwarna merah dengan widget ID-widget ID yang ingin sobat sembunyikan judulnya. Sobat bisa menambah atau mengurangi jumlah widget yang ingin disembunyikan judulnya dengan menambah atau mengurangi kode #WidgetID .title .
7. Klik Simpan Template, dan silakan lihat hasilnya.
Dengan ini kita telah menyembunyikan tampilan judul widget.

Nah, dengan Menghilangkan atau Menyembunyikan Tampilan Judul Widget yang kita rasa tidak perlu ditampilkan, maka tampilan Blog kita akan terlihat lebih baik dan rapih.

Judul widget telah dihilangkan atau disembunyikan

Selain telah berhasil Menghilangkan atau Menyembunyikan Judul Widget dengan hasil tampilan yang baik, kita juga tidak akan bingung membedakan widget-widget saat melakukan pengeditan pada halaman Tata Letak Blogger, karena pada halaman tersebut judul-judul widget tidak hilang.

widget dengan judul

Sampai disitu tulisan yang dapat saya sharing kepada sahabat pembaca yang paling aku sayang. Mudah-mudahan di ulasan ini anda mengerti dengan apa yang saya jelaskan. Kalau ada waktu yang luang jangan lupa untuk membagikannya ke Media Sosial. Kalau mau di Copas silahkan, tapi dengan menyertakan link Sumbernya. Sampai ketemu di lain waktu.

Cara Membuat Widget About The Author Box Untuk Blog

on Sabtu, 12 Oktober 2013

Cara Membuat Widget About The Author Box Untuk Blog
Author dalam Bahasa Indonesia berarti penulis. Jadi dalam dunia Blogger author adalah penulis artikel pada sebuah Blog. Dalam kegiatan Blogging, sebaiknya kita jangan merahasiakan identitas kita pada para pembaca. Perkenalkanlah diri kita sebagai penulis artikel pada sebuah Blog kepada para pembaca, agar terjadi hubungan atau komunikasi yang baik antara kita sebagai penulis dan pembaca. Salah satunya dengan memasang widget Author Box yang menjelaskan About The Author.
Sebenarnya sudah disediakan widget bawaan dari Blogspot yang berfungsi untuk memperkenalkan diri kita sebagai penulis, yaitu Widget Mengenai Saya dari Google Plus. Namun karena tampilanya yang mengacu pada tampilan Google Plus, kadang-kadang menjadi tidak cocok dengan tampilan Blog kita. Oleh karena itu, maka banyak Blogger yang membuat widget Author Box-nya sendiri sehingga tampilanya cocok dengan tampilan Blog. Dan kali ini saya akan bagikan salah satu karya seorang Blogger (tidak tahu siapa) dalam tampilan widget Author Box yang dapat sobat pakai dan bisa diedit ulang. Tampilanya seperti berikut:

Widget About The Author Box

Perhatikan tampilan widget Author Box di atas. Warna Background pada widget akan otomatis mengikuti warna kolom widget pada Blog sobat. Jadi kemungkinan widget ini akan cocok untuk dipasang di Blog mana pun. Untuk tampilan foto profil, akan bergerak sedikit berputar ke arah kiri ketika disentuh kursor. Di sampingnya terdapat sedikit kata-kata perkenalan dan diikuti dengan tulisan "read more". Tulisan read more ini bisa sobat masukan link. Saya sarankan sobat mempunyai halaman About Me pada Blog sobat. Jadi tulisan read more ini dapat sobat masukan URL halaman About Me yang sobat miliki. Selain itu di bagian bawahnya terdapat icon-icon Sosial Media diantaranya Feed Burner, Google Plus, Facebook dan Twitter yang dapat sobat masukan link ke halaman Sosial Media (milik sobat) tersebut. Icon-icon Sosial Media ini berwarna Abu-abu, dan akan bergerak dan berubah warna ketika disentuh kursor.

OK jika sobat tertarik untuk memasang widget About The Author Box ini, silakan ikuti langkah-langkahnya berikut.
1. Login ke akun Blogger sobat.
2. Pada halaman dashboard, masuklah lah ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.
4. Pilih HTML/Javascript, dan masukan kode berikut.

<style> #profile{
border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height: 190px;width: 80px;
}
#profile:hover {
border:2px solid #ccc;cursor:pointer;text-align:justify;
}
.opacity  {
opacity: 0.5;margin-left: 50px;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img class="opacity" id="profile" src="http://i1332.photobucket.com/albums/w606/RegyBrader/My%20Face/IMG-20130813-00057_zpsff54e01d.jpg" align="left"/>
<div style='text-align:justify'>KATA-KATA PERKENALAN<a style="color:#888;" href="http://regibrader-free.blogspot.com/p/aboout-me_28.html" rel='nofollow' target='_blank'>Read More..</a></div>
<style>
.touchme a {
display:block;height:50px;width:45px;padding:0 4px;margin-top:10px;
float:left;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEOR2HTyZN8tr5AMXupPxl00bzG9p8VSpsfIyX05Oa4C1v5GSjee6jOpR2Tum5fnGoylGTZmHwHRBpOHjJVhRhrDA3RxA9tCQUsUrftuiWChp_La2igQ049oBrCKDmrpkz_P-08mOnpQ/s1600/Sharing+Touch+Me.png) no-repeat;-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;-o-transition: ease-in 0.2s all;-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/Regibrader-blog" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/116159611196713950391/" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/mulx.co" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/Regy_Brader" rel='external nofollow' target='_blank' ></a>
</div>

Keterangan:
-Kode berwarna biru adalah ukuran tampilan foto profil.
-Kode berwarna merah adalah URL Foto Profil.
-Kode berwarna hijau adalah kata-kata perkenalan.
-Kode berwarna oranye adalah URL halaman About Me.
-Kode berlatar biru adalah URL RSS Feedburner. Jika belum punya, silakan kunjungi artikel saya tentang Cara Mendaftarkan Website/Blog di Google Feedbuner.
-Kode berlatar merah adalah URL ID akun Google Plus.
-Kode berlatar hijau adalah URL ID akun Facebook.
-Kode berlatar oranye adalah URL ID Twitter.

Sobat bisa mengedit-edit ulang tampilan widget Author Box ini, silakan berkarya.

5. Klik Simpan jika telah selesai, dan silakan lihat hasilnya.

Sekian posting untuk kali ini, semoga sobat sekalian menyukai widget yang saya bagikan ini.

Cara Menghilangkan Icon Quick Edit / Obeng dan Tang di Blog

on Kamis, 10 Oktober 2013

Cara Menghilangkan Icon Quick Edit / Obeng dan Tang di Blog
Pada beberapa Blog terdapat icon quick edit atau orang-orang menyebutnya icon obeng dan tang. Apalagi Blog yang menggunakan template bawaan dari Blogspot, icon tersebut pasti muncul pada halaman Blog-nya. Tepatnya icon ini terdapat pada bagian bawah kiri sebuah kolom widget. Sesuai dengan namanya yaitu quick edit, fungsi icon ini adalah untuk pengeditan cepat suatu widget tanpa harus masuk ke halaman Blogger dahulu. Pertanyaanya adalah, apakah sobat membutuhkan icon ini?
Jika dilihat dari fungsinya, mungkin sebagian orang merasa terbantu dengan adanya icon ini. Tapi kalau menurut saya, icon ini tidak terlalu diperlukan. Mengedit widget dengan masuk ke halaman Blogger dahulu, apa susahnya sih? Kalau dilihat dari tampilan, bisa saja icon ini malah memperburuk tampilan. Walaupun memang icon ini hanya tampil jika Admin sendiri yang membuka halaman Blog, alias jika orang lain yang membuka halaman Blog, maka icon ini tidak muncul. Namun tetap saja bagi yang menganggap icon ini mengganggu, pemilik Blog ingin menghilangkan icon ini untuk membuat Blog-nya memiliki tampilan yang baik.
Itu menurut saya, tidak apa-apa ya. Kan semua orang bebas berpendapat.
Berikut penampakan dari icon quick edit.

Icon Quick Edit / Obeng dan Tang di Blog

Nah bagaimana menurut sobat? Apakah suka dengan adanya icon quick edit ini atau tidak? Kini terserah sobat apakah akan tetap memasang icon ini atau tidak. Bagi sobat yang berkeinginan untuk Menghilangkan Icon Quick Edit / Obeng dan Tang ini, sobat bisa menghilangkanya dengan beberapa langkah yang sangat mudah berikut:

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit HTML.
3. Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin>.

.quickedit{
display:none;
}

4. Klik Simpan Template.

Selesai. Dengan beberapa langkah mudah tersebut sobat sudah berhasil Menghilangkan Icon Quick Edit / Obeng dan Tang di Blog. Dan kali ini, siapa pun yang membuka halaman Blog sobat, icon tersebut pun pastinya tidak akan muncul lagi.

Menghilangkan Icon Quick Edit / Obeng dan Tang di Blog

Cara Menampilkan Widget Google Plus yang Tidak Muncul

on Selasa, 08 Oktober 2013

Widget Google Plus yang Tidak Muncul
Beberapa hari yang lalu saya menemukan sebuah masalah pada Blog milik salah satu teman saya yaitu Ari Yuwara. Pada Blog tersebut Widget Google Plus tidak dapat ditampilkan. Tidak hanya satu buah widget saja, pokoknya beberapa widget yang berasal dari Google Plus tidak dapat ditampilkan. Seperti widget Google Plus Follower, Profil Google Plus (Mengenai Saya/ About Me), sampai Tombol Rekomendasi Google Plus One. Jika ada widget lain dari Google Plus yang dipasang, saya tidak tahu apakah tidak akan tampil juga atau dapat ditampilkan. Yang jelas saya tertarik untuk mengatasi masalah ini, lumayan lah untuk menambah ilmu, hehe.
Coba sobat perhatikan screenshot di bawah ini. Untuk widget Google Plus Follower dan Tombol Rekomendasi Google Plus One, widget ini benar-benar tidak tampil sama sekali. Hanya terlihat sebagai kolom widget yang tidak berisi. Sedangakan pada bagian nomer 2, widget Profil Google Plus masih dapat ditampilkan, namun yang tidak dapat ditampilkan adalah Tombol Follow-nya.

Widget Google Plus yang Tidak Muncul

Saya pun Browsing untuk dapat mengatasi masalah ini. Akhirnya saya menemukan Blog milik teman Blogger lain yang salah satu artikelnya menerangkan tentang cara menampilkan widget Google Plus Follower yang tidak muncul. Dari penjelasanya ternyata dalam mengatasi masalah ini ia menemukan script Google Plus Follower milik teman Blogger lain yang berbeda dengan script Google Plus Follower miliknya. Ia pun coba menerapkan script tersebut pada script widget Google Plus Follower miliknya. Dan hasilnya OK.
Akhirnya saya juga tertarik untuk mengatasi masalah yang saya temui ini, dengan menerapkan cara yang ia jelaskan sebagai berikut:

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak Terlebih dahulu.
3. Sentuhkan kursor pada tulisan Edit di posisi widget Google Plus Follower berada.

Cara Menampilkan Widget Google Plus yang Tidak Muncul
Sobat telah mengetahui ID widget Google Plus Follower yaitu "PlusFollowers1".

4. Sekarang masuk ke bagian Template dan klik Edit HTML.
5. Dengan menggunakan tombol ctrl+F, cari widget ID yang telah sobat ketahui (PlusFollowers1).
6. Setelah ditemukan dan script elemen widget belum ter-expand, maka klik bagian "titik-titik" diantara kode <b:widget> dan </b:widget>

Cara Menampilkan Widget Google Plus yang Tidak Muncul

dan klik bagian "titik-titik" diantara kode <b:includable> dan </b:includable>.

Cara Menampilkan Widget Google Plus yang Tidak Muncul

Sehingga kode elemen widget akan ditampilkan secara terurai seperti berikut.

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:profileUrl != &quot;&quot;'>
<div class='g-plus' data-action='followers' data-source='blogger:blog:followers' expr:data-height='data:height' expr:data-href='data:profileUrl' expr:data-theme='data:theme' expr:data-width='data:width'/>
<script type='text/javascript'>
        window.___gcfg = {&#39;lang&#39;: &#39;<data:language/>&#39;};
</script>

</b:if>
</div>
</b:includable>
</b:widget>

7. Ubah kode berlatar kuning dengan kode berikut.

<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>

8. Klik Simpan Template.

Ternyata hasilnya mengesankan. Tidak hanya widget Google Plus Follower yang dapat diatasi. Melainkan juga Tombol Rekomendasi Google Plus One, dan Tombol Follow pada widget Profil Google Plus kini telah dapat ditampilkan.

Widget Google Plus telah dapat ditampilkan

Saya tidak paham penyebab dari permasalahan ini. Juga tidak paham mengapa satu cara ini bisa memperbaiki beberapa widget. Apakah dari faktor pengkodean, atau ada faktor lain. Yang penting untuk sekarang masalah yang saya temukan ini dapat teratasi.
Sekian posting saya untuk kali ini. Semoga bermanfaat bagi sobat Blogger yang mengalami masalah yang sama. Terima kasih...

Cara Memasang Iklan PPC Menyatu di Tengah Posting Blog

on Kamis, 03 Oktober 2013

Iklan PPC Menyatu di Tengah Posting Blog
Sobat mungkin tahu dengan iklan PPC ini. Sebuah sistem periklanan yang membayar publisher setiap terjadi klik (Pay Per Click) ini menjadi salah satu andalan para Blogger untuk dapat memperoleh keuntungan berupa uang dari kegiatan Blogging. Dalam menampilkan (publishing) iklan PPC ini banyak cara para Blogger agar dapat menarik banyak perhatian pengunjung untuk melakukan klik. Ada yang dengan cara sehat dalam menampilkan iklan PPC ini, ada juga yang "tidak sehat". Namun ada sebagian atau kebanyakan iklan PPC yang pengurusnya akan memberikan banned kepada publisher yang menampilkan iklan PPC dengan cara yang tidak sehat ini. Oleh karena itu, dalam menampilkan iklan PPC lebih baik dengan cara yang sehat namun dapat menarik banyak perhatian pengunjung.
Contohnya kita bisa memasang iklan PPC dengan mengusahakan agar iklan ini terlihat seperti bagian dari konten di Blog. Logikanya, kan iklan PPC selalu menampilkan gambar atau teks yang membuat penasaran. Dengan iklan PPC ini yang terlihat seperti bagian dari konten Blog dan tidak terlihat seperti iklan, maka lebih menarik pengunjung untuk melakukan klik tanpa pengunjung sadari bahwa itu adalah sebuah iklan PPC.
Salah satu cara memasang iklan PPC agar terlihat seperti konten pada Blog adalah dengan meletakanya menyatu di tengah posting Blog. Saya sarankan dengan posisi tersebut kita memasang iklan PPC yang berbentuk iklan teks agar semakin mirip seperti bagian konten pada Blog.
Untuk cara penerapanya sendiri adalah sebagai berikut.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit HTML.
3. Cari kode <data:post.body/>. Jika terdapat 2 kode seperti demikian, maka pilih yang kedua. Jika terdapat lebih dari 2 kode tersebut, coba pilih yang terakhir. Intinya sobat perlu memahami manakah kode tersebut yang menjadi elemen posting Blog.
4. Setelah itu, ubahlah kode tersebut dengan kode berikut.

<div expr:id='"iklan1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">

<!-- Kode Iklan PPC Sobat Letakkan Disini! -->

</div>
<div expr:id='"iklan2" + data:post.id'>

<data:post.body/>

</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

5. Ubah kode berwarna merah dengan script iklan sobat.
6. Klik Simpan Template.

Maka hasilnya kurang lebih akan seperti ini.

Iklan PPC Menyatu di Tengah Posting Blog

Iklan PPC telah tersimpan di tengah posting Blog. Namun coba lihat di bawah iklan PPC. Kalau pada blog saya, jika tepat di bawah iklan PPC terdapat script atau gambar, maka script/gambar itu tidak dapat ditampilkan. Malah hanya menghasilkan script yang tidak lengkap. Jika hal ini terjadi pada Blog sobat, maka dapat diambil kesimpulan bahwa penempatan iklan PPC di tengah posting Blog dengan cara yang saya berikan ini lebih cocok pada sebuah Blog yang hanya mempostingkan artikel yang hanya memuat teks, tidak beserta script atau gambar.

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

on Jumat, 27 September 2013

Cara Membuat 2 Kolom Widget di Bawah Posting Blog
Kebutuhan kolom atau lapak widget dalam menunjang tampilan Blog setiap Blogger berbeda-beda. Ada yang butuh dengan kolom widget di bawah header, ada juga yang tidak memerlukanya. Ada yang yang memerlukan kolom widget di bagian bawah Blog, ada juga yang tidak memerlukanya. Perbedaan kebutuhan kolom widget juga terdapat pada jumlahnya. Ada yang butuh 1 kolom, 2 kolom, atau pun 3 kolom. Memang hal seperti ini mudah diatasi jika menggunakan widget bawaan blogspot, karena kita dapat menambah atau menambah jumlah kolom widget yang diperlukan.
Tapi bagaimana dengan kolom widget pada template yang bukan bawaan blogspot? Bagaimana jika pada widget tersebut tidak menyediakan kolom atau jumlah kolom widget yang sobat butuhkan. Sebenarnya pasti ada cara untuk menambah kolom widget tersebut, tentunya dengan sedikit Edit HTML. Para Blogger yang membahas Tutorial Blogging pun sudah banyak yang mengulasnya.

Contohnya saya pada kesempatan kali ini akan membahas kolom widget yang berada di bawah posting Blog. Biasanya kolom widget pada posisi ini hanya tersedia 1 kolom saja, bagaimana dengan milik sobat? Tidak jarang para Blogger yang membutuhkan 2 kolom widget pada posisi ini. Maka dari itu saya akan memberi salah satu cara Membuat 2 Kolom Widget di Bawah Posting Blog. Berikut langkah-langkahnya:

1. Login ke akun Blogger sobat.
2. Pada halaman dashboard, sobat masuk ke halaman Template dan klik Edit HTML.
3. Cari kode seperti berikut, fokuskan untuk mencari kode #main-wrapper, atau #main-wpr. Perlu diketahui kode elemen pada setiap template berbeda-beda.

/* -- Main -- */
a img{border-width:0}
.post-body img{border:0px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:650px;margin:0;padding:0}
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 630px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px}
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
/* -- End Main -- */

4. Letakan kode berikut tepat di bawah kode di atas yang berwarna merah.

#main {width:650px;float:center;}
#main-left{border:1px solid #000000;padding:10px;width: 300px;float:left;}
#main-right{border:1px solid #000000;padding:10px;width: 300px;float:right;}

Hasilnya kira-kira akan menjadi seperti ini.

#main-wrapper{float:left;width:650px;margin:0;padding:0}
#main {width650px;float:center;}
#main-left{border:1px solid #000000;padding:10px;width: 300px;float:left;}
#main-right{border:1px solid #000000;padding:10px;width: 300px;float:right;}
Sobat ubah kode 650px dengan ukuran lebar Main bar Blog sobat.
Dan ubah kode 300px pada #main-left dengan ukuran lebar kolom widget kiri yang sobat inginkan, kode 300px pada #main-right dengan ukuran lebar kolom widget kanan yang sobat inginkan.
Sobat juga bisa mengubah kode 1px dengan lebar border yang sobat inginkan, dan kode #000000 dengan warna border yang sobat inginkan.

5. Kemudian cari kode seperti berikut, fokuskan mencari kode <div id='main-wrapper'> atau <div id='main-wpr'>. Perlu diketahui bahwa kode elemen setiap Template berbeda-beda.

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

6. Tambahkan kode berwarna biru berikut pada kode di atas tadi sehingga hasilnya menjadi seperti berikut.

<div id='main-wrapper'>
<div id='main'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 300px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 300px; float: right;'>
</b:section>
</div>
</div>
Ubah ukuran width sesuai dengan lebar kolom widget kanan/kiri yang sebelumnya telah sobat tentukan.

7. Klik Simpan Template, dan silakan lihat hasilnya.

Jika berhasil, maka akan muncul 2 Kolom Widget di Bawah Posting Blog.

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Cara Mengetahui Kode HTML Warna dengan Plastiliq PixelPicker

on Selasa, 24 September 2013

Plastiliq PixelPicker
Kali ini saya akan membagikan sebuah aplikasi sekaligus sebuah trik dalam membantu kegiatan Blogging. Aplikasi yang akan saya bagikan kali ini berfungsi untuk mengetahui kode warna sebuah objek yang berupa kode RGB, CMYK, HEX, HSL, HSV/HSB, ARGB, Decimal, dan lain-lain. Kode-kode tersebut saya tidak tahu fungsinya untuk apa, yang jelas selain untuk mengetahui kode warna yang sebelumnya telah disebutkan, aplikasi ini juga dapat mengetahui kode HTML warna sebuah objek sehingga akan membantu kita para Blogger dalam kegiatan Blogging.
Mungkin saja sobat Blogger pernah atau akan mengalami sebuah kejadian seperti ini. Ketika sobat berkunjung di Blog milik teman, sobat menemukan sebuah objek baik berupa gambar atau teks dengan warna yang sobat sukai. Lalu sobat sangat ingin menerapkan warna tersebut pada sebuah objek di Blog milik sobat. Tentunya sobat harus mengetahui dahulu kode HTML warna yang digunakan pada objek tersebut. Sebenarnya banyak situs yang menyajikan daftar kode HTML warna. Di sana sobat dapat memilih ratusan atau bahkan ribuan pilihan kode HTML warna. Dengan cara ini sobat bisa saja menemukan warna yang diinginkan, tapi tidak jarang juga yang mencari kode HTML warna dengan hasil yang sia-sia.

Nah, jika sobat ingin mencari kode HTML warna dengan hasil yang akurat, Plastiliq PixelPicker dapat menjadi salah satu solusinya. Aplikasi ini sangat ringan sehingga sobat tidak perlu khawatir dengan kinerja komputer sobat. Ketika sobat hendak mendownload Aplikasi ini, sobat akan melihat screenshot yang bisa menjadi panduan untuk sobat dalam menggunakan aplikasi ini.

Cara Mengetahui Kode Warna dengan Plastiliq PixelPicker

Cara Mengetahui Kode Warna dengan Plastiliq PixelPicker

Atau sobat bisa menyimak cara-cara penggunaanya dengan tutorial versi Brader Blog berikut ini.

Cara Mengetahui Kode HTML Warna dengan Plastiliq PixelPicker

Tentunya, setelah sobat mendownload dan menginstalkan Plastilliq PixelPicker ini di PC sobat, maka bukalah aplikasi tersebut.
1. Pada Magnifier area dalam Plastiliq PixelPicker, klik lalu drag and drop pada area yang terdapat objek yang ingin sobat ketahui kode HTML warnanya.
2. Setelah area yang sobat inginkan tampil pada Magnifier area, klik objek yang ingin sobat ketahui kode HTML warnanya. Pada bagian ini, Maginifier area dapat di-zoom agar kode HTML warna sebuah objek dapat diketahui dengan lebih akurat.
3. Perhatikan bagian color cell, apakah warna yang tampil adalah warna yang sobat maksud. Jika iya, kode HTML warna telah ditemukan karena kode HTML warna ditampilkan di samping color cell.
Kini sobat tinggal menerapkan kode HTML warna tersebut pada objek di Blog sobat.

Telah dijelaskan sebelumnya, aplikasi ini bukan hanya untuk mengetahui kode HTML warna saja. Silakan klik pilihan  dropdown di samping color cell, lalu akan tampil berbagai jenis kode warna dalam daftar dropdown, dan pilihlah jenis kode warna tersebut yang sobat inginkan.

Silakan bagi yang tertarik pada aplikasi ini, bisa download pada link berikut. Atau langsung saja kunjungi situs resminya http://plastiliq.com/pixel-picker

Download Plastiliq PixelPicker

Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

on Senin, 23 September 2013

Widget Show Hide di Sudut Kanan Bawah Blog
Kadang-kadang pada Blog yang kita miliki kita ingin memasang widget yang kita anggap penting dengan tampilan yang dapat menarik perhatian pengunjung. Tujuanya agar terjadi sebuah aktivitas pada widget tersebut, aktivitas apa pun itu. Contohnya, kita mempunyai halaman Blog kita di Facebook. Dan kita memasang widget like box fans page halaman tersebut pada Blog yang kita miliki. Tentunya ini dilakukan agar semakin banyak orang yang menyukai halaman Blog kita di Facebook. Untuk dapat menarik perhatian pengunjung Blog lebih banyak, tidak sedikit Blogger yang memasang widget like box facebook melayang, atau widget like facebook yang tiba-tiba muncul di depan layar (orang awam bilang).
Menurut saya widget seperti itu jelas mengganggu pemandangan pengunjung saat sedang membaca sebuah artikel. Apalagi jika widget tersebut muncul berkali-kali dan menghalangi artikel yang sedang dibaca oleh pengunjung. Jangan sampai membuat pengunjung kesal deh sobat, apalagi jika membuat pengunjung malah meninggalkan Blog yang sobat cintai. Saya sendiri pernah mendapat kritik dari pengunjung karena memasang widget melayang ini, "sangat mengganggu pemandangan saya", katanya.

Ada cara lain untuk menyajikan widget yang sobat anggap penting ini. Widget ini tentu terasa lebih nyaman bagi para pengunjung jika dibandingkan dengan widget melayang. Setidaknya tidak terlalu mengganggu pemandangan pengunjung karena widget ini terdapat di posisi sudut kanan bawah pada blog yang tentunya tidak akan menghalangi artikel. Selain itu widget ini hanya akan tampil ketika layar digulir ke bawah pada jarak tertentu, dan akan hilang kembali jika layar digulir ke atas atau jika pengunjung meng-klik tombol close pada widget. Karena saya orang yang masih awam, widget ini saya sebut Widget Show Hide di Sudut Kanan Bawah Blog, hehe. Perhatikan saja contoh tampilanya berikut ini.

Widget Show Hide di Sudut Kanan Bawah Blog

Nah, dengan menyimak sedikit penjelasan dan melihat screenshot di atas, apakah sobat tertarik untuk menerapkanya di blog sobat? Jika jawabanya iya, atau sobat sekedar ingin mencobanya, silakan ikuti langkah-langkahnya berikut ini.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya tetap akan berada di pojok kanan bawah Blog sobat.
4. Pilih mode HTML / Javascript.
5. Masukan kode di bawah ini.

<!--Slidbox -->
     <script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background: #ffffff repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

    <div style="width:300px; padding:10px; margin:0 auto; overflow:hidden;">

        <a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>

        <strong style="color:#808080;"><center>Pesan Pada Widget</center></strong>

<==Masukan script widget disini==>

        </div></div>
<!--Slidbox end -->

Ubah tulisan berwarna biru dengan pesan pada widget yang sobat inginkan. Contoh: "Follow dan Like Yah Sobat".
Masukan script widget yang sobat inginkan pada tulisan berwarna merah. Sobat bisa memasukan lebih dari satu widget. Namun jangan terlalu banyak yah sobat, menurut saya tampilanya kurang bagus. Masukan maksimal 2 script widget saja. Contohnya widget tombol follow twitter (dapatkan script-nya disini) dan widget like box facebook (dapatkan script-nya disini).

6. Setelah selesai menentukan tampilanya, silakan klik Simpan.

Sebenarnya script widget yang saya berikan diatas masih bisa sobat ubah tampilanya, contohnya pada kode berwarna oranye. Silakan saja modifikasi dengan kreasi sobat sendiri. Semoga pembahasan kali ini bermanfaat.

Cara Mengatur Panjang Cuplikan pada Widget Popular Posts

on Senin, 16 September 2013

Cara Mengatur Panjang Cuplikan pada Widget Popular Posts
Widget Popular Posts telah banyak kita jumpai dalam sebuah Blog. Widget ini bermanfaat dalam menampilkan artikel pada sebuah Blog yang paling banyak dibaca kepada pengunjung. Dengan banyak dibacanya sebuah artikel, maka kita bisa anggap artikel tersebut sedang tren dan banyak dibaca orang. Maka, dengan widget popular posts ini mungkin saja pengunjung dapat menemukan artikel yang kebetulan ia cari. Atau bahkan dapat menarik minat pengunjung untuk membaca artikel yang sedang populer pada sebuah Blog, karena penasaran dengan apa yang menyebabkan artikel tersebut banyak dibaca orang.
Blogspot telah menyediakan widget popular posts yang bisa kita tentukan pengaturanya. Kita bisa atur apakah akan menampilkan artikel yang paling banyak dibaca dalam 7 hari, paling banyak dibaca dalam 30 hari, atau paling banyak dibaca setiap saat. Kalau saya sendiri memilih tampilkan artikel yang paling banyak dibaca dalam 7 hari, agar artikel yang ditampilkan memungkinkan untuk berubah-ubah pada setiap minggunya. Sehingga pengunjung tidak akan merasa bosan dengan artikel yang ditampilkan pada widget Popular Posts.

Widget Popular Posts

Selain itu pada widget popular posts kita dapat mengatur jumlah entri yang ditampilkan, dan menambahkan thumbnail dan atau cuplikan. Thumbnail adalah gambar mini yang mewakili sebuah artikel, dan pada widget popular posts akan muncul jika memang terdapat gambar pada artikel tersebut. Sedangkan cuplikan adalah deskripsi singkat yang menjelaskan sebuah artikel. Nah, kali ini saya akan membahas salah satu permasalahan pada cuplikan popular posts ini, yaitu pada panjang atau jumlah huruf yang ditampilkan.

Jika kita memadukan antara thumbnail, cuplikan dan tentunya judul artikel pada widget popular posts, maka tampilanya akan begitu menarik, betul?
Perhatikan screenshot-nya berikut.

Widget Popular Posts

Memang kombinasinya bagus ya sob. Tapi apakah sobat memikirkan hal sama dengan saya? Kalau menurut saya cuplikan yang ditampilkan pada widget popular posts ini terlalu panjang. Panjang cuplikan yang melebihi tinggi thumbnail menyebabkan tampilan widget kurang rapi. Hingga saya ingin mengurangi panjang cuplikan yang ditampilkan. Sedangkan tidak ada tools untuk mengatur panjang cuplikan yang ditampilkan.

Tenang, ada cara lain untuk mengatur panjang cuplikan pada widget popular posts ini. Sobat punya keinginan seperti saya yaitu mengurangi panjang cuplikan, atau sobat malah ingin menambah panjang cuplikan ini? Bisa sekali, silakan simak cara-caranya.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit HTML.
3. Dengan tombol ctrl+F, silakan cari kode </body> dan masukan kode berikut di atas kode </body> tersebut.

<script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,50);
var j=txt.lastIndexOf(' ');
if(j>42)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
Ubah kode berwarna merah dengan jumlah huruf yang akan ditampilkan pada cuplikan widget popular posts.

4. Klik Simpan.

Silakan perhatikan contoh hasilnya pada gambar di bawah ini.

Widget Popular Posts

Panjang cuplikan semakin pendek, tidak memakan ruang yang banyak, dan terlihat semakin rapih.

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik

on Sabtu, 14 September 2013

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik
Beberapa waktu lalu saya sempat membagikan salah satu cara memodifikasi widget Label, tepatnya pada widget Label dengan tampilan Cloud yang kebetulan kali ini juga masih pada tampilan tersebut. Namun berbeda dengan yang dahulu yakni Label Cloud dengan ukuran Font yang berbeda, mungkin sekarang tampilanya akan lebih unik dan menarik lagi. Gambar di samping mungkin bisa menjadi gambaran hasil dari modifikasi widget Label yang sekarang akan saya bahas. Mau tahu bagaimana uniknya? Silakan simak lebih lanjut dan bila perlu coba pada Blog sobat.
Sedikit penjelasan tentang hasil dari modifikasi widget Label kali ini. Setiap nama label akan dilingkari dengan border berwarna. Dan ketika cursor disentuhkan pada salah satu nama label, maka warna border akan berubah serta nama dengan border akan berputar kurang lebih seperempat lingkaran.
Perhatikan screenchot hasil modifikasi-nya di bawah ini.

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik

Bagaimana? dengan sobat melihat screenshot diatas, apakah tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah berikut ini:

Pertama yang harus dilakukan adalah sobat memasang dulu widget Label pada Blog sobat, tentunya dengan tampilan cloud.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih Widget Label dan silakan sobat bisa atur sendiri tampilanya. Namun jangan lupa, sobat harus memilih tampilan cloud.

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik

5. Klik simpan, sobat telah berhasil memasang widget Label Cloud pada Blog sobat.
Kini sobat mulai untuk mengedit tampilanya agar lebih unik dan menarik.
6. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.


.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #ADFF2F;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;


Ubahlah kode berwarna merah dengan kode warna yang sobat inginkan. Kode ini merupakan warna awal border yang melingkari nama Label.
Ubahlah kode berwarna biru dengan kode warna yang sobat inginkan. Kode ini merupakan warna pada nama Label yang sedang disentuh kursor.

8. Klik Simpan Template, selesai.

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

on Senin, 09 September 2013

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda
Bagi seorang Blogger (khususnya pada Blogspot) yang sudah tidak pemula lagi, istilah label bukanlah hal yang asing. Mereka menerapkan Label ini pada Blog-nya untuk mengelompokan artikel berdasarkan jenisnya. Hal ini tentunya dilakukan untuk membantu pengunjung Blog agar lebih mudah dalam menjelajahi sebuah Blog. Namun bagaimanakah seorang Blogger menampilkan Label ini agar pengunjung dapat melihat kategori-kategori artikel pada Blog-nya?
Blogspot sudah menyediakan widget untuk Lebel dengan dua pilihan tampilan, yaitu tampilan Daftar dan tampilan Cloud. Nah, sekarang saya akan membahas widget Label dengan tampilan Cloud. Berbeda dengan tampilan daftar yang menampilkan daftar label secara vertikal, tampilan Cloud ini menampilkan widget label dengan terus menjejerkan nama-nama label seperti sebuah kalimat.
Ternyata widget Label Cloud ini dapat dimodifikasi agar tampilanya lebih menarik. Kali ini saya akan bagikan salah satu cara memodifikasinya yang akan menghasilkan tampilan widget Label Cloud dengan ukuran Font yang berbeda. Hasil modifikasi ini juga membuat, semakin banyak Label diisi artikel, maka nama Label akan ditampilkan dengan ukuran Font yang besar. Sedangkan sebaliknya, jika sebuah Label jarang diisi artikel maka nama Label akan ditampilkan dengan ukuran font yang kecil.

Bagaimana? Tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah membuatnya.
  • Memasang widget Label Cloud.
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan untuk dipasang widget Label Cloud.
4. Silakan pilih widget Label dan sobat tentukan tampilanya. Yang paling penting adalah sobat harus memilih opsi "Cloud".

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

5. Klik Simpan, dan widget Label Cloud pun telah terpasang di Blog sobat.
  • Memodifikasi widget Label Cloud.
6. Berikutnya adalah memodifikasi widget Label Cloud tersebut. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}
Re-Edit:
Ubahlah kode berwarna merah dan bercetak tebal miring, dengan kode HTML warna yang sobat inginkan.
Dengan kode di atas maka akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda dan warna-warni, seperti contoh berikut.

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

Jika sobat tidak menyukai tampilan yang warna-warni atau hanya ingin satu warna saja, silakan hapus kode yang berwarna merah (color:#XXXXXX;). Maka dengan script ini akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda saja.

Lalu font yang dihasilkan akan berwarna apa? Tentunya warna font ditentukan oleh setelan pada Template Blog yang sobat gunakan. Berikut contoh hasilnya.

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

8. Klik Simpan Template, dan silakan lihat hasilnya.

Hapus Otomatis Komentar dengan Link Hidup pada Blog

on Kamis, 05 September 2013

Hapus Otomatis Komentar dengan Link Hidup pada Blog
Para Blogger biasanya sangat senang untuk saling berkomentar pada blog milik teman sesama Blogger. Dengan saling berkomentar ini sebagian memiliki tujuan positif, salah satunya untuk memberi kritik dan saran kepada konten tertentu agar dapat menjadi lebih baik lagi. Atau untuk saling bertukar fikiran dan pendapat agar ditemukan hal-hal baru, dan lain-lain. Dengan berkomentar juga bermanfaat agar teman-teman Blogger lain mengetahui akan keberadaan kita serta sobat dapat memperkenalkan Blog yang sobat miliki kepada Blogger lain. Hebatnya lagi katanya sih dengan berkomentar akan meningkatkan Page Rank Blog yang kita miliki.
Namun ada sebagian Blogger yang memanfaatkan keuntungan berkomentar secara berlebihan menurut saya. Dalam berkomentar mereka menyertakan link hidup agar terdapat banyak link pada Blog lain yang mengarah kepada URL yang mereka inginkan. Hal ini menguntungkan si Pembuat komentar karena jelas akan banyak sekali celah pada Blog lain yang mengarahkan pengunjung pada Blog-nya atau URL yang mereka tentukan. Namun hati-hati, perilaku seperti ini juga ada kerugianya. Karena mereka berkomentar hanya untuk menaruh link, maka biasanya mereka memberikan banyak komentar dan semua komentar tersebut kelihatan hampir sama atau bahkan sama persis. Sehingga bang Google akan memberi cap kepada si pemberi komentar sebagai Spammers.
Kerugian juga akan dirasakan oleh pemilik Blog yang telah mendapat komentar dari si Spammers. Akan banyak kebocoran yang membawa pengunjung untuk meninggalkan Blog-nya dan mengarah ke Blog si Spammers melalui link hidup pada komentar. Lebih parahnya lagi jika si Spammers telah memberikan banyak komentar beserta link hidup dan tanpa disadari semua komentar tersebut terlihat sama atau berulang-ulang. Wah, bukan hanya si pemberi komentar yang dicap Spammers, bang Google juga akan menganggap Blog yang tidak bersalah ini juga Spammy.
Oh, merugikan sekali yah sobat. Jangan sampai deh hal ini terjadi pada Blog sobat. Apalagi kalau sobat malah menjadi si Spammers, sangat tidak baik.
Nah, jika Blog milik sobat memang sangat ramai dengan pengunjung hingga sobat tidak dapat mengontrol banyaknya komentar yang masuk, lebih baik Blog sobat dirancang untuk dapat menghapus otomatis komentar dengan link hidup pada blog sobat. Sehingga sobat tidak perlu khawatir dengan datangnya komentar yang menyertakan link hidup, karena akan langsung terhapus. Yang terhapus hanya bagian teks dari komentar yang disertai link hidup, jadi tidak keseluruhan komentar akan terhapus.

Tertarik untuk menerapkanya? Silakan ikuti langkah-langkahnya berikut ini.
1. Login ke akun Blogger sobat.
2. Masuk ke Bagian Template dan klik Edit HTML.
3. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut diatas kode ]]></b:skin>.

#comments p a {display: none !important; }

4. Dengan tombol ctrl+F carilah kode </head> dan letakan kode berikut di atas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery(&quot;#comments p&quot;).find(&quot;a&quot;).replaceWith(&quot;<span><i>(Bagian komentar yang ini menyertakan link hidup, maaf akan terhapus otomatis)</i></span>&quot;); }); </script>
Ubah tulisan berwarna biru dengan kata-kata apa saja yang sobat sukai.

5. Klik Simpan Template.

Selesai, dan ketika masuk sebuah komentar yang menyertakan link hidup, maka bagian link hidup dari komentar tersebut akan terhapus otomatis dan digantikan dengan kata-kata yang telah sobat tentukan pada script di atas.


Namun ingat, setelah Blog sobat telah dirancang untuk menghapus otomatis komentar dengan link hidup, jangan menghapus lagi rancangan tersebut. Karena hanya berfungsi untuk menggantikan link hidup pada komentar dengan kata-kata yang sobat tentukan. Jadi jika sobat mengapus rancangan ini, maka link hidup pada komentar akan muncul kembali.

Cara Membuat Link pada Judul Postingan Blog

on Rabu, 04 September 2013

Cara Membuat Link pada Judul Postingan Blog
Template yang digunakan para Blogger berbeda-beda, perbedaan tersebut salah satunya akan terlihat pada Judul Postingan. Mungkin dalam hal tampilan sudah jelas ukuran, jenis, dan warna font pasti berbeda-beda. Namun ada lagi nih perbedaanya, yaitu terdapat judul posting yang berupa link hidup dan ada juga judul posting yang bukan link. Judul posting Blog yang disertai link akan bermanfaat untuk menambah internal link pada Blog. Bagaimana nih dengan judul posting pada Blog milik sobat?
Apakah sobat akan menggunakan judul posting blog yang disertai link hidup, atau judul posting blog yang bukan link? Terserah sobat suka yang mana...
Untuk sobat yang menggunakan Template dengan judul blog yang bukan link, namun ingin agar judul posting tersebut berubah menjadi berupa link hidup, sobat tidak perlu mengganti template. Yang perlu sobat lakukan adalah menyimak artikel ini dan mempraktikanya pada Blog milik sobat. Karena kode HTML yang terdapat pada setiap Template Blog berbeda-beda, bisa jadi cara yang akan saya berikan mungkin memuat kode HTML yang berbeda dengan Template milik sobat. Jadi sobat harus menyimak artikel ini dan mempraktikanya pada Blog sobat dengan teliti dan sabar.

Cara Membuat Link pada Judul Postingan Blog:
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit HTML.
3. Carilah kode yang mirip dengan kode di bawah ini.

<h2 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h2>

Jika sobat tidak menemukan kode yang mirip dengan kode di atas, maka kemungkinan kode tersebut tidak menggunakan kode h2, melainkan kode h3. Maka carilah kode yang mirip dengan kode di atas, yang disertai kode h3.

4. Jika kode tersebut telah ditemukan, maka hapuslah kode tersebut dan ubah dengan kode di bawah ini.
Namun amankan dahulu kode yang akan sobat hapus, agar bila terjadi kegagalan sobat bisa memasang kembali kode yang telah sobat hapus.

<h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>

Jika pada kode sebelumnya menggunakan kode h3, maka pada kode yang akan digunakan sekarang sobat ubah kode h2 menjadi h3.

5. Klik Simpan Template, dan lihat hasilnya.

Maka apabila berhasil, judul posting pada Blog sobat akan bisa diklik karena sudah berupa link. Ketika cursor disentuhkan pada judul posting, maka akan terlihat sebuah URL di bagian bawah kiri halaman browser (mozila firefox) sebagai tanda bahwa judul posting tersebut adalah berupa link hidup.

Cara Membuat Link pada Judul Postingan Blog

Cara Melindungi Konten Blog dengan DMCA Protection

on Selasa, 03 September 2013

Cara Melindungi Konten Blog dengan DMCA Protection
Hari ini saya menemukan sebuah Blog yang telah mengcopy paste konten Brader Blog dengan tidak menyertakan link sumbernya. Setelah ditelusuri lebih jauh, ternyata tidak sedikit konten pada Blog saya ini yang telah dicuri. Hal tersebut jelas membuat saya kesal sekali, satu posting yang saya buat dalam waktu berjam-jam bahkan berhari-hari dapat beralih tangan hanya dalam waktu beberapa menit bahkan detik. Selain kesal, saya juga merasa sedih karena ada Blogger Indonesia khususnya yang tidak mau kreatif dalam kegiatan Blogging-nya.
Saya pun ingin mengatasi hal tersebut agar copy paste konten pada Blog saya tanpa menyertakan link sumbernya tidak terjadi lagi untuk kedepanya dan selamanya. Walaupun konten pada Blog saya ini masih jauh dari kata "bermutu, berkualitas dsb", tetapi saya puas karena telah membuatnya dengan ketikan jari, bukan klikan mouse. Walaupun memang sebagian informasinya saya ambil dari berbagai sumber, namun saya tulis ulang dengan narasi sendiri atau dengan kata lain tidak copy paste.
Nah, sebagai langkah awal untuk mencegah pencurian konten, kita perlu Melindungi Konten Blog dengan DMCA Protection. DMCA (Digital Millenium Copyright Act) sendiri adalah sebuah perlindungan hak cipta sebuah blog atau website untuk mencegah duplikat konten atau pencurian konten suatu Blog.
Pertama yang harus kita lakukan adalah mendaftarkan Blog ke DMCA Protection agar mendapatkan Sertifikat Hak Cipta untuk sekedar peringatan kepada calon pencuri konten.  Sebelum akhirnya kita melapor kepada DMCA ketika memang sudah ada bukti pencurian konten pada suatu Blog.

Mendaftarkan Blog di DMCA Protection.
1. Masuk ke situs DMCA.
2. Gulir sedikit ke bawah dan isi form Register your Protecton Badge. Company name dapat dikosongkan. Setelah diisi, klik Submit.

Mendaftarkan Blog di DMCA Protection

3. Tidak lama kemudian DMCA akan mengirimkan email yang berisi password agar sobat dapat login ke akun DMCA yang baru sobat buat. Periksa kotak masuk pada email yang sobat daftarkan dan klik URL Login yang diberikan.

Mendaftarkan Blog di DMCA Protection

4. Maka lakukanlah Login dengan alamat email yang didaftarkan dan password yang diberikan. Klik login.

Mendaftarkan Blog di DMCA Protection

5. Pada halaman selanjutnya akan terlihat pada daftar situs, bahwa belum ada halaman/situs yang terproteksi. Maka klik Add Badges to your site untuk menambahkanya.

Mendaftarkan Blog di DMCA Protection

5. Selanjutmya sobat pilih tampilan Badge yang sobat sukai. Lalu klik Add this Badge to Blogger.

Mendaftarkan Blog di DMCA Protection

6. Selanjutnya pilih Blog yang diinginkan dan tentukan nama widget sesuai keinginan. Setelah selesai, klik Menambah Widget.

Mendaftarkan Blog di DMCA Protection

Widget DMCA yang telah ditambahkan tidak tentu letak penempatanya. Mungkin biasanya akan terpasang pada sidebar. Dengan telah terpasangnya widget DMCA ini, maka pendaftaran Blog di DMCA Protection telah selesai.
Sekarang kita hanya perlu mengecek, apakah proteksi dari DMCA terhadap Blog kita telah berjalan atau tidak?

7. Klik widget DMCA yang telah terpasang di Blog sobat.

Menguji proteksi DMCA

8. Maka akan muncul tampilan seperti berikut.

Status proteksi DMCA

Perhatikan pada gambar di atas terdapat keterangan Protection Status: Active, pertanda bahwa perlindungan hak cipta pada Blog sobat telah berjalan.
Namun terdapat keterangan Account Status: Unverified. Jika ingin terverifikasi sobat harus mengupgrade akun DMCA ke Pro dan tentunya berbayar, silakan saja.
Lihat pada halaman home akun DMCA sobat untuk melihat lebih detail konten Blog sobat yang telah terproteksi.

Status proteksi DMCA
 
© Netter Indonesia All Rights Reserved
Get smart with the Netter Indonesia