Artikel Terbaru

Cara Membuat Script Widget Kode Warna HTML 4 Di Blog




Postingan kali ini saya akan berbagi khususnya para newbie seperti saya yaitu cara membuat script widget kode warna HTML 4 di blog. Mungkin postingan saya sudah basi kalii yah..dan sering ditemukan pada postingan teman-teman semua, ya walau malu-malu saya share buat teman-temen yang belum dapat kebagian scriptnya, yuu cekidoot…

Dibawah ini adalah script kode warna HTML V 4, anda  tinggal meng-copy script ini ke dalam postingan blog dan berada di posisi mode HTML untuk melihat contoh warna klik disini.

-------------------------------------------------------------------------------------------------------------
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

-------------------------------------------------------------------------------------------------------------

Untuk penempatan atau menyimpanya script kode-kode warna HTML V 4 ini,  anda bisa menyimpannya  di widget ataupun di laman

Sekian dulu postingan kali ini semoga bermanfaat dan sampai jumpa di postingan berikutnya.terima kasih..

Cara Membuat Button Like Facebook, Twitter, G+ Dan Share


Posted by Denie Deden_Nz






Hallo..sob apa kabar? sehat-sehat khan? Pada postingan kali ini saya akan share " Cara Membuat Button Like Facebook, Twitter, G +, Dan Share ". Membuat tombol like Facebook, Twitter dan Google Plus (G+) semuanya bisa kita pasang diatas atau di bawah judul postingan.  

Manfaat dari pemasangan button ini bagi blog sangat besar sekali, yaitu membantu penyebaran link artikel kita di media jejaring sosial. Sebenarnya artikel ini cenderungnya dikategorikan dalam SEO Optimisasi OFFpage karena lebih pada menyebarkan link artikel kita. Tetapi karena dalam rangka mengolah blog makanya bisa juga sih di kategorikan dalam kategori Onpage saja. Begitu sob...

Pada postingan ini saya akan share memasang Tombol Like Facebook, Twitter dan G + di Bawah Judul Posting. Sekedar mengingatkan saja pada bagian akhir postingan / bawah tombol serupa yang  yang telah disediakan blogger. 
Sobat semua bisa mengikuti cara-cara dibawah ini;
  • Masuk ke blog sobat
  • Klik Template
  • Masuk ke Edit HTML
  • Cari kode di bawah ini dan untuk mempermudah pencarian kode pakai Ctrl F:
 <data:post.body/>

Note: Sobat semua pasti akan menemukan kode tersebut diatas lebih dari satu menurut pengalaman yang sudah-sudah pilih yang pertama saja / di coba semua.

  • Letakkan Kode berikut ini diatas kode <data:post.body/> 

 <table border='0'><tbody><tr>
<td><a class='twitter-share-button' data-count='horizontal' data-via='MkZHackers' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp; font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td>
</tr></tbody></table>

  • Simpan Template
  • Selesai
  • Kemudian sobat klik salah satu artikel blog sobat, untuk melihat berhasil tidaknya pemasangan kode tadi. 
Sekian dulu postingan kali ini selamat mencoba dan semoga bermanfaat bagi sobat-sobat semua....

Sumber image: www.hongkiat.com

Cara menambah gadget di atas header


Posted by Denie Deden_Nz, Sabtu 18 Mei 13

Bagi para blogger  master postingan ini yaitu mengenai "Cara menambah gadget di atas header" bukan persoalan lagi. Postingan ini yah ane ditujukan untuk blogger newbie kayak ane gituu kekeke...pada dasarnya template bawaan memang sudah default so.. jadinya widget di atas header memang tidak ada. Well.. ane akan coba ng_share postingan dengan harapan dapat bermanfaat bagi agan dan sobat semua siapa tau ada yang ingin menambahkan widget. Caranya gampang sob, nggk usah deg..deg an lah santai aja, udah dulu basa basinya kelamaan mending kita langsung ke tempat  perkaranya hehe..;

Cara menambah gadget di atas header:


  • Masuk ke blog sobat  >> Dashbord  >>  Klik Template  >> Klik  Edit template  / HTML 
  • Untuk mempercepat pencarian pakai CTRL + F lalu cari kode seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

  • Ganti kode diatas dengan kode seperti di bawah ini:

<b:section class='header' id='header1' preferred='yes'>


  • Sebelum di save lebih baik klik Pratinjau dulu biar manteep sob, biar terhindar dari kesalahan pasang. Kalau semuanya beres nggk ada peringatan kesalahan tekan save/simpan template.
Demikian postingan kali ini selamat mencoba semoga bermanfaat bagi sobat-sobat semua dan sampai jumpa....bye

Cara Memasang Widget Popular Post Berwarna Di Blog


screenshot widget warna-warni

