Cara Mudah Membuat Tabel Di Postingan Blog

Cara Mudah Membuat Tabel Di Postingan Blog_ Di dalam sebuah blog yang banyak saya kunjungi terutama pada blog yang berisikan penjelasan tentang spesifikasi suatu produk elktronik, sebagai contoh Handphone (HP), Laptop atau Komputer dan masih banyak lagi. Mereka mengambil langkah ini yaitu untuk memudahkan para pengunjung blog membaca artikel di blog mereka, selain itu tabel juga terkesan lebih rapi.

Untuk pembuatannya sebenarnya ada berbagai cara, baik melalui kode-kodenya atau melalui Microsoft Word, atau mungkin masih banyyak lagi namun tidak saya sebutkan disini. Dan di postingan kali ini saya akan share caranya membuat tabel dalam postingan blog dengan sangat mudah menggunakan Microsoft Word. Kenapa menggunakan Microsoft word ? Karena sangat mudah dan kita tidak perlu repot-repot membuat atau merancang kode-kode yang begitu rumit untuk kita hafalkan. 

Baiklah silahkan ikuti langkahnya;

1. Buka Microsoft Word versi berapa saja (2003/2007/2010/2013) dan masuk ke menu Insert > Table dan seting table yang kamu inginkan.

2. Jika Sudah selesei membuat table, maka save halaman kamu dan pilih save as type > Web Page, Filtered

3. Kemudian masuk ke folder tempat kamu menyimpan table tadi, klik kanan pada file dan "open with Notepad", disini akan muncul kode HTML yang bisa kamu masukkan di dalam postingan blog kamu.

4. Setelah kode HTML tersebut di copy, masuk ke dalam blog, pilih HTML dan masukkan kode tadi di dalam mode html tersebut.

5. Jika selesei Publish artikel kamu.

NB: Jika kita membuat dan sudah mepastekannya di halaman pembuatan postingan, maka tidak akan muncul jika sobat menggunakan versi compose. Jadi tabel akan muncul setelah di publish, dan sobat bisa lihat dengan cara membuka postingan yang sobat buat tadi.

Selain desainnya yang rapih, ternyata ada kelebihan lainnya dari pembuatan tabel melalui Microsoft Word ini yaitu tampilan tabel akan terlihat dengan baik meski pengunjung blog menggunakan perangkat mobile dalam membukannya. Dan semoga artikel ini bermanfaat buat sahabat G-aNkar BloG, karena tujuan utama saya menulis yaitu untuk penyimpanan saya saja bila suatu saat saya membutuhkannya. Dan selebihnya ya buat di share, toh membagikan ilmu yang telah di dapat dan dapat bermanfaat pastinya akan mendapatkan balasannya kelak di alam sana, amin.

Cara Membuat Tombol Download & Demo Di Blog

G-aNkar BloG. Berawal dari rasa penasaran pada suatu blog yang memiliki tombol download dan demo yang simpel lalu saya berusaha mencari triknya,, ternyata itu sangat mudah untuk di lakukannya. Sedikit kode CSS dan Kode pemanggilnya dalam sebuah postingan.

Baca juga:  Modifikasi Home Page Jadi Valid Html5

Sebenarnya cara ini di tujukan untuk mempermudah kita dalam pembuatan tombol download dan demo di suatu postingan blog, sehingga kita tidak perlu repot-repot membuat kode CSS di setiap membuat suatu postingan atau artikel. Langsung saja pada langkah pembuatannya,

Cara Membuat Tombol Download & Demo Di Blog

1. Taruh kode dibawah ini diatas kode ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

2. Save template.
3. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http:/azhallea.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http:/azhallea.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Cara diatas adalah tombol halaman demo yang biasa saja tapi bagi anda yang ingin membuat halaman demo menggunakan halaman statis atau menggunakan toolbar seperti di BTemplates, ZoomTemplates, ThemeForest, adalah seperti berikut ini :

1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.

Berikut ini adalah cara membuatnya :

