Mengenal Fungsi Gadget Pada Blogger

Mengenal Fungsi Gadget Blogger - Sebelum kita bahas fungsi masing-masing gadget utama pada blogger terlebih dulu kita mengenal apa itu gadget?ada dua macam pengertian dalam kesempatan ini, yaitu pengertian gadget secara umum dan pengerian gadget pada blogger, berikut penjelasannya:

Pengertian Gadget Secara Umum

Gadget secara umum adalah barang elektronik kecil yang yang didesain sedemikian rupa sehingga menjadikannya sebagai sesuatu inovasi terbaru, atau juga bisa dikatakan sebagai suatu penemuan yang benar-benar menakjubkan pada masanya. 

Pengertian Gadget Pada Blogger.com

Gadget di blogger.com adalah adalah fitur tambahan yang terdapat pada sidebar berupa elemen yang berguna dan mudah digunakan baik yang telah disediakan oleh penyedia layanan blog yang anda gunakan atau yang berasal dari pihak ketiga. Selain untuk mempermudah pengunjung blog dalam memahami sebagian isi blog, fitur ini juga dapat memperindah blog anda dengan modifikasi gadget.

Penggunaan serta pemasangan widget sangat dipermudah oleh pihak-pihak penyedia layanan sehingga yang anda lakukan hanya mendaftar atau bahkan ada yang tidak perlu mendaftar sama sekali alias Cuma mengcopy script yang telah disediakan dalam elemen blog.

Sesuai dengan judulnya yaitu mengenal Fungsi Gadget Blogger. pada artikel penjelasan gadget ini akan menjelaskan macam-macam gadget dan fungsinya. Memang fungsi dari masing-masing gadget sudah dijelaskan oleh pihak blogger, namun beberapa pemula di blogger.com merasa penjelasan tersebut masih kurang, setelah sobat mengetahui pengertian gadget juga fungsi gadget lengkap, tidak perlu pusing lagi untuk memasang gadget tersebut.

Fungsi Gadget Pada Blogger adalah sebagai berikut:

1. Pengikut

Gadget ini Berfungsi untuk Menampilkan daftar pengguna yang mengikuti blog Anda, lalu apa kegunaan dari mengikuti suatu blog? Kegunaannya adalah si pengikut akan segera tahu apabila ada artikel terbaru yang terposting di blog yang ia ikut, dan ini akan langsung tampil di Dasbor si pengikut. Agar lebih gampang seperti ini ilustrasinya: Si A mengikuti Blog si B, maka si A akan dengan cepat mengetahui apabila ada postingan terbaru dari blog si B, karena postingan terbaru tersebut akan langsung tampil di dasbornya si A, tatkala ia login/ masuk ke akun blogger-nya. sedangkan kegunaan bagi si pemilik blog yaitu untuk mempermudah penyebaran postingan terbarunya. Dengan kata lain, gadget ini bisa dikatakan memiliki peranan dalam mempermudah kedua belah pihak, antara si pemilik dan si pengikut. Apabila anda menambahkan gadget ini ke blog anda, maka seperti inilah nanti tampilannya:

2. Kotak Penelusuran

Gatget ini berfungsi untuk menelusuri isi blog-blog, blogroll, atau apapun yang pernah Anda tauti ke dalam blog anda. Anda juga bisa mengatur Gatget penelusuran ini hanya untuk mencari isi yang berada di blog anda saja, hasilnya seperti dibawah ini:



3. HTML/ JavaScript.

Gadget ini berfungsi untuk menambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. Dengan gadget ini anda bisa menambahkan kode HTML/ script di blog anda. Kode script itu biasanya bermacam-macam, ada yang berupa kode script iklan, banner, dll. Seperti apakah kode script itu? Agar teman-teman lebih jelas seperti apakah kode script itu, teman-teman bisa memperhatikannya melalui contoh berikut ini:

"<div style="text-align: center;"><a href="http://whos.amung.us/stats/gaaxkjwwh9sj/"><img src="http://whos.amung.us/cwidget/gaaxkjwwh9sj/ffffff000000.png" title="Click to see how many people are online" border="0" height="29" width="81" /></a></div>"

