Koleksi Wallpaper Wanita Muslimah Bercadar

Koleksi Gambar Dan Wallpaper Wanita Muslimah Bercadar, Kumpulan Gambar Indah Yang Menampilkan Wajah Wanita Cantik Elegan Dan Menawan Wanita-wanita Muslim Dengan Menggunakan Cadar Atau Hijab Yang Bersumber Dari SantaBanta.Com

Wanita Muslimah Bercadar - Arab Woman In Hijab HD Wallpaper - SantaBanta.Com

Sumber: Arab Woman in Hijab

100% SEO Friendly Blogger Template Terbaik

Free Download Clean, Stylist, User Friendly Seo Friendly Blogger Template. This template was designed for better search engine crawler result, completed with optimized dinamic heading tags, metadata opengraph and social network sharing button. It is 100% Free With Or Without Credit Links.

TEMPLATE SPESIFICATION

Template Name : Fastest Seo Friendly Blogger Template V.06
Author Name : Muhammad Habib Effendi
Template Url : http://hab1b.blogspot.com

TEMPLATE FEATURES

• Responsive With CSS Media Query
• Seo Optimized With Metadata Opengraph
• Google Plus, Twitter And Facebook Social Network Sharing Button
• 100% CSS Styling Without Images
• More Than 5 CSS Web Save Fonts
• Two Columns
• Three Columns Footer
• Dropdown Menu
• Default Blogspot Thumbnail And Summary
• Related Posts With Tooltips
• Author Bio
• Stylist And Compact Threaded Comment

SCREENSHOT

DEMO | DOWNLOAD

Bloglist Widget Blogspot

Bloglist Widget Blogspot adalah widget blogroll dapat digunakan untuk link exchange antar sesama blogger. Bloglist Widget Blogspot ini dapat dibuat menjadi lebih efisien dan powerfull bagi link exchange dengan sedikit modifikasi.

Image Source: crafterminds.com

Cara Membuat Halaman Bloglist Statis dapat menjadi alternatif untuk memaksimalkan fungsi blogroll dan agar Blog List menjadi lebih menarik, dapat dilakukan beberapa perubahan pada scriptnya.

Caranya, replace bloglist widget script dengan kode berikut:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h4 class='title'><data:title/></h4>
    </b:if>

    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == &quot;true&quot;'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
              <div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <img border='0' expr:alt='data:item.itemTitle' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:title='data:item.itemTitle' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                    <b:else/>
                        <div class='item-thumbnail'>
                            <a expr:href='data:item.itemUrl' target='_blank'>
                                <img border='0' expr:alt='data:item.itemTitle' expr:height='data:thumbnailSize' expr:title='data:item.itemTitle' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfC8VNfCBAlKK91hkeUPVR2X455ni9gbhGdWzZzzT3jovlGDrsyMDmWF-LdCNRFDBKkD5_Xvmrz0lMMTBmXLibqgLnvy9h2Q91-QjNJ5i5zq7x3-hjElZ2JucmdFHmgzzjPPcdPX6cPew4/'/>
                            </a>
                        </div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' expr:title='data:item.itemTitle' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>

        <b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>

Dan beri style pada css, letakkan kode css ini diatas ]]></b:skin>

.blog-list-container .blog-content{float:left;margin:0 0 5px;text-indent:0;width:100%}
.blog-list-container .item-content{font-size:90%;height:95px;line-height:1.3em;overflow:hidden}
.blog-list-container .item-thumbnail{float:left;margin:2px 5px 5px}

Star Rating Widget Blogger

Star Rating Widget Blogger secara default dapat diterapkan menggunakan start rating default for blogspot melalui http://draft.blogger.com. Untuk memasang star rating widget ini dapat pula memanfaatkan widget yang disediakan oleh http://www.graddit.com dengan pilihan tampilan yang lebih bervariasi dan menarik.

Source: http://www.freetattoopicture.com

Default Star Rating Widget Blogger

Cara memasang rating bintang blogspot, sedikit lebih rumit :)

Langkah 1
Edit User Setting

Langkah 2
Activate Blogger Draft

Langkah 3
Edit Layout - Edit Posting Blog - Activate Default Star Rating For Blogger

Langkah 4
Jika Star Rating tidak terlihat, maka Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <span class='star-ratings'>
        <b:if cond='data:top.showStars'>
            <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>
      </b:if>

Animated Star Rating Widget Blogger

Cara memasang rating bintang untuk blogspot dengan menggunakan widget dari 3th party, tidak sulit :)

Langkah 1
Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
<div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if></b:if> 

Untuk Animated Star Rating Widget For Blogger ini, terdapat berbagai pilihan style, silahkan kunjungi:

Source: http://www.graddit.com/ratings-widget

Tutorial: http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html

Link Exchange Dengan Thumbnail - Thumbshot Blogger