1. Buat Halaman Statis dengan judul Demo atau Demo Template dll.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.
2. Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#view { padding: 0; margin: 0; border: 0; position: fixed; top: 50px; left: 0; right: 0; bottom: 0; width: 100%; height: 93%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFO2nLpVMDzO3xLwkUNrGMi9G3WMRfGtDjL_2_Jm5CHyC8R1NX0VVMPUz8EhFRY37fgJ6LdLSXIOXVXQN2-PoowxP03SfRd-Q_wtQiY9FImxULXWkd-7kQsbQud02xe7LCemDKmCfOBA/s1600/loader.gif)no-repeat center center; transition:all .4s ease-out; } #tab-demo { width:100%; height:50px; top:0; left: 0; background:#222; color:white; font:normal 13px Arial, sans-serif; z-index:99999; position:fixed; } .closebutton { background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/s1600/close.png)no-repeat 15px 50%; text-align:center; height:50px; padding:0px 20px 0px 50px; position:fixed; top:0; right:0; line-height:50px; cursor:pointer; color:white; } a.closebutton {color:white;text-decoration:none;} .closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/s1600/close.png)no-repeat 15px 50%} .dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/s1600/download.png)no-repeat 15px 50%} .dlbutton, a.dlbutton { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/s1600/download.png)no-repeat 15px 50%; text-align:center; height:50px; padding:0px 20px 0px 55px; position:fixed; top:0; right:158px; line-height:50px; cursor:pointer; color:white; text-decoration:none; } .demologo, a.demologo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOC9BMWYuZk7BnlPt1uloU5Y3wz8pwi2gue_-1-EvhyphenhyphenLdom3YP_JG5ac70jVd2IkVROous58rWVapEmglbF5KAR1nEn_3nMriodOcvg2DaRdSil2r8Ge8OFLjlv-wCIPOlXkPBlXKa1Kk/s1600/ki-logo.png)no-repeat left center; padding-left:55px; font-size:17px; font-weight:normal; font-family:Oswald, Arial, Sans-serif; text-transform:uppercase; line-height:50px; left:15px; position:fixed; color:white; text-decoration:none; }

3.Simpan kode ini tepat di bawah <body>

<b:if cond='data:blog.url != &quot;http:/azhallea.blogspot.com/p/template-demo.html&quot;'>

Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti :

http:/azhallea.blogspot.com/p/demo.html

4.Simpan kode ini tepat di atas </body>

</b:if> <b:if cond='data:blog.url == &quot;http:/azhallea.blogspot.com/p/template-demo.html&quot;'> <script type='text/javascript'> //<![CDATA[ function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } window.onload = function() { var url = getQueryVariable("url"); var download = getQueryVariable("download") document.getElementById('view').src = url; document.getElementById('dl').href = download; }; //]]> </script> <div id='tab-demo'> <a class='demologo' href='http:/azhallea.blogspot.com/'>KI Template Demo</a> <a class='dlbutton' href='' id='dl'>Download</a> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a> </div> <iframe id='view'/> <style> body { background:white; } </style> </b:if>

Ganti lagi kode yang ditandai dengan URL halaman blog demo sobat.

Cara Penulisan

Untuk pemanggilan URL template dan link download, gunakan format seperti ini :

http:/azhallea.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini

Semoga artikel dari blog Seocips ini bermanfaat bagi sobat semua, silahkan di praktekan. Follow blog ini yah sob,, 

Modifikasi Homepage Jadi Valid Html5

Modifikasi Homepage Jadi Valid Html5 adalah langkah menuju kemajuan suatu blog seiring berkembangnya suatu blog di mata dunia. Meski berlebelkan blog gratisan, namun di mata dunia dunia blog di jadikan solusi utama dari beragam jenis usaha. Ada yang memanfaatkan untuk promosi usaha namun juga ada yang cuma sekedar hobi saja.

Gambar saya samarkan

