Widget Recent Posts Untuk Blog

Kali ini saya akan membagikan cara untuk membuat widget recent posts di blog.Widget Recent Posts ini merupakan widget yang berisi tentang posting/artikel terbaru sebuah blog.

Dengan adanya widget recent posts ini dapat membantu pengunjung/blogwalking untuk melihat posting/artikel terbaru dari sebuah blog.

Widget ini simple dan tidak memberatkan blog karena hanya menampilkan judul posting/artikel saja tanpa thumbnail gambar posting/artikel.

Nah, berikut ini tutorial cara pemasangan widget recent posts :

1. Masuk ke Dasbor blog anda, lalu klik/masuk ke elemen Tata Letak

2. Klik Tambahkan Gadget, pilih HTML/Javascript

3. Lalu copykan kode dibawah ini :

JS

<ul id="recent-posts"></ul>

<script>

//<![CDATA[

var homePage = "http://wirhanblog.com/",

numPosts = 5;

function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='

<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>

'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>

4. Pada varhomePage ubah/isi sesuai dengan url/link blog anda.

Pada numPosts isi sesuai dengan posting/artikel yang ingin ditampilkan.

Nah, tutorial widget recent posts sampai disini. Semoga tutorial kali ini dapat membantu para blogger. Bila ada pertanyaan, kritik dan saran dapat mengirimkannya melalui kotak komentar dibawah. Terima Kasih, Happy Blogging.

Read more

Berbagi Templates HTML Yang Elegant Dan Responsive

Setelah "membongkar" folder tugas kuliah dulu, secara tidak sengaja menemukan beberapa template website berbasis HTML yang dulu digunakan sebagai pedoman contoh untuk membuat tugas kuliah. Karena daripada hanya disimpan maka kali ini saya akan membagikan beberapa template html ini untuk para bloggers.

Template 1

Yup..ini merupakan template yang saya sendiri juga sangat suka karena tampilan yang elegant dan responsive yang menghadirkan nuansa yang berbeda dari template html yang lain.

Bagi yang ingin mencobanya silahkan download melalui link dibawah ini :

Via Mediafire : Download disini

Via BOX       : Download disini

Template 2

Silahkan download melalui link dibawah ini :

Via Mediafire : Download disini

Via BOX       : Download disini

Template 3

Nah..bagi yang mendapatkan tugas kuliah untuk membuat template html e-commerce dapat menggunakan template ini sebagai bahan acuan.

Silahkan download template ini melalui link dibawah ini :

Via Mediafire : Download disini

Via BOX       : Download disini

 

Dan itulah beberapa template yang dulu saya gunakan untuk membantu tugas kuliah saya dalam membuat template berbasis HTML. Semoga dapat membantu para bloggers yang lainnya juga.

Read more

Menghilangkan Tombol Tang & Obeng(QuickEdit) Di Blog

Tombol Quickedit saat kita sedang dalam keadaan login berfungsi untuk melakukan edit pada widget secara cepat. Fungsi ini sebenarnya penting untuk bloggers yang sering melakukan editing pada widget secara cepat karena hanya dengan mengklik ikon quickedit tersebut bloggers akan langsung diarahkan ke bagian widget laman dan langsung dapat melakukan modifikasi.

Namun, ada juga bloggers yang merasa kurang nyaman dengan tampilan quickedit tersebut. Termasuk saya salah satunya, karena itu kali ini saya akan membagikan cara untuk menghilangkan icon tang & obeng(quickedit) tersebut. Berikut ini caranya :

• Masuk/Login ke akun blogger

• Klik Rancangan/Template

• Klik Edit HTML

• Lalu cari kode berikut

]]></b:skin>

• Ketikkan code berikut diatas code ]]></b:skin>}

.quickedit{display:none;
}

• Klik Simpan/Save Template dan selesai

Nah, jika langkah-langkah diatas diikuti dengan tepat maka, otomatis icon tang & obeng(quickedit) pada tampilan blog akan hilang.

Read more

Membuat Buku Tamu Melayang di Samping Blog

Tentunya para blogger telah mengetahui tentang widget CBox, ShoutBox dsbnya.

Nah kali ini saya akan share bagaimana membuat Widget tersebut melayang di samping Blog sehingga menghemat tempat widget.

Bagi yang belum memliki salah satu widget dari yang saya sebutkan diatas dapat langsung meluncur ke situs penyedianya atau klik DISINI

Saya lebih memilih menggunakan CBox karena proses Registrasi yang mudah, simple, user friendly dan pengambilan script widget yang mudah.