Link Exchange Dengan Thumbnail - Thumbshot Website Untuk Blogger.

Berbagaimacam cara untuk menampilkan link exchange, namun jarang sekali yang disertakan dengan thumbshot/ thumbnail/ gambar mini dari link yang tertera :)

Dengan adanya thumbshot pada halaman blogroll blogger, tentunya akan terlihat sedikit berbeda pada tampilan dan terlihat menarik.  

Thums Up Icon By http://www.psdgraphics.com

Link Website Dan Blog Dengan Gambar Mini Screenshot Website

Cara membuat thumbshot atau thumbnail website pada blogspot, sangat mudah sekali;

Letakkan diatas </head> kode:

<script type="text/javascript" src="http://www.picoshot.com/pagepix.js"></script>

Kemudian, pada setiap bagian pada link-exchange, bubuhkan kode:

<script type="text/javascript">stw_pagepix('[url]', 'en');</script>

Dan hasilnya akan menjadi seperti ini:


Thumbshot ini disediakan gratis dan dengan fitur unlimite website thumbnails oleh:



Free Website Thumbnails provided by Picoshot

Cara Membuat Halaman Bloglist Statis

Bloglist Widget pada Blogspot adalah sebuah widget yang sangat berguna untuk saling bertukar link antara sesama blogger. Dengan beragam pilihan tampilan yang menarik dan link dofollow tentunya widget ini sangat banyk digunakan oleh blogger untuk keperluan bertukar backlink.

Namun adakalanya penggunaan widget ini dapat memberikan efek negatif pada blog, seperti:

1. memberatkan loading blog apabila setiap link menggunakan "enable image", 
2. merusak tampilan blog apabila banyak link berjajar secara vertikal dari atas ke bawah (cara seperti ini dapat diantisipasi dengan menggunakan css; yaitu dengan meletakkan kode .blog-list-container{height:250px;overflow:auto} diatas ]]></b:skin>),
3. dan merusak posisi blog dalam serp apabila jumlah link dalam bloglist terlalu banyak; sebaiknya jumlah link dalam sebuah halaman blog tidak lebih dari 100 links*.

Dengan meletakkan Widget Bloglist pada sebuah Halaman Statis, maka banyak hal yang didapatkan dan meminimalisir efek negatif tersebut :)

source: http://madnesslab.deviantart.com/art/Be-Creative-Wallpaper-89392128

Cara Membuat Widget Bloglist Pada Halaman Static Blogspot

Langkah Pertama:
Buatlah sebuah halaman kosong dan jangan tuliskan apapun didalamnya, serta non-aktifkan kotak komentar.

Langkah Kedua:
Setting Layout dan letakkan Bloglist Widget dibawah Posting Blog

 


Langkah Ketiga:
Edit HTML Template, Expand Widget Templates dan kemudian - CTRL+F BlogList1


Langkah Keempat:
Arahkan BlogList1 hanya pada halaman kosong yang telah dibuat sebelumnya.

Letakkan  Blogspot Conditional Tags Url

<b:if cond='data:blog.url == &quot;http://fau2i.blogspot.com/p/blog-list.html&quot;'>

dibawah

<b:includable id='main'>

Dan tutup kondisi itu dengan

</b:if>

diatas

</b:includable>