Blog yang ringan dan menarik serta tidak meninggalkan keSEOannya maka akan di sukai para pengunjungnya, pengunjung akan bosan jika blog memiliki desain yang tidak menarik sama sekali. Terlebih jika blog tersebut memiliki loading yang sangat lama untuk dapat menampilkan semua isi blognya secara sempurna, maka saya kasih solusi untuk sobat blogger agar dapat mengurangi beban loading dari blognya.

Cara yang saya kasih sebenarnya sudah banyak di lakukan  oleh para blogger, yaitu hanya membuat postingan hanya terlihat judulnya saja baik di Halaman Utama (Home page) atau Halaman Labelnya. Langkah pembuatannya pun sangat mudah, dan sesuai judulnya saya sudah validkan tutorial saya. Saya membuat postingan seperti ini berdasarkan postingan yang saya jumpai dari blog DINAMIKA, namun setelah saya praktekan di salah satu blog saya ternyata masih belum sesuai keinginan. 

Lalu saya coba otak-atik ternyata masih kurang title saja, maka saya tambahkan kode expr:title='data:post.tiitle' untuk membuat judul postingannya menjadi lebih SEO. Namun saya masih ragu apakan blog saya sudah memenuhi syarat atau belum, tetapi blog yang saya buat setelah satu hari bahkan belum sehari saja sudah terindex di google search engine dan dalam waktu dua hari sudah memiliki peringkat 14.264.847 di mata tante alexa.

Baiklah ini dia caranya membuat postingan blog hanya terlihat judulnya di halaman utama (hom page) dan halaman label.

Cara jitu mengatasi masalah itu kita hanya sedikit memasukan beberapa Tag Conditional dan kode CSS sehingga pada waktu membuka halaman utama (homepage) dan halaman label hanya menampilkan judul posting yang akan mengurangi waktu loading ketika membuka halaman tersebut.

Sebenarnya bukan hanya pada 2 halaman tersebut tetapi juga pada halaman arsip (archive page) dan halaman pencarian (search page).

Langkah langkah penerapannya:

1. Login akun Blogger anda.

2. Template - Edit HTML

3. Cari kode <b:include data='post' name='post'/>, lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<a expr:href='data:post.url' expr:title='data:post.title'>

<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#333;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>

<data:post.title/></div></a>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

kode ini merupakan untuk menampilkan hanya judul posting pada semua halaman kecuali halaman posting dan halaman statis.
Kode yang warna hijau merupakan kode CSS silahkan kamu sesuaikan sendiri.
Kalau kamu hanya ingin merubah halaman utama atau halaman label saja ganti kode Tag Conditionalnya saja.


Untuk Halaman Utama, ganti kode :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>

 
dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'>

Untuk Halaman Label saja, ganti dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'>

Saya rasa segitu saja cara yang bisa saya bagikan, kurang lebihnya mohon maaf jika tutorial saya tidak benar atau salah pemahamannya. Jika mau mempraktekan silahkan,, atau jika mau lihat demonya silahkan klik tulisan demo ini.

 DEMO 

Sumber: Dinamika 

Membuat Recent Post Seo Valid HTML5

Recent Post atau Artikel Terbaru ini memang lebih bagus di bandingkan dengan pupuler post, tapi kebanyakan para sahabat blogger tidak menyadarinya. Namun jika sobat mau menggunakan populer post, saya sarankan menngunakan opsi mingguan. Biar semua post bisa naik dalam indexnya di google, baiklah mari kita pelajari triknya.

Maaf jika gambarnya tidak sopan, karena saya ambilkan dari blog sebelah.

Membuat Recent Post With Thumbnail Seo Valid HTML5

Langkah 1

Login ke akun blogger sobat.

Langkah 2

Masuk ke Tata Letak atau Layout.

Langkah 3

Add Gadget lalu pilih Html/javascript.

Langkah 4

Copy kode berikut lalu pastekan di gadget tersebut,

