Cara Menampilkan Widget Tertentu di Halaman Tertentu


Pernah suatu ketika saya mengunjungi sebuah blog, ada sesuatu yang aneh di blog tersebut, ketika saya memasuki halaman post nya, widget A yang tadi ada, di halaman home page, ketika sudah di dalam postingan,kok widget A tadi hilang ya? saya masih binggung, terus saya masuk lagi ke halaman statistik nya, lahhh kok semua widget udah hilang, cuma ada halaman post doang, tadi di halaman home page semua widget ada?

Dari situlah saya makin penasaran, ternyata setelah saya googling, untuk memuncul kan widget tertentu di halaman tertentu, kita hanya menggunakan HTML untuk mengakali nya, misal nya
di home page widget A muncul, ketika di halaman post widget A sudah hilang,disini kita cuma menggunakan HTML untuk menghilangkan nya, dan memunculkan nya kembali, terserah di halaman mana saja kita mau

Berikut Adalah Kode Html nya

1. Menampilkan Widget Hanya di Halaman Depan Saja (Homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di Semua Halaman Kecuali Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan Widget Hanya di Halaman Archive Saja
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan Widget di Semua Halaman Kecuali Halaman Archive
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan Widget Hanya di Halaman Posting
<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan Widget di Semua Halaman, Kecuali Halaman Posting
<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan Widget Hanya di Postingan Tertentu Saja
<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan Widget Selain di Postingan Tertentu
<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan Widget di Semua Halaman, Kecuali Halaman Staticpages
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Tanda ...................... ini di isi dengan kode widget

Contoh:
di halaman postingan ada widget fanspage facebook, kemudian kita ingin menghilangkan nya ketika di halaman post, penulisan kode nya begini, kita ambil kode HTML yang nomor 5, karena kode ini widget nya nanti hanya muncul di halaman postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#fanspage{display:none;}
</style> 
</b:if>

Kenapa ada kode <style> di dalam html itu? itu karena di dalam nya kita menggunakan css, jadi harus menggunakan tag style, jika kita menggunakan HTML saja untuk memunculkan widget nya apakah bisa? bisa, asal ngerti aja penempatan kode widget nya, seperti contoh untuk HTML saja

<b:widget id='HTML4' locked='false' title='fanspage' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>
Kode warna merah adalah salah satu html pengatur widget tadi

Begitulah cara memunculkan widget tertentu di halaman tertentu, agak pusing memang, tapi jika sudah tau maksud kode nya, sangat mudah jika di terapkan, sekian dan Terima kasih.

Cara Upload File CSS, Html dan Javascript di Google Drive


Kalian biasa nya upload upload file css,html, javascript dimana sih? google code kan? tahun lalu google menginformasi kan bahwa google code yang dulu sering kita gunakan untuk upload file Css, Html dan Javascript sudah di tutup, tentu nya jika google code sudah tidak aktif lagi, masih banyak hosting hosting gratis diluar sana yang masih banyak bertebaran

Saya masih tidak jauh jauh dari google, sebagai alternatif saya biasa nya upload di google drive, sama seperti google code, hosting disini juga support file Css, Html, Javascipt tentu nya akan terbaca kok file nya di blog kalian

Ikuti tutorial di bawah ini, cara upload dan memasukkan file nya ke blog kalian

1. Login dulu ke akun google kalian,lalu buka situs https://drive.google.com/

2. Lalu pilih New > file upload kemudian pilih file yang mana ingin kamu upload


3. Jika sudah selesai, akan muncul tampilan kayak gini, kemudian klik Share


4. Kemudian klik Advanced


5. Lalu klik Change


6. Pilih On - Public on the web lalu Save


7. Copy link nya, dan simpan dulu di notepad


8. Supaya script nya berjalan, ganti link nya dengan seperti di bawah ini

Biasa nya link yang di berikan seperti ini kan
https://drive.google.com/file/d/0B6tBFO4SFixhWWtpVDJUUDFZRXc/view?usp=sharing
Perhatikan kode yang warna merah, itu adalah kode unik nya, supaya script nya terbaca di blog kamu

Lalu ganti dengan link berikut
https://googledrive.com/host/KODE UNIK GOOGLE DRIVE
Ganti kode warna merah dengan kode unik yang sudah kamu copy tadi, sehingga menjadi
https://googledrive.com/host/0B6tBFO4SFixhWWtpVDJUUDFZRXc
Begitulah cara upload file Css, Html, Javascript di google drive, Semoga Bermanfaat.

Cara Memasang Tool CSS Minifer di Blog


Buat kamu yang hobi ngedit blog, pasti pernah dong menjumpai tool tool seperti tool color hex, html compressed, tag pre compressed, mereka mempunyai fungsi nya masing, seperti color hex untuk mengetahui kode warna, dan beberapa tool lain nya, yang mempunyai fungsi yang berbeda beda

Yang saya bahas kali ini adalah tool CSS minifer, kegunaan nya? untuk mengkompres css kamu lebih kecil lagi, mengkompres css juga membantu blog kamu lebih SEO dan mempercepat loading blog

Berikut cara memasang nya pada halaman statis blog

1. Buat postingan baru pada halaman statis, kemudian tambahkan kode di bawah ini pada bagian HTML

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>

2. Publikasi postingan nya, dan lihat hasil nya

Silahkan Sesuaikan sendiri, Semoga bermanfaat.

Cara Menghapus Widget yang tidak Bisa di Hapus


Sering kali kebiasaan blogger newbie jaman sekarang, suka gonta ganti template, ada template bagus dikit ganti, besok ganti lagi, ya maklum lah masih newbie, masih banyak labil nya
Nah, pada saat mereka mengatur widget nya, sering kali menjumpai widget yang kadang kadang gak bisa di hapus, para blogger newbie pun kebingungan

Tapi tenang dulu, pasti ada jalan keluar nya kok, begini cara mengatasi nya

1. Login ke blogger, pilih template kemudian pilih edit html

2. Cari widget yang tidak bisa di hapus, contoh nya, disini gue memilih widget popular post

<b:widget id='PopularPosts1' locked='true' title='Popular Posts' type='PopularPosts'>...</b:widget>

Perhatikan kode locked='true' ganti dengan locked='false'  sehingga menjadi seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>

3. Kemudian sinpan template kamu, setelah itu masuk ke tata letak, cari widget popular post, klik edit lalu hapus

Gampang kan?
Ulangi tutorial di atas jika ada widget yang tidak bisa di hapus

Sekian dulu tutorial kali ini, Semoga bermanfaat.

Cara Pasang Widget Amung us Tanpa Javascript


Yeay, siapa sih seorang blogger yang gak kenal dengan widget Amung us ini, fungsi dari widget ini adalah untuk menghitung counter user pada saat mengunjungi situs tersebut, widget amung us ini sudah tersedia di situs nya secara gratis, tapi yang sudah tersedia di situs nya banyak menggunakan javascript, kalian tau sendiri kan kalau pada template banyakan javascript akan memberatkan loading blog

Saya ingin share sekarang cara pasang widget Amung usnya tanpa javascript
sehingga penggunaan nya cukup simple dan pasti nya blog kalian pada saat di load tidak terlalu berat
sebelum memasang widget amung us tanpa javascript ini kalian harus copy dulu kode nya seperti ini


Copy kode yang sudah di tandai seperti gambar di atas,untuk mengambil kode nya silahkan Kesini

Selanjutnya silahkan kalian pilih widget Amung us tanpa javascript di bawah ini

online
<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/widget/ kode-anda" /></a>

online
<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ff0000ffffff/" /></a>

online
<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/swidget/kode-anda" /></a>

Simple kan? tidak perlu menggunakan javascript.

Sekian artikel kali ini, semoga bermanfaat.

Cara Membuat Elemen Web Menjadi Hitam Putih


Yeay, kali ini saya akan membahas tentang membuat elemen tertentu menjadi hitam putih, tutorial ini sangat simple, cuma menggunakan css doank untuk membuat elemen suatu halaman menjadi hitam putih, jadi ketika di hover element tersebut akan berubah menjadi warna awal nya kembali, cukup menggunakan css seperti ini

CSS
Letakkan kode nya di atas kode ]]><b:skin