Flamboyan68 - Hallo! bagaimana kabarnya, sob? pastinya sehat-sehat saja ya. Malam menjelang subuh ini saya akan men_share postingan buat agan-agan newbie / pemula kayak ane hehe tentang " Cara Memasang Widget Popular Post Berwarna Di Blog ". Blogger pemula seperti halnya saya, suka sekali dengan memasang widget-widget cerah seperti halnya postingan ini.
Widget popular post / artikel populer warna-warni ini tidak di lengkapi dengan efek slide, tampilan warna setiap popular postnya  berbeda-beda (tidak ada warna ganda) sampai 10 artikel dikarenakan terbatasnya widget popular post. Pemasangan widget warna-warni ini sangat cocok alias matching apabila diterapkan pada blog yang bertemplate cerah.
Biar agan-agan tidak penasaran dengan gambarnya, agan-agan bisa melihat pada screenshot diatas. Agan semua pasti tanya-tanya dalam hati hehehe..sebenarnya nomor yang nempel itu apa yah maksudnya? seperti yang saya terangkan diatas tadi bahwa widget ini hanya bisa menampilkan popular post sampai 10 artikel dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang maksudnya adalah menandakan ke-populeran artikel blog agan. Dan satu hal lagi tampilan warna-warna pada widget ini bisa di ubah / dimodif lagi sesuai selera agan. Basa basinya udah dulu ya, sob? kita langsung sedot saja ke cara pemasangannya.
  • Masuk / Login ke  >> Blogger sobat.
  • Pilihlah  >> Tata Letak.
  • Pilihl  >> Add Gadget.
  • Pilih >> Entri Populer.
  • Selanjutnya lakukan Setting pada widget Entri Populer 
          - Hilangkan >> Thumbnail Gambar dan Cuplikan.
          - Silahkan pilih Entri / Artikel yang ingin ditampilkan (diposkan)
  • Klik Save / Simpan 
  • Masih dalam posisi di Tata Letak, Kemudian pilih Add Gadget 
  • Klik pilih HTML / Javascript.
  • Letakan kode di bawah ini kedalam kotak "HTML / Javascript 


        <style type='text/css'>
        /*----- popular post warna warni by farhanshare.blogspot.com-----*/
        #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
        #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
        #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
        #PopularPosts1 ul li:first-child:after,
        #PopularPosts1 ul li:first-child + li:after,
        #PopularPosts1 ul li:first-child + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
        #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
        #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
        #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
        #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
        #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
        #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
        #PopularPosts1 ul li:first-child + li:after{content:"2"}
        #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
        #PopularPosts1 ul li:first-child:after{content:"1"}
        #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
        #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
        </style>

        • Setelah selesai mem_pastekan kode tadi selanjutnya klik ' Save / simpan '. 
        • Masuk ke blog agan dan bukalah salah satu artikel dan lihat hasilnya
        • Selesai

        Bagaimana, gan? pastinya ringan alias mudah, selamat mencoba senantiasa bermanfaat dan sampai jumpa.

        Cara Menampilkan Menu Scroll Pada Arsip Blog


        Flamboyan68 - Pada postingan kali ini saya akan berbagi dengan sobat nubie semua yaitu bagaimana " Cara Menampilkan Menu Scroll Pada Arsip Blog ". Keberadaan dari widget arsip blog adalah menu penting yang harus sobat pasang di blog, karena eksistensi arsip blog ini akan memudahkan pengunjung menemukan semua artikel yang ada di blog kita.


        Walaupun penting tapi tidak semua  para blogger enggan untuk memasangnya dikarenakan  memakan banyak tempat apalagi jika artikelnya sudah banyak tentuk membutuhkan tempat yang luas.


        Di bawah ini ada cara dan langkah untuk menampilkan menu scroll pada arsip blog:
        • Masuk / Login ke  Blog sobat
        • Pilih Menu Design  > > Seting Elemen Widget Arsip Blog pakai model Hierarki
        • Lalu Simpan / Save 
        • Selanjutnya sobat masuk ke menu >> pilih  Edit HTML
        • Kemudian cari kode seperti dibawah ini, untuk mempermudah pencarian gunakan Ctrl + F dengan memasukan salah satu kode <div id='ArchiveList'> ke dalam kotak pencarian.
        <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
                  <b:includable id='main'>
                  <b:if cond='data:title'>
                  <h2><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                  <div id='ArchiveList'>
                  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
                  <b:if cond='data:style == &quot;HIERARCHY&quot;'>
                  <b:include data='data' name='interval'/>
                  </b:if>
                  <b:if cond='data:style == &quot;FLAT&quot;'>
                  <b:include data='data' name='flat'/>
                  </b:if>
                  <b:if cond='data:style == &quot;MENU&quot;'>
                  <b:include data='data' name='menu'/>
                  </b:if>
                  </div>
                  </div>
                  <b:include name='quickedit'/>
        • Setelah ketemu  kode tadi sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>
        <div style='overflow:auto; width:ancho; height:100px;'>
        • Tambahkan kode </div> diatas <b:include name='quickedit'/>
        • Tampilan keseluruhan kode setelah di sisipkan kode tambahan tadi menjadi:
        <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
                  <b:includable id='main'>
                  <b:if cond='data:title'>
                  <h2><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                  <div style='overflow:auto; width:ancho; height:100px;'>
                  <div id='ArchiveList'>
                  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
                  <b:if cond='data:style == &quot;HIERARCHY&quot;'>
                  <b:include data='data' name='interval'/>
                  </b:if>
                  <b:if cond='data:style == &quot;FLAT&quot;'>
                  <b:include data='data' name='flat'/>
                  </b:if>
                  <b:if cond='data:style == &quot;MENU&quot;'>
                  <b:include data='data' name='menu'/>
                  </b:if>
                  </div>
                  </div></div>
                  <b:include name='quickedit'/>
        • Klik Save / Simpan Template. 
        • Selasai.
        Tampilan Arsip Blog setelah di pasang kode model menu scroll, seperti dibawah ini:

        arsip blog menu scroll
        Catatan:
        • Sebelum melakukan Edit HTML Template blog, selalu  membiasakan back up template dengan cara unduh template lengkap terlebih dahulu  untuk menjaga apabila terjadi  kegagalan pasang saat proses edit HTML berlangsung.
        • Kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll. Silahkan atur sesuai selera sobat.
        • Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.
        Semoga bermanfaat dan sampai jumpa..

        Sumber: http://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html

        Blog flamboyan68.blogspot.com
        Apabila anda ingin mendapatkan artikel terbaru dari blog flamboyan68 lewat pesan email gratis. Silahkan tulis alamat email anda di kotak yang tersedia bawah ini


        Supported by Blogaul

        Sobat Blogger