<div class="widget-content">
<style scoped="">
img.recent_thumb {width:72px;height:72px;float:left;padding:3px;margin:0 2px 2px 0;}
.recent_posts_with_thumbs {font-weight:bold;font-size:24px;}
ul.recent_posts_with_thumbs li {font-size:18px;color:#888;overflow:hidden;}
.recent_posts_with_thumbs a {text-decoration:none;font-weight:normal;}
.recent_posts_with_thumbs normal {font-size:20px;}
</style>
<script type="text/javascript">
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)

{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MEdeRtrAvt6I6bvdoaGrqSNltW8OEOhbY1yhztpGM9VSKAkeVIuHYmv2MscMgQHRA1G6dY4fvTPpMfITlSwfl15jjcRta2hdSnpMiTiZxjWshdEGDKIAVM08s_I62e8wGkgh92FT9XAX/s320/noimage.png';
}

var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');

if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'"/>');
document.write('<b><a class="alink" href="'+posturl+'" title="'+posttitle+'" target ="_blank">'+posttitle+'</a></b><br>');
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");

if (showpostsummary == true) {
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='Add Comment';
commenttext = '<a class="alink" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a class="alink" href="'+posturl+'" title="'+posttitle+'" class="url" target ="_top">More -></a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}
//]]>
</script>
<script>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://azhallea.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs" type="text/javascript"></script>
</div>

Keterangan:
*Ganti link "http://azhallea.blogspot.com" dengan link blog sobat.

*Untuk ukuran teks silahkan ganti angka 18 dengan kesukaan sobat dan sesuai template blog sobat tentunya.

Langkah 5

Save html/javascript tersebut lalu lihat hasilnya di blog sobat.

Langkah 6
Jika memang sudah muncul widgetnya di blog sobat maka sobat buka template sobat lalu hapus kode berikut "<b:include name='quickedit'/>" agar benar-benar valid html5.

Langkah 7
Save template sobat

Selesai sudah postingan saya mengenai Recent Post With Tumbnail Seo Friendly Valid Html5, jika ada yang bingung silahkan berkomentar dan atau jika mau merepost mohon sertakan link sumber yah.

Cara Mudah Menyembunyikan Files, Folders, Atau Drives

Setelah beberapa hari saya tidak update maka setelah selesai melakukan ritual di 7 sumur keramat maka saya akan berbagi ilmu paling tidak bermanfaat dan tidak perlu di simak yaitu mengenai trik komputer yang saya kasih judul "Cara Mudah Menyembunyikan Files, Folders, Atau Drives". Tuhkan,, !!! Dari judulnya saja dah ketahuan ini tidaklah berguna tapi rapopo lah, yang penting berbagi.

Kembali ke pokok pembiacaraan, yaitu mengenai "Cara Mudah Menyembunyikan Files, Folders, Atau Drives", sebenernya sangat mudah, sobat hanya harus mengatur file, folder atau drive sobat dari read only e hidden. Lalu klik "Tools" pilih opsi "Folder Options". setelah itu klik "view" dan pilih opsi "Don't show hidden files, folders, or drives". Dan terakhir klik "Ok", maka selesai sudah anda menyembunyikan file, folder atau drive sobat.

Untuk lebih jelasnya saya buatkan tutorial melalui gambar juga,, heheeee basi banget yah.

1. Pilih file, folder atau drive yang mau sobat sembunyikan, klik kanan pada file tersebut lalu pilih opsi "Properties".

2. Setelah itu, klik hanya kotak kecil disamping tulisan "Hidden". Lalu klik "Ok"

3. Setelah sobat melakukan langkah di atas maka file atau folder sobat akan tampak menjadi samar-samar. Setelah itu kita sembunyikan file atau folder tersebut agar benar-benar tidak muncul di layar. Caranya sobat klik "Tools" lalu pilih atau klik "Folder Options".

4. Lalu muncul jendela baru, di sana ada tiga pilihan yaitu "General, View dan Search", sobat pilih saja "View", lalu lihat ke bawah, sobat pilih opsi "Don't show hidden files, folders, or drives" lalu klik "Ok" sob.

Taaaaraaaaaaaa....... setelah sobat klik tombol "Ok" maka sekarang file, folder, atau drive sobat sudah hilang. Sobat bisa mengembalikannya dengan memilih opsi ke dua pada langkah ke 4 yaitu "Show hidden files, folders, or drives". Sangat mudah kan postingan yang saya kasihkan, makanya ini disebut ilmu yang tidak bermanfaat. hahaa salam sukses semua sob.

Membuat Widget Followers Valid Html5

Membuat Widget Followers Valid Html5 tentunya sangat di anjuarkan untuk menjaga validasi blog kita, selain itu dengan menambahkan widget followers GFC (Google Friend Connect) ini kita sama-sama menguntungkan antara yang punya blog dan yang jadi pelanggan atau pengikut blog. Keuntungannya adalah setiap kita membuat postingan baru maka akan secara otomatis muncul di setiap halaman dashboard blog mereka dan bagi mereka yang mengikuti blog kita juga mendapatkan keuntungan yaitu bisa mendapatkan ilmu baru dan teruptodate tentunya karena biasanya mereka berlomba-lomba merebutkan posisi pertama dalam berkomentar, hahaa...

Namun perlu di garis bawahi, tidak hanya mengikuti langkah-langkah disini widget followers sobat sudah valid html5, tentunya belum dong. Karena sobat harus menghapus kode <b:include name='quickedit'/>, mencarinya di dalam edit html template sobat, biar cepet gunakan Ctrl+F atau F3. Namun ada juga blog yang tidak tersedia widget followers blognya, jadi harus bagaimana ? Baca artikel saya yang berjudul "Widget Pengikut Atau Followers Blog Tidak Ada ? Ini Solusinya !".

Baiklah langsung saja ke cara pembuatan atau modifikasi widget followers Valid Html5;

Langkah 1. Tambahkan widget pengikut GFC tersebut caranya klik Tata Letak >>> Add Gadget >>> Gadget Lainnya >>> Pengikut.

Langkah 2. Buka blog sobat klik kanan terus klik Lihat Sumber Laman atau View Page Source

Langkah 3. Gunakan F3 lalu pastekan tulisan ini "renderMembersGadget", lihat gambar.

Langkah 4. Sobat buat widget followers baru secara manual melalui Html/javascript. Caranya copy kode berikut di Html/javascript tersebut.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4724892674912649425" style="width:160px;border:1px solid #ff4800;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#000';
skin['ENDCAP_BG_COLOR'] = '#ff0000';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#f0ff00';
skin['CONTENT_BG_COLOR'] = '#ddd';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-4724892674912649425',
   site: '08076711013844680272'},
  skin);
