Portal Information: Widget Blog

Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan

Membuat Menu Drop Down Tanpa Edit HTML Template

Membuat Menu Drop Down Tanpa Edit HTML Template. Beberapa waktu yang lalu saya pernah memposting artikel tentang bagaimana cara membuat seperti ini, Cuma bedanya pada posting kali ini adalah adanya menu drop down.

sedikit pengertian tentang menu drop down adalah, sebuah menu Link yang apabila di sentuh mouse akan ada menu link yang jatuh ke bawah. Sebagai Contohnya sobat bisa melihat pada bagian bawah posting ini, silahkan sobat coba arahkan kursor mouse sobat ke arah menu, nanti sobat akan mengetahui link yang jatuh ke bawah. Oke sobat langsung saja simak tutorialnya di bawah ini:

Cara Membuat Menu Drop Down Tanpa Edit HTML Template.

1. Silahkan Masuk ke Account Bloger Anda.
2. Pilih Tata letak / LayOut.
3. Pilih Add Gadget / Tambahkan Gadget.
4. Copy dan Paste Kode Di bawah ini pada Kolom Add Gadget tadi.
Kode.

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style><br />
<br />
<ul id="menu"><li><a href="https://www.blogger.com/">Home</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu</a><br />
<ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
<li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu 2</a><br />
<ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a><br />
<ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.1</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.2</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.3</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.4</a></li>
</ul></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
<li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu 3</a><br />
<ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
</ul>

5. Selesai Klik Save/Simpan.

Keterangan:
* Silahkan Sobat ganti Arpusa.blogspot.com sesuai dengan link URL yang Sobat Inginkan.

Baca Juga:
Cara Mudah Membuat Menu Horizontal Tanpa Edit HTML Template

Contoh/Demo Menu Drop Down

Demikian Tutorial tentang Bagaimana Cara Membuat Menu Drop Down Tanpa Edit HTML Template pada Blogspot. semoga tutorial ini bermanfaat bagi sobat semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Cara Membuat Iklan Melayang Di Blog dengan Tombol Close

Cara Membuat Iklan Melayang/FlyngAds Di Blog Dengan Tombol Close. saya yakin Sobat blogger sudah pernah melihat iklan melayang ataupun menggantung di blog. Para blogger sengaja memasang iklan melayang biasanya untuk strategi meningkatkan jumlah klik iklan oleh visitor/ pengunjung.

Kita tahu bahwa kebanyakan blogger sengaja untuk menjadi publiser iklan pada blognya dengan tujuan untuk mendapatkan penghasilan berupa $.. hehee dan sudah menjadi hal yang mutlak jika ingin penghasilan meningkat, harus berupaya bagaimana para visitor banyak yang meng Klik iklanya.

Oke sobat langsung saja di simak tutorial bagaimana cara memasang iklan melayang di blog dengan tombol close.

1. Masuk ke account blogger sobat.
2. Pilih LayOut/Tata Letak.
3. Pilih Add Gadget/Tambahkan Gadget.
4. Pilih Html/Java Script.
5. Copy Dan Paste Kode Di bawah Ini di dalamnya.

Kode Html

6. Selesai Save/Simpan.

Keterangan:

Warna Biru adalah Kode iklan. silahkan ganti dengan Kode iklan Sobat.

Warna Merah adalah Jarak Kotak iklan, Silahkan sesuaikan dengan keinginan Sobat.

Warna Pink (z-index:+1000) adalah Posisi Iklan. Sobat bisa menggantinya dengan kode y-index:+1000 jika ingin posisi lainya, silahkan di coba dulu.

Warna Hijau adalah Kode Warna Border Iklan, silahkan Ganti dengan warna kesukaan sobat, bila belum tau kode kode warna silahkan Pakai Tool Otomatis Kode Warna

SELAMAT BERKREASI.. HAPPY BLOGGING..

Cara Membuat Widget Popular Post Keren Warna Warni Model 3

Cara Membuat Popular Post Keren Warna Warni Model 3. beberapa hari ini secara berturut turut saya telah berbagi artikel tentang Cara membuat Widget Popular Post. kalau kita obok obok mbah google, memang ada banyak model widget popular Post yang bisa kita terapkan untuk mempercantik penampilan blog / web sobat blogger.