<b:widget id='BlogList1' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://fau2i.blogspot.com/p/blog-list.html&quot;'>
<style>
.blog-list-container img{float:left;margin:10px}
.blog-list-container li{border:1px solid #dedede;box-shadow:0 1px 2px rgba(0,0,0,.3);margin:10px 0}
.blog-list-container .item-content{line-height:2em}
#main-wrapper{width:100%}
#sidebar-wrapper{display:none}
</style>
.......................
.......................
.......................
.......................
.......................
.......................
.......................
.......................
</b:if>
</b:includable>
</b:widget> 

Langkah Kelima:

Jika berhasil, maka akan menjadi seperti Halaman Blog List ini :D

Langkah Keenam:

Selamat Mencoba :D

Cara Membuat Template Blogspot

Untuk membuat template personal blogspot tidak begitu sulit, cukup dengan mengetahui bagian penting dari template dan susunan template blogspot sesuai dengan yang diinginkan.

Dalam membuat Template Blogspot yang sederhana, Saya bagi komponen-komponennya menjadi beberapa bagian, karena Saya belum bisa menjelaskannya secara detail :D

Hasilnya ya bisa saja berbeda, tergantung pengetahuan masing-masing orang, kalau Saya sih baru bisa menghasilkan CANVASnya saja :D

DEMO SCRIPT
DOWNLOAD SUMBER

Bagian pertama template blogspot merupakan tipe dokumen dan html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Bagian kedua template itu adalah head dan title

<!--:[ START HEADING ]:-->
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>

Bagian ketiga template adalah CSS Style

<!--:[ START STYLE ]:-->
<b:skin><![CDATA[
/* -----------------------------------------------------
Smart Template For Blogspot By http://fau2i.blogspot.com
Name:     Smart Template
Author:   Muhammad Fauzi
URL:      http://fau2i.blogspot.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}

html{-webkit-text-size-adjust:none}

body{background:#f8f8f8}

#outer-wrapper{width:980px;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3);color:#222;font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;font-size:1em;line-height:1.575em;text-align:left}

#header-wrapper{margin:0 auto}
#header{width:100%;height:120px;clear:both}
#header-inner{margin:20px;padding:20px}

#header h1,#header h3{color:#222;font-family:Lucida sans unicode,Georgia, Times New Roman;font-weight:400;margin:0;padding:0;font-size:35px}
#header h2{color:#888;font-family:Georgia, Times New Roman;font-weight:400;text-decoration:none;margin:0;padding:0;font-size:12px}

#header-navigation{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#header-navigation ul{padding:0}
#header-navigation li{width:20px;padding:10px;list-style:none;display:inline;text-decoration:none}

#main-wrapper{margin:10px}
#content-wrapper{float:left;width:600px;border-right:1px solid #eee;margin: 0 10px}
.post-body img{padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
.post-body h2{border-bottom:1px solid #ccc;font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#549D50;font-size:1.25em;margin:10px 0 4px;}
.post-body h3{font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#303035;font-size:150%;margin-top:10px;margin-bottom:2px;}
.post-body img{overflow:hidden;border:1px solid #dcd9d9;max-width:100%;padding:5px;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3)}

img{max-width:100%;height:auto}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}

a{color:#00adeb;text-decoration:none}
a:hover{color:#000609}

#sidebar-wrapper{float:right;width:320px;margin:0 10px 0 0}
.sidebar ul{padding:0}
.sidebar li{list-style:none}
.sidebar h2,.sidebar h4{font-size:16px;}
.item-thumbnail{width:72px;height:72px;padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}

#footer-wrapper{width:100%;margin:0 auto;border-top:3px double #ccc;padding-top:10px;clear:both}
#footer1{width:33%;float:left;margin:0}
#footer2{width:33%;float:left;margin:0 0 0 5px}
#footer3{width:33%;float:right;margin:0}

.credit{margin-top:20px;border-top:2px solid #ddd}
.credit,.credit a{color:#999}
.credit p{float:left;margin-left:20px}
.credit span{display:block;float:right;margin-right:20px;margin-top:15px;font-size:75%}
.Top{border-bottom:15px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;position:fixed;bottom:0;right:10%;width:0;height:0;z-index:1}

::-webkit-scrollbar{width:15px;background:rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb{background:#790;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}

@media screen and (max-width: 980px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:95.725%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}

@media screen and (max-width: 750px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:90%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
]]></b:skin>
<!--:[ END STYLE ]:-->

</head>
<!--:[ END HEADING ]:-->

Bagian keempat theme blogger yaitu  body, outer dan header

<!--:[ START BODY ]:-->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!--:[ Start Outer ]:-->
<div id='outer-wrapper'>

<!--:[ Start Header ]:-->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Smart Theme (Header)' type='Header'/>
</b:section>
</div>
<!--:[ End Header ]:-->

Bagian kelima dari komponen template ialah main, navigasi, content, sidebar, footer

<!--:[ Start Main Wrapper ]:-->
<div id='main-wrapper'>

<!--:[ Start Header Navigation ]:-->
<div id='header-navigation'>
<b:section class='topmenu' id='topmenu' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->

<!--:[ Start Content Wrapper ]:-->
<div id='content-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
 </b:section>
</div>
<!--:[ End Content Wrapper ]:-->

<!--:[ Start Sidebar Wrapper ]:-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
<div class='sidebar21' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'/>
</div>
<div class='sidebar22' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'/>
</div>
<div style='clear:both;'/>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>
<!--:[ End Sidebar Wrapper ]:-->

<!--:[ Start Footer Wrapper ]:-->
<div id='footer-wrapper'>
<div id='footer-bottom' style='text-align: center; padding-top:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div style='clear:both;'/>
<!--:[ End Footer Wrapper ]:-->

<!--:[ Start Credit Links ]:-->
<div class='credit'>
<p>Copyright &amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='http://fau2i.blogspot.com' title='Fauzi Blog'>Fauzi Blog</a></span>
<div class='clear'/>
</div>
<!--:[ End Credit Links ]:-->

</div>
<!--:[ End Main Wrapper ]:-->

Bagian terakhir dari template tersebut adalah penutup dari div, body dan html

</div>
<!--:[ End Outer ]:-->

<!--:[ START EMBEDDED WIDGET ]:-->
<b:include data='blog' name='google-analytics'/>
<!--:[ END EMBEDDED WIDGET ]:-->
</body>
<!--:[ END BODY ]:-->

</html>