</script>

Ganti kode berwarna merah dengan kode id sobat yang di cari tadi, sedangkan yang biru ganti dengan kode site blog sobat.

Langkah 5. Untuk memaksimalkan valdasinya hapus widget bawaan bloogernya (Langkah 1) dan juga hapus kode <b:include name='quickedit'/>, itu bertujuan untuk menghilangkan gambar obeng di blog biar benar-benar valid html5.

Seelamat widget tersebut sukses di validasikan di blog sobat. Untuk memodifikasi warnanya lihat keterangan berikut.

Keterangan :

1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR (Background atas / contoh gambar warna merah)
3. ENDCAP_TEXT_COLOR (tulisan : With Google Friend Connect)
4. BORDER_COLOR (garis dibawah blok merah)
5. CONTENT_HEADLINE_COLOR (Tulisan Member 530)
6. CONTENT_LINK_COLOR (tulisan More dan Sign in)
7. Garis pinggir, ganti kode warna #ff4800
8. FACE_SIZE (ukuran avatar)
9. CONTENT_BG_COLOR (background bawah)
10. CONTENT_TEXT_COLOR (tulisan Already a member?)

Kode skin['NUMBER_ROWS'] = '4'; adalah berapa baris avatar ditampilkan. Ganti angka 4 sesuai keinginan. Sesuaikan juga lebar widget dengan mengganti kode 300px. Jika widget di tarus di sidebar berukuran 160 maka tinggal ganti saja angka 300 dengan 160.