Berikut ini script untuk membuat buku tamu melayang di samping halaman blog

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:200px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6OuYMvaL67GWI3okdnV2PQaWf3i8maVXceWeiNglwMmyD3CVHmFx0maBSzfvO_ALbtf_e_bHDQrU5WZrqI5Wwv2gK8ljz6TIy1IQxA5eoLJLUUjVxjafNCa0pI-32DRm0_EG1LzSjK3z/s128/345o85i.gif') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <!-- SCRIPT CBOX KAMU LETAKKAN DISINI--> <div style="text-align:right"> <a href="javascript:showHideGB()"> [CLOSE] </a> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>

Read more

Menambahkan Fitur Pencarian Atau Search di Blog

Tentunya para blogger telah mengetahui bahwa di blogger sendiri telah menyediakan widget fitur pencarian/search.

Nah, yang ingin merubah widget fitur pencarian/search tersebut dengan yang lebih Simple namun Elegant, saya akan membagikan script fitur pencarian/search untuk para blogger.

Untuk tampilannya dapat anda lihat sendiri di fitur pencarian/search milik saya.

Tanpa panjang lebar lagi, berikut script untuk widget fitur pencarian/search

<div> <style type="text/css"> #search{padding:0}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhHZMpklCJqCXPvLoh0y8C48hcKyFCks97YPR8TGeEMEL6rSzuikZXD1FAEXWs7GcErb8_1U7rAs_Y9R29iXB6l55mGX7FiPjXy6Wjas_tYMTBHjJTSes2CEPoXpQHq3dHZ4MqM1dmQLk/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:210px} </style> <center><form method="get" action="/search" id="search"> <input name="q" type="text" size="50" placeholder="Search Here..." /></form></center> </div>

Happy Blogging

Read more

Tracking JNE Terbaru Dengan Captcha

Kali ini saya akan share tracking jne untuk para bloggers OlShop.

Apa bedanya tracking widget ini?

Tentu ada perbedaan dari beberapa widget tracking yang telah dishare oleh beberapa bloggers lainnya.

Perbedaan terbesar terletak pada captcha.

Widget ini telah terdapat captcha sama seperti dengan situs JNE.

Karena widget tracking lama tidak dapat berfungsi lagi karena tidak memiliki captcha.

Maka kali ini saya mencoba menshare tracking JNE dengan captcha dan sudah ditest WORKING 100%.

Untuk para Blogger OLShop, dapat mencopy - paste script dibawah ini dan letakkan di widget anda.

Untuk pertanyaan dapat meninggalkan komentar.
Berikut script hmtl untuk tracking JNE

<div class="awbTracking normaltext"> <img style="display:block; margin: 0 auto; text-align:center;" src="https://lh4.googleusercontent.com/-BBDsSgW-UMM/UXWLhCDCStI/AAAAAAAAAEk/aDcKWhpYrQ0/s720/JNE2_zpsc1f656b4.png" alt="Description" border="0" height="100" width="120" /> <form action="http://www.jne.co.id/index.php?mib=tracking&amp;lang=IN" method="post" target="_blank"><b>KETIK NO.RESI ANDA</b><br /> <input class="awbTrackingInput" size="25" id="awbnum" name="awbnum" type="text" /><br /><br /> <b>KETIK CAPTCHA DIBAWAH INI</b> <img id="captcha" alt="" src="http://www.jne.co.id/captcha2.php" width="140" /><br /> <a id="change-image" onclick="document.getElementById('captcha').src='http://www.jne.co.id/captcha2.php?'+Math.random(); document.getElementById('jneForm').focus(); return false;" href="#"><u>Not readable? Change text.</u> </a><br /><br /> <input class="awbTrackingInput" name="captcha" type="text" /><br /><br /> <input style="border-radius: 5px 5px 5px 5px; width:80px; font-family:Arial;" id="trksubmit" name="submittracking" value="Check" type="submit" /> </form> </div>

Untuk Demo dari tracking widget ini dapat mengunjungi Blog Shop saya di MyShop

Happy Blogging

Read more

Polisi Online - www.polisionline.com

Kali ini saya akan memberikan sebuah website yang sangat luar biasa.
Karena maraknya penipuan belanja secara online, maka terlahir sebuah web blog yang menginformasikan tentang Toko Online yang masuk ke ketegori Whitelist dan Blacklist.

Dan tentunya semua info tersebut dapat kita lihat melalui web www.polisionline.com

Jadi buat para shoppers online, yang sering berburu barang online dapat menjadikan web Polisi Online ini sebagai acuan apakah OL Shop yang anda kungjungi merupakan OL Shop terpercaya atau tidak.

Untuk info lebih rinci dapat langsung mengarah ke web polisionline.com

Thanks buat pencetus web polisionline.com ini, karena sangat banyak membantu para shoppers online dalam berbelanja.

Read more