Untuk Widget Popular Post Model yang ke 3 (tiga) ini sobat bisa lihat Contoh gambarnya di samping tulisan ini. dan seperti widget yang lainya, pemasangannyapun sama dengan yang lain, cuma yang membedakan adalah script Html nya. Oke Sob, langsung kita simak tutorialnya di bawah ini :

Cara Membuat Widget Popular Post Keren Warna Warni Model 3 (tiga).

LANGKAH PERTAMA.

Pastikan sobat blogger sudah menambahkan widget popular post di blog sobat, kalau belum silahkan ikuti Tips nya di bawah ini:

1. Masuk Ke Account Blogger sobat.
2. Pilih LayOut / Tata letak.
3. Pilih Add Gadget / Tambahkan Gadget.
4. Klik "ENTRY POPULER".

5. Pastikan setting pengaturan sudah sesuai keinginan sobat. (lihat gambar di bawah ini)
Centang Thumnail Jika Popular Post nanti disertai gambar, atau
Centang Cuplikan Jika Popular Post nanti di sertai deskripsi/Penjelasan Artikelnya.

6. Selesai Save/Simpan.

LANGKAH KEDUA

1. Silahkan sobat masuk ke Template dan Klik Edit Html
2. Silahkan Sobat cari kode seperti ini ]]></b:skin> atau </style>
(Gunakan Ctrl+f untuk memudahkan Pencarian).
3. Copy kode Html di bawah ini dan Pastekan tepat di atas kode ]]></b:skin> atau </style>

Html Code.

4. Selesai Save / Simpan.

Baca Juga :
Cara membuat Widget Popular Post Keren Warna Warni Model 1 (Satu).
Cara Membuat Widget Popular Post Keren Warna Warni Model 2 (Dua)

Demikian Tutorial tentang Cara Mudah membuat Widget Keren Popular Post/ Entry Popular Warna warni Model 3 (Tiga). semoga bermanfaat bagi sobat blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Cara Membuat Widget Popular Post Keren Warna Warni Model 2

Cara membuat Widget Popular Post Keren Warna Warni Model 2. (Dua)

Sobat Blogger, Kemarin saya memposting Artikel tentang widget popular Post Model 1. dan masih berkaitan dengan artikel kemarin kali ini saya juga akan sharing tentang widget Popular Post dengan Model yang berbeda dengan kemaren.

Untuk Contoh Tampilan Widgetnya yang Model 2 sobat bisa lihat Gambar di samping ini, silahkan sobat pilih sesuai selera sobat, untuk pemasangannya juga mirip dengan Model 1. cuma yang membedakan adalah kode scriptnya saja. Oke Sobat Blogger langsung saja disimak tutorialnya di bawah ini.

Cara Membuat Widget Popular Post keren Warna Warni Model 2 (Dua).

LANGKAH PERTAMA

Pastikan Sobat blogger sudah menambahkan widget popular Post di blog sobat, kalau belum silahkan ikuti Tips nya di bawah ini :

1. Masuk Ke Account Blogger Sobat.
2. Pilih LayOut/Tata letak.
3. Pilih Add Gadget/Tambahkan Gadget.
4. Klik "ENTRY POPULER".

5. Pastikan Setting Pengaturan sudah sesuai selera Sobat. (lihat gambar di bawah).
Centang Thumnail Gambar jika Popular Post nanti di sertai dengan gambar, atau
Centang Cuplikan jika Popular Post nanti di sertai deskripsi/Penjelasan artikelnya.

6. Selesai Simpan / Save.

LANGKAH KEDUA

1. Silahkan sobat Masuk ke template kemudian Klik Edit HTML.
2. Silahkan Sobat Cari kode seperti ini ]]></b:skin> atau </style>
(Gunakan Ctrl+f untuk mempermudah Pencarian).
3. Copy kode Html di bawah ini dan Pastekan tepat di atas kode ]]></b:skin> atau </style>

Kode Html

/* Popular Post Full Color */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

4. Selesai Save / Simpan

Baca Juga:
Cara Membuat Widget Popular Post Keren Warna Warni Model 1 (Satu)
Cara Membuat Widget Popular Pos Keren Warna Warni Model 3

Demikian Tutorial tentang Cara Mudah Membuat Widget Keren Popular Post/Entry Popular Warna Warni Model 2 (Dua). Semoga bermanfaat bagi sobat Blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Cara Membuat Widget Popular Post Keren Warna Warni Model 1