Dan hasil dari kode di atas adalah:

dan kode di atas berfungsi untuk mengetahui orang yang sedang online di blog kita.



4. Teks.

Melalui gadget ini, anda bisa menambah kata-kata di blog anda, seperti: Selamat datang di blog kami, selamat membaca, jangan lupa meninggalkan komentar, dll. Anda juga bisa menulis beberapa puisi atau juga pantun. Selain itu anda bisa membuat tulisan yang diselipi dengan link (Hyper Link) di dalamnya, seperti dengan menggunakan kata-kata, "untuk membaca panduan merakit komputer silahkan untuk pergi ke halaman ini" (kata ini, anda selipi dengan suatu link), atau juga bisa anda selipi dengan alamat e-mail.


5. Gambar.

Melalui gadget ini teman-teman bisa menambah suatu gambar ke blog-nya teman-teman. Entah itu gambar dari komputer atau suatu web. Selain itu teman-teman juga bisa membuat link tujuan gambar tersebut, contohnya saja teman-teman memiliki posting tentang masjid atau tentang ka'bah, maka teman-teman bisa memasang gambar masjid atau ka'bah tersebut ke blognya teman-teman dengan link yang bertujuan ke postingan yang isinya tentang masjid dan ka'bah tadi.


6. tampilan Slide.


Dengan Gadget ini teman-teman bisa memunculkan tampilan slide di blognya teman-teman. Slide yang akan ditampilkan sudah disediakan oleh pihak blogger.com itu sendiri, jadi teman-teman tinggal mengaktifkannya. Sebelum mengaktifkan gadget ini, teman-teman juga bisa mengatur jenis tampilan slide-nya nanti seperti apa.


7. Baris Video.

Dengan gadget ini teman-teman bisa menambah video klip dari Youtube juga video Google, sehingga para pengunjung bisa menontonnya. Bagusnya lagi, para pengunjung tersebut dapat menonton video tadi tanpa harus meninggalkan halaman posting, anda juga bisa mensettingnya dengan menggunakan kotak keyword yang tersedia.


8. Polling.

Dengan gadget ini anda bisa melakukan survey terhadap para pengunjung. Apakah kegunaan dari survey tersebut? Dengan adanya survey tersebut anda akan mengetahui sampai di manakah daya tarik pembaca terhadap blog anda, sehingga anda bisa memantau kualitaf dari isi blog anda.

9. Daftar Blog.

Dengan gadget ini anda dapat menampilkan blog vaforit anda di blog anda. Anda cukup menulis link blog faforit anda, lalu klik tombol tambah. Dengan begitu anda juga akan mudah untuk pergi ke blog tersebut, tanpa harus menghafal alamat URL-nya atau mungkin dengan tujuan lain seperti sebagai referensi blog anda.

10. Daftar Link.

Gadget yang ini kegunaannya hampir sama dengan gadget di atas. Namun untuk gadget yang ini, yang muncul nantinya hanyalah link-nya saja. Namanya juga Daftar Link. Gadget ini dapat anda manfaatkan untuk tujuan tukar link, atau sebagai blog roll (link ke teman-teman blogger lainnya).

11. Daftar.

Dengan gadget ini, anda bisa menambah daftar buku kesukaan anda, film kesukaan anda, atau apapun yang memang anda rasa penting untuk didaftarkan ke blog anda.



12. Feed.

Dengan Gadget ini anda bisa menyisipi feed RSS atau Atom ke blog anda.




13. NewsReel.

Dengan gadget ini, secara otomatis menampilkan tajuk google news dari blog anda.




14. Label

Dengan gadget ini anda dapat menampilkan label/ kategori semua postingan yang ada di dalam blog anda. Lalu apakah kegunaan label/ kategori tersebut? Dengan adanya label/ kategori para pengunjung akan merasa lebih mudah dalam mencari artikel yang mereka butuhkan. Contohnya blog anda membahas tentang kesehatan. Sedangkan artikel anda banyak sekali yang membahas tentang kesehatan, dengan tersedianya gadget label ini, anda dapat mengkategorikan postingan anda, sehingga para pengunjung menjadi mudah untuk menemukan postingan-postingan yang mereka cari. Contoh label yang berkaitan dengan kesehatan: Kesehatan rongga mulut, kesehatan mata, dll.