#idelemen:before,#idelemen:after{background:#f7f7f7;border:0 solid #aaa;border-top:none;bottom:-3px;content:"";height:0;left:0;position:absolute;right:0}
#idelemen:after{bottom:-5px;box-shadow:0 0 0 #aaa;left:4px;right:4px}
#idelemen{filter:url("data:image/svg+xml;utf8,<svg http:="" svg="" www.w3.org="" xmlns="\"><filter grayscale="" id="\"><fecolormatrix 0.3333="" 0="" 1="" matrix="" type="\" values="\"></fecolormatrix></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(1)}
#idelemen:hover{filter:none;-webkit-filter:grayscale(0)}

Demo
See the Pen dPMeOG by Ojik kidiw (@kidiw) on CodePen.

Ganti kode #idelemen dengan id elemen template kamu, yang ingin kamu hitam putih kan

Semoga Bermanfaat.

Pengertian HTML, CSS dan Javascript


Desain web tentunya tidak akan teriepas dengan yang namanya HTML. Selain itu agar sesuai dengan perkembangan teknologi desain web, Anda hams mengetahui juga tentang CSS dan JavaScript.

HTML
Apakah HTML itu?. HTML (HyperText Markup Language) adalah sebuah jenis teks dokumen khusus yang digunakan oleh web browser untuk mempresentasikan teks dan gambar. Dokumen HTML sering disebut sebagai "halaman web". Browser mengambil halaman web dari web server dan karena adanya internet, halaman tersebut bisa berada di manapun di dunia.