Demikianlah Cara Membuat Widget Followers Valid Html5 source blog kang ismet. Jika ada pertanyaan silahkan berkomentar.

Widget Pengikut Blog Tidak ada ? Ini solusinya !

Widget Pengikut Blog Tidak ada ? Ini solusinya ! , ini topik pembahasan saya kali ini. Sebenarnya ini salah satu pengamalan buruk bagi saya dalam mengelola blog-blog jelek saya. Bahkan mencari di google pun tidak menemukan jawabannya, saya coba masuk ke forum diskusi google dengan kata kunci permasalahan saya tapi al hasil sama saja.

Untuk demo widget ini bisa klik gambarnya.

Kemarin tepatnya saya searching lagi di google dengan kata kunci "Kenapa widget followers blog tidak ada atau tersedia ?" , setelah loading selesai ternyata di halaman utama belum ada, buka halaman ke-2 pun belum menemukan jawaban atas pertanyaan saya. Lalu buka lagi halaman ke-3 dan ke-4 pun masih belum, hampir putus asa dengan keyword itu tapi saya buka lagi halaman ke-5 dan ternyata ada artikel yang menarik perhatian saya yang berjudul "Modifikasi Tampilan Widget Followers GFC", ini adalah karya +Kang Ismet 

Saya langsung buka saja tuh artikel, ternyata selesai membaca postingannya awalnya saya putus asa juga. Berbagai cara yang saya lakukan ternyata tidak membuahkan hasil, pada akhirnya terlintas di pikiranku membuka dashboard blog saya, di sana saya melihat ada 5 followers yang mengikuti blog saya. Saya klik dengan penuh harapan bisa mendapatkan kode id dan kode site blog saya agar bisa membuat widget followers blog sesuai arahan dari artikelnya +Kang Ismet .

Setelah itu lerlihat halaman seperti berikut,

Nah setelah sampai ke tahap itu saya coba lihat sumber halamannya, saya cari-cari kode id dan sitenya. Waaaoooooooo,, ada di situ rupanya kodenya. Dengan girang saya langsung praktekin ilmu +Kang Ismet  tadi. Akhirnya saya berhasil membuat widget followers di blog. Untuk mengetahui kode id dan sitenya silahkan lihat halaman sumber saya.

Pada gambar di atas di baris ke 50 dan 68 terdapat kode id blog saya dan di baris ke 72 ada kode sitenya. Dan untuk pembuatan widgetnya sendiri silahkan baca artikel saya berikutnya. Jika sobat mau menyebar luaskan artikel saya tolong sertakan link sumbernya. Semoga cara ini bermanfaat buat sobat yang mengalami masalah yang sama dengan saya.

Membuat Author Box Dengan Tombol Follow Di Blog

Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog adalah hasil dari saya berkunjung ke blognya mas Arie Adie, di sana saya liat artikel yang menarik mata dan perhatian saya. Ternyata benar, artikel Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog sangat keren. Permainan CSS nya membuat saya kagum karena saya sendiri tak pernah terfikirkan kode-kode yang rumit seperti itu.

Mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink. 

Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapat form email subscriber dan tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog.

Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog

1. Masuk ke dashboard blogger sobat.

2. Klik Template lalu Edit Html.

3. Cari kode ]]></b:skin>, letakkan kode CSS berikut di atasnya;