15. Tautan Berlangganan

Gadget ini dapat anda gunakan untuk menampilkan fitur langganan. Sehingga Memudahkan para pembaca untuk berlangganan blog Anda lewat pembaca feed populer.


16. Logo

Anda bisa menampilkan logo blogger.com ke dalam blog anda melalui gadget ini.





17. Profil

Dengan Gadget ini, anda dapat menampilkan profil blogger anda di blog anda. Apa fungsi profil blogger? Biasanya digunakan sebagai tanda pengenalan, atau sebagai tanda bukti kepemilikan blog.

18. Arsip Blog

Anda dapat menampilkan arsip blog anda dengan menggunakan gadget ini. Apa itu arsip? Singkatnya, apabila anda menambahkan gadget ini ke dalam blog anda, maka anda dan para pengunjung blog anda dapat dapat melihat semua daftar postingan anda, atau biasanya beberapa blogger menamakan gadget ini sebagai daftar isi, karena memang manampilkan semua isi/ postingan di blog kita. Anda dapat men-setting tampilan arsip blog anda nantinya, seperti: ingin ditampilkan menurut bulanan, mingguan, atau harian. Selain itu juga, anda bisa menentukan style/ gaya, mau secara hirarki (tersusun), atau menu dropdown.


19. Header Halaman.

Umumnya gadget ini secara otomatis sudah ditambahkan ke dalam blog kita. Namun, bagi anda yang ingin memodifikasi/ mengatur ulang header blog anda, anda bisa menggunakan gadget ini. Seperti halnya anda ingin memodif header blog anda dengan menambahkan gambar di dalamnya (sebagai latar atau background). Agar lebih jelas apa itu header blog/ halaman, anda dapat melihatnya di blog ini, yaitu terletak di bagian paling atas di blog ini,

Sekian dulu Penjelasan Mengenal Fungsi Gadget Pada Blogger . Semoga bermanfaat,,, salam blogger.....

Baca Selengkapnya »

Cara Mendapatkan Uang Tambahan Dari Blog

Cara Mendapatkan Uang Tambahan Dari Blog - Apakah sobat bingung cari iklan PPC gratis dengan penghasilan lumayan? yupz,,, itu yang dulu saya rasakan ketika sekian lama ngeblog dan lumayan banyak memiliki visitor namun belum mendapatkan penghasilan. namun sekarang sudah ada solusi untuk mendapatkan uang tambahan dari blog . caranya cukup mudah dan kita tinggal tingkatkan visitor. Cara Mendapatkan Uang Tambahan Dari Blog satu ini melalui iklan PPC lokal yaitu kliksaya.com.

Cara Daftar

Untuk memulai pendaftaran sobat silahkan klik DISINI , jika sudah masuk langsung saja daftar gratis. yang perlu diperhatikan untuk pendaftaran kliksaya memiliki syarat yaitu scan ktp sebagai syarat pendaftaran,

Dengan bergabung menjadi Penerbit Iklan KlikSaya.Com, berarti Anda setuju untuk menyediakan sebagian space pada situs Anda untuk dipasangi script zona iklan KlikSaya.Com. Segala resouce yang dibutuhkan untuk pengadaan iklan seperti bandwith, cpu-power, script, report dan lain-lain akan ditanggung oleh KlikSaya.Com sebagai pengelola pasar, sehingga Penerbit Iklan dapat lebih fokus ke content situs serta mencari traffic yang sebesar-besarnya untuk mendapatkan hasil yang sebesar-besarnya juga..

jika tertarik langsung saja bergabung dengan klik link DISINI.

Sekian dulu Cara Mendapatkan Uang Tambahan Dari Blog semoga sobat ikutan dapat penghasilan tambahan yang menyenangkan, selamat mencoba.

Baca Selengkapnya »

Cara Mudah Membuat Link Bergoyang pada Blog

*Cara Mudah Membuat Link Bergoyang di Blog* - Cara Mudah Membuat Link Bergoyang pada Blog - Tips cara membuat link bergoyang di blog - cara membuat link bergoyang otomatis di blog.

Cara Mudah Membuat Link Bergoyang pada Blog ini saya dapatkan dari internet dengan link disini karena permintaan sobat blogger ada yang bertanya bagaimana Cara Mudah Membuat Link Bergoyang pada Blog? akhirnya saya sempatkan untuk posting artikel ini, Ok!! kita menuju ke TKP tutorial Cara Mudah Membuat Link Bergoyang pada Blog. Cekidot !!!!!!!!

   1. Login ke akun Blogger sobat.
   2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
   3. Search kode berikut </head>  ( untuk mempermudah pencarian tekan Ctrl + F ).
    Copy paste script jQuery di bawah ini sebelum kode </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

4. Save template sobat dan lihat hasilnya.

Sekian dulu trik kali ini Cara Mudah Membuat Link Bergoyang pada Blog semoga bermanfaat. Ok

Baca Selengkapnya »

Tips Cara membuat Judul blog Berjalan

Cara Membuat Judul Blog Berjalan - Sobat blogger, postingan kali ini tips Cara Membuat Judul Blog Berjalan untuk lebih lengkapnya lihat tutorial berikut ini:

Tips Cara membuat Judul blog Berjalan

Baca Selengkapnya »

*Cara Memasang Like Facebook Melayang di Blog*

*Cara Memasang Like Facebook Melayang di Blog* - Artikel tutorial Cara Memasang Like Facebook Melayang di Blog tentunya sudah tidak asing lagi, like box facebook yang biasanya terdapat pada sidebar sekarang bisa sobat modifikasi blog menjadi like facebook melayang di Blog , ini menjadi daya tarik tersendiri oleh blogger dan membuat pengunjung klik like facebook kita.

Syaratnya mudah kok sob,,, yang penting sobat sudah punya punya halaman fanpage facebook, lalu Ambil kode Script Likebox yang sudah disesuaikan dengan blognya. Bagi yang belum punya fanpage facebook monggo silahkan dibuat dulu Cara Membuat Like Facebook Pada Blog. jika sudah lengkap syaratnya, sekarang lihat tutorialnya....... meluncur !!!!!

1. Login Seperti biasa ke akun blog sobat.
2. Pada halaman Dashboard blog pilih >> Tata Letak >> Lalu Klik Add a Gadget atau Tambah Gadget.
3. Scroll ke bawah sedikit >> Lalu pilih Widget HTML/Javascript
4. Jika sudah Copy Kode di Bawah ini dan Paste di dalam Widget kolom HTML/Javascript,,,

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background: #f5fffa;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"},
1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
Kode Script Facebook Likebox DISINI !!!
</center>
<center><div class='widget-content'>
<a href="http://softwaremaniapc.blogspot.com/search/label/Modifikasi%20Blog"><div style="background: #1e90ff; border:2px solid #ffd000;border-radius:10px;padding:10px;margin:10px;font-size:16px;"><strong>Modifikasi Blog<strong></strong></strong></div></a></div></center>
<!-- HTML End -->
<a class='close' href='http://softwaremaniapc.blogspot.com'>&times;</a></div>

Keterangan :

Untuk warna biru bisa sobat sesuaikan dengan blog sobat. Ok

5. Jangan lupa disave

Jika semuanya sudah dilengkapi dan dipasang maka hasilnya seperti ini sob,,, :
Sumber : Software Mania Pc

Baca Selengkapnya »

Cara Membuat Artikel Terkait dibawah Postingan Blog

Cara Membuat Artikel Terkait dibawah Postingan Blog

1. Login ke Dasbor >> Template (Untuk mengantisipasi terjadinya kesalahan Back Up dulu template blog sobat.)
2. Edit Template >> Lanjutkan >> Conteng Expand Template Widget
3. Cari kode  <data:post.body/> Untuk mempermudah gunakan F3 atau Ctrl+F. Biasanya akan ada 3 kode seperti itu, jika memang benar pilih kode yg ke-2 

4. Letakan Kode berikut tepat di bawah kode <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>

5. Jangan Lupa di SAVE

Baca Selengkapnya »

Cara Membuat Widget Entri Populer Keren dan Cantik

Cara Membuat Widget Entri Populer Keren dan Cantik - Sejauhmana sobat Mempercantik blog ? banyak cara untuk modifikasi blog sobat, mungkin Cara Membuat Widget Entri Populer Keren dan Cantik ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi  yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren dan Cantik.

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :

1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

7. Sobat Preview dahulu, setelah berhasil baru di SAVE

#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}

Sekian Dulu Sobat  Cara Membuat Widget Entri Populer Keren dan Cantik semoga bermanfaat. Good Luck Tunggu Update dari Zidan Alfarabi. Ok

Baca Selengkapnya »

Cara Membuat Menu Horizontal Keren di Blog

Cara Membuat Menu Horizontal Keren di Blog

Langkah-langkah  Cara Membuat Menu Horizontal Keren di Blog :

1. Log in ke akun Blog Sobat
2. Kemudian sobat klik tata letak -> Tambah gadget -> Pilih HTML/JavaScript
3. Copy kode dibawah ini dan paste pada kotak HTML/JavaScript dan letakkan diatas header:

<style type="text/css">
/* Menu horizontal untuk Blogger http://softwaremaniapc.blogspot.com/ */
div.topbar {
height: 16px;
background: #e16031;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://softwaremaniapc.blogspot.com/ */
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>

Keterangan :

# : sobat ganti dengan URL yang diinginkan.

4. Jangan lupa save
5. Lihat tampilan menu horizontal sobat.

6. Semoga bermanfaat

7. Jangan lupa tinggalkan pesan.

Baca Selengkapnya »

Cara Membuat widget Recent Post / Postingan Terbaru Keren

Cara Membuat widget Recent Post / Postingan Terbaru Keren -Zidan ALfarabi kali ini akan share tentang widget satu ini yang berfungsi untuk menampilkan postingan terbaru yaitu Recent Post. untuk membuatnya cukup mudah cuy,, sobat tinggal menambahkan kode java script dan simpan, wu,,, simple bukan? Nih,, hasilnya:

Kemarin saya juga sempet posting recent post tapi dengan gambar dan juga bisa berjalan dengan judul Cara Membuat Recent Post Gambar Bergerak Di Blog. Namun jika sobat cari yang simple, ini cocok dah,,, sebagai pilihan recent post di blog sobat.

1. login blog Sobat
2. rancangan >> elemen halaman >> tambah gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini

<script style="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/recentposts.js"></script>

<script style="text/javascript">

var numposts = 10;

var showpostdate = true;

var showpostsummary = true;

var numchars = 100;

var standardstyling = true;
</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>

NB :
text yang berwarna biru adalah jumlah banyak posting yang akan tampil pada widget tersebut
text yang berwarna merah adalah alamat blog, jadi jangan lupa ganti dengan alamat blog sobat.

4. simpan

Baca Selengkapnya »

Cara Mudah Memasang Tombol Like di setiap Postingan

Cara Mudah Memasang Tombol Like di setiap Postingan - Kali ini kang zain share tentang tombol like di setiap postingan blog. Fungsi Tombol Like adalah blog kita langsung terhubung dengan jejaring sosial Facebook, sehingga apabila ada seseorang yang mengklik tombol like maka secara otomatis postingan diblog kita ajan tershare ke beranda orang tersebut. 

Dengan demikian Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. bagaimana sudah jelas? nah,,, jika pada postingan sobat belum ada tombol like, bisa memasangnya sekarang juga. selengkapnya ikuti petunjuk dibawah ini:

Kurang lebihnya akan seperti dibawah ini :

Cara Mudah Memasang Tombol Like di setiap Postingan

- Cara Memasang Tombol Like di Setiap Postingan :
- Login Blogger

- Masuk ke Menu Template Kemudian Edit HTML

- Sobat Cari Kode Seperti dibawah ini (lebih mudah ctrl+F) :

    <data:post.body/>

- Letakan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>

- Simpan Template.

Keterangan:

Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Sekian sulu postingan Kang Zain tentang Cara Memasang Tombol Like di Setiap Postingan, semoga dapat bermanfaat bagi sobat :)

Selamat Mencoba

Baca Selengkapnya »

Cara Mudah Membuat Like Button Facebook di Blog

Cara Mudah Membuat Like Button Facebook di Blog - Kemarin Kang Zain sudah posting Cara Mudah Memasang Tombol Like di setiap Postingan, nah,, kali ini temanya masih sama yaitu like facebook pada blog atau postingan. namun ini beda dengan postingan saya yang kemarin, karena like facebook satu ini akan menyatu otomatis pada bawah postingan sobat. untuk lebih jelasnya seperti gambar Like Button Facebook di Blog dibawah ini: 

Bagaimana sudah jelas sobat? untuk Membuat Like Button Facebook di Blog cukup mudah, jika sobat ingin memasangnya ikuti tutorial dibawah ini :

Cara Mudah Membuat Like Button Facebook di Blog

1. loggin ke blogger
2. sobat pilih dashboard >>> template >>>edit html
3. lalu sobat cari kode  <data:post.body/>  ( gunakan ctrl+f  untuk mempermudah pencarian )
kalau kode seperti diatas terdapat lebih dari satu, cari kode lengkapnya seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

Keterangan :

Jika kode diatas tidak ada jangan menyerah, kode <data:post.body/> biasanya kode nomor 3 yang ditemukan lebih dari satu, gunakanlah satu persatu dalam langkah berikutnya ( saya pernah mencoba satu persatu dan akhirnya berhasil di salah satu kode yang ketemu lbih dari satu tadi )

4. Jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode <data:post.body/> atau <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

5. Jangan lupa sobat SAVE jerih payah sobat.

6. Lihat hasilnya...

Sekian dulu Cara Mudah Membuat Like Button Facebook di Blog semoga bermanfaat. Good Luck.

Baca Selengkapnya »

Cara Mudah membuat Label keren dengan Menu Pull Down

Cara Mudah membuat Label keren dengan Menu Pull Down diblog - Kali ini saya akan Share seputar widget label diblog. banyak cara untuk modifikasi blog, apalagi mempercantik label blog. kemarin juga sudah share mengenai label blog diantaranya : Cara Membuat Tampilan Label Cloud Berwarna di Blog, Cara Membuat Label Cloud keren dan cantik berwarna, Cara Membuat Label Cloud Keren dan Cantik diblog. 

Nah,, kurang lebihnya seperti gambar diatas, jika sobat ingin memasang Cara Mudah membuat Label keren dengan Menu Pull Down, ikuti petunjuk dibawah ini :

1.  Masuk ke Dashboard Blog Lo bro
2.  Pilih Rancangan
3. Edit Tata Letak
4. Add Gadget
5. Pilih HTML/Javascripts
6. Pastekan Kode diBawah bro diDalamnya

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'style="width: 100%";>
<option value="#" />Pilih Category 
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat
<option value="Link Sobat" /> Title Label Sobat

</select>

7. Tinggal SAVE. Selesai
8. Sobat tinggal lihat hasilnya,

./ Keterangan :

Width: 100% :Untuk Mengatur Lebar Label Menu Pull Down
Link Sobat : silahkan sobat ganti dengan Alamat URL yg ingin di jadikan Menu Pull Down
Title Label Sobat : Silahkan Sobat ganti dengan Judul Menuyang sobat inginkan.

Sekian dulu Cara Mudah membuat Label keren dengan Menu Pull Down, semoga bermanfaat. Selamat Mencoba!!!!!

Baca Selengkapnya »

Cara Membuat Kolom Scroll Pada Postingan Blog

Cara Membuat Kolom Scroll Pada Postingan Blog - Scroll Box atau CARA Membuat kotak Scroll pada postingan blog sebelum ke Script Dengan Scroll di Posting Blog kang Zain terangkan dulu manfaatnya, ow,,, lupa gmana kabarnya agan-agan? masih pada semangat ngeblognya? tetap semangat dan cari inspirasu baru. hehe

Ok !! manfaat atau tujuan dari tips Cara Membuat Kolom Scroll Pada Postingan Blog ini untuk meringkas atau membuat simple tulisan atau scrip yang sobat posting di blog. maka dengan scroll pada postingan blog menjadikan postingan sobat kelihatan lebih menarik.

Sekarang sebagai contoh kotak scroll pada postingan blog seperti dibawah ini:

Cara Membuat Kolom Scroll Pada Postingan Blog - Scroll Box atau CARA Membuat kotak Scroll pada postingan blog sebelum ke Script Dengan Scroll di Posting Blog kang Zain terangkan dulu manfaatnya, ow,,, lupa gmana kabarnya agan-agan? masih pada semangat ngeblognya? tetap semangat dan cari inspirasu baru. hehe.

Ok !! manfaat atau tujuan dari tips Cara Membuat Kolom Scroll Pada Postingan Blog ini untuk meringkas atau membuat simple tulisan atau scrip yang sobat posting di blog. maka dengan scroll pada postingan blog menjadikan postingan sobat kelihatan lebih menarik.

Jika Sobat Tertarik Copy saja script ini dan pasang kode script dibawah ini pada mode edit HTML saat sobat menulis artikel di blog atau postingan:

Contoh Pertama Cara Membuat Kolom Scroll Pada Postingan Blog

<div style="background-color: white; border: 1px solid rgb(191, 189, 189); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 400px;">Masukkan Tulisan atau teks sobat disini</div>

Keterangan !!!!

100px : untuk mengatur tinggi kolom scroll

400px : kode untuk mengatur lebar kolom scroll

Masukkan Tulisan atau teks sobat disini : silahkan sobat ganti dengan teks atau tulisan yang sobat inginkan.

Contoh kedua Cara Membuat Kolom Scroll Pada Postingan Blog

Pada cara yang kedua tetap sama pasang kode script dibawah ini pada mode edit HTML saat sobat menulis artikel di blog atau postingan :

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 500px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">Masukkan Tulisan atau teks sobat disini
</div></span></span></span>

Keterangan !!!!

200px : untuk mengatur tinggi kolom scroll

500px : kode untuk mengatur lebar kolom scroll

Tulisan atau teks sobat disini : silahkan sobat ganti dengan teks atau tulisan yang sobat inginkan.

Hasilnya Seperti ini :

Cara Membuat Kolom Scroll Pada Postingan Blog - Scroll Box atau CARA Membuat kotak Scroll pada postingan blog sebelum ke Script Dengan Scroll di Posting Blog kang Zain terangkan dulu manfaatnya, ow,,, lupa gmana kabarnya agan-agan? masih pada semangat ngeblognya? tetap semangat dan cari inspirasu baru. hehe Ok !! manfaat atau tujuan dari tips Cara Membuat Kolom Scroll Pada Postingan Blog ini untuk meringkas atau membuat simple tulisan atau scrip yang sobat posting di blog. maka dengan scroll pada postingan blog menjadikan postingan sobat kelihatan lebih menarik.

Sekian dulu sobat blogger Cara Membuat Kolom Scroll Pada Postingan Blog semoga bermanfaat dan jangan lupa tinggalkan pesan dan juga lihat postingan saya kemarin cara membuat kolom scroll pada blog archive ( arsip blog ) dan Cara Membuat Efek Scroll Pada Kolom Komentar. Good Luck

Baca Selengkapnya »

Cara Membuat Spoiler Pada Postingan Blog

Sebelum sobat membaca lebih jauh artikel ini, lebih baik bobat ketahui dulu apa itu Spoiler. Spoiler adalah cara untuk menyembunyikan teks,video,gambar,maupun script dengan tujuan untuk menghemat ruang postingan. Selain itu Spoiler juga dapat mempercepat loading pada suatu website ataupun blog. Nah, postingan saya kali ini akan membahas tentang Cara Membuat Spoiler Pada Postingan Blog. Penasaran bagaimana cara membuatnya? Silahkan baca dengan seksama tutorial yang saya tulis di bawah ini :
Cara Membuat Spoiler Pada Postingan Blog :
1. Login ke blogger
2. Kemudian tulis postingan baru
3. Ganti tab Compose dengan tab HTML
4. Masukan kode di bawah ini

<div id="spoiler" style="display:none">

konten yang disembunyikan

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button> 

5. Ganti kode yang berwarna merah dengan konten yang akan sobat sembunyikan.
6. Kode yang berwarna biru bisa sobat ganti sesuai selera sobat.

Baca Selengkapnya »

Cara Membuat Bismillah Otomatis Di awal Postingan Blog

Cara Membuat Bismillah Otomatis Di awal Postingan Blog - Tips dan trik kali ini buat blog sobat yang ingin memasang lafaldz bismillah di awal postingan, ini cocok banget buat sobat yang beragama islam untuk membuat widget satu ini yaitu bismillah di awal postingan blog, setelah sobat pasang bismillah di awal postingan blog, maka secara otomatis akan berada di awal postingan blog. sebenarnya sudah lama untuk dipublikasikan, tapi para pembuat blog baru setiap harinya membanjiri dunia maya. 

Nah,,, Jika sobat ingin menambah bismillah di awal postingan Blog, ikuti petunjuk dibawah ini: Cekidot !!!!

Cara Memasang Bismillah Di Awal Postingan
1. Buka blog anda
2. Pilih Template => Edit HTML

3. Cari kode <data:post.body/> jika sudah ketemu.

4. Lalu letakkan kode Bismillah dibawah ini, tepat diatasnya

<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>ب&#1616;س&#1618;م&#1616; الله&#1616; الر&#1617;&#1614;ح&#1618;من&#1616; الر&#1617;&#1614;ح&#1616;يم&#1616;</span></span> </div><br/>

Atau Sobat bisa juga memasang kode dibawah ini, Bedanya pada tampilan font :

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

Sekian dulu sobat Cara Membuat Bismillah Otomatis Di awal Postingan Blog tentunya sangat menarik buat blog sobat, hehehe Selamat Mencoba Widget Bismillah Di awal postingan Blog.

Baca Selengkapnya »

cara membuat link warna warni di blog

Link dengan warna-warni mungkin bisa jadi salah satu sarana bagi anda untuk mempercantik blog, selain variasi warnanya yang beragam, link dengan efek berkedip warna warni ini juga dapat menambah sisi kreativitas blog kita, karena kalau biasanya ketika kita mengarahkan kursor mouse ke link yang muncul hanyalah tulisan yang berubah warna, namun kini kita bisa sedikit mengkreasikanya agar terlihat lebih akrab dengan para pengunjung.

Sebelumnya juga kita telah membahas tentang membuat efek banjir di blog, tidak jauh berbeda dengan postingan kali ini, yaitu cara membuat efek banjir yang menenggelamkan blog dengan javascript. Selain keuntungan menarik yang sudah saya paparkan tadi diatas, membuat link warna warni seperti ini juga tidak terlalu menambah berat loading blog, jadi rekan-rekan blogger tidak usah khawatir akan javascript yang "sepertinya" akan menambah beban loading, namun saya sarankan juga untuk tidak memakai terlalu banyak efek dengan javascript, karena sesuatu yang berlebihan itu tidak baik, hehe.

Dapat dilihat pada gambar diatas, itu adalah contoh dari screenshot yang saya ambil dari recent post blog ini, jadi nantinya setiap ada cursor mouse yang didekatkan ke link, maka link akan berubah dengan memunculkan efek warna-warni berkedip secara bergantian. Selain itu, cara memasang widget ini juga sangat praktis, anda tidak perlu repot-repot meng-edit kode HTML, namun anda hanya membutuhkan add gadget pada Tata Letak (layout). Well, bagi anda yang berminat dengan efek ini, Check it Out!

1. Login ke Blogger

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini ke dalam box "konten".

<script src='https://farhanshare-blogspot-com.googlecode.com/files/link%20warna%20warni.js'/></script>

6. Klik "save", dan selesai.

Baca Selengkapnya »