Kumpulan Template Transparan Untuk Blogger

Hello Sobat Blogger , kembali lagi dengan Saya di Tutorial Blogz . Dan pada Kesempatan kali ini , Saya akan Share Tentang Kumpulan Template Transparan Untuk Blogger . Saya mengetahui Template ini sejak Saya Berkunjung Ke Blog Seseorang yang Memiliki Template tersebut ... , Menurut saya Sangat menarik untuk Sobat yang menginginkan Template tersebut . Saya akan berbagi Beberapa Template Transparan , tapi Sebelum itu Mari kita baca Basmalah terlebih dahulu hehehe ;) 

Template Transparan [1]

DOWNLOAD

  Template Transparan [2]

 DOWNLOAD

Template Transparan [3]

 DOWNLOAD

Template Transparan [4]

 DOWNLOAD

Itulah Beberapa Template Transparan , Semoga Bermanfaat ;)

Read More

Widget Marhaban Ya Ramadhan Untuk Blogger

Widget Marhaban Ya Ramadhan Untuk Blogger - Halo sobat Blogger? apa kabar?. Kali ini saya akan berbagi widget Marhaban Ya Ramadhan. Bulan yang ditunggu - tunggu oleh umat islam, akhirnya datang juga. tinggal beberapa hari lagi kita akan menjalankan satu bulan ibadah puasa. Jadi, tidak ada salahnya kita Memasang Widget Marhaban Ya Ramadhan pada blog kita, semoga widget ini bermanfaat dan bisa membawa berkah bagi kita semua..

1. Login ke Blogger kamu

2. Pilih Tata letak >> Tambah Gadget >> HTML/JavaScript

3. Silahkan kamu pilih salah satu widget Marhaban Ya Ramadhan dibawah ini.

     1. Widget Ramadhan (Selamat Menunaikan ibadah Puasa)

     

    

     Kode :

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNDEyOTczMDg4MTQmcHQ9MTM*MTMwMTQ5NzY2MiZwPTIzODk4MSZkPUlzbGFtaWMlMjBXaWRnZXQlM2ElMjByYW1h/ZGFuLTExLW1vbnRocy12MiZnPTEmbz1mZmRjZjExZWUyNDk*NDc4OGI1N2Q*NjVkMDU3NDg1ZiZvZj*w.gif" /><div style="margin:0px auto;text-align:center;width:200px;height:200px;"><embed src="http://widgets.al-habib.info/images/Protected_islamic-widget-ramadan-11-months-v2_wpd.swf" width="200" height="200" flashvars="wish=Selamat%20menunaikan%20ibadah%20Ramadhan&lang=id&gig_lt=1341297308814&gig_pt=1341301497662&gig_g=1" swliveconnect="true" quality="autohigh" loop="false" menu="false" wmode="transparent" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /><br /><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1341297121149"></div>

     2. Widget Pak Haji

     Kode :

<embed height="170" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://fc03.deviantart.com/fs47/f/2009/198/9/f/helloramadhan_by_blogclocks.swf?msg=Marhaban%20Ya%20Ramadhan&c=0xffffff&r=0&k=2&w=1" style="background-color: white;" type="application/x-shockwave-flash" width="140" wmode="transparent"></embed> </div>

     3. Widget Bu Haji

     Kode :

<embed height="170" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://fc03.deviantart.com/fs47/f/2009/198/9/f/helloramadhan_by_blogclocks.swf?msg=Marhaban%20Ya%20Ramadhan&c=0xffffff&r=1&k=1&w=1" type="application/x-shockwave-flash" width="140" wmode="transparent"></embed> </div>

     4. Widget Marhaban Ya Ramadhan +Jam dan tanggal

     Kode :

<p align="center"><embed src="http://www.widgipedia.com/widgets/orido/wiDget-Ramadhan-BeRcahaya-6142-8192_134217728.widget?__install_id=1248336094072&__view=expanded" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="true" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="200" height="200"></embed> </p>

Read More

Komentar Blogger Seperti Facebook dengan CSS

Komentar Blogger Seperti Facebook dengan CSS - Kali ini saya akan membahas bagaimana cara membuat komentar blogger seperti facebook dengan CSS. Banyak tutorial CSS untuk merubah tampilan standart blogger Thread comments yang dipersembahkan oleh rekan-rekan blogger. dikarenakan tampilan komentar standart blogger kurang menarik, atau bisa dikatakan biasa-biasa saja. 

Tutorial CSS kali ini saya akan berbagi tentang Komentar Blogger seperti facebook, dengan tambahan kode CSS. Contoh Komentar Blogger Seperti Facebook, seperti gambar dibawah ini :

Berikut Tutorialnya : 

1. Sign in ke blogger kamu

2. Masuk ke Template, Edit HTML, Ceklis "expand template widget"

3.  Cari kode ]]></b:skin>, bila sudah letakkan kode berikut tepat diatas kode tadi

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  }
.comments .comment .comment-actions a {
  padding-top: 5px;padding-right: 5px;font: 11px/1.4 &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;padding-top: 3px;
}
.comments .comment .comment-actions a:hover {
 
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 5px 0 5px 5px;
}
.comments .comments-content .comment-thread {
  margin: 0 0 -12px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: -4px;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:0px;
}
.comments .comments-content .comment:first-child {
  padding-top:2px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzdXRXsLG4dEC0Ddec9IEGiwMmtWOf8_fvKTPKdmu74EXGse0yQjreiVV8bhfYOvDP9ucA-uyTRRdv_tbA90LPb2Zd3xq2RklB9VRlTNv7bxCWIO2LHiJrIlexffUbwTqqCDvmd_TSXnSk/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif&quot;) repeat scroll 0 0 transparent;display: inline-block;height: 15px;margin: 0 0 -4px 6px;width: 15px;
border: 1px solid #3B5998;}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 5px;
color: #555555;font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;font-size: 11px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  background: none repeat scroll 0 0 #EDEFF4;cursor: pointer;padding: 3px;text-align: right;
}
.comments .continue a {
 font-weight: normal
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  background: none repeat scroll 0 0 #EDEFF4;isplay: inline-block;padding-bottom: 3px;width: 100%;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;margin: 5px;max-height: 36px;overflow: hidden;position: absolute;width: 36px;z-index: 1000;
}
.comments .avatar-image-container img {
  background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80JyvCeyjpGoBuDKdqX71pkBzVBdxNicH8KHLQEyTsDEdKj9b3RU4TTX-8PA2NLLshw_lo8P1lRGDLAIV-oHUKHWgEiifk_fcx2pzUcr_dNLLz8o5VpASj6ve6omoVkguEyWHNncIxLCu/s1600/avatar.png&quot;);height: 35px;width: 35px;}
.comments {
  position: relative;
}
.comment-block {
    position: relative;
background: none repeat scroll 0 0 #EDEFF4;
    padding: 5px;
padding-left:50px;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

4. Simpan template kamu.

Mau liat demonya?? KLIK DISINI

Read More