/* Author Box */
.azhalleablogspotcom-boxauthor{ position: relative; margin: 25px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; }
.titlebox h3{ padding: 10px 0px 10px 25px; color:#fff; font:bold 14px Georgia; background: #00008b; margin:0px 0px 0px -22px; width:524px; }
.titlebox h3 a {color:#fff;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; }
.titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; }
.boxcontent a { color: #000; text-decoration: none; }
.boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052;; }
.boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; }
.boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; }
.boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; }
.linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; }
.email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:8px 10px; position:absolute; right:-20px; top:0; display:block; }
.email-button:hover{ background:#00ff00; text-decoration:none !important; }
.wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; }
.email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; }
.email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; }
.azhallea-social{ overflow: hidden; float: right; }
.azhallea-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; }
.azhallea-social a:hover{ border-radius: 0px; }
.azhallea-social div{ float: left; margin: 5px 5px 0 0; width: 70px; }
.azhallea-social .azhalleafacebook a{ padding: 9px 0px; text-align: center; background: #3B5999; }
.azhallea-social .azhalleafacebook a:hover{ background: #52e052; }
.azhallea-social .azhalleagoogleplus a{ padding: 9px 0px; text-align: center; background: #D54135; }
.azhallea-social .azhalleagoogleplus a:hover{ background: #52e052; }
.azhallea-social .azhallearss a{ padding: 9px 0px; text-align: center; background: #fb8938; }
.azhallea-social .azhallearss a:hover{ background: #52e052; }

4. Jika sudah menaruhkan kode CSS tersebut lalu cari kode <data:post.body/>, pastekan kode berikut di bawah kode <data:post.body/>;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='azhalleablogspotcom-boxauthor'>
<div class='boxauthor_photo'>
<img src='http://lh4.googleusercontent.com/-GmR-gMwB3Hc/AAAAAAAAAAI/AAAAAAAAAXI/NGQoiLnnIrs/s512-c/photo.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</h3></div>
<div class='boxcontent'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
</div>
<div class='linediv'/>
<div class='wrap-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/GulgY&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/GulgY'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='email-button' title='' type='submit' value='Submit'/>
</form>
</div>
<div class='azhallea-social'>
<div class='azhalleafacebook'>
<a href='https://www.facebook.com/Ex.Pray.Beadboys' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='azhalleagoogleplus'>
<a href='https://plus.google.com/111919785834589879854' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='azhalleasrss'>
<a href='http://feeds.feedburner.com/blogspot/GulgY' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br><span style='font:10px arial;float:right;padding-top:5px;'><a href='http://azhallea.blogspot.com/2014/05/membuat-author-box-dengan-tombol-follow.html' target='_blank'><b>[ Get This Widget ]</b></a></span>
<div style='clear:both;'></div>
</div>
</b:if>

5. Save template sobat, lalu lihat postingan sobat apakah sudah muncul atau belum.

DEMO

Tolong jangan hapus link creditnya jika sobat menghargai usaha saya. Demikianlah artikel  Cara Membuat Author Box Dengan Tombol Follow Di Bawah Postingan Blog. Semoga bermanfaat buat sobat semua, khususnya pengunjung blog ini. Source: Mas Arie adie

Membuat Like Box Facebook Auto Hide Di Blog

Like Box Facebook adalah suatu halaman atau fans page pada situs jejaring sosial Facebook yang di usung dengan sedemikian rupa pada suatu blog menggunakan sekumpulan kode. Biasanya para admin blog menambahkan widget Like Box Facebook ini agar pengunjung blognya dapat mengikuti update-an dari blog melalui Facebook. Sangat bermanfaat sekali tentunya menggunakan widget ini, selain tampilannya yang menarik, widget Like Box Facebook Auto Hide ini tidak memakan tempat pada blog sobat.

Karena dengan berbagai kelebihan dari widget ini maka semua sahabat blogger harus memasangnya, sediakan tempat khusus bagi pengunjung atau pengikut blog anda. Dalam tampilannya sendiri, widget ini menampilkan wajah-wajah para fans halaman blog sobat. Sehingga menguntungkan juga bagi mereka karena dengan tidak sengaja profil facebook mereka di lihat ratusan bahkan sampai ribuan orang perharinya, yang salah satu di antara mereka pasti ada yang tertarik untuk meng-ADD profil facebook tersebut.

Baiklah mari kita mulai Cara Mudah Membuat Like Box Facebook Auto Hide Di Blog Valid HTML5;

1. Masuk akun Blog sobat

2. Pilih menu Template lalu Edit HTML

3. Masukan kode berikut di atas kode </head>

• <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>

Simpan template.

Jika sudah ada kode di atas maka tidak perlu menambahkan lagi

4. Kemudian masuk ke menu Tata Letak atau Layout

5. Klik Tambahkan Gadget atau Add Gadget

6. Pilih Html/javascript, lalu copy kode berikut dan pastekan di dalamnya.

• Untuk kodenya klik disini

7. Setelah selesai mendownload, silahkan ambil script kodenya dan masukan di Html/Javascript tadi. 

8. Simpan Perubahan

Dan sekarang tinggal sobat buka blognya apakan sudah muncul widgetnya atau belum, jika belum silahkan cek lagi apakah kodenya atau langkahnya tidak ada yang kurang. Demikian postingan saya mengenai Cara Mudah Membuat Like Box Facebook Auto Hide Di Blog, semoga postingan ini bermanfaat buat sobat semua.

Cara Mudah Edit Template Bagi Newbie Ala Mz Prayit

Cara Mudah Edit Template Bagi Newbie Ala Mz Prayit adalah pilihan terbaik bagi para sahabat blogger yang baru mengenal kode-kode HTML. Karena cara yang akan saya share adalah cara saya sendiri dalam memahami tata letak kode template saya, jikapun sudah ada yang membuat postingan seperti saya ini itu saya tidak meniru atau asal copy paste. Ini adalah asli pemikiran saya, jika merasa bermanfaat silahkan baca sampai selesai postingan saya.

Pada dasarnya sebuah template hanyalah susunan kode Html dengan segala trik pengaturannya yang di sebut CSS (mungkin sih, hheee), karena tanpa di dampingi kode CSS maka temlate blog tidak akan jadi atau error. Adapun kode-kode pendukung atau mungkin memang di haruskan yaitu seperti kode Javascript atau masih banyak lagi (saya juga belum paham :p).

Jadi cara saya ini hanya memanfaatkan fitur yang sudah ada saja pada laptop saya,, hahaa... saya pake tombol di keyboard saya yang bertuliskan F12 [Scr Lk]. Menurut saya cara ini juga bisa kita gunakan untuk menduplikasikan template orang lain di template kita. Dan berikut Cara Mudah Edit Template Bagi Newbie Ala Mz Prayit, silahkan di simak.

1. Masuklah ke akun blogger sobat,

2 Klik Template_Edit HTML, setelah terbuka kode-kodenya silahkan sobat buka blog sobat di tab baru dan tekan tombol F12 pada baris teratas di keyboard sobat. Sebagai contoh saya gunakan blog saya ini. 

* Gambar diatas setelah blog terbuka lalu tekan F12, kotak sebelah kiri adalah bagian Elements dan bagian kana kode CSS-nya.

3. Misalkan saya mau mengedit header yang tadinya memakai background berwarna biru dan saya ganti dengan hijau maka caranya seerti berikut;

* Jika mau mengedit bagian header (yang di block warna biru pada gambar di atas) maka kita cari kodenya di bagian Elements, setelah itu kode CSS-nya akan muncul di bagian Style pada kotak sebelah kanan, lalu kita saya klik kotak kecil yang berwarna biru dan kode HTML dari warna biru tersebut. Maka akan tampak seperti gambar di bawah ini.

* Terlihatkan headernya berganti dalam sekejap menjadi warna hijau, namun itu tidak akan berubah selamanya jika sobat tidak merubahnya pada HTML template sobat, makanya kita membuka dua tab yaitu untuk mempermudah pencarian kode yang harus di rubah di dalam template kita.

4. Cari kode #header-wrapper dalam template sobat lalu cari kode backgroundnya, contoh di template saya kodenya #0000CC (biru) dan saya ganti #066D0E (hijau tua). Setelah itu simpan templatenya dan selesai. Perubahan sadah berhasil di template sobat.

Untuk kode yang lainnya silahkan sobat coba sendiri, caranya sama dengan yang saya jelaskan di atas. Jika bingung silahkan bertanya pada form komentar di bawah.

Admin Prayit