Cara Membuat Popular Post/Entry Popular Warna Warni Keren. Apa sich sebenarnya fungsi dari widget ini.?? Fungsi dari widget Popular Post adalah Untuk Menampilkan Artikel/Posting Di Blog kita Yang Paling Banyak di baca oleh Visitor/ pengunjung Blog kita, sebenarnya sudah ada widget bawaan Popular Post di Blogspot, namun menurut saya tampilanya kurang menarik atau terlalu monoton.

Ada beberapa Model Widget Popular Post yang bisa sobat Aplikasikan ke Blog sobat. Kali ini saya akan berbagi bagaimana cara membuat Widget Popular Post atau istilah lainya adalah Entri Popular.

Contoh widget yang akan saya share ini bisa anda lihat pada gambar di samping posting ini, di mana style atau tampilanya adalah kolom vertikal, Nanti sobat bisa memodifikasi tampilanya, Mau yang bergambar/Thumnail ataupun tidak bergambar. Oke sobat Langsung saja di simak Tutorial lengkapnya di bawah ini:

Cara Membuat Widget Popular Post/Entry Popular Warna Warni Keren Model 1

LANGKAH PERTAMA

Pastikan Sobat Blogger Sudah Menambahkan Widget Popular Post di blog sobat. Kalau belum silahkan ikuti Tips ini:

1. Masuk ke Account Blogger sobat.
2. Pilih LayOut/Tata Letak.
3. Pilih Add Gadget/Tambahkan Gadget.
4. Klik "ENTRY POPULER".

5. Pastikan setting pengaturan sesuai selera anda. (lihat gambar di bawah)
Centang Thumnail Gambar jika Popular Post nanti di sertai gambar atau
Centang Cuplikan jika popular Post nanti disertai Deskripsi/keterangan artikelnya.

6. Selesai Simpan/Save.

LANGKAH KE DUA

1. Silahkan Sobat Masuk ke Template Kemudian Klik Edit HTML.
2. Silahkan Sobat Cari Kode seperti ini ]]></b:skin> atau </style>
(gunakan Ctrl+F untuk mempermudah pencarian).
3. Copy Kode Html Di bawah ini dan Pastekan tepat di atas Kode ]]></b:skin> atau </style>