Browser adalah program yang dipakai untuk membaca dokumen HTML pada WWW. Contoh browser ini antara lain: Netscape Navigator, Internet Explorer, Opera, Mozilla, Conqueror, NCSA Mosaic, Cello, Lynx, SlipKnot, dan sebagainya.

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah web. Dalam setiap file HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser mencoba untuk membaca file yang ada di dalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan </HTML>.

Banyak orang masih menulis HTML secara manual menggunakan software seperti NotePad. Namun sekarang ini Anda tidak perlu terlalu pusing untuk menuliskan HTML secara manual, Anda dapat menggunakan software-software HTML editor yang banyak tersedia sekarang ini, salah satunya adalah Adobe Dreamweaver.

Berikut ini contoh penulisan tag HTML sederhana:

<html> <body> Hello … nama saya Sinta <p> Umur saya 1,5 tahun</p> </body> </html>

CSS
Bayangkan jika Anda memiliki website dengan 50 halaman dan ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika Anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah.

CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan Anda untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).

Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen.

Jika Anda memiliki banyak file HTML, Anda hanya perlu satu file CSS, sehingga ketika Anda mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dokumen HTML yang telah jadi.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (kode CSS dipasang di dalam tag head HTML), dan Inline Style Sheet (kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Sangat disarankan Anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya.

Berikut contoh penulisan kode CSS:

.judul {
font-size: 13px;
color: #6095d0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.subjudul {
font-size: 11px;
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}isi {
font-size: 12px;
color: #000000;
font-family: verdana;
}

JAVASCRIPT
JavaScript adalah suatu bahasa script yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses script untuk objek yang dibenamkan (embedded) di aplikasi lain.

Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self.

Javascript dapat diapit oleh tag html sederhana seperti:

<script language="JavaScript"> kode javascriptnya diletakkan disini </script>

Script JavaScript yang dimasukkan di dalam HTML ataupun XHTML harus dimasukkan di antara tag <script>…</script>

Nah itulah pengertian dari HTML, CSS, dan Javascript, semoga bermanfaat.

Cara Membuat Help Tip di Blog


Yeay, banyak sekali para blogger menaruh info pada blog nya, info tersebut tentu sangat berguna buat para pengunjung blog, karena mereka bisa tau info apa sih yang ada di blog tersebut, misal nya akan ada event, atau sekedar info "Maaf jarang update lagi sibuk soal nya", ya pengunjung bisa sekedar tau aja sih, kenapa ini blog gak update update, sehingga kalau kita taruh info di blog pengunjung udah tau kenapa blog tersebut jarang update

Membuat info pada blog, tentu banyak style nya, ada yang muncul popup, ada yang modal dialog, model tekan tombol dan masih banyak lagi, nah kali ini saya akan membahas tentang menaruh info juga di blog, tapi ini model simple nya, jadi ketika di hover akan muncul tip gitu, lumayan lah supaya pengunjung penasaran akan ada info apa di blog tersebut XD

See the Pen dPGvvN by Ojik kidiw (@kidiw) on CodePen.

Css
.help-tip {
position: absolute;
top: 18px;
left: 380px;
text-align: center;
background-color: #222;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}

.help-tip:before{
    content:"?";
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: "";
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:"";
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

Html
<div class='help-tip'>
    <p>Text Disini</p>
</div>


Ganti Text Disini dengan kata kata kamu sendiri

Gampang banget kan? semoga bermanfaat ye sobat blogger.

Cara Memasang Social Media dalam Satu Tempat di Blog


Yeay, dunia social media terus berkembang hingga saat ini, banyak bermunculan social media baru di dunia maya, mereka terus bersaing siapa yang paling banyak pengguna nya, nah banyak nih para blogger menaruh widget social media mereka di blog tentu setiap blogger memiliki widget social media berbeda beda, apa berguna taruh widget social media di blog? tidak di wajib kan juga sih menaruh widget social media di blog, kata nya kalau menaruh widget sosial media di blog lebih visitor friendly

Gak juga sih, biar pengunjung ingin tau aja social media apa aja sih yang di pake si admin blog?
tutorial kali ini menaruh widget social media dalam satu tempat,dalam satu tempat maksud nya dalam satu widget itu ada social media, Google+, Facebook fanspage, twitter
jadi kalian gak perlu ngambil satu satu, ke google+ dulu terus balik lagi ke fanspage facebook kalau gitu repot banget kan? kalau yang ini kalian tinggal paste aja kode nya ke dalam widget, disitu udah ada Google+, Fanspage, twitter jadi gak perlu susah susah deh

Yuk pasang

1. Taruh kode di bawah ini di atas kode </body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2. Lalu, letakkan kode di bawah di di dalam widget html/javascript

<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="URLGOOGLE+" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'id'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<a href="URLTWITTER" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @IDTWITTER</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="fb-like-box" data-href="URLFANSPAGE" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
Tulisan yang di bold silahkan di edit sendiri

Sekian semoga bermanfaat.

Membuat Pengembangan Box Alert dengan Fitur Close

Yeay, membuat box alert di blog tentu mempunya fungsi tersendiri, fungsi nya supaya pengunjung tau yang mana ada info dan yang mana ada info kesalahan dalam postingan tersebut, dan sudah banyak pengguna blogger untuk memakai box alert tersebut tapi sayangnya sebagian mereka belum bisa mengembangkan blox alert tersebut lebih keren dan terlihat simple


Saya akan memberikan contoh box alert sederhana yang masih banyak di gunakan para blogger
ini dia contoh nya sebelum di kembang kan

Text disini

Masih terlihat simple kan, dan setelah saya kembangkan dengan tambahan jquery
dan saya masukkan tombol close ke dalam nya, supaya di dalam postingan nanti, lebih enak di lihat dan jika postingan tersebut banyak menaruh box alert ini jika tidak enak di lihat, silahkan di close aja
simple kan? makanya saya taruh tombol close di pojok nya, karena tombol close memiliki fungsi tersendiri

Dan ini dia setalah di kembangkan

ISI TEXT
ISI TEXT
ISI TEXT
ISI TEXT

Gimana, menarik bukan?
langsung aja terap kan di blog

1. Letakkan kode ini di atas kode ]]><b:skin
.alert { padding: 19px 15px; color: #fefefe; position: relative; font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif; }
.alert .msg { padding: 0 20px 0 40px;font-weight: bold;
line-height: normal;
color: #E8F5FF!important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);}
.alert p { margin: 0;}
.alert .toggle-alert {
position: absolute;
top: 7px;
right: 10px;
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgba(34, 34, 34, 0.29);
}
.toggle-alert:before {
content: "\f00d";
font-family: FontAwesome;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 4px 1px;
margin: -4px 10px 0 3px;
border-radius: 3px 0 0 0;
color: #fff;
}
.info-box { background: #508EBC; }
.success-box { background: #4F80B8; }
.error-box { background: #C33F3F; }
.download-box { background: #429B54; }

2. Jquery nya jangan lupa,letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() { $(".alert .toggle-alert").click(function(){ $(this).closest(".alert").slideUp(); return false; }); });
//]]>
</script>

HTML nya letakkan di dalam postingan

<div class="info-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>
<div class="success-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>
<div class="error-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>
<div class="download-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

Dan letakkan font awesome versi terbaru di blog kalian,supaya tombol close nya muncul

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Pilih salah satu html di atas, mau info box alert, succsess box alert, atau error box alert, dan download box alert, terserah

Keren kan, tentu dapat menghebat ukuran postingan hehe, semoga bermanfaat.