Kode Html

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li img{display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left}
.PopularPosts ul li{background-color:#eee;margin:0 10% .4em 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

4. Selesai Save/Simpan.

Baca Juga :
Cara Membuat Widget Popular Post Keren Warna Warni Model 3
Cara Membuat Widget Popular Post Keren Warna Warni Model 2

Demikian Tutorial tentang Cara Mudah membuat Widget Keren Popular Post/ Entry Popular Warna warni Model 1. semoga bermanfaat bagi sobat blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Cara Mudah Memasang Musik Di Blog (Otomatis Terputar)

Cara Mudah Memasang Lagu Di Blog Otomatis Terputar. Sebenarnya hal ini sangat simple sobat. Musik / Lagu yang di pasang di blog ini tentunya akan menjadi bentuk exspressi dari sang blogger. tapi perlu di ingat dan di perhatikan bahwa pemasangan musik ataupun lagu pada blog bisa saja mangganggu kenyamanan pengunjung blog, bagaimanapun juga selera genre musik antara admin blog dan pengunjung blog berbeda. dan perlu di pertimbangkan juga apakan pemasangan lagu ini mempengaruhi loading blog sobat. Oke apapun alasanya tetep saja hak anda untuk memasang atau tidak musik / Lagu pada blog sobat. Oke sobat lagsung saja simak Tipnya di bawah ini:

Cara Mudah Memasang Lagu Di Blog Otomatis Terputar:

1. Silahkan Masuk Ke Situs Ini Ya divine-music.info.
2. Pada Home Page di bagian Header silahkan Klik "BROWSE ALL"
3. Setelah itu anda akan masuk ke tampilan "Artists AlphaBetically". silahkan pilih lagu dari artis yang ingin anda tampilkan lagunya di blog sobat.
4. Berikutnya sobat akan melihat kolom berisi kode.

di bawah ini adalah contoh kode lagu dari Alecia keys - A womans wordth.

<center>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" alt="divine-music.info"></a><br>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmlogo.gif" border="0" alt="divine-music.info"></a>
<br><br><b>
<a target="_blank" title="Divine-Music.info" href="http://www.divine-music.info">divine-music.info</a></b><br>
<EMBED SRC="http://divine-music.info/musicfiles/aliciakeys-womansworth.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

Catatan :
a. Ubah Tulisan yang Berwarna Pink (TRUE) Menjadi FALSE jika sobat ingin lagunya Terputar Berkali Kali.
b. Jika anda ingin memberi credit pada Devine-music Silahkan scopy semua Kode di atas, namun jika sobat ingin mendapatkan musiknya saja maka copy kode yang di apit oleh Tag EMBED saja. jadinya seperti dibawah ini.

Selanjutnya Adalah Bagaimana Cara Memasangnya di Blog:

1. Masuk Ke Account Blogger Sobat.
2. Pilih Tata Letak / LayOut.
3. Pilih Add Gadget / Tambahkan Gadget.
4. Pilih Html/Java Script.
5. Copy dan Paste Kode di Atas pada Kolom yang tersedia.
6. Selesai. Klik Save/Simpan.

Sekarang setiap kali visitor/pengunjung mengunjung blog sobat. secara otomatis mereka akan mendengarkan lagu tersebut. Bagaimana Jika Sobat Sudah Bosan.???? Sobat bisa menggantinya dengan lagu yang lain, atau kalau memang perlu sobat hapus saja Widget yang barusan sobat pasang. dan Blog sobat akan menjadi Silent Mode kembali.

SELAMAT MENCOBA.. HAPPY BLOGGING..

Cara Membuat Widget Berada Di Tengan Sidebar Blog

Selamat Malam Sobat Blogger. Malam malam Begini Enaknya Posting yang Ringan ringan saja ya. Cara Membuat Widget Berada Di Tengah Sidebar Blog. Saya menganggap Artikel ini cukup ringan karena gak terlalu banyak dan ribet menambahkan kode kode Html. dengan membuat tampilan widget berada di tengah sudah barang tentu membuat tampilan jadi lebih Rapi dan menarik. tapi juga tak bisa di pungkiri bahwa soal letak sebenarnya soal selera, baik di pinggir maupun di tengan. hehee.. Pilihan tetap ada di tangan sobat blogger. Oke langsung saja disimak Tutorialnya di bawah ini ya:

Cara Membuat Widget Berada Di Tengah Sidebar Blog.

Tips ini hanya Menambahkan Kode <center> Di awal dan di akhir Kode widget.
Contoh:
Ini Adalah Kode Widget Histats Saya.

<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="web page hit counter" ><script type="text/javascript" >
try {Histats.start(1,3111174,4,401,118,80,"00011110");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?3111174&101" alt="web page hit counter" border="0" /></a></noscript>

Dan Hasilnya adalah Seperti di Bawah ini. Widget Histats Saya berada di Pinggir Sidebar.

Nah Sekarang Kode Widget Histats Saya, Saya tambahkan Kode <center>

<center>
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="web page hit counter" ><script type="text/javascript" >
try {Histats.start(1,3111174,4,401,118,80,"00011110");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?3111174&101" alt="web page hit counter" border="0" /></a></noscript>
<center>

Hasilnya Akan seperti di bawah ini. Widget Histats Saya berada di Tengah Sidebar.

Gimana Sobat, Jadi lebih Rapi kan..?? Jadi Kuncinya adalah hanya Menambahkan Kode <center> Sebelum dan sesudah Kode Widget

Oke Semoga Tips tentang Cara membuat Widget berada di tengah Sidebar Blog. Bisa membantu Sobat Blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Cara Gampang Membuat Related Post Bergambar Tanpa Edit HTML

Beberapa waktu yang lalu saya pernah menulis tips tentang Cara Membuat Related Post / Artikel Terkait Tanpa Gambar Di Blog. Kali ini masih Juga seputar Related Post /Artikel terkait. Saya akan berbagi tentang Cara Paling Gampang membuat Related Post /Artikel Terkait Dengan Gambar Tanpa Edit HTML. Saya yakin sobat blogger penasaran dengan artikel tersebut. Oke Langsung saja simak tutorialnya di bawah ini :

Cara Paling Gampang Membuat Related Post / Artikel Terkait Bergambar Tanpa Edit HTML.

1. Silahkan Masuk Ke situs Ini www.linkwithin.com.
2. Isi data data yang di Perlukan Kemudian Klik Get Widget. (Lihat Gambar di bawah ini).

3. Klik Pada Tulisan/Link Install Widget. (Lihat Gambar Dibawah ini).

4. Setelah itu isi data sesuai keinginan anda. Contohnya pada Title di isi Link Within. Setelah itu Klik Add Widget. (Lihat Gambar Di Bawah ini)

5. Setelah itu anda akan Masuk/Login ke Dashboard blog Anda. dan lihat sekarang pada Gadget anda secara otomatis akan muncul Gadget dengan nama LINKWITHIN (Lihat Gambar di bawah ini)

6. Setelah itu klik and Drag/geser Gadget dengan nama Linkwithin tersebut di bawah kolom Posting Sebenarnya ini tidak wajib, silahkan di coba coba sendiri ya. (Lihat Gambar Dibawah ini).

7. Selesai klik Save / Simpan. lihat Blog anda maka secara Otomatis akan muncul Related Post / Artikel Terkait.

Demikian Tutorial Cara Paling Gampang membuat Related Post / Artikel terkait Bergambar Tanpa Edit HTML. Semoga bermanfaat bagi sobat Blogger semua.

Baca Juga:
Cara Membuat Artikel Terkait / Related Post Tanpa Gambar Di Bawah Blog

AELAMAT MENCOBA.. HAPPY BLOGGING..

Cara Terbaru Memasang Widget Alexa Rank Di Blog

Cara Terbaru Memasang widget Alexa Rank. Judul Artikel ini sengaja saya embel embeli kata Terbaru karena untuk cara yang lama benar benar sudah tidak bisa dipakai.

Situs Alexa telah mengalami pembaruan secara besar besaran yang meliputi Tampilan dan fitur fitur di dalamnya. dan salah satu fitur yang lenyap dari Situs Alexa adalah Widget Alexa Rank.

Tapi jangan kuatir sobat Blogger kali ini saya akan sharing tentang bagaimana memasang Widget Alexa Rank di Blogspot.

Ada beberapa script Widget Alexa Rank yang bisa sobat pilih dan sesuaikan dengan tata letak pada blog sobat.

Oke Sob.. dibawah ini Script dan Cara Memasangnya di Blog Sobat.

1. Scriptnya Sebagai Berikut :

2. Scriptnya Sebagai Berikut :

3. Scriptnya Sebagai Berikut :

Catatan :
Ganti Tulisan arpusa.blogspot.com dengan Url Blog Sobat.

Nahh Sekarang Bagaimana Cara Memasangnya Di Blog Sobat :

1. Masuk ke Account Blogger Sobat.
2. Pilih Tata letak / LayOut.
3. Pilih Tambahkan Gadget / Add Gadget.
3. Pilih Html / Java Script.
5. Copy dan Pastekan Script di Atas Pada Kolom Java Script.
6. Selesai. Save / Simpan.

Demikian Sharing Saya tentang Tutorial Cara Terbaru Memasang Widget Alexa Rank di Blog. Semoga bermanfaat bagi Sobat blogger semua.

SELAMAT BERKREASI.. HAPPY BLOGGING..

Cara Membuat Artikel Terkait/Related Post Tanpa Gambar di Blog

Cara Membuat Related Artikel/Artikel Terkait Tanpa Gambar Di Bawah Blog. Kegunaan Related Artikel atau Artikel terkait ini tidak hanya mempercantik Blog, tapi yang lebih penting dari itu adalah Untuk meningkatkan Page View Blog sobat. selain itu pengunjung / Visitor juga bisa mengetahui artikel artikel sejenis yang ada pada blog sobat. sebagai comtohnya adalah jika pengunjung membaca artikel sobat tentang Tips Blog, maka pada kolom Related Artikel/Artikel terkait nanti juga akan menampilkan Artikel tentang Tips Blog. dan biasanya kolom Related artikel/Artikel Terkait ini secara otomatis muncul berada di bawah Posting blog. Oke sepertinya Cukup Mudah untuk memahami apa itu istilah Artikel terkait / Related artikel pada blog. langsung saja ikuti tutornya di bawah ini :

Cara Membuat Related Artikel/Artikel Terkait Tanpa Gambar Di Bawah Blog.

1. Silahkan berdo'a sesuai agama dan kepercayaan Masing Masing. hehee..
2. Login ke Account Blogger Anda.
3. Pilih Template.
4. klik Edit Html.
5. Cari kode seperti ini <data:post.body/> biasanya kode ini ada 2 di template, usahakan untuk memilih yang no 2 ya.

Ingat : Setiap Blogger yang mau Meng Edit template wajib untuk MemBackUp template dulu. hal ini di lakukan Untuk mengantisipasi jika Edit yang kita Lakukan ternya malah bikin kacau, Maka kita bisa mengembalikan template seprti sedia kala (sebelum di edit).

6. Copy Kode di bawah ini dan pastekan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><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 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>

7. Selesai. Klik Save /Simpan .

Catatan :
*Kode Warna Biru Bisa Anda sobat Ganti Sesuai keinginan.

Baca Juga:
Cara Membuat Related Post / Artikel Terkait Tanpa Gambar Di Blog
SELAMAT BERKREASI.. HAPPY BLOGGING..

Cara Membuat Random Post Sederhana Tanpa Gambar Di Blog

Halloo Sobat Blogger..!!! Beberapa waktu yang lalu saya pernah Memposting sebuah artikel Cara Membuat Random Post Keren Dengan Thumnail/Gambar di Blog. Kalau belum membaca silahkan di baca Artikelnya DISINI ya. Nah postingan Kali ini sebenarnya juga masih berkaitan dengan artikel tersebut yaitu sama sama membuat widget Random Post, cuma bedanya adalah disini widgetnya tidak memakai Gambar, dan yang pasti Effec Loadingnya Sangat ringan Sob. dan artikel ini saya beri judul.

Cara Membuat Widget Random Post Sederhana Tanpa Gambar di Blog.
Sebagai Contohnya Anda bisa Melihat Gambar di Atas Tulisan ini . Oke langsung di simak tutorialnya Ya :

1. Login ke Account Blogger Anda.
2. Silahkan Pilih Tata Letak / LayOut.
3. Pilih Add Gadget/ Tambahkan Gadget.
4. Klik Html / Java Script.
5. Silahkan Copy Dan Paste kan Kode Di bawah ini

6. Selesai, klik Save / Simpan.

Cataan :
Kode Warna Biru adalah Jumlah Artikel yang akan di tampilkan Dalam Random Post. Jadi Silahkan Ganti sesuai Keinginan Sobat.

SELAMAT MENCOBA.. HAPPY BLOGGING..

Cara Membuat Widget Random Pos keren Dengan Thumnail Di Blog

Cara membuat Widget Random Post Keren Dengan Thumnail Di Blog. Perhatikan Gambar Di samping ini Sobat blogger. itu adalah Contoh Widget Random Post Dengan Thumnail / Gambar. dan yang jelas pembuatanya sangat simple, gak perlu edit Template. Menurut saya cukup penting widget ini di pasang di blog, karena dengan begitu Pengunjung / Visitor bisa berkesempatan untuk melihat artikel kita yang lain. ingat ya.. namanya juga Random Post, jadi yang di tampilkan adalah postingan artikel di blog kita secara Acak dan di sertai dengan Gambar. makanya judul posting ini saya kasih Embel embel Keren. heheee... Oke sobat langsung kita simak saja Tutorial Cara Membuat Widget Random Post Keren Dengan Thumnail/Gambar Di Blog di bawah ini :

1. Login ke Account Blogger Anda.
2. Pilih Tata Letak / Lay Out.
3. Pilih Add Gadget / Tambah Gadget.
4. klik Html / Java Script.
5. Copy Dan Paste Kode di bawah ini di kolom Html / Java Script tersebut.

6. Selesai dan Save / Simpan.

Catatan :
Silahkan Di utak Utik sesuai keinginn Sobat ya, Warna Border, Warna Background, jumlah Post yang di tampilkan, Menghilangkan deskripsi, Coment. atau sobat hanya ingin menampilkan judul artikelnya saja.

Baca Juga Artikel Tentang Widget Random Pos yang lain:
Cara Membuat Random Post Sederhana Tanpa Gambar Di Blog.

SELAMAT BERKREASI.. HAPPY BLOGGING..

Cara Membuat ChatBox/Buku Tamu Tersembunyi Di Samping Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Beberapa waktu yang lalu saya pernah menulis dan membagikan sebuah artikel tentang Cara Membuat ChatBox/Buku Tamu di Blog silahkan kunjungi kalau sobat belum membacanya. sebenarnya posting ini merupakan kelanjutan dari postingan tersebut. Nah kali ini saya saya berbagi tentang Cara Mudah Memasang ChatBox/Buku Tamu Tersembunyi di Samping Blog. kenapa saya bilang sangat mudah, karena tips ini tidak perlu ribet meng utak atik alias Edit Template Html. jadi sangat Cocok untuk blogger pemula seperti saya ini. Untuk contoh nyatanya anda bisa lihat di samping kanan blog saya. Oke langsung saja disimak tutorialnya di bawah ini ya :

Cara Mudah Memasang ChatBox/Buku Tamu Tersembunyi di Samping Blog.

1. Masuk ke Account Blogger Anda.

2. Pilih Tata Letak.

3. Pilih Add Gadget/Tambahkan Gadget.

4. Klik Html/Java Script.

5. Copy Kode di bawah ini dan Paste di Dalamnya.

6. Simpan /Save.

Catatan :
Tulisan warna Biru silahkan isi kode Cbox , Shoutbox ataupun Follobox Anda.

SELAMAT MENCOBA.. HAPPY BLOGGING..

Cara Mudah Membuat Menu Horizontal Tanpa Edit HTML Template

Salam Blogger..sebenarnya sudah banyak sekali di bahas tuturial tentang Cara Membuat Menu Horizontal di Blog. mulai dari yang biasa/sederhana sampai dengan yang cukup canggih. kali ini saya akan berbagi tentang bagaimana Cara Mudah Membuat Menu Horizontal Tanpa Edit HTML Template. dari judulnya saja sudah kelihatan bahwa cara ini benar benar sederhana/simple, karena kita tidak perlu repot repot Meng edit/meng Utak atik template. cukup Copy Paste aja Script di Widget. untuk Melihat Contohnya gak perlu jauh jauh, Cukup anda lihat di bagian Atas Blog saya ini.

Oke sobat, Langsung aja simak Tutorialnya di bawah ini :

1. Masuk Ke Account Blogger anda.
2. Pilih Tata Letak.
3. klik Add gadget/Tambahkan Gadget.
4. Pilih HTML java Script.
5. Copy dan Paste kode di bawah ini :

<!doctype html>
<style>.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: big-caps;
background:#000;
border: 2px solid white;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}
</style>
<ul class="float">
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
</ul>
</!doctype>

6. selesai.

Catatan :
*Ganti Kode Warna Pink dengan URL Anda.
*Ganti Kode Warna Biru Sesuai Keinginan Anda.
*Anda juga bisa mengubah warna background, warna border, tebal border dll. Silahkan Kreasikan Sesuai keinginan sendiri ya..

SALAM BLOGGER MANIA..!!!

Mempercantik Blog Dengan Animasi Club Sepak Bola

BISMILLAHIRROHMANIRROHIM

Salam blogger...!!! Mungkin anda pernah melihat sebuah tampilan pada blog di mana pada salah satu sudutnya terdapat gambar animasi. (lihat sebelah kiri tulisan ini) Nah pada posting kali ini saya akan berbagi tutorial cara Mempercantik Blog Dengan Animasi Club Sepak Bola. Jangan kuatir cara membuatnya sangat mudah, tidak perlu edit template blog yang kadang malah bikin kacau.. heheee

Oke ikuti step stepnya di bawah ini ya..
1. Masuk ke Account Blogger Anda.
2. Pilih Tata letak/Add Gadget.
3. Copy dan paste Code di Bawah ini :

Catatan :
* Link berwarna Merah adalah sudut/tempat animasi. silahkan ganti sesuai keinginan anda.
Bottom = Bawah
Top = Atas
Left = Kiri
Right = Kanan
* Link Berwarna Pink adalah sebuah kata yang akan muncul jika kursor di arahkan ke gambar animasi Silahka ganti sesuka hati anda.
* Link berwarna Biru adalah link Url gambar animasi. silahkan ganti dengan URL di bawah ini sesuai gambar yang anda suka.

1. As Roma Logo
Kode :

http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/th